Grow your CSS skills. Land your dream job.

[Solved] IE7 and jQuery

  • Rob
    # January 13, 2010 at 8:19 am

    Ok so its my turn for a question!

    I have hit the wall of bricks on this one. I was asked by my client to add a feature to a jquery powered tool bar that resides at the bottom of their websites. Basically it was an animated "more info" slider, that when you select middle easy youth sites from the menu, a list of sites comes up – as you hover over the sites in the list another little info box pops out and gives a little detail about the site.

    So all I have done is add the little pop out bit, don’t worry about the rest.

    Now in FF, Safari/Chrome, and even IE8 it works exactly as it should – but in IE7 its a no go. Now I know the IE7 loads the DOM like a retard, so obviously you have to overcome some little issues, especially as I am using the load() to pull in a file that has the details for the entries in it…

    Here is my added section – in doc ready, after the toolbar function (written by someone else) is called.

    Code:
    $(document).ready(function(){
    initToolbar();

    // Rob’s added bits

    //$(“

    “).appendTo(“div.menu”); commented out to remove more excuses for IE7…
    $(“#detwrap”).load(“dets.html”, function() {

    var item = $(“div.menu ul li a”);

    item.mouseover(function() {

    var _item = “div#” + $(this).attr(“id”);
    var _last = $(“div#detwrap”).children().hasClass(“pophover”);

    $(“div#detwrap”).width(“190px”);

    if(_last === true) {

    $(“.pophover”).stop().animate({left:-195}, 500, function() {
    $(_item).stop().animate({left:0}, 500).addClass(“pophover”);
    });

    } else {

    $(_item).stop().animate({left:0}, 500).addClass(“pophover”);

    }

    $(“div.menu”).mouseleave(function() {

    $(“.pophover”).stop().animate({left:-195}, 500);

    });

    });

    });

    // end of Rob Stuff

    });

    I know IE7 loads the called stuff in, as I can see it in the code – yet it really doesn’t want to animate it…

    Rob
    # January 13, 2010 at 5:18 pm

    OK! Sorted

    And it was small and very irritating, but extremely basic solution, which will have a good morel too!

    The problem was in the HTML.

    I was loading in a load of that looked like this:

    <div id="meyendet" class="details">
    <h3 class="detTitle">Mideast Youth</h3>
    <p class="info">long descriptive text…</p>
    <a href="url" class="visit">Visit Site</a>
    </div>

    I was then listening for a mouseover into a link like this for example:

    <a href="#" id="meyendet">Mideast Youth</a>

    when the mouseover was detected it took the id attribute and was able to find the div because did a little jquery magic…

    var _item = "div#" + $(this).attr("id");

    then it could find the appropriate div and animate its left attribute…

    Can anyone spot the issue?

    here we go…

    I was using the same ID’s twice on the same page! In my excitement of making clever dynamic var’s I missed the fact that I was using the same ID twice…

    Solution?

    Change the link ID’s to class – and then the magic:

    var _item = "div#" + $(this).attr("id");

    to

    var _item = "div#" + $(this).attr("class");

    everything works fine now :)

    Final Thought? Never use ID’s twice on a page – and here is a working example as to why.

    Lesson over.

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

You must be logged in to reply to this topic.

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