Web Design by Sheriar Designs: Impeccable Code | Beautiful Design

So you guys might be noticing that I’m trying my feeble hand at Javascripting a bit more lately. It’s been a steep learning curve for me but I’ve been so excited at what I’ve been able to do with it (see Multiple Pages In One, Javascript-A-Palooza, and a little portfolio site I threw together for a friend of mine for examples of what I’ve been up to).

The Problem

After putting up the portfolio site it was brought to my attention that every time anyone clicked a thumbnail for the third time (any thumbnail, any order) IE for windows would crash. (Of course all other browsers were good to go.) Grrr! I quickly went over to the other little site I have in the works which uses this Javascripting to compare, since I thought this one was ok, and was quite distressed to discover the same problem – every third link clicked on the Services or FAQ page would crash IE. Double-grrr!

A Cry For Help

After poking around aimlessly myself for a while I sent out a cry for help to one of my readers, Brian, who had helped me out before by sharing some suave Javascript skills. Much more quickly than I could have hoped for, he solved the problem and made my scripts more streamlined in the process.

The Problem – Explained

Brian fabulously spotted the culprit right away!

His email to me:

Ha-ha-ha! Now I see what that script was doing. I suspect I know why it was crashing IE! In fact I’m surprised it wasn’t crashing all browsers as well.
:)

The createStyleRule() function writes a

tag in the head of the page for every element you pass to it. I just took a look at the “Generated Code” (by way of the newest version of the “Web Developer’s Toolbar” Extention for Firefox), and the ten calls to the createStyleRule() function you have in the head of the page dynamically inserts the following code just before the tag (note: line breaks and indentation added for clarity).

<style media="screen" type="text/css">#i1 {display:block;}</style>
<style media="screen" type="text/css">#i2 {display:none;}</style>
<style media="screen" type="text/css">#i3 {display:none;}</style>
<style media="screen" type="text/css">#i4 {display:none;}</style>
<style media="screen" type="text/css">#i5 {display:none;}</style>
<style media="screen" type="text/css">#i6 {display:none;}</style>
<style media="screen" type="text/css">#i7 {display:none;}</style>
<style media="screen" type="text/css">#i8 {display:none;}</style>
<style media="screen" type="text/css">#i9 {display:none;}</style>

This function was only meant to dynamically insert style info into the head of a page BEFORE the page loads. Every time someone clicks on a thumbnail, a new set of ten style blocks are added to the top of the page!

Doing the math, by the time someone has clicked just their third thumbnail
createStyleRule() has been called forty times!

It gets ran 10 times before page load!
Plus it gets ran 10 times each time a thumbnail is clicked!!! Yikes!

Inserting those blocks of code so many times apparently overwhelms poor Internet Explorer.

The Solution

Brian’s continued email:

So, the following solution should be to replace the conents of the showHide.js file with the following code.

ffunction changeDisplayStyle(id, value) {
document.getElementById(id).style.display = value;
}

function pic1() {
changeDisplayStyle("i1", "block");
changeDisplayStyle("i2", "none");
changeDisplayStyle("i3", "none");
changeDisplayStyle("i4", "none");
changeDisplayStyle("i5", "none");
changeDisplayStyle("i6", "none");
changeDisplayStyle("i7", "none");
changeDisplayStyle("i8", "none");
changeDisplayStyle("i9", "none");
return false;
}

function pic2() {
changeDisplayStyle("i1", "none");
changeDisplayStyle("i2", "block");
changeDisplayStyle("i3", "none");
changeDisplayStyle("i4", "none");
changeDisplayStyle("i5", "none");
changeDisplayStyle("i6", "none");
changeDisplayStyle("i7", "none");
changeDisplayStyle("i8", "none");
changeDisplayStyle("i9", "none");
return false;
}

etc...

That’s A Wrap

And it worked! I was so happy!! =) With the help of Brian, and of course the original dynamicCSS script from Bobby van der Sluis, I am now able to really extend the functionality of my sites and keep them accessible. Whoo hoo!!

This entry was posted on Tuesday, February 21st, 2006 at 1:00 pm and is filed under Javascript, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.