Grow your CSS skills. Land your dream job.

jQuery + IE7 = Bad

  • # March 31, 2009 at 8:58 pm

    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:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





    Font Legibility and Readability Experiment

    Click Here to Begin…

    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.

    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.

    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.

    Basic Information







    Favorite Font/Font Family?









    Submit Your Results!





# March 31, 2009 at 9:20 pm

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
# April 1, 2009 at 2:54 am
"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?

# April 2, 2009 at 9:47 pm

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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".