jQuery + IE7 = Bad

[synic]

I have a page that utilizes jQuery and it’s not working properly in IE7 for some reason. Well, half of it isn’t working — the first div and the last div do not show up in IE… I think it has to do with the animated scrolling script I’m using (found here: http://www.learningjquery.com/2007/10/improved-animated-scrolling-script-for-same-page-links) but I’m really not sure.

Anyway, here’s all of the code:
The JavaScript file (handlers.js)

Code:

$(function () {
/* —————– STOP WATCH INSTANCES —————– */
/* ——————————————————– */
var s1 = new Stopwatch(function(runtime) {
// format time as m:ss.d
var minutes = Math.floor(runtime / 60000);
var seconds = Math.floor(runtime % 60000 / 1000);
var decimals = Math.floor(runtime % 1000 / 100);
var displayText = minutes + “:” + (seconds < 10 ? "0" : "") + seconds + "." + decimals; $('#timesample1').attr('value', displayText); }); var s2 = new Stopwatch(function(runtime) { // format time as m:ss.d var minutes = Math.floor(runtime / 60000); var seconds = Math.floor(runtime % 60000 / 1000); var decimals = Math.floor(runtime % 1000 / 100); var displayText = minutes + ":" + (seconds < 10 ? "0" : "") + seconds + "." + decimals; $('#timesample2').attr('value', displayText); }); var s3 = new Stopwatch(function(runtime) { // format time as m:ss.d var minutes = Math.floor(runtime / 60000); var seconds = Math.floor(runtime % 60000 / 1000); var decimals = Math.floor(runtime % 1000 / 100); var displayText = minutes + ":" + (seconds < 10 ? "0" : "") + seconds + "." + decimals; $('#timesample3').attr('value', displayText); }); var s4 = new Stopwatch(function(runtime) { // format time as m:ss.d var minutes = Math.floor(runtime / 60000); var seconds = Math.floor(runtime % 60000 / 1000); var decimals = Math.floor(runtime % 1000 / 100); var displayText = minutes + ":" + (seconds < 10 ? "0" : "") + seconds + "." + decimals; //$('#time4').html(displayText).hide(); $('#timesample4').attr('value', displayText); }); /* ---------------- END STOP WATCH INSTANCES ---------------- */ /* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */ /* ------------------- STOPWATCH 1 BUTTONS ------------------ */ $('#start1').bind("click", function(){ s1.startStop(); $(this).attr('disabled', 'true'); $('#reset1').removeAttr('disabled'); }); $('#reset1').bind("click", function(){ s1.startStop(); $('#start1').remove(); $('#reset1').remove(); }); /* ----------------- END STOPWATCH 1 BUTTONS ---------------- */ /* ---------------------------------------------------------- */ /* ------------------- STOPWATCH 2 BUTTONS ------------------ */ $('#start2').bind("click", function(){ s2.startStop(); $(this).attr('disabled', 'true'); $('#reset2').removeAttr('disabled'); }); $('#reset2').bind("click", function(){ s2.startStop(); $('#start2').remove(); $('#reset2').remove(); }); /* ----------------- END STOPWATCH 2 BUTTONS ---------------- */ /* ---------------------------------------------------------- */ /* ------------------- STOPWATCH 3 BUTTONS ------------------ */ $('#start3').bind("click", function(){ s3.startStop(); $(this).attr('disabled', 'true'); $('#reset3').removeAttr('disabled'); }); $('#reset3').bind("click", function(){ s3.startStop(); $('#start3').remove(); $('#reset3').remove(); }); /* ----------------- END STOPWATCH 3 BUTTONS ---------------- */ /* ---------------------------------------------------------- */ /* ------------------- STOPWATCH 4 BUTTONS ------------------ */ $('#start4').bind("click", function(){ s4.startStop(); $(this).attr('disabled', 'true'); $('#reset4').removeAttr('disabled'); }); $('#reset4').bind("click", function(){ s4.startStop(); $('#start4').remove(); $('#reset4').remove(); }); /* ----------------- END STOPWATCH 4 BUTTONS ---------------- */ /* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */ /* ---------------- CAPTURE SCREEN RESOLUTION --------------- */ $('#screenres').attr('value', screen.width + 'x' + screen.height); /* -------------- END CAPTURE SCREEN RESOLUTION ------------- */ /* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */ /* ----------------------- SCROLL TO DIV -------------------- */ function filterPath(string) { return string .replace(/^//,'') .replace(/(index|default).[a-zA-Z]{3,4}$/,'') .replace(//$/,''); } $('a[href^=#]').each(function() { if ( filterPath(location.pathname) == filterPath(this.pathname) && location.hostname == this.hostname && this.hash.replace(/#/,'') ) { var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']'); var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false; if ($target) { var targetOffset = $target.offset().top; $(this).click(function() { $('html, body').animate({scrollTop: targetOffset}, 900); return false; }); } } }); /* -------------------- END SCROLL TO DIV ------------------- */ /* ---------------------------------------------------------- */ });

The CSS file (style.css)

Code:

/* —————————————— */
/* RESETS, BASIC PAGE SETUP, BASIC TYPOGRAPHY */
/* —————————————— */
* { margin: 0; padding: 0; }
html { overflow-y: scroll; }
body { font: 62.5% Helvetica, Arial, sans-serif; }
ul { list-style: none inside; }
p { font: 1.3em/1.3em; margin-bottom: 1.3em; }
a { outline: none; }
a img { border: none; }
/* END RESET */

/* —————————————— */
/* PAGE STRUCTURE */
/* —————————————— */
#page-wrap {
width: 500px;
font-size: 13px;
margin: 0 auto;
}

#logo {
background: url(images/logo2.jpg) no-repeat;
margin: 0 auto;
text-indent: -9999px;
width: 500px;
height: 250px;
}

#welcome {
margin: 10px 0 0 0;
font-size: 13px;
}

#sample1 {
position: relative;
font-family: Georgia, serif;
font-size: 12px;
}

#sample2 {
position: relative;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
}

#sample3 {
position: relative;
font-family: Courier, monospace;
font-size: 13px;
}

#sample4 {
position: relative;
font-family: ‘Comic Sans MS’, cursive;
font-size: 14px;
}

#footer {
position: relative;
width: 500px;
border-bottom: #000 3px solid;
}

.continue {
text-align: center;
}

.continue a {
display: block;
padding: 2px 2px 2px 2px;
text-decoration: none;
background: #b3b0a1;
color: #000;
}

.continue a:hover {
background: #000;
color: #fff;
}

.space {
height: 300px;
}

.serif {
font-family: Georgia, serif;
font-size: 12px;
}

.sansserif {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}

.monospace {
font-family: Courier, monospace;
font-size: 12px;
}

.cursive {
font-family: ‘Comic Sans MS’, cursive;
font-size: 12px;
}

.size {
font-size: 20px;
}

.color {
color: #ff0000;
}

.stopwatch {
position: relative;
width: 500px;
margin-bottom: 20px;
}

And the HTML file (experiment.html)

Code:

Font Legibility and Readability Experiment

Click Here to Begin…

I am almost ashamed, dear Peter Giles, to be sending you this little book about the state of Utopia, now that nearly a year has gone by. I’m sure you thought it would take me six weeks at the outside. After all, you knew there were no painstaking researches involved, and I did not even have to work out how to arrange my materials. All I had to do was repeat what you and I both heard Raphael Hythloday report. There was no point in polishing the prose, for it would have been unrealistic if I had made him speak.

Start
Stop

Next Sample Paragraph…

I confess, dear Peter, that so much of the work was already done that there was scarcely anything left for me to do. Of course if I had been obliged to think for myself, or to decide how to organize the material, I might have had to invest a good deal of time and effort, even assuming I had the necessary intelligence and learning. And if I had been obliged to produce something that was not merely accurate but eloquent, then I know I couldn’t have done it, no matter how hard and long I tried.

Start
Stop

Next Sample Paragraph…

Yet it was almost impossible for me to complete even this straightforward task because my other occupations left me without a moment to myself. The law takes up almost all my time. Sometimes I’m acting on behalf of a client, sometimes settling a dispute, either because I’ve been appointed to arbitrate or because the case has come before me in court. I have to call on some people out of politeness and visit others on business. I’m out almost all day long dealing with other people’s concerns, and in the time that’s left I get on with my own.

Start
Stop

Last Sample Paragraph…

Even when I return home, I must chat with my wife, amuse my children, and talk to my employees. All these I think of as chores that have to be done. At least they have to be done unless you’re prepared to discover that you’re a stranger in your own home. In any case, we are all under an obligation to be as pleasant as possible to those with whom we share our lives, no matter whether we are linked to them by blood, by choice, or by chance, provided of course we don’t spoil them with kindness.

Start
Stop

Click Here to Continue…

Basic Information

Reading Sample #1
Reading Sample #2
Reading Sample #3
Reading Sample #4
Screen Resolution
Type of Monitor (CRT/LCD)

Favorite Font/Font Family?

Georgia (Serif)

Verdana (Sans-serif)

Courier (Monospace)

Comic Sans MS (Cursive)

Submit Your Results!

Click Submit to complete the survey!

[synic]

Edit: Well, I guess it’s not that chunk of code that’s causing the problems. I commented that out and I still don’t see the #sample1 and #sample4 div’s in IE7. Wtf :(

Edit #2: I don’t think it has to do with the JavaScript files at all. And it seems like the divs are there, just not being displayed. Ugh.

[Rob MacKay]

"synic" wrote:

Edit: Well, I guess it’s not that chunk of code that’s causing the problems. I commented that out and I still don’t see the #sample1 and #sample4 div’s in IE7. Wtf :(

Edit #2: I don’t think it has to do with the JavaScript files at all. And it seems like the divs are there, just not being displayed. Ugh.

hehe thats what I was just going to ask :D

Right I have to take the kids to school but on my return I shall have a look at helping you beat back the evils of IE… :)

Edit: Do you have a live link anywhere?

[synic]

It’s ok, I ended up doing something else that eliminated the problem completely.

[Author]

Posts