Results 1 to 4 of 4

Thread: Glowing Text Effect

  1. #1
    Join Date
    May 2007
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Glowing Text Effect

    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
    Last edited by tech_support; 05-26-2007 at 09:48 AM. Reason: I'm not blind you know.

  2. #2
    Join Date
    Feb 2007
    Location
    England
    Posts
    254
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Default

    This only works in IE, but it would be great if you could make a css glow function.


  3. #3
    Join Date
    May 2007
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Bob90 View Post
    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.

  4. #4
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    What you're using there isn't pure CSS, it's IE's ActiveX filters.
    Code:
     < 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.
    Code:
    < script type="text/javascript" >
    Again with the spaces.
    Code:
     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 pause
    Requiring 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.
    Code:
    mg=setTimeout('makeglow()',speed)
    This is inefficient. Pass an actual function object to the setTimeout() function, not a string.
    Code:
    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.
    Code:
    ug=setTimeout('unglow()',speed)
    Code:
    < 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, and the latest well-supported DOCTYPE is HTML 4.01 Strict -- 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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •