Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Fade-in Fade out Div Content

  1. #1
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    128
    Thanks
    95
    Thanked 0 Times in 0 Posts

    Default Fade-in Fade out Div Content

    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

    Code:
    (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);

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    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?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    128
    Thanks
    95
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by KennyP; 06-29-2013 at 08:23 AM.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    Code:
    (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:

    Code:
    					!/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:

    Code:
    <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>
    Last edited by jscheuer1; 06-29-2013 at 04:43 PM. Reason: detail, alternate line, other things noticed
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    128
    Thanks
    95
    Thanked 0 Times in 0 Posts

    Default

    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.

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

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    !/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.
    Last edited by jscheuer1; 06-30-2013 at 12:42 AM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    128
    Thanks
    95
    Thanked 0 Times in 0 Posts

    Default

    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.
    Last edited by KennyP; 06-30-2013 at 08:39 AM.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    (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.
    Last edited by jscheuer1; 06-30-2013 at 07:08 PM. Reason: less verbose
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    128
    Thanks
    95
    Thanked 0 Times in 0 Posts

    Default

    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.

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    (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);
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Ultimate fade in slide show- fade time
    By shika in forum Dynamic Drive scripts help
    Replies: 10
    Last Post: 07-22-2010, 09:23 PM
  2. Replies: 3
    Last Post: 07-12-2010, 04:04 PM
  3. Replies: 3
    Last Post: 04-26-2010, 04:51 PM
  4. Ultimate fade-in slideshow - fade-in time change
    By TheJoe in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-06-2009, 04:51 PM
  5. Change fade time in Ultimate Fade In slideshow
    By Zaphodz in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-17-2006, 12:08 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •