We Keep Coding

JQuery fades not working in IE9

I'm new to JQuery and can't for the life of me figure out why this isn't behaving properly. As the content in my "content" div changes, I want it to fade in and out. I created a generic "load" function to do this:
function loadPage(page, callback) {
if(current_doc != page) {
current_doc = page;
$("#content").fadeOut(400, function() {
$("#content").load(current_doc, function() {
$("#content").hide().fadeIn(400, function() {
if(typeof(callback) == 'function'){ callback(); }
});
});
});
}
}
Is there some sort of glaring mistake that I'm missing?
Thanks.
P.S. - This code works fine in Firefox.

One thing to check in IE, in Internet Options > Advanced, under Multimedia should be a checkbox that says "play animations in webpages". Ensure that is checked.

While I'm not entirely sure why, placing the content div inside another div and fading that instead seems to have done the trick. I would think that that would have been giving me issues only if "content" itself were being deleted, but that isn't the case from my code. Oh well.

How to I find what is hiding an element?

I'm having a problem where when the page is loaded, a div element becomes hidden. Developer Tools in Chrome tells me "element.style" is setting "display: none"
It's not in my css anywhere to display none. I can't find in either of the related javascript files anything that would hide the element.
I'm totally lost as to why its hidden.
The jquery plugin I'm using is called Supersized.
Edit:
Feel free to check out the page I'm working on: http://www.gingereventsmpls.com/gallery2.html
If you inspect the html, the element that gets hidden is at the end of this hierarchy: body->div"controls-wrapper"->div"controls"->div"tray-button"
"#tray-button" is what is getting display:none attached to it somehow.

If you'd like the root cause of your problem, it's the following lines (found in supersized3.shutter.js):
$(vars.tray_button).toggle(function(){
$(vars.thumb_tray).stop().animate({bottom : 0, avoidTransforms : true}, 300 );
if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-down.png");
return false;
}, function() {
$(vars.thumb_tray).stop().animate({bottom : -$(vars.thumb_tray).height(), avoidTransforms : true}, 300 );
if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-up.png");
return false;
});
It's attempting to use the event-based toggle, but unfortunately that version of the toggle function was deprecated as of JQuery 1.8 and removed in 1.9 (you're using 1.9). So what's actually happening is THIS toggle function is being called, which simply toggles whether or not the div is hidden or shown.
You can choose to either downgrade to JQuery 1.8 or lower, or rewrite the part of the plugin that is relying on the old event-based toggle function.
Hope this helps!
Edit: I've rewritten the above part of the plugin to be compatible with 1.9 in the below code, please let me know if this works, I haven't tested:
$(vars.tray_button).on('click',function(){
var self=$(this)
self.data('toggle',!self.data('toggle'))
if(self.data('toggle')) {
$(vars.thumb_tray).stop().animate({bottom : 0, avoidTransforms : true}, 300 );
if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-down.png");
} else {
$(vars.thumb_tray).stop().animate({bottom : -$(vars.thumb_tray).height(), avoidTransforms : true}, 300 );
if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-up.png");
}
return false;
});

Or by jquery like this:
$('#tray-button').removeAttr('style');

jQuery callback freezing up

I made a little fiddle to illustrate the problem.
Basiaclly this works:
var visible = $('#container').find(' > div:visible'),
hidden = $('#container').find(' > div:hidden');
visible.fadeOut(1000, function() {
});
setTimeout(function() { hidden.fadeIn('slow') },1000);
and this doesn't:
var visible = $('#container').find(' > div:visible'),
hidden = $('#container').find(' > div:hidden');
visible.fadeOut(1000, function() {
hidden.fadeIn(100)
});
The second way makes the page freeze up.
Is there something wrong with the way I'm using the callback?
I need to be able to put it in an animation queue, because I need to be able to stop() everything.
Is there any way to make this work? I's broken on Chrome and FF

The problem in your 2nd solution is, that an animation will be started for each visible div and for each animation (which has finished) all hidden divs start the fade in animation.

Uhh, first of all, why are you using such construction:
$('#container').find(' > div:visible');
Just use:
$('#container > div:visible');
Second, don't use #container because for some reason if fires fadeOut for 301 elements inside which is just too much.
Scratch that, i see jsfiddle has been changed and now it's only one element in there. Not surprised that it crashed before - too many objects.
Third, after fadeOut nothing fades in because at the point when you assign hidden variable there is no hidden divs. You'll have to use this in your callback:
$('#container2 > div:hidden').fadeIn(1000)

Infinite js loop in different browsers

I'm trying to make an infinitely rotating imagereel with jQuery. This imagereel shifts between images with an interval of 5000 milliseconds, then fading out the 'old' image and fading in the 'new' image. The image to be displayed has a style-attribute for "display:inline".
The code can be found below:
function switchImage(){
var selector = $('#fotoreel img[style="display: inline; "]');
var nextOne = $(selector).next();
if($(nextOne).length == 0)
{
var nextOne = $('#fotoreel img:first');
}
$(selector).fadeOut('normal',function(){
$(nextOne).fadeIn('normal');
});
var t = setTimeout("switchImage()",5000);
}
$(document).ready(function(){
setTimeout("switchImage()",5000);
});
The problem is that it works fine in Chrome, but in Firefox and in Opera it only shifts image one time. In IE it's worse; there it doesn't work at all.
Do you guys know a better way of infinitely looping with javascript? Now I use setTimeout() to call the function again, but that doesn't seem to work.
EDIT
Okay, thank you everyone! Such fast responds, awesome!
The solution that I used was the one of adding a class and searching for that instead of for the style. The display:inline didn't appear to be a problem, as it worked out, but all the browsers appeared to implement the jQuery fadeIn() function differently.
I namely wanted to filter EXACTLY on "display: inline ;", because the spaces were added in Chrome, but not in IE, FF or Opera. So that means the style attribute wasn't accurately at all to filter with. Stupid me! :)
I made sure that a class was added to the image that is showed currently, and find the next one by filtering on that class. Now it works like a charm.
Thank you all for your answers, I love this place! :D

This is most likely because you are checking the style attribute, which is very inconsistent in browsers. I.E. doesn't work at all or works with various amounts of white-space. Just simplify your selector to use a class or ":visible"

It's probably going to work better if you explicitly mark images with a class:
function switchImage(){
var selector = $('#fotoreel img.current');
var nextOne = $(selector).length ? $(selector).next();
if($(nextOne).length == 0)
{
var nextOne = $('#fotoreel img:first');
}
$(selector).fadeOut('normal',function() {
$(selector).removeClass('current');
$(nextOne).addClass('current').fadeIn('normal');
});
setTimeout(switchImage, 5000);
}
$(document).ready(function(){
$('#fortoreel img:last-child').addClass('current');
setTimeout(switchImage,5000);
});
Note also that in my calls to "setTimeout()" I pass a direct reference to the function instead of a string version of the code to call it.

This wasn't working because the browsers you mentioned did not like the display: inline selector you used.
I got it working using the following:
function switchImage() {
var selector = $('#fotoreel img:visible');
var nextOne = selector.next();
if (nextOne.length == 0) {
var nextOne = $('#fotoreel img:first');
}
selector.fadeOut('normal', function () {
nextOne.fadeIn('normal');
});
var t = setTimeout(switchImage, 5000);
}
$(document).ready(function () {
setTimeout(switchImage, 5000);
});

why does my jquery animation not function properly in chrome when using browser confirms and alerts?

I'm seeing an issue regarding some jquery animation in chrome.
I'm wondering if anyone else has seen this.
I'm just trying to do some simple slide up to hide a div, or hide and then fade a div in.
The slide up animation on the div is not happening in chrome and the hide is lagging before the fade in kicks in; whereas in firefox the animation is immediate and smooth.
The thing is that I have a browser confirm wrapped around this stuff to only do this animation if the user confirms.
If I remove the confirms, the animation works fine in chrome.
Is that weird?
Here's an example. With the confirm I get no slide up. Without the confirm I get one.
That is, simply removing the if(confirm){} code block.
if (confirm('Are you sure you want to remove the item?')) {
dragbox.slideUp('fast', function () {
dragbox.remove();
WebService.RemoveItem(itemId,
//on success
function () {
if ($('.dragbox').length == 0) {
//remove columns
$('.column').remove();
}
},
//on fail
function () {
alert('Failed to remove the "' + itemName + '" item.');
}
);
});
}
In this example, with the confirm there's a lag after the div is hidden and before the fade in start so that the div is hidden longer than I would like. Without the confirm, ti behaves as I would expect.
if (confirm('Are you sure?')) {
$('#' + itemId).spin();
WebService.AddItem(itemId,
//onsuccess
function (r) {
var item = $('#' + itemId); //this is a div
item.unspin();
item
.hide()
.toggleClass('item-added')
.fadeIn('fast', function () {
// Create the DOM elements
$('<p><img class="item-added" src="images/item-added.png" />')
// Sets the style of the elements to "display:none"
.hide()
// Appends the hidden elements to the "posts" element
.appendTo($('.contentInfo', item))
// Fades the new content into view
.fadeIn('fast');
});
},
//onfail
function () {
$('#' + itemId).unspin();
alert('Failed');
}
);
}
Can anyone confirm or disprove this notion based on my speculation and example?
What are some alternatives to the browser confirm?
EDIT: Yeah I'm not sure what's going on.

Are you using the newest version of jQuery UI? Have you got the jQuery UI stylesheet also?
It all looks fine. If you can't find an answer here, open up a bug report.

Updating Chrome fixes this. I'm now running version 15.0.874.120 and all is well. My word.

I was just experiencing the same thing with some code that worked when it was written a couple of years ago. Now it has an issues in webkit-based browsers.
I had several animations that were paused by using confirm() calls and the subsequent animations failed to display properly. I finally figured out that if I put a short delay before the animation, it started working properly.
if (confirm('Are you sure?')) {
dragbox.delay(10).slideUp('fast', function () { ...
I'm not quite sure why this works but my animations are now working again in Safari 6.0.3 and Chrome 26.0.1410.43