Reputation: 29
Why my jQuery is not working on IE (works fine in Safari, Chrome and FF)?
He, there, i've been trying around hours with no clue (i'm using Wordpress), it's very hard to know what's wrong with jQuery. FF and Chrome in Windows/Mac work fine, IE drive me crazy.
I'm using in the header:
<!DOCTYPE html>
This is the web where i'm doing the test:
This is my JS code:
jQuery(document).ready(function() {
//Menu
jQuery("ul.menu").superfish({
delay : 100,
animation : {opacity:'show',height:'show'},
//speed : 10,
autoArrows : true,
dropShadows : false
});
//Popup FancyBox
jQuery('.fancybox-media').fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
jQuery('.fancybox').fancybox();
var thumbnails = 'a:has(img)[hrefjQuery=".jpg"]';
jQuery(thumbnails).addClass("fancybox").attr("rel","fancybox");
jQuery(".popup").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
//Expand
jQuery('div.moexpander').hide();
jQuery('a.moexpander').click(function(){
jQuery(this).parent().next('div.moexpander').slideToggle();
return false;
});
//Slideshow Destacados, Create an array of titles
var titles = jQuery('#cycle div.item').find("h3").map(function() { return jQuery(this).text(); });
//Add an unordered list to contain the navigation
//Invoke the cycle plugin on #cycle
jQuery('#cycle').before('<ul id="pager" class="sprites bannerBg"></ul>').cycle({
//Specify options
fx :'fade', //Name of transition effect
speed : 600,
delay : -1200,
pause : 1,
pager : '#pager', //Selector for element to use as pager container
pagerAnchorBuilder: function (index) { //Build the pager
return '<li><a href="#">' + titles[index] + '</a></li>';
},
updateActivePagerLink: function(pager, currSlideIndex) {
jQuery(pager).find('li').removeClass('active').filter('li:eq('+currSlideIndex+')').addClass('active');
}
});
jQuery('#cycle').hover(function() {
jQuery('.pause').show();
}, function() {
jQuery('.pause').hide();
});
//Slideshow Voluntariado
jQuery('#cyclePopular').after('<div id="navPopular">')
.cycle({
fx : 'scrollHorz',
speed : 'fast',
delay : -1200,
pause : 1,
pager : '#navPopular'
});
//Slideshow Avisos
jQuery('#cycleAvisos').cycle({
fx : 'scrollHorz',
delay : -4000,
pause : 1,
prev: '#prev',
next: '#next',
pager : '#navAvisos',
after: onAfter
});
//Make Avisos's Height auto-resizing
function onAfter(curr, next, opts, fwd) {
var jQueryht = jQuery(this).height();
//set the container's height to that of the current slide
jQuery(this).parent().animate({height: jQueryht});
}
//Make all the block clickable
jQuery("#link").click(function(){
window.location=jQuery(this).find("a").attr("href");
return false;
});
//Add CSS to Sidebar Pages
jQuery('#sidebar-pages').find("li").before("<span class='sprites bulletR left'></span>");
// Tabs
jQuery.fn.easytabs = function(){
//Default Action
jQuery(this).find(".easytabs_content").hide(); //Hide all content
jQuery(this).find("ul.easytabs li:first").addClass("active").show(); //Activate first tab
jQuery(this).find(".easytabs_content:first").show(); //Show first tab content
jQuery(this).find(".easytabs_content li a").before("<span class='sprites bulletR'></span>"); //Show bullets
//On Click Event
jQuery("ul.easytabs li").click(function() {
jQuery(this).parent().parent().find("ul.easytabs li").removeClass("active"); //Remove any "active" class
jQuery(this).addClass("active"); //Add "active" class to selected tab
jQuery(this).parent().parent().find(".easytabs_content").hide(); //Hide all tab content
var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
jQuery(activeTab).fadeIn(); //Fade in the active content
return false;
});
};//end function
jQuery("div[class^='easytabs']").easytabs(); //Run function on any div with class name of "easytabs"
// Search animation with IE statements
var input = jQuery('input#s');
var divInput = jQuery('div.input');
var width = divInput.width();
var outerWidth = divInput.parent().width() - (divInput.outerWidth() - width) - 28;
var submit = jQuery('#searchSubmit');
var txt = input.val();
input.bind('focus', function() {
if(input.val() === txt) {
input.val('');
}
jQuery(this).animate({color: '#000'}, 300); // text color
jQuery(this).parent().animate({
width: outerWidth + 'px',
backgroundColor: '#fff', // background color
paddingRight: '43px'
}, 300, function() {
if(!(input.val() === '' || input.val() === txt)) {
if(!(jQuery.browser.msie && jQuery.browser.version < 9)) {
submit.fadeIn(300);
} else {
submit.css({display: 'block'});
}
}
}).addClass('focus');
}).bind('blur', function() {
jQuery(this).animate({color: '#b4bdc4'}, 300); // text color
jQuery(this).parent().animate({
width: width + 'px',
backgroundColor: '#e8edf1', // background color
paddingRight: '15px'
}, 300, function() {
if(input.val() === '') {
input.val(txt)
}
}).removeClass('focus');
if(!(jQuery.browser.msie && jQuery.browser.version < 9)) {
submit.fadeOut(100);
} else {
submit.css({display: 'none'});
}
}).keyup(function() {
if(input.val() === '') {
if(!(jQuery.browser.msie && jQuery.browser.version < 9)) {
submit.fadeOut(300);
} else {
submit.css({display: 'none'});
}
} else {
if(!(jQuery.browser.msie && jQuery.browser.version < 9)) {
submit.fadeIn(300);
} else {
submit.css({display: 'block'});
}
}
});
});
I'll really appreciate your help,
H·
Upvotes: 0
Views: 1679
Answers (1)
Reputation: 4774
I see two method calls that are not well supported (or supported at all) by IE:
.hover.slideToggle
All of the toggle functions have rough/inconsistent cross-browser support. I would try to change this, especially since the slide effects actually have some of the highest overhead of all of the jQuery effects, and it is blatantly apparent on slow browsers (like IE - especially the older versions).
As for .hover, I suggest that you read up on and use a combination of .mouseenter, .mouseleave, .mousein, and .mouseout. I do not recall which, but .hover is actually short-hand for two of those, but support for it is rough. One of those sets is based, specifically, on the built in settings for IE, and I do not think it is the one that .hover is short-hand for.
UPDATE 1:
Based on your feedback, what I would advise is that you search the .superFish and fancybox plugins' source code to make sure that they do not use fadeTo for opacity, as that will entirely break your script, and that they use the correct opacity manipulation techniques, that are compatible with IE.
UPDATE 2:
Your .map() method is also wrong. From the rest of your code, I can see that you are trying to create a vanilla JavaScript array, not a jQuery array. As such, you must call .get() after .map(). I found an answer to another post that further explains this.
UPDATE 3:
I hope I am not being silly, but I noticed this line:
jQuery('div.moexpander').hide();
which you have right before you set up a click handler for jQuery('div.moexpander'). The problem is, I do not see another call anywhere to show jQuery('div.moexpander'). If I am correct, and you did not show it again after that, the div.moexpander element will never be shown and the handler will never be used. I do not know how crucial this is to your code/issue, as I still don't know your symptoms, but this is very probably a bug.
UPDATE 4:
Also, so long as we are debugging, you should run through your code and terminate each function declaration with a semi-colon. For example, change:
function someFunct() {
.....
}
to
function someFunct() {
.....
};
Although this is not required in JavaScript, there are many situations in which this will impact/effect your scripts, and, in some cases, crash them.
To be honest, I do not completely understand why this is the case, but I have encountered situations in which this was the issue, and I believe some of these issues were in IE.
UPDATE 5:
If this is still not working, check out this thread on the jQuery forum, which deals with IE loading issues involving fancyBox.
Upvotes: 1