SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    styling fonts in javascript arrays?

    hi
    i am new to javascript but trying to get a handle on it. i have a javascript that prints a random array message:
    Code:
    <SCRIPT>
    quote0= "Time is on our side. -John Mervish";
    quote1= "A bird in the hand is worth two in the bush. -Frank Templeton";
    quote2= "But I dont have the wings and I wonder why. -Miss Prince";
    var ran_unrounded=Math.random()*2;
    var ran_number=Math.round(ran_unrounded);
    document.write(eval("quote"+ran_number));
    </SCRIPT>
    anyway, the code is styled by a wrapper <div id="dottedsidebar">, but i want to have more than one style to each line (expample quote0: have 'Time' in bold, have '-John Mervish' in #FF0000 and 2px smaller while rest of quote is #000000). how can i achieve this?

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can put different portions of each quote in a <span> and then style each <span> as you like.

    btw - the variables you have there are not an array or elements of an array.

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the post. so you are saying that i can assign <span> tags to javascript fonts and style them? i will give that a try! and you posted that it is not an array? sorry am learning. question: is styling through javascript the same as css? eg -
    Code:
    quote0= "<span class="treatment_a">Time</span> is on our side. -John Mervish";

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by stros View Post
    and you posted that it is not an array?
    Code:
    <SCRIPT>
    var quote=new Array(); // regular array (add an optional integer
    quote0="Time is on our side. -John Mervish";       // argument to control array's size)
    quote1="A bird in the hand is worth two in the bush. -Frank Templeton";
    quote2="But I dont have the wings and I wonder why. -Miss Prince";
    var ran_unrounded=Math.random()*2;
    var ran_number=Math.round(ran_unrounded);
    document.write(eval("quote"+ran_number));
    </SCRIPT>
    So now you are creating an array called "quote" that you never use and variables called "quote0", "quote1" etc that have values.

    The JavaScript to do what you expect that code to do is:

    Code:
    var quote=["Time is on our side. -John Mervish",
    "A bird in the hand is worth two in the bush. -Frank Templeton",
    "But I dont have the wings and I wonder why. -Miss Prince"];
    document.write(quote[Math.floor(Math.random()*quote.length)];
    You might also consider setting up an id in the page where the quote is to go and then replace the document.write with document.getElementById(xxx).innerHTML so that the script can be kept out of the HTML and can be run after tha page has loaded.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by stros View Post
    thanks for the post. so you are saying that i can assign <span> tags to javascript fonts and style them? i will give that a try! and you posted that it is not an array? sorry am learning. question: is styling through javascript the same as css? eg -
    Code:
    quote0= "<span class="treatment_a">Time</span> is on our side. -John Mervish";
    you're not accessing an array element with quote0.

    There are a few ways you can create an array. The "traditional" ways are

    Code:
     
    var myArray = new Array();
    myArray[0] = 'value 1';
    myArray[1] = 'value 2;
    myArray[2] = 'value 3';
    or simply

    Code:
     
    var myArray = new Array('val 1','val 2','val 3');
    and to use an array element in your script the syntax is typically
    Code:
     
    alert(myArray[2]);

  6. #6
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the help all. i really appreciate it.

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the help all. i really appreciate it. Felgall, i attempted to incorporate the ID tagging in my html document, but for whatever reason it wont work. i have a
    Code:
    <div id="ranQuote"></div>
    and then the script
    Code:
    var quote=["Time is on our side. -John Mervish",
    "A bird in the hand is worth two in the bush. -Frank Templeton",
    "But I dont have the wings and I wonder why. -Miss Prince"];
    document.getElementById('ranQuote').innerHTML (quote[Math.floor(Math.random()*quote.length)]);
    but nothing appears. surely i am missing somthing, i have looked around online trying to sort out this issue but i cannot get it to display. what am i missing here?

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by stros View Post
    but nothing appears. surely i am missing somthing, i have looked around online trying to sort out this issue but i cannot get it to display. what am i missing here?
    Are you attempting to run the script before the ranQuote even exists?

    Move the script to the end of the body, just before the </body> tag, or use some page onload event so that the script runs after the body content comes in to existence.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •