[Solved] IE7 and jQuery

[Rob MacKay]

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…

[Author]

Posts