Fade-in Fade out Div Content

[KennyP]

To jscheuer1:

Hi John,

After using the code below for some time which you kindly provided me, suddenly I discovered that although it fades in and out well, in IE if you click the browser back button the content doesn't appear. When you get the chance, is there anything in it that can be altered to prevent this?

Thanks

-Kenny

(function($){
	$('head').append('<style type="text/css">#d2 {visibility: hidden;}</style>');
	$(function(){
		$('#d1').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 1200, 'linear', function(){
			if(typeof fleXenv === 'object' && typeof fleXenv.globalInit === 'function'){
				fleXenv.globalInit();
			}
			if(this.style.getAttribute){
				this.style.removeAttribute('filter');
			}
		});
	});
	(function(re){
		$(document).click(function(e){
			var t = e.target;
			while (t.tagName && !re[0].test(t.tagName)){
				t = t.parentNode || null;
			}
			if(t && t.tagName && (!t.target || re[1].test(t.target)) && !re[2].test(t.href)){
				if(re[3].test(t.href)){
					$('#d1').animate({opacity: 1}, 1200, function(){
						if(this.style.getAttribute){
							this.style.removeAttribute('filter');
						}
					});
					return true;
				}
				e.preventDefault();
				$('#d1').animate({opacity: 0}, 600, function(){
					location = t.href;				
				});
			}
		});
      })([/^(a|area)$/i, /^_(top|self|parent)$/, /#/, /^\s*javascript\s*:/]);
})(jQuery);

[jscheuer1]

I set up 2 pages with the code from your post on them, and switching back and forth between them via a link or via the back button was fine in IE here.

A fade transition is really unnecessary between web pages, often distracting/annoying to visitors. We could disable it for IE or get rid of it altogether.

If you really want to keep the transition, I would have to see the problem happening to even have a chance at fixing it.

You say it just started happening. Have you changed anything recently? Updated jQuery or added/changed other script code or even just content or css on the page? Did you update your browser, or change its settings?

[KennyP]

Thanks for your reply John.

Sorry, my wires got crossed. The transition is fine in IE. I meant Firefox, which I don't use. The problem was pointed out to me by a friend who does use FF and I just became aware of it now. The rest of the code on the pages has not changed. The issue is seen if you use the browser's back button after having visited a couple of pages by using the menu.

My friend Billy Joe likes the transition on his site so I need to keep it in.

Website Link

[jscheuer1]

(function($){
	$('head').append('<style type="text/css">#d2 {visibility: hidden;}</style>');
	$(function(){
		$('#d1').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 1200, 'linear', function(){
			if(typeof fleXenv === 'object' && typeof fleXenv.globalInit === 'function'){
				fleXenv.globalInit();
			}
			if(this.style.getAttribute){
				this.style.removeAttribute('filter');
			}
		});
	});
	(function(re){
		$(document).click(function(e){
			var t = e.target;
			while (t.tagName && !re[0].test(t.tagName)){
				t = t.parentNode || null;
			}
			if(t && t.tagName && (!t.target || re[1].test(t.target)) && !re[2].test(t.href)){
				if(re[3].test(t.href)){
					$('#d1').animate({opacity: 1}, 1200, function(){
						if(this.style.getAttribute){
							this.style.removeAttribute('filter');
						}
					});
					return true;
				}
				e.preventDefault();
				$('#d1').animate({opacity: 0}, 600, function(){
					location = t.href;				
					setTimeout(function(){$('#d1').css({opacity: 1});}, 100);
				});
			}
		});
      })([/^(a|area)$/i, /^_(top|self|parent)$/, /#/, /^\s*javascript\s*:/]);
})(jQuery);

Only the highlighted line, near the end has been added. Ah, but I see in our previous thread on this I warned you about this very problem and you chose to go without that line because you said it caused problems. I never saw those. But if they occur again we can try to be more specific, changing that added line to:

					!/safari|msie/i.test(navigator.userAgent) && setTimeout(function(){$('#d1').css({opacity: 1});}, 100);

where it will only target browsers other than IE, Safari, and Chrome, which don't need it.

The browser cache may need to be cleared and/or the page refreshed to see changes.


In some unrelated matters, I also have noticed that there are some errors on the pages, missing scripts and images, and that the ring tone Flash feature would work better in non-IE if rewritten like so:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="258" height="100" id="replaceme">
		<param name="movie" value="/flash/ring-wall-bj.swf">
	        <param name="quality" value="high">
	        <param name="allowScriptAccess" value="always">
	        <param name="wmode" value="transparent">
	        <param name="bgcolor" value="#000000">
        <!--[if !IE]>-->
		<object type="application/x-shockwave-flash" data="/flash/ring-wall-bj.swf" width="258" height="100">
	                <param name="quality" value="high">
	                <param name="allowScriptAccess" value="always">
	                <param name="wmode" value="transparent">
	                <param name="bgcolor" value="#000000">
	<!--<![endif]-->
		<a href="http://www.billyjoeconor.com/freebies/freebies.php" target="_self"><img src="/images/ring-wall-bj-alt.gif" style="border:none;"></a>
	<!--[if !IE]>-->
		</object>
	<!--<![endif]-->
</object>

[KennyP]

Thanks John. Yes, both of the following lines do prevent content from disappearing when using the back button.
However, when navigating using the menu, the current content fades out and fades back in before displaying the new content.

setTimeout(function(){$('#d1').css({opacity: 1});}, 100);

!/safari|msie/i.test(navigator.userAgent) && setTimeout(function(){$('#d1').css({opacity: 1});}, 100);

[jscheuer1]

What else is delaying the unloading of the page? I mean, if I use simple pages, there's no such problem. I'll have a look to see what else might be delaying the unloading of the page, but if I can't find it, and if you know of anything, let me know.

Even if we cannot find it, we can always disable the fadeout for those browsers that cannot handle it correctly visa vis the back button. The pages will still fade in for those browsers, just not out. IE and Safari/Chrome will be unaffected.

Oh, and for now you should use the second one:

!/safari|msie/i.test(navigator.userAgent) && setTimeout(function(){$('#d1').css({opacity: 1});}, 100);

as it will not cause it to reappear in IE, Safari, and Chrome, none of which have the back button problem.

One more thing, another way of looking at this might be simply to increase the timeout, 100 in the above. Try 500 for instance.

In the meantime, I have another idea to try out. I'll let you know if it looks promising.

[KennyP]

After removing a style class from that div, the fade transition seems to work well, including when using the back button. However, now in IE the new content flashes on, then off, and then it finally fades in normally.

This is so if I use the code with or without either version of the two setTimeout code lines.

[jscheuer1]

OK, here's a completely different approach. I found a post on StackOverflow:

http://stackoverflow.com/questions/2...cript-wont-run

So I tried it and it works on a simple page in Firefox, even in Opera, which technically has no window unload event:

(function($){
	$('head').append('<style type="text/css">#d2 {visibility: hidden;}</style>');
	$(function(){
		$('#d1').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 1200, 'linear', function(){
			if(typeof fleXenv === 'object' && typeof fleXenv.globalInit === 'function'){
				fleXenv.globalInit();
			}
			if(this.style.getAttribute){
				this.style.removeAttribute('filter');
			}
		});
	});
	(function(re){
		$(document).click(function(e){
			var t = e.target;
			while (t.tagName && !re[0].test(t.tagName)){
				t = t.parentNode || null;
			}
			if(t && t.tagName && (!t.target || re[1].test(t.target)) && !re[2].test(t.href)){
				if(re[3].test(t.href)){
					$('#d1').animate({opacity: 1}, 1200, function(){
						if(this.style.getAttribute){
							this.style.removeAttribute('filter');
						}
					});
					return true;
				}
				e.preventDefault();
				$('#d1').animate({opacity: 0}, 600, function(){
					location = t.href;				
				});
			}
		});
      })([/^(a|area)$/i, /^_(top|self|parent)$/, /#/, /^\s*javascript\s*:/]);
      !/chrome|msie/i.test(navigator.userAgent) && $(window).unload(function(){});
})(jQuery);

Note: It reverts the code to what you posted in your first post in this thread and adds one line (highlighted) near the end.

The browser cache may need to be cleared and/or the page refreshed to see changes.

[KennyP]

Thanks for the code John. Unfortunately it works very well in FF, but in IE the new content still flashes on, then off, and then it fades in as it should. Will send you a PM.

[jscheuer1]

Looking at it now, I can see that, but it was working before in IE, right? The only thing that I can see that's changed from then is that for some reason, the #d1 in the appended style has now become #d2. When and why did that happen? It should be #d1:

(function($){
	$('head').append('<style type="text/css">#d1 {visibility: hidden;}</style>');
	$(function(){
		$('#d1').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 1200, 'linear', function(){
			if(typeof fleXenv === 'object' && typeof fleXenv.globalInit === 'function'){
				fleXenv.globalInit();
			}
			if(this.style.getAttribute){
				this.style.removeAttribute('filter');
			}
		});
	});
	(function(re){
		$(document).click(function(e){
			var t = e.target;
			while (t.tagName && !re[0].test(t.tagName)){
				t = t.parentNode || null;
			}
			if(t && t.tagName && (!t.target || re[1].test(t.target)) && !re[2].test(t.href)){
				if(re[3].test(t.href)){
					$('#d1').animate({opacity: 1}, 1200, function(){
						if(this.style.getAttribute){
							this.style.removeAttribute('filter');
						}
					});
					return true;
				}
				e.preventDefault();
				$('#d1').animate({opacity: 0}, 600, function(){
					location = t.href;				
				});
			}
		});
      })([/^(a|area)$/i, /^_(top|self|parent)$/, /#/, /^\s*javascript\s*:/]);
      !/chrome|msie/i.test(navigator.userAgent) && $(window).unload(function(){});
})(jQuery);