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
    Sep 2005
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change text color

    I would like to change the color of a single line of text, but am unclear on how to do that. Any assistance is greatly appreciated. Here is my code:

    <HEAD>
    <SCRIPT>
    <!--Hide script from old browsers
    function bar(widthPct){
    document.write("<HR ALIGN='left' WIDTH=" + widthPct + "%>");
    }
    function output(headLevel, headText, text) {
    document.write("<H" , headLevel, ">", headText, "</H",
    headLevel, "><P>", text)
    }
    </SCRIPT>
    </HEAD>

    <BODY>
    <script>
    bar(10)
    var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service."
    document.write (quote)
    var quote=" This is a brand new website."
    document.write(quote)
    </script>
    <P> This is some standard HTML, unlike the above that is generated.

    </BODY>

  • #2
    Regular Coder
    Join Date
    Dec 2003
    Posts
    132
    Thanks
    0
    Thanked 0 Times in 0 Posts
    you wouldnt use javascript although you could...

    either go

    <p style="color:red;">this will be red</p>

    or

    <font color="red">this will also be red</font>
    UNDER CONSTRUCTION

  • #3
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    Well, to change color, you can do:

    <font color="#FF0000">This text is red</font>

    Or you can use styles for an html object and specify that all the font within that object is red.

    On a sidenote, in your script for the function output, set up your document.write like I did below. You have commas instead of plus signs.

    Code:
    document.write("<H" + headLevel + ">" + headText + "</H" + headLevel + "><P>" + text)
    EDIT: Warhammer beat me to it, hehe. You can see how to use style in his example. You can set this in any object, not just the <p> object.

    -Shane
    Last edited by TheShaner; 09-28-2005 at 09:20 PM.

  • #4
    New Coder
    Join Date
    Sep 2005
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Two questions.. if I wanted to change just the first line, where would I place that tag, so that only that text changes color. Also.. how could I achieve the same effect with JavaScript, which was the initial reason for my question. For instance, if I wanted to change the Cremation of Sam McGee to brown, how?Thanks!
    Last edited by sangren; 09-28-2005 at 10:03 PM.

  • #5
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    What first line and what javascript line? For javascript, you'd just put in your document.write what we suggested. Either putting what you want in a different color between the font tags or changing the color using style. If you meant the line below:
    Code:
    <P> This is some standard HTML, unlike the above that is generated.
    Then do:
    Code:
    <P style="color:red"> This is some standard HTML, unlike the above that is generated.
    Or:
    Code:
    <P><font color="red"> This is some standard HTML, unlike the above that is generated.</font>
    In Javascript:
    Code:
    document.write("<H" + headLevel + ">" + headText + "</H" + headLevel + "><P style=\"color:red\">" + text);
    Notice I didn't do anything in JavaScript to actually make the text red. I just included the style attribute in the P tag.

    -Shane
    Last edited by TheShaner; 09-28-2005 at 10:04 PM.

  • #6
    New Coder
    Join Date
    Sep 2005
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I must be missing something. When I preview it, nothing appears on the screen. Here is my code:
    <BODY>
    <script>
    bar(10)
    var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service."
    document.write(quote);
    var quote=" This is a brand new website."
    document.write(<P style=\"color:green\">" + quote);

  • #7
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    This line is missing a quotation: document.write(<P style=\"color:green\">" + quote);

    Change to:
    document.write("<P style=\"color:green\">" + quote);

    Also, are you at least getting that first line about reading the Cremation of Sam McGee? If not, then please post the entire code for the page and also wrap it in the code tags (highlight your code and click the pound sign on the page). Looking at your original post, I'm hope you have <html> to start the page and </html> at the end and just didn't post it on accident.

    -Shane

  • #8
    New Coder
    Join Date
    Sep 2005
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    To answer your question, yes I did accidentally leave the html tags out of my post, but they are there. The code did the trick, thanks for your assistance. I am curious about the javascript as well... I was under the impression that you could change text using document.fgColor trait.....

  • #9
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    Yes, you can use document.fgColor to change the color of everything in your page, unless certain text is specified with style or font. It's the same as setting the font color in your body tag. So that command won't change a certain line of text to your specifed color. It changes all the text in your document, or rather, html page.

    For example:
    <input name="changetored" type="button" onClick="document.fgColor="red">

    When you click that button, all your text will be changed to red except for the text between font tags that have a different color or text that is in an html object that has the styles color defined.

    -Shane

  • #10
    New Coder
    Join Date
    Sep 2005
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Where would I place such code?

  • #11
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    It's just an example of the use of document.fgColor. I wouldn't use that example at all. It was just to show you how the command document.fgColor could be used. Anyway, keep reading up on your html. Only use JavaScript if you absolutely have to or really have some kind of effect you want. It seems that you're throwing it in there in random places just because you can, hehe. Just layout your page on paper and then decide the best method for achieving the result. If you have any more questions, feel free to post again, but only when you have troubles finding a tutorial or something to help you, because we could go all day, weeks, and months instructing you on how to code every facet of your website. Good luck to you!

    -Shane

  • #12
    New Coder
    Join Date
    Sep 2005
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actually, I'm attempting to learn JavaScript so that I can add it to some AS400 webpages. I have a basic understanding of HTML and am trying to learn the specifics of Javascript. I am pretty well-versed with Java and javascript seems like a good approach to take. I only posted because I couldn't find an answer anywhere else and spent a long time searching for it. Now, I understand how to change the color.. how would I change the size of text in a line?

  • #13
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    Please read up on the <font> tag and styles. It would be using the same method as color but using the commands for font size.

    -Shane

  • #14
    New Coder
    Join Date
    Sep 2005
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code = <font size="25" face="Verdana" color=blue>document.write("You are visitor # <b>"+currenthits+"</b> to my site!")</font>

    I read up on font tags and assumed this would provide the desired result. Unfortunately, it did not and instead removed the entire script from the page. Help!!!!

  • #15
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    Code = <font size="25" face="Verdana" color=blue>document.write("You are visitor # <b>"+currenthits+"</b> to my site!")</font>
    Woah. When you do a document.write, it outputs what you have between (" and "). So you need the document.write to also include the font tags. You either do that or put the font tags OUTSIDE the script.

    Like:
    Code:
    document.write("<font size=25 face=Verdana color=blue>You are visitor # <b>"+currenthits+"</b> to my site!</font>");
    -Shane


  •  

    Posting Permissions

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