| | |
|
| | |
Terms of Agreement:
By using this article, you agree to the following terms...
1) You may use
this article in your own programs (and may compile it into a program and distribute it in compiled format for languages that allow it) freely and with no charge.
2) You MAY NOT redistribute this article (for example to a web site) without written permission from the original author. Failure to do so is a violation of copyright laws.
3) You may link to this article from another website, but ONLY if it is not wrapped in a frame.
4) You will abide by any additional copyright restrictions which the author may have placed in the article or article's description. | (script language="JavaScript")
var LoadLinkCur = 0;
// ^ = Next link to fade.
var LoadLinks;
// ^ = document.links (Links Collection)
//
// NOTE: Making a copy of a javascript <
// br>collection improves overall performan
// ce. So,
we're going to copy the docu
// ment.links
collection here.
var LoadLinkCount;
// ^ = Number of links in LoadLinks coll
// ection.
// NOTE: Copying the length property her
// e prevents subsequent and unneeded LoadL
// inks.length calls. (Improves performance
// also)
function Load() {
// Call this function preferably when th
// e document is fully loaded.
// NOTE: If you try to call this while t
// he page is loading not all the links on
// the page will be in the LoadLinks collec
// tion.
LoadLinks = document.links;
LoadLinkCount = LoadLinks.length;
var rt;
// rt = Rect of each link on the page (S
// ee below.)
var cur = 0;
// current link in the Loading while loo
// p. (Not the accuall fading loop.)
while (cur < LoadLinkCount) {
rt = LoadLinks[cur].getBoundingClientRect();
// Gets the current width of the link.
LoadLinks[cur].style.width = rt.right - rt.left;
// In order for this effect to work on t
// he links, images, and whatever else is i
// n the A tag you need to set the width st
// yle.
// NOTE: This width value doesn't change
// the look of the page because it gets the
// current size and then it sets the width
// to the width or the rect.
cur++;
// Increment the current link to the nex
// t one in the collection to process all o
// f them this way.
}
linkFadeIn();
// Start the fading!!!
}
function linkFadeIn() {
var linkObj = LoadLinks[LoadLinkCur];
// NOTE: you can use etheir of the suppl
// ied effects. blendTrans does the fading
// and revealTrans does a random effect (e.
// g. vertical-blinds)
// linkObj.style.filter = "revealTrans(d
// uration=2, transition=23)";
linkObj.style.filter = "blendTrans(duration=1)";
// NOTE: duration = the time in seconds
// that the animation plays at.
// NOTE: transition = the transition to
// run (23 = random) (0-22 = different tran
// sitions)
if (linkObj.filters.length > 0) {
// If the effect was applied successfull
// y then do it.
// NOTE: The effect might not work on al
// l HTML tags, but it works on most. inclu
// ding buttons, textarea's, images,text, m
// ost everything.
linkObj.filters[0].apply();
// Between apply() and play() you tell i
// t what properties of the object you want
// to change. So, in theory you could make
// it bold or something!
linkObj.style.visibility = "visible";
// Here we're just changing the visibitl
// ity of the object, and it children.
// The following applies the effect with
// all the "children" ... such as images.// r>
var child = linkObj.children;
var cur = 0;
var count = child.length;
while (cur < count) {
child[cur].style.visibility = "visible";
child[cur].style.cursor = "hand";
child[cur].onclick = linkObj.click;
// This applys the links "clickability"
// to the children.
cur++;
}
}
linkObj.filters[0].play();
// play() = Start animation.
// NOTE: play() doesn't wait untill the
// animation is complete to return.
LoadLinkCur++;
// Lets do the next one...
if (LoadLinkCur < LoadLinkCount) {
// If we haven't reached the end of the
// links on the page goto the next.
setTimeout("linkFadeIn()",100);
// Lets goto the next one in... 100 mili
// seconds...
}
}
window.onload = Load;
// You can change this if you want. Just
// make sure you call Load when and/or afte
// r the page is loaded.
(/script)
Just download the included .zip and it has the source code for 2 methods of implementation, a one page example or a whole website example.
(Look @ the source of these examples)
(The whole website example has 1 line that implements the script, and the script sets window.onload to the Load function, this is the same as (body onload="Load") only in javascript.
NOTE: This code only works on IE5+.
| |  Download article
Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. Afterdownloading it, you will need a program like Winzip to decompress it.
Virus note:All files are scanned once-a-day by Planet Source Code for viruses,but new viruses come out every day, so no prevention program can catch 100% of them.
FOR YOUR OWN SAFETY, PLEASE:
1)Re-scan downloaded files using your personal virus checker before using it.
2)NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.
If you don't have a virus scanner, you can get one at many places on the net including:McAfee.com
|
Terms of Agreement:
By using this article, you agree to the following terms...
1) You may use
this article in your own programs (and may compile it into a program and distribute it in compiled format for languages that allow it) freely and with no charge.
2) You MAY NOT redistribute this article (for example to a web site) without written permission from the original author. Failure to do so is a violation of copyright laws.
3) You may link to this article from another website, but ONLY if it is not wrapped in a frame.
4) You will abide by any additional copyright restrictions which the author may have placed in the article or article's description. | | | | Report Bad Submission | | | | | Your Vote! | |
See Voting Log | | | | Other User Comments | 2/26/2002 4:23:25 PM:Mike
I gave you 4, the code is very nice.
| 2/26/2002 4:53:36 PM:David N
for a better source listing try:
http://lightning.prohosting.com/~dnewmon
/
This site messed with the code
alittle so I setup a quick site for it.
There you can view the source and
download/run the example code.
| 2/26/2002 5:53:27 PM:$t0rm
Bet it won't work with netscape.
| 2/27/2002 11:35:04 AM:masswebsites
baaah screw netscape 8^)
| | | Add Your Feedback! | Note:Not only will your feedback be posted, but an email will be sent to the code's author in your name.
NOTICE: The author of this article has been kind enough to share it with you. If you have a criticism, please state it politely or it will be deleted.
For feedback not related to this particular article, please click here.
| |
|
