SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
-
Aug 29, 2002, 15:22 #1
- Join Date
- Feb 2002
- Location
- Midwest
- Posts
- 24
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
help w/ fading text using javascript....
What I'm trying to do is something similar to menu bar at the top of the page. Where it has Bio, Pictures, etc. I've searched the internet trying to figure it out and haven't had any luck.
thanks,
stoopidstp
-
Aug 30, 2002, 00:55 #2
-
Aug 30, 2002, 08:51 #3
- Join Date
- Feb 2002
- Location
- Midwest
- Posts
- 24
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
i'm wanting to....
learn how to do this myself. So any tips would be great.
Thanks,
stoopidstp
-
Aug 31, 2002, 13:35 #4
I know a script that fades background color, and it could be easily converted into something that would work for text, but the only downside is that the user cant do anything while the background/text* is fading, so it would add a superficial load time onto the page.
All you would need to do is use DHTML style modifiers, you can change anything's style if you give it an id.
*in this case
-
Aug 31, 2002, 15:49 #5
Here is a text fade script that I found some time ago and used to good effect on a previous version of my personal site.
I've no idea how well supported it will be by today's browsers.
When I used it it was IE only, but I haven't tested it on anything other then IE5 (Yes) and NN4.7 (No, but didn't break page)
If it doesn't work in the way you want it too, I'm sure it wouldn't take too much tweaking to make it do so.
Luckily it is well annotated, so it all seems pretty clear
Anyway, you might find it useful as a starting point...
Code:/*****************************************\ || Fade Script Version 1.01 || || http://www.xs.mw/anarchos/fade.js || || (c) 1999 || || ___________________________________ || || || || Fade, hex, setbgColor functions by: || || Dak Phoenix > phoenix-archetypes.com || || ___________________________________ || || || || Modifications for mouseover by: || || Anarchos > i.am/Anarchos || || ___________________________________ || || || || Some sections based on scripts by || || The Shadow > www.icon.co.za/~andrewk || || ___________________________________ || || || || Questions/Comments/etc. -> || || || || Please send any questions or comments || || on the script to: || || anarchos3@hotmail.com || || || \*****************************************/ document.onmouseover = domouseover; document.onmouseout = domouseout; function domouseover() { if(document.all){ srcElement = window.event.srcElement; if (srcElement.className.indexOf("fade") > -1) { var linkName = srcElement.name; fadein(linkName); } } } function domouseout() { if (document.all){ srcElement = window.event.srcElement; if (srcElement.className.indexOf("fade") > -1) { var linkName = srcElement.name; fadeout(linkName); } } } function makearray(n) { this.length = n; for(var i = 1; i <= n; i++) this[i] = 0; return this; } hexa = new makearray(16); for(var i = 0; i < 10; i++) hexa[i] = i; hexa[10]="a"; hexa[11]="b"; hexa[12]="c"; hexa[13]="d"; hexa[14]="e"; hexa[15]="f"; function hex(i) { if (i < 0) return "00"; else if (i > 255) return "ff"; else return "" + hexa[Math.floor(i/16)] + hexa[i%16];} function setbgColor(r, g, b, element) { var hr = hex(r); var hg = hex(g); var hb = hex(b); element.style.color = "#"+hr+hg+hb; } function fade(sr, sg, sb, er, eg, eb, step, direction, element){ for(var i = 0; i <= step; i++) { setTimeout("setbgColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+ ")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step); } } /*-----------------=[fadeout]=---------------------- ||Fades the text from one color to another color || ||when the mouse moves off of the link. || ---------------------------------------------------*/ function fadeout(element) { /*-------------------------------------------------- ||Example: || || || ||fade(255,150,0, 255,255,255, 180, 1, element); || || || ||Explanation: || || || ||RGB (red, green, blue) values of first color || ||(color to start at), then RGB values of second || ||color (color to fade to). For my site, I have || ||the first color (255,150,0), which is orange, || ||and the second color (255,255,255), which is || ||white. Therefore it fades from orange to white || ||when the mouse moves off. || || || ||The 30 parameter is the delay time: decrease || ||to make it go quicker and increase it to go || ||faster. || || || ||The last two parameters shouldn't be messed with.|| ---------------------------------------------------*/ fade(255,253,253, 153,153,153, 15, 1, element); } /*------------------=[fadein]=---------------------- ||Fades the text from one color to another color || ||when the mouse moves over the link. || ||-------------------------------------------------*/ function fadein(element) { /*-------------------------------------------------- ||Example: || || || ||fade(255,255,255, 255,150,0, 180, 1, element); || || || ||Explanation: || || || ||RGB (red, green, blue) values of first color || ||(color to start at), then RGB values of second || ||color (color to fade to). For my site, I have || ||the first color (255,255,255), which is white, || ||and the second color (255,150,0), which is or- || ||ange. Therefore it fades from white to orange || ||when the mouse moves over the link. || || || ||The 23 parameter is the delay time: decrease to || ||make it go quicker and increase it to go faster. || ||In this case, the fading will be slightly quick- || ||er when the mouse moves over the link than when || ||the mouse moves off (which is set to 30, in my || ||case). || || || ||The last two parameters shouldn't be messed with.|| ---------------------------------------------------*/ fade(153,153,153, 255,253,253, 15, 1, element); } /*---------------=[final note]=--------------------- ||Now, once you have customized your fading colors,|| ||you need to include your customized .js file on || ||every page that you want to use it in. You can || ||include javascript files using this syntax (in || ||the head of a document): || ||<script src="fade.js" language="Javascript"> || ||</script> || || || ||Now that you have the file included, you need to || ||setup your links a small bit. Each link that you|| ||want to fade needs to have it's own _unique_ Name|| ||and must use the fade class. || || || ||Example: || || || ||<a href="blah.html" name="fading_link_1" class= || ||"fade">click here</a> || || || ||Also, the link must be plain text. This means || ||that you can't have <b>'s, <i>'s, <font>'s, etc. || ||inside of the link. || || || ||Example of what not to do: || || || ||<a href="blah.html" name="fading_link_1" class= || ||"fade"><b>click</b> here</a> || || || ||Have fun! || ||-Anarchos- || ---------------------------------------------------*/
New Plastic Arts: Visual Communication | DesignateOnline
Mate went to NY and all he got me was this lousy signature
-
Sep 1, 2002, 03:40 #6
- Join Date
- Mar 2002
- Location
- Manchester, UK
- Posts
- 853
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
There's heaps of IE-specific code in there - it's not going to work in anything else.
gav
http://www.livejournal.com/users/blufive/
browser stats analysis and comment:
http://www.livejournal.com/community/stats_weenie/
-
Sep 1, 2002, 04:03 #7Originally posted by blufive
There's heaps of IE-specific code in there - it's not going to work in anything else.
It's limitations (as it stood) were mentioned.
(That being said, coloured scrollbars are still a popular inclusion in many sites despite their IE-centricity).
I offered it more as a starting point (hence the comment about using it as a 'starting point').
It could still prove useful as a structural guide for someone who stated that they want to learn how to do it themselves, rather than to be simply handed a script.
It may or may not simply be a matter of swapping out the IE-specific segments for W3C DOM counterparts.
Surely, finding out is part of the 'fun, fun, fun' of learningNew Plastic Arts: Visual Communication | DesignateOnline
Mate went to NY and all he got me was this lousy signature
-
Sep 1, 2002, 16:34 #8
I should have posted the script here, shouldn't I? I'm NOT going to convert it to change anything but background, that's up to whoever uses it and a little DHTML magic.
I might be able to change it. Should in fact, but I want to grant you a learning experience. Now, pretend that you are Asok the Intern for Dilbert, and I am Wally.
Code:<script language="JavaScript" type="text/javascript"> <!-- Fade-in script by Bernhard Friedrich /************************************************************* * based on the script found in HomeSite 2.5 * fade script ver0.1 by Kouichirou@Eto.com 1996/02/20 * Copyright (c) 1996 Kouichirou Eto. All Rights Reserved. * You can freely copy, use, modify this script, * if the credit is given in the source. */ document.bgcolor="White" var hexchars="0123456789ABCDEF"; function fromHex (str) { var high=str.charAt(0); //Note: Netscape 2.0 bug workaround var low=str.charAt(1); return(16*hexchars.indexOf(high))+hexchars.indexOf(low); } function Color(str){ this.r=fromHex(str.substring(0,2)); this.g=fromHex(str.substring(2,4)); this.b=fromHex(str.substring(4,6)); return this; } col_value="Black"; color_start=col_value.substring(1,8); col_value="White"; color_end=col_value.substring(1,8); function makearray(n) { this.length = n; for(var i = 1; i <= n; i++) this[i] = 0; return this; } hexa = new makearray(16); for(var i = 0; i < 10; i++) hexa[i] = i; hexa[10]="a"; hexa[11]="b"; hexa[12]="c"; hexa[13]="d"; hexa[14]="e"; hexa[15]="f"; function hex(i) { if (i < 0) return "00"; else if (i > 255) return "ff"; else return "" + hexa[Math.floor(i/16)] + hexa[i%16]; } function setbgColor(r, g, b) { var hr = hex(r); var hg = hex(g); var hb = hex(b); document.bgColor = "#"+hr+hg+hb; } function fade(sr, sg, sb, er, eg, eb, step) { for(var i = 0; i <= step; i++) { setbgColor( Math.floor(sr * ((step-i)/step) + er * (i/step)), Math.floor(sg * ((step-i)/step) + eg * (i/step)), Math.floor(sb * ((step-i)/step) + eb * (i/step))); } } function fadein() { fade(Color(color_start).r,Color(color_start).g,Color(color_start).b,Color(color_end).r,Color(color_end).g,Color(color_end).b,20); } /* do fadein */ fadein(); /***** end fade script *****/ /************************************************************/ // --> </script>
Bookmarks