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 8 of 8
  1. #1
    New Coder
    Join Date
    Dec 2003
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do I pass variable to change font size, etc.

    I would like to be able to change the font size and color using variables. For example, let's say I have the following variables:

    var myfontsize=10
    var myfontcolor="00FF00"




    Now, I want to put these variables in the code that displays"Hello world"

    <p><font color="#FF0000" size="6">Hello World</font></p>




    I've tried different methods of putting these variables in, but it never works. Either I am doing something wrong or I have failed to put in some special coding. Any ideas?

  • #2
    New Coder
    Join Date
    Dec 2003
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It is possible to do with Javascript (I'll use the onMouseOver event as an example):

    <p><font color="#FF0000" size="6" onMouseOver="color='myfontcolor'">Hello World</font></p>

    but a much better option is to use CSS (Casscadign Style Sheets). This goes in between the <HEAD> and </HEAD> section of your webpage:


    <style type="text/css">
    #new-id { font-size: 10pt; color: #00FF00; }
    </style>


    It then depends on the event that triggers the change in the font. Again I'll use the mouseover event.

    <p><font color="#FF0000" size="6" onMouseOver="id='new-id'">Hello World</font></p>


    Or, you could just say <p><font color="#FF0000" size="6" onMouseOver="style='font-size: 10pt; color: #00FF00'">Hello World</font></p>


    Hope this helps

    Murdz
    Spiral Out

  • #3
    New Coder
    Join Date
    Dec 2003
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I need a different variation of this

    Thanks for your response. Although your coding will not work with the project I had in mind, I will be able to use it on another project. Thanks.

    Here is a little more info on the project I had in mind. I'm creating some variables (font size and color) on Page1 and passing them over to Page2. I want to be able change the font color and size on Page2 depending on what happens on Page1. Therefore, I would need to have the changes take place as soon as page2 opens (or immediately after).

    I'm not even sure this is possible, but I would appreciate any help or input you can provide.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Then you just document.write it wherever you want it placed.

    <p>
    <script type="text/javascript">
    document.write('<font color="'+myfontcolor+'" size="'+myfontsize+'">Hello World</font>');
    </script>
    </p>

    Since font tag is deprecated, you can use span and CSS.

    document.write('<span style="color:'+myfontcolor+';font-size:'+myfontsize+'pt">Hello World</span>');
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    New Coder
    Join Date
    Dec 2003
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    One last piece to the puzzle

    Yep, that worked great. That allows me to change the size of everything that I need to change except for one thing. I have one more piece of text that I still need to adjust. This piece of text is a bit more tricky to adjust.

    Basically, I have a counter that counts the number of seconds that accumulate. The display on this counter is what I need to be able to adjust. I need to be able to increase and decrease in size of the number (plus change the color). Listed below is the coding for the counter. The problem I have run into is I don't know how to use the "document.write" approach to change the font size and color. The counter uses the "<input type= " approach to display the number. Any ideas on how to do this? Once again, I want to thank you for helping me with the other problems.



    <table border="0" width="311" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
    <tr>
    <td align="center" width="305"><form name="d">
    <p>






    <input type="text" size="7" name="d2" style="font-family: Arial MT Black; font-size: 60pt; text-align: center; color: #FF0000;







    padding: 0"></p>
    </form>
    </td>
    </table>
    </center>
    </div>
    <script>


    var newstart=100
    var milisec=0
    var seconds=newstart
    document.d.d2.value='0'
    function display(){
    if (milisec>=9){
    milisec=0
    seconds+=1
    }
    else
    milisec+=1

    Number.prototype.insertComma = function(){
    var s = this.toString();
    var temp = '';
    for (var i=s.length-1;i>=0;i-=3){
    if ((i-3)>=0) temp = "," + s.substr(i-2, 3) + temp;
    else temp = s.substring(0, i+1) + temp;
    }
    return temp;
    }

    document.d.d2.value = seconds.insertComma() + "." + milisec
    setTimeout("display()",100)
    }
    display()
    //-->
    </script>

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts

    different approach

    <script>


    var newstart=100
    var milisec=0
    var seconds=newstart
    document.d.d2.style.fontSize=sizeVariable + 'pt'; //or 'px' or whatever dimension
    document.d.d2.style.color=colorVariable;
    document.d.d2.value='0'


    I noticed that the insertComma() function (which I believe is my code ) is nested in another function. You should take it out so that you can call it anywhere in the page.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #7
    New Coder
    Join Date
    Dec 2003
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You're right Glenn, the insert comma function was yours. In fact, I might have to call this the Glenn counter system because of all of your help.

    Your last suggestion took care of the problem with the font size and color. I have one last issue that deals with altering the counter display. I tried to use the same approach to the character width (the number of characters the counter field will hold). As you can see from the code below, the code is:

    size="7"

    This means that the field will hold up to 7 characters. I need to be able to increase and decrease that number. I tried the following code, but that didn't work:

    document.d.d2.style.size=widthVariable;




    Any ideas? Listed below is the same code I posted in my previous message:

    <input type="text" size="7" name="d2" style="font-family: Arial MT Black; font-size: 90pt; text-align: center; color: #FF0000; padding: 0"></p>

  • #8
    New Coder
    Join Date
    Dec 2003
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I found the solution

    Thanks again guys for your help. I was able to try different variations of the coding and found the answer. Basically, this is what I found: The first coding is simular to what I need to use to change the color and font size. (it uses the .style. )

    document.d.d2.style.size=widthVariable;



    However, I discovered that I can't use the .style. portion in the coding. Listed below is the coding that I found that works:

    document.d.d2.size=widthVariable;



    Thanks again for your help.


  •  

    Posting Permissions

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