Quick Search for:  in language:    
MSDN,JScript,link,fading,system,simple,effect
   Code/Articles ╗ |  Newest/Best ╗ |  Community ╗ |  Jobs ╗ |  Other ╗ |  Goto ╗ | 
CategoriesSearch Newest CodeCoding ContestCode of the DayAsk A ProJobsUpload
Java/ Javascript Stats

 Code: 220,465. lines
 Jobs: 89. postings

 How to support the site

 
Sponsored by:

 
You are in:
 

Does your code think in ink?
Login





Latest Code Ticker for Java/ Javascript.
Gobang
By Geniusbob Xu Qiang on 11/27


Click here to see a screenshot of this code!Salary
By Vikram Ivatury on 11/25

(Screen Shot)

Click here to see a screenshot of this code!A (part10) Powerful Swing Code to Maintain CD Database
By James Smith K on 11/25

(Screen Shot)

String Calculator
By MadokaCoder on 11/24


Chobi Dekha
By ShuvoRim on 11/23


Click here to see a screenshot of this code!A basic Client Server application II
By Ronald Holland on 11/23

(Screen Shot)

Bookmark image
By darren kurn on 11/22


myFT
By Owolabi Oyapero on 11/22


Click here to see a screenshot of this code!Simple Socket example
By Steven McElrea on 11/20

(Screen Shot)

Click here to put this ticker on your site!


Add this ticker to your desktop!


Daily Code Email
To join the 'Code of the Day' Mailing List click here!

Affiliate Sites



 
 
   

JScript link fading system

Print
Email
 

Submitted on: 2/26/2002 4:06:40 PM
By: David N 
Level: Advanced
User Rating: By 1 Users
Compatibility:JavaScript

Users have accessed this article 6257 times.
 
(About the author)
 
     JScript link fading system. This simple effective script adds a great effect to your webpages. You can not only fade the text but you can use the other effect that does a random transition. I've read from the MSDN Library (@ msdn.microsoft.com) and it has extensive information about performance with collections and speeding up your scripts when they use them. (I've implemented all the performance tips just cause I like fast scripts. Not like this script even needs these improvments but anyways.)

This article has accompanying files

 
 
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+.

winzip iconDownload 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
Use this form to notify us if this entry should be deleted (i.e contains no code, is a virus, etc.).
Reason:
 
Your Vote!

What do you think of this article(in the Advanced category)?
(The article with your highest vote will win this month's coding contest!)
Excellent  Good  Average  Below Average  Poor See Voting Log
 
Other User Comments
2/26/2002 4:23:25 PM:Mike
I gave you 4, the code is very nice.
Keep the Planet clean! If this comment was disrespectful, please report it:
Reason:

 
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.
Keep the Planet clean! If this comment was disrespectful, please report it:
Reason:

 
2/26/2002 5:53:27 PM:$t0rm
Bet it won't work with netscape.
Keep the Planet clean! If this comment was disrespectful, please report it:
Reason:

 
2/27/2002 11:35:04 AM:masswebsites
baaah screw netscape 8^)
Keep the Planet clean! If this comment was disrespectful, please report it:
Reason:

 
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.
 
Name:
Comment:

 

Categories | Articles and Tutorials | Advanced Search | Recommended Reading | Upload | Newest Code | Code of the Month | Code of the Day | All Time Hall of Fame | Coding Contest | Search for a job | Post a Job | Ask a Pro Discussion Forum | Live Chat | Feedback | Customize | Java/ Javascript Home | Site Home | Other Sites | About the Site | Feedback | Link to the Site | Awards | Advertising | Privacy

Copyrightę 1997 by Exhedra Solutions, Inc. All Rights Reserved.  By using this site you agree to its Terms and Conditions.  Planet Source Code (tm) and the phrase "Dream It. Code It" (tm) are trademarks of Exhedra Solutions, Inc.