JSFX Fading Image Rollovers? - There's a much better way!

[KennyP]

Thank you for your reply. Yes, it was working flawlessly. Since this problem developed, I tried replacing not only the original jqOpacityFade.js, but the entire website, every file, from a backup of when the fade-in and fade-out was first introduced and working flawlessly. But, it still persists.
Even with the "fast" addition you posted, sometimes it seems to speed up the fade and it does complete. Yet, other times it starts to fade, but still gets stuck half way through it, at about 50%. Something seems to be stopping the fade from completing, even though there is still enough time in which to do so.

Could a change in the server be affecting the script?

[jscheuer1]

Anything that speeds up the response time, yes. The server being more efficient could contribute, as could browser or computer upgrades on the user end.

As far as you know, are all of the calls to other pages on the site ordinary links?

Like, if I click on Home, or Biography, it's a linked image or linked text, no fancy menu system. If so, we can capture the mouse clicks on those tags and get it to do our bidding, and then load the page. Forget about onbeforeonload.

One thing though, if you have links that open in a new window or to an iframe, or links with href attributes that don't load a page, any of that, they will need to be accounted for somehow, especially visa vis whether or not the should fade out that section. Do you have anything like that as far as you know?

When I get more time, I'll work up a prototype.

[KennyP]

The only thing that could be different is the server. I've made no changes to my PC in any way; same system, same hardware. All links to other pages are ordinary, except that all main pages redirect to a Welcome splash page if a cookie is not found on the first login. In turn, the Welcome page redirects back to whichever was the referring page. Thereafter, all redirection ends for the duration of the browser session. There are several text links which do open new windows.

Thank you so much for your help,

Kenny

[jscheuer1]

OK, let's try this. Comment out, like so:

	/* window.onbeforeunload = function(){
		$('#d1').animate({opacity: 0}, 'fast');
	}; */

and add (highlighted) just below it as shown:

(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');
			}
		});
	});
	/* window.onbeforeunload = function(){
		$('#d1').animate({opacity: 0}, 'fast');
	}; */
	(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)){
				e.preventDefault();
				$('#d1').animate({opacity: 0}, function(){
					location = t.href;
				});
			}
		});
	})([/a/i, /^_(top|self|parent)$/]);
})(jQuery);

[KennyP]

John:

Not only is the fade-out working again, but it's now smoother than it was previously.

Is it ok to add the time factor to the fade-out, as below, and as you did in the fade-in? It does work.

$('#d1').animate({opacity: 0}, 700, 'linear', function(){

Also, because the Welcome splash page redirects automatically, with no clicks to capture, can the previous
fade-out code be improved to work for that one page, even if not as well as the new code?

Thank you so much!

Kenny

[jscheuer1]

You're welcome!

I just realized looking at it that in order to avoid errors on click of the audio feature (most browsers), any other element within a table (all browsers), other potential problems, this line:

	})([/a/i, /^_(top|self|parent)$/]);

should be:

	})([/^(a|area)$/i, /^_(top|self|parent)$/]);

Edit: And another important modification for Firefox, perhaps others when hitting the Back button on the browser (add the highlighted as shown):

		if(t && t.tagName && !t.target || re[1].test(t.target)){
			e.preventDefault();
			$('#d1').animate({opacity: 0}, function(){
				location = t.href;
				$(this).css({opacity: 1});
			});
		}

Otherwise the browser Back button will show no id="d1" content, as Firefox, perhaps others will not reload the page on Back, rather reloads a version of the page exactly as it was when it was last displayed.

About your question, yes. You can use the jQuery animate method to its fullest extent, which of course includes those modifiers. For more on what's available with jQuery animate see:

http://api.jquery.com/animate/

There is a possibility that one or more of the many possible modifiers may cause a problem either intrinsically or if used in a particular way. Common sense should be your guide there. But those two (speed and easing, respectively), the way you are using them are fine.

[KennyP]

Unfortunately the latest additions are causing content to fade out, fade in, and then fade again, before a new page loads.

However, if afterwards I use the browser's back and forward buttons, the initial page fades only one time before the new page loads.

Did I enter everything ok? Temporarily I'll remove the last bit of code...

 $(this).css({opacity: 1});

Home page

(function($){
	$('head').append('<style type="text/css">#d1 {visibility: hidden;}</style>');
	$(function(){
		$('#d1').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 1350, '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)){
				e.preventDefault();
				$('#d1').animate({opacity: 0}, 700, 'linear', function(){
					location = t.href;				
					$(this).css({opacity: 1});
				});
			}
		});
      })([/^(a|area)$/i, /^_(top|self|parent)$/]);
})(jQuery);

[jscheuer1]

I'm not sure the exact problem. I suspect the 'linear'. The opacity thing with browser Back seems upon closer inspection to only be an issue in Firefox, an important one. It could crop up in other browsers though. But it's what causes d1 to reappear. That part should be solved with a timeout. So, let's do that and drop the linear:

(function($){
	$('head').append('<style type="text/css">#d1 {visibility: hidden;}</style>');
	$(function(){
		$('#d1').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 1350, '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)){
				e.preventDefault();
				$('#d1').animate({opacity: 0}, 700, function(){
					location = t.href;				
					t = $(this);
					setTimeout(function(){t.css({opacity: 1});}, 100);
				});
			}
		});
      })([/^(a|area)$/i, /^_(top|self|parent)$/]);
})(jQuery);

If that doesn't fix it up, we can always go back to what we had. The exception being we need to keep:

      })([/^(a|area)$/i, /^_(top|self|parent)$/]);

Which is like 99% likely not a problem in any of this and prevents issues in all browsers.

[KennyP]

I eliminated "linear" but it didn't make a difference, so I went back to the code as you suggested, shown above. However, there were still some problems...
On some of the page loads, content still faded out, abruptly reappeared, and then faded again before the loading of a new page.
I now went back to the following code and it seems to be working the best:

(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)){
				e.preventDefault();
				$('#d1').animate({opacity: 0}, function(){
					location = t.href;
				});
			}
		});
	})([/^(a|area)$/i, /^_(top|self|parent)$/]);
})(jQuery);

EDIT:

John, there's a problem on the Friends Page. When you click the link "Click 'n' Say Howdy" at the top of the page, the page scrolls to the message form
anchored at the bottom of the page, and then all the content in that div fades and of course doesn't reappear. If you would please add this additional type
of link clicking to the code, all will then function perfectly.

Also, on the Welcome page, redirection to all referring pages is automatic; there are no mouse clicks to trigger fade out. Can a fade out for this particular
page be added to the page's redirection code below?

Welcome/Splash page

var SplashSeconds = 6;
// Specify the cookie name. The same name needs to be 
//   specified in the JavaScript of the splash screen 
//   page.
var CookieName = "SplashCookie";
 // End of customization section. //
///////////////////////////////////
function Redirect() {
var url = '';
if(document.cookie.length > 0) {
   // Determine begin position of the cookie with the specified name.
   var cname = CookieName + '=';
   var begin = document.cookie.indexOf(cname);
   var end = 0;
   if(begin > -1) {
      begin += cname.length;
      end = document.cookie.indexOf(";",begin);
      if(end < begin) { end = document.cookie.length; }
      url = document.cookie.substring(begin,end);
      }
   }
if(url) { location.href = url; }
}
SplashSeconds = parseFloat(SplashSeconds);
setTimeout("Redirect()",parseInt(SplashSeconds*500));

Thanks,

Kenny

[KennyP]

Hi John:

Since you obviously have been very busy, I've temporarily loaded the previous code for the Friends page. Although the fade out doesn't work well with it, at least it won't make all the messages on the page fade out.

Thanks for your help,

Kenny

(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');
			}
		});
	});
window.onbeforeunload = function(){
		$('#d1').animate({opacity: 0});
	};
})(jQuery);