Archive for category JavaScript

IE DOM Elements don’t support hasOwnProperty()

Apr 7

Posted by admin in Browser Bugs and Fixes, JavaScript, Technology, Web Development, XHTML | No Comments

Couldn’t find anything really definitive on this, so here it is. Object.hasOwnProperty() is defined by EMACS and is supposed to be present on any (and all) objects in JavaScript.

So this would (normally) make a good way to make sure that a DOM element has a certain method before calling it (particularly to be safe if the DOM object for some reason doesn’t exist as expected)

For example:

elem = document.getElementById("someDOMElement");
if (elem.hasOwnProperty("innerHTML")){
  // ... do something cool with the innerHTML of this element
}

Unfortunately, this technique fails out of hand in IE because, although native Objects do support this method, for some reason DOM objects do NOT. So it will always fail, and more likely give you the dreaded “object does not support this property or method”, which is precisely the reason you wanted to use this method in the first place!

IE can go to hell. What’s wrong with these people?

Dell – Overpackaging Continues

Oct 21

Posted by in JavaScript, Uncategorized | No Comments

I’ve got an extended warranty on my Dell XPS M1730 and I gotta say, Dell is great about sending replacement parts in a prompt and professional manner.

But talk about overpackaging! The items shipped to me were a laptop power supply and cable. The cable (just a regular power plug) was packaged inside its own little box with foam on either side. The power pack was in a larger box, padded as well. All of that was then put in a really large, mostly empty box. I understand from a logistics standpoint why such a blunder might occur, but come on guys. What’s all this talk about more corporate responsibility?

dellpackaging1

JavaScript: Unobtrusive Script Execution onLoad or on DOMReady that Plays Nice with Legacy BODY onLoad

Jun 29

Posted by admin in HTML, JavaScript, Tips and Tricks, Web Development, XHTML | No Comments

It’s been documented quite a bit on the web already: proper use of unobtrusive JavaScript in your web pages to achieve not only behavioural separation (keeping content, style and functionality separated into HTML, CSS and JavaScript documents respectively) but also degrade gracefully, to support browsers or platforms where JavaScript is not available. These two concepts form the heart of the development ethic in New Web development:

Keep your HTML markup completely free of all inline styles and inline JavaScript (in essence, try to use only those attributes inside your HTML tags that are absolutely necessary
Do not make JavaScript a requirement to be able to access content / functionality on your sites (anticipate the user who is not using JavaScript during the browsing experience)

Using DOM traversal methods such as getElementsByTagName() and regular expressions on the class attribute, you can fairly easily parse through your markup and unobtrusively add in your behavioural JavaScript, eliminating the need to add onClick=”" or onMouseOver=”" attributes inline. However, this is all still done with JavaScript so at some point, the JavaScript code to do this unobtrusive replacement must be executed. Since it can only be executed once all the relevant DOM elements have been loaded, this has been traditionally done using the (inline) onLoad=”" attribute within the <BODY> tag.

For the purists, this represents an issue since we’re not achieving total separation. One migh argue that even putting the <script> tag in the head of the document is too tight of a coupling, but I don’t know of anyone who has cracked that chestnut yet, nor does it seem likely that we’re even going to go there.

Regardless of whether you’re that die-hard, there’s a certain elegance in letting your scripts execute themselves without any further dependencies in the HTML – you include the external .js file in your HTML’s header tag and it takes care of itself from then on. Set it and forget it.

Read the rest of this entry »

Creating a pop-up window that only displays once per user

Sep 18

Posted by admin in JavaScript, Tips and Tricks, Web Development, XHTML | No Comments

This was a question I answered recently on experts-exchange, and, considering the verbosity of it all, I thought I’d capture it for anyone that might find it useful.

The poster wanted to create a popup window using HTML and JavaScript that would open when the page first loaded, but then, if the user navigates away from that page, and then came back, would not bother them by popping up again.

Here’s the solution:

The command for a popup window is:
window.open();

To make the window open when the user first comes to your page, you put the popup in the HTML <body> tag like this:

There are some additional parameters you can pass to window.open() to do things like set the name, the size etc.

If you want to make sure the popup only happens once per session for a user (so it doesn’t pop up every time) you need to set a session cookie.

The session cookie is stored on the person’s computer and is erased once they close their browser window. This is useful for making sure that the NEXT time they visit the site, they will see the popup again.

If you don’t want the user to ever see the popup again after the first time, use a regular cookie that doesn’t expire, or expires in a very long time.

These are some excellent tutorials on setting and reading cookies. You’ll have to brush up on your JavaScript skills a little.

http://www.quirksmode.org/js/cookies.html
http://www.w3schools.com/js/js_cookies.asp

For a general tutorial on JavaScript, check these guys out:
http://www.w3schools.com/js/default.asp

Here are all the parameters you can pass to window.open to do all sorts of neat things with the popup window. This page is a little technical, so maybe wait until you’ve got a basic window working before trying to tweak the popup window with help from this link:
http://www.w3schools.com/htmldom/met_win_open.asp

Cookies will probably be the hardest part for you to implement. So I’m just going to copy and paste some code here, straight out of the w3schools tutorial, with a bit of explanation and some specific code for you:

first, in the <head> of your HTML page, start with your <script> tag:

</script>

Okay, now, copy and paste the following functions into the area we’ve left for the Script tags.

function mySetCookie(c_name,value,expiredays)
{var exdate=new Date()exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ “=” +escape(value)+
((expiredays==null) ? “” : “;expires=”+exdate.toGMTString())
}

function myGetCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + “=”)
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(“;”,c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return “”
}

// —————————————-

Okay, those are the functions we’ll use to set and retrieve the cookie to see if the user has already seen the popup window.

Now here’s the custom code that you’ll put after the code you just copied and pasted (still inside the SCRIPT tags). We want to check if the user has already got a cookie. If so, it means the user has already been to this page and (presumably) seen the popup already, so we don’t display it again. Otherwise, we display it.

function showPopupOnce() {
var hasSeenPopup = myGetCookie(“has_seen_popup”);
if (hasSeenPopup == null || hasSeenPopup == “”){
// the user has never seen the popup, so show him!
window.open(“http://mywebsite.com/popup.html“, “myPopupWindow”);
}

// either way, set the cookie so the user will never see the window again
mySetCookie(“has_seen_popup”, “true”, 365); // 365 days = 1 year
}

// ——————————

Okay, great, now the only thing to do is make sure that the showPopupOnce() function runs whenever the page loads. Go into the <body> tag and change it to this:
<body onLoad=”showPopupOnce();”>

That should do the trick.

Tom

blog@tomauger.com

Development news, browser quirks, design factoids. Good stuff.