PDA

View Full Version : Glowing Text Effect



skripter
05-25-2007, 08:02 AM
This is a simple script you can use to create a pulsating glowing effect to a text of your web page. It is versatile too. You can adjust the parameter values to suit the style of the glow. The script allows you to change the speed, intensity and color of the glow effect. You can even set the pause time. The script basically only uses 4 functions with some CSS styling. CSS rocks! You can view the entire script by right clicking on this page and then viewing the source code

You can view it at this web pagehttp://members.aol.com/DJosepa2z/GlowingTextEffect.html

Bob90
05-25-2007, 08:17 AM
This only works in IE, but it would be great if you could make a css glow function.

:)

skripter
05-25-2007, 02:36 PM
This only works in IE, but it would be great if you could make a css glow function.

:)
Thanks for pointing this out.

I am wondering if CSS styling is browser friendly or will it also have browser compatibility issues.

Twey
05-25-2007, 04:37 PM
What you're using there isn't pure CSS, it's IE's ActiveX filters.
< style>
p.z
{
color:black;
font:bold;
width:100&#37;;
font-size:50;
text-align:center;
}
< /style>Tags should not have spaces in them before the tag name -- the space is used to separate attributes. Also, the type attribute is required.
< script type="text/javascript" >Again with the spaces.

i=0
var speed=150//set glow speed in milliseconds
var s=12//set glow intensity
var h='#0000ff'//set glow up color
var o='#ff0000'//set glow down color
var pause1=0//sets pause time for glow "down";1000=1 second;0=no pause
var pause2=0//sets pause time for glow "up";1000=1 second;0=no pauseRequiring global variables is usually (although not always) a sign that you're doing something wrong. In this case they should probably be passed as arguments to the function.
mg=setTimeout('makeglow()',speed)This is inefficient. Pass an actual function object to the setTimeout() function, not a string.
document.getElementById('myLink').style.filter="glow(color="+h+",strength=" + i + ")"This is very inflexible: what is the user supposed to do if he/she wants to style more than one element this way? Edit your code? Copy and paste? This is also the "filter" code that is responsible for breaking your script in all browsers but IE.
ug=setTimeout('unglow()',speed)
< p class="z" id="myLink">Hello and Welcome< /p>Again, the spaces; also, "z" is a very poor class name.

The demo page itself also has several errors (http://validator-test.w3.org/check?uri=http%3A%2F%2Fmembers.aol.com%2FDJosepa2z%2FGlowingTextEffect.html), and the latest well-supported DOCTYPE is HTML 4.01 Strict (http://validator-test.w3.org/check?uri=http%3A%2F%2Fmembers.aol.com%2FDJosepa2z%2FGlowingTextEffect.html&charset=&doctype=HTML+4.01+Strict&group=0) -- there's no need to use Transitional any more, and certainly no reason to still be using HTML 4.0.

Also, DD has rather a few of these scripts already, most of which are only slightly better quality. If you could produce a more flexible version, based on pure CSS, it would be good.
I am wondering if CSS styling is browser friendly or will it also have browser compatibility issues.CSS is very well-supported.