Fade-In

[JaredFish]

Im not askin anyone to make me a script... just wanna know if its possible to have the new page fade-in when a link is clicked... and if so how wud i go bout doing it?

[scott100]

Im not askin anyone to make me a script... just wanna know if its possible to have the new page fade-in when a link is clicked... and if so how wud i go bout doing it?

<{POST_SNAPBACK}>

This only works in IE, example here: http://www.w3schools.com/dhtml/tryit.asp?f...html_pageenter4

[Err]

Don't mean to high jack this thread, but is there a script you can use to achive the same effect but with cross browser suuport?

[scott100]

I've no idea... W3C has many effects for this on their site but they only work with IE. If other browsers do support this i haven't seen it advertised anywhere

[Pollux]

I've not tried this, so I'm not sure how well it would work, but it may be possible to create a cross browser version of the script based upon the opacity style that can be assigned to DOM elements.If you position a <div> over a page with a white background (or any other colour/image you might like) so it covers the whole page, and then onload you can call a script which will fade the opacity of that div from 100% to 0%.To get you started, here's a cross browser script I previously wrote to fade a DOM element. All you should need to do (I think!) is create the div with the background and then pass its id to the fade method:

/* * Calls setOpacity multiple times to create a smooth fade out/in effect. */function fade(objId, startOpacity, endOpacity) {   // Check element exists - avoid scripting errors.   if (document.getElementById) {	      // Retrieve the element to fade.      obj = document.getElementById(objId);        // Don't continue if at endOpacity (base case).      if (startOpacity != endOpacity){           // Decrement if fade out         if (startOpacity > endOpacity) startOpacity -= 10;               // Increment if fade in         else startOpacity += 10;               // Set the new opacity of the element.         setOpacity(obj, startOpacity);                 // Timeout and then call recursively.         window.setTimeout("fade('"+objId+"',"+startOpacity+","+endOpacity+")", 100);      }   }}/* * Cross browser compatible function to change the opacity of a DOM element. */function setOpacity(obj, opacity) {   // This prevents an ugly flicker in FF when set to 100%   opacity = (opacity == 100)?99.999:opacity; 	    // For new mozilla browsers (official CSS3).   obj.style.opacity = opacity/100;	   // For old mozilla browsers.   obj.style.MozOpacity = opacity/100;   	    // For IE.   obj.style.filter = "alpha(opacity=" + opacity + ")";    	    // For KHTML browsers.   obj.style.KhtmlOpacity = opacity/100;}

Let me know if it works!

[Err]

Ah, thanks for the Code! However, I'm not that advanced in Javascript to even know what needs to be done in order for it to work. Could you fill me in? I've tried what you said but I'm still stuck.

[Pollux]

I've put the code into a slightly more usable format for you. Although it could still do with a bit of attention really. One thing in particular is missing. I've set the height property for the div to 100% (which is 100% of the window not the document), so if your document is longer than the window it is displayed on then the fade in will only work on the part which is initially visible. You can change this so it uses an absolute value, say "1000px" but thats not very nice since it means you'd need to set that on a per document basis. Really you need a script that calculates the document height dynamically. But thats up to you to find.The way in which the div is removed after the fade could also do with improvement, but it works at least. Give it a try anyway, and see if it meets your needs.You'll probably want to put this bit in an external js file:

/*	* Cover the page with a div and fade it in. 	*/	function fadeDivIn(objId) {  // Get the element.  var obj = document.getElementById(objId);    // Set style here so only executed by javascript enabled browsers.  obj.style.width = "100%";  obj.style.height = "100%";  obj.style.top = "0px";  obj.style.right = "0px";  obj.style.backgroundColor = "#FFFFFF";	  // Fade the div which covers the page.  fade(objId, 100, 0);  // Need to set display to none after fade effect to make the page selectable.  // Not pretty to be dependent on time, probably better way of doing this.  window.setTimeout("obj.style.display='none'", 1050);	}	/*	* Calls setOpacity multiple times to create a smooth fade out/in effect.	*/	function fade(objId, startOpacity, endOpacity) {  // Retrieve the element to fade.  obj = document.getElementById(objId);       // Don't continue if at endOpacity (base case).     if (startOpacity != endOpacity){           // Decrement if fade out         if (startOpacity > endOpacity) startOpacity -= 5;               // Increment if fade in         else startOpacity += 5;               // Set the new opacity of the element.         setOpacity(obj, startOpacity);                 // Timeout and then call recursively.         window.setTimeout("fade('"+objId+"',"+startOpacity+","+endOpacity+")", 50);  }  	}	/*	* Cross browser compatible function to change the opacity of a DOM element.	*/	function setOpacity(obj, opacity) {  // This prevents an ugly flicker in FF when set to 100%    opacity = (opacity == 100)?99.999:opacity;      // For new mozilla browsers (official CSS3).    obj.style.opacity = opacity/100;	    // For old mozilla browsers.    obj.style.MozOpacity = opacity/100;        // For IE.    obj.style.filter = "alpha(opacity=" + opacity + ")";        // For KHTML browsers.    obj.style.KhtmlOpacity = opacity/100;	}

Call the script once the page is loaded like this:

<body onload="fadeDivIn('foreground');">

Put the div which will be faded in the body:

<div id="foreground" style="position: absolute;"></div>

[scott100]

Nice one pollux, this has potential

[Pollux]

I'm glad you approve

[Err]

whoa! That works great! good script pollux! I will diffenently use this. the div height doesn't bother me that much, so it's cool