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 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Can't Place a Randomly Picked Word Where I Want To

    I've put some code together that randomly picks from a series of words and places it in a form box.

    The problem is that the word is always left justified in the text box form and it looks ugly on the page. I'd like to place it centered in the box (if it's possible)

    Any other suggestions on placing the word at a specific location are welcome. Also, I'd like it so that someone can press the button again and get another word.

    Thoughts?

    Thanks!
    PHP Code:
    <div style="position:absolute; left:157px; top:700px; width:414px; height:203px; " >

        <
    div id="frag_23" style="text-align:left; " >
    <
    SCRIPT LANGUAGE="JavaScript">
    <!--
    // Use the following variable to specify 
    // the number of random words
    var NumberOfWords 104

    var words = new BuildArray(NumberOfWords)

    // Use the following variables to 
    // define your random words:
    words[1] = "ACCEPTANCE "
    .
    .
    .
    .
    words[104] = "WISDOM "

    function BuildArray(size){
        
    this.length size
        
    for (var 1<= sizei++){
            
    this[i] = null}
        return 
    this
    }

    function 
    PickRandomWord(frm) {
        
    // Generate a random number between 1 and NumberOfWords
        
    var rnd Math.floor(Math.random() * NumberOfWords+1)

        
    // Display the word inside the text box
        
    frm.WordBox.value words[rnd]
    }
    //-->
    </SCRIPT>


        </div></div> 
    Last edited by VIPStephan; 08-14-2012 at 08:53 AM. Reason: added code BB tags

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,478
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Positioning is done with CSS only. Do you see that the script is executed inside a div there? It has an inline style of “text-align: left”. Change that, and you can also style it anyway you like with that.

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Code:
    <div style="text-align:center; position:absolute; left:33%; top:700px; width:33%; height:203px; " >
    
        <div id="frag_23" >
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #4
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the responses! Much appreciated. Still not working though. The text still isn't ending up in the center of the text. I'm wondering if there's some rogue code somewhere I'm not finding.

    Will keep cranking.

    Thanks again!

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Show the *FULL CODE*.

    You don't even show what frm is or what frm.WordBox is.

    Your method of building the words array is PAINFUL!

    language="javascript" is about 10 years obsolete.
    The need for <!--// and //--> disappear when MSIE 3 disappeared. About 1997 or 1998.

    Code:
    <script type="text/javascript">
    var words = ["ACCEPTANCE ","something ","else ", ..., "WISDOM "];
    
    function PickRandomWord(frm) {
        frm.WordBox.value = words[Math.floor(Math.random() * words.length)];
    }
    </script>
    Nothing more needed.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hoooly .....

    I seriously need to take a couple courses. That's impressive -thanks. I realized that I forgot to include everything when you mentioned it. Here it is; I cleaned it up a little...



    <FORM NAME="WordForm">
    <INPUT TYPE="TEXT" SIZE="50" text-align:"center" NAME="WordBox"><BR>
    <INPUT TYPE=BUTTON onClick="PickRandomWord(document.WordForm)"
    VALUE="Click Here to Get a Random Word">
    </FORM>


    <SCRIPT LANGUAGE="JavaScript">
    <!--
    // Use the following variable to specify
    // the number of random words
    var NumberOfWords = 104

    var words = new BuildArray(NumberOfWords)

    // Use the following variables to
    // define your random words:
    words[1] = "ACCEPTANCE "
    .
    .
    .
    words[104] = "WISDOM "

    function BuildArray(size){
    this.length = size
    for (var i = 1; i <= size; i++){
    this[i] = null}
    return this
    }

    function PickRandomWord(frm) {
    // Generate a random number between 1 and NumberOfWords
    var rnd = Math.floor(Math.random() * NumberOfWords+1)

    // Display the word inside the text box
    frm.WordBox.value = words[rnd]
    }
    //-->
    </SCRIPT>

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Wrong:
    Code:
    <INPUT TYPE="TEXT" SIZE="50" text-align:"center" NAME="WordBox"><BR>
    Correct:
    Code:
    <input type="text" size="50" style="text-align: center;" name="WordBox" /><br/>
    You don't have to use all lower case as I am doing there, but you should. Just as you should end your tags with />, expecially if you are using xhtml.

    But no matter what, test-align is *NOT* a property of any tag. It is part of the style of a tag, as shown.
    Last edited by Old Pedant; 08-15-2012 at 05:04 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Brilliant!

    I totally see that, and it works! Thank you!!!

    It makes total sense.

    Is there a simple way to detach the button from the text box? I pieced this code together (quite old code as you noticed) and I always thought that it would be cool to seperate the button from the text box but I think when I tried it I did something similar to what you pointed out - confusing style and tags.

    Again, profuse thanks for your help and patience!!

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Put the <form> tag as the VERY FIRST THING on the page, directly after the <body> tag.

    Put the </form> tag as the LAST THING on the page, just before the </body> (see exception, below).

    Now your form element (<input>,<select>,<textare>, etc.) can be ANY PLACE on the page.

    Except in the vanishingly rare case of needing two <form>s on one page, this should be your order of coding:
    Code:
    <html>
    <head>
    <style type="text/css">
    ...
    </style>
    <script type="text/javascript">
    // but this may not be best place for many scripts
    ...
    </script>
    </head>
    <body>
    <form ...>
    .... page contents ...
    </form>
    <script type="text/javascript">
    // optional placement for js code...
    // often the best place for it, actually
    ...
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    mplishka (08-15-2012)

  • #10
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks so much for the clarification and mini-lesson.

    I appreciate it greatly!!

  • #11
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,478
    Thanks
    6
    Thanked 981 Times in 954 Posts
    And don’t forget the doctype (“strict” recommended) on the very first line of your HTML document.

  • #12
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks!!!


  •  

    Posting Permissions

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