PDA

View Full Version : Fade-in Fade out Div Content



KennyP
06-29-2013, 02:51 AM
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
06-29-2013, 05:18 AM
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
06-29-2013, 08:17 AM
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 (http://www.billyjoeconor.com/)

jscheuer1
06-29-2013, 10:18 AM
(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
06-29-2013, 09:23 PM
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
06-30-2013, 12:33 AM
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
06-30-2013, 02:04 AM
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
06-30-2013, 03:31 PM
OK, here's a completely different approach. I found a post on StackOverflow:

http://stackoverflow.com/questions/2638292/after-travelling-back-in-firefox-history-javascript-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
07-01-2013, 03:35 AM
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
07-01-2013, 04:32 AM
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);

KennyP
07-01-2013, 04:47 AM
Yes, initially in the first post the broblem was in FF.
Some time back I believe I was using two different ids. But no longer now; there is no d2.

jscheuer1
07-01-2013, 05:49 AM
As I was saying, we haven't changed anything as far as IE is concerned. So if that's a problem, it was a problem before. Or maybe you pasted code from somewhere else where you still had that #d2 in there. I copied it, then you copied it back.

In any case, it has to be #d1. Otherwise some browsers are going to show the content briefly before fading it in. Change it to #d1 as shown in my previous post.

KennyP
07-01-2013, 06:25 AM
John - That did it. It works perfectly now in FF as well as in IE. Thank you so much. You're a genius.