Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript & CSS together for Glowing Text Script Help

    Okay I've been searching all over the place on how to do stuff and I've got most of it completed pretty much... What I was originally doing was trying to make everybody on my forums be able to see the glowing text around staff members names... But that didn't work since there are some members who use Netscape browsers which do not support the filter:glow in CSS... So I had to figure out how to make it work so I came up with using Javascript to tell if the user is using Internet Explorer or another browser and I got it working for the most part...

    if in my Javascript I add </script> before the <style> tags and then re-open the javascript after </style> tags it adds the glow - but it runs both sets of code instead of only the one I want... It'll be more clear when I show you my code..

    Code:
    <SCRIPT language="JavaScript">
    <!--
    var browserName=navigator.appName;
    if (browserName=="Microsoft Internet Explorer") {
    // IE codes...
    <style type="text/css">
    #admin{ color=#fefefe; font-weight=bold;
    filter:glow(color=0000FF,strength=3); width=100%
    }
    #mod{ color=#fefefe; font-weight=bold;
    filter:glow(color=05848C, strength=3); width=100%
    }
    #dstaff{ color=#fefefe; font-weight=bold;
    filter:glow(color=9704A0, strength=3); width=100%
    }
    #tstaff{ color=#fefefe; font-weight=bold;
    filter:glow(color=FF9900, strength=3); width=100%
    }
    </style>
    }else
    
    {
    <style type="text/css">
    #admin{ color=#0000FF; font-weight=bold; width=100%
    }
    #mod{ color=#05848C; font-weight=bold; width=100%
    }
    #dstaff{ color=#9704A0; font-weight=bold; width=100%
    }
    #tstaff{ color=#FF9900; font-weight=bold; width=100%
    }
    </style>
    }
    //-->
    </SCRIPT>
    Okay - so the first set is supposed to run only when the user is running Internet Explorer - the second set is supposed to run only when using any other browser other than Internet Explorer..

    Any Tips on how I can edit the code to work?
    Last edited by Tree Killers; 03-05-2005 at 04:54 AM. Reason: Changed Title

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    don't use JavaScript to do it....

    Use CSS...You can find info here:
    http://www.thesitewizard.com/css/excludecss.shtml

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I read through that page twice and I have no clue what your talking about to use CSS for....

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    he was referring to the conditional comments for example this is one of them
    Code:
    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="iespecific.css" />
    <![endif]-->
    and its pretty straight forward, if its IE 6 then use that css file. does that make sense? those comments you see on that page aren't just comments they are comments similar to using a javascript to detect which browser is which but its using conditional comments instead to spit out the right style sheet, this way is more "cross browser" friendly because i dont think javascript has to be enabled for them to work, dont quote me on that
    Last edited by _Aerospace_Eng_; 03-05-2005 at 07:35 AM.

  • #5
    New Coder
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    and I put some code in there and it did absolutely nothing... I don't know much about CSS except how to make the text glow pretty much... so I have no clue how to use the code even now that I see it...

    Like how would I put it to be..

    if user is using IE do this code

    otherwise do this code


    ??
    Last edited by Tree Killers; 03-05-2005 at 08:01 AM.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    here try this page in IE and Netscape
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Exclude CSS</title>
    <style type="text/css">
    body {background:#0000FF;}
    </style>
    <!--[if IE 6]>
    <style type="text/css">
    body {background:#000000;}
    </style>
    <![endif]-->
    </head>
    
    <body>
    </body>
    </html>
    in IE 6 it displays the background but any other browser it displays the blue one

  • #7
    New Coder
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay so I took your example and added my code into it like this..

    Code:
    <style type="text/css">
    #admin{ color=#0000FF; font-weight=bold; width=100%
    }
    #mod{ color=#05848C; font-weight=bold; width=100%
    }
    #dstaff{ color=#9704A0; font-weight=bold; width=100%
    }
    #tstaff{ color=#FF9900; font-weight=bold; width=100%
    }
    </style>
    <style type="text/css">
    <!--[if gte IE 5]>
    #admin{ color=#fefefe; font-weight=bold;
    filter:glow(color=0000FF,strength=3); width=100%
    }
    #mod{ color=#fefefe; font-weight=bold;
    filter:glow(color=05848C, strength=3); width=100%
    }
    #dstaff{ color=#fefefe; font-weight=bold;
    filter:glow(color=9704A0, strength=3); width=100%
    }
    #tstaff{ color=#fefefe; font-weight=bold;
    filter:glow(color=FF9900, strength=3); width=100%
    }
    <![endif]-->
    </style>
    Now yes when in IE the glow is there with a white center how i want it - but in Mozilla Fire-Fox the colors haven't changed at all...

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    try moving the comments outside of the style tags
    Code:
    <!--[if gte IE 5]>
    <style type="text/css">
    #admin{ color=#fefefe; font-weight=bold;
    filter:glow(color=0000FF,strength=3); width=100%
    }
    #mod{ color=#fefefe; font-weight=bold;
    filter:glow(color=05848C, strength=3); width=100%
    }
    #dstaff{ color=#fefefe; font-weight=bold;
    filter:glow(color=9704A0, strength=3); width=100%
    }
    #tstaff{ color=#fefefe; font-weight=bold;
    filter:glow(color=FF9900, strength=3); width=100%
    }
    </style>
    <![endif]-->

  • #9
    New Coder
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I did that and it still didnt change the color when viewed in Firefox....

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    sighs, this is what i get for not going to bed early last night, in css tyou dont use = you use a : fix those and it should work (didn't even catch that mistake the first time) so it should look like this
    Code:
    <style type="text/css">
    #admin{ color:#0000FF; font-weight:bold; width:100%
    }
    #mod{ color:#05848C; font-weight:bold; width:100%
    }
    #dstaff{ color:#9704A0; font-weight:bold; width:100%
    }
    #tstaff{ color:#FF9900; font-weight:bold; width:100%
    }
    </style>
    <!--[if gte IE 5]>
    <style type="text/css">
    #admin{ color:#fefefe; font-weight:bold;
    filter:glow(color=0000FF,strength=3); width:100%
    }
    #mod{ color:#fefefe; font-weight:bold;
    filter:glow(color=05848C, strength=3); width:100%
    }
    #dstaff{ color:#fefefe; font-weight:bold;
    filter:glow(color=9704A0, strength=3); width:100%
    }
    #tstaff{ color:#fefefe; font-weight:bold;
    filter:glow(color=FF9900, strength=3); width:100%
    }
    </style>
    <![endif]-->
    check out www.w3schools.com for more info on css
    Last edited by _Aerospace_Eng_; 03-06-2005 at 04:08 AM.

  • #11
    New Coder
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    HA! Thank you so much! That worked.... You helped me tons!

    Now it works in both browsers and in Netscape it looks the way it should and in IE it has a little bit of a formatting error..



    It should be like this:


    Note: the first one is IE and the second on is Firefox - I want em to be next to each other, but in IE they are ontop one another...
    Last edited by Tree Killers; 03-06-2005 at 04:40 AM.

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    we need to see the html coding you are using along with the css in order to give you a decent answer, or even better give us a link?

  • #13
    New Coder
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'll give you a link but you might laugh when you see it... I'm not done with hardly any of the graphics and some of them are going to be changed... BTW did I mention this is for my forums?

    http://s9.invisionfree.com/GFX_Zone

    if you need a Username and PW I have one set up for testing that you could use...

  • #14
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    okay take out the widths in the css you have conditional statements for, span elements only extend the width of what is in them since you have 100% they are moving to the next line so try this
    Code:
    <!--[if gte IE 4]>
    <style type="text/css">
    #admin{ color:#fefefe; font-weight:bold;
    filter:glow(color=0000FF,strength=3);
    }
    #mod{ color:#fefefe; font-weight:bold;
    filter:glow(color=05848C, strength=3);
    }
    #dstaff{ color:#fefefe; font-weight:bold;
    filter:glow(color=9704A0, strength=3);
    }
    #tstaff{ color:#fefefe; font-weight:bold;
    filter:glow(color=FF9900, strength=3);
    }
    </style>
    <![endif]-->
    see if that fixes it

  • #15
    New Coder
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nope still did it... and now I'm logged in with 2 accounts so you can see how it affects the users online table too...

    EDIT: When I removed the width:100% from the netscape code too it made it so that it wouldn't even do any of the code... At least in IE - in Firefox it still gives me the colors...

    If ya want - (might be a bit quicker anyhow) you can im me on aim @ jblck23
    Last edited by Tree Killers; 03-06-2005 at 05:35 AM.


  •  

    Posting Permissions

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