Results 1 to 5 of 5

Thread: Random mix text position onload in a div

  1. #1
    Join Date
    Mar 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Random mix text position onload in a div

    Hi, hope someone can help me:

    I can find my way around html and css - beginner but have got my site up - and I wish to add to a div a group of mixed up text that changes positioning on load of page. The text to randomly change position that is not the div. Like keywords do in 192. directory.

    Found the following that seems to be about right but I cannot for the life of me get it to be inside a div. It only seems to work in body.

    This is what I found:
    Code:
    <html>
    <head>
    <style type='text/css'>
       body {
          border: 1px solid #000;
          height: 300px;
          margin: 0;
          padding: 0;
          width: 300px;
       }
     
       .box {
          height: 30px;
          position: absolute;
          width: auto;
       }
       
       #div1 { background:0;color:red; }
       #div2 { background:0;color:blue; }
       #div3 { background:0; color:green;}
    </style>
    <script type='text/javascript'>
       function setDivPos() {
          for (i=1; i<=3; i++) {
             var x = Math.floor(Math.random()*250);
             var y = Math.floor(Math.random()*250);
             document.getElementById('div'+i).style.left = x + 'px';
             document.getElementById('div'+i).style.top = y + 'px';
          }
       }
    </script>
    </head>
    <body onload='setDivPos();'>
    <div id='div1' class='box'>one word</div>
    <div id='div2' class='box'>another word</div>
    <div id='div3' class='box'>and so on</div>
    </body>
    </html>
    Anyone have time to help?
    Last edited by Beverleyh; 03-25-2014 at 05:37 PM. Reason: Formatting

  2. #2
    Join Date
    Mar 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    No one interested? Or am I posting incorrectly or something - or asking a silly question? Any help greatly appreciated.

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,935
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    11

    Default

    I'll assume that the body CSS is throwing you off a bit - it's quite unusual to set that as a specific width. Try taking the 'body' block out of the CSS so you're back to looking at a web page where the body element covers the whole browser window.

    It will probably make more sense to you after that so then you can put the 3 divs (with class of 'box') inside a container div and then style that how you want, with width, height, background-color, etc.

    If you need more help, please post a link to your page and the example web page you're trying to emulate.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  4. The Following User Says Thank You to Beverleyh For This Useful Post:

    Davey (03-26-2014)

  5. #4
    Join Date
    Mar 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks. Have followed your advice and will keep tinkering but unfortunately I still cant get the effect in the box (the pink box in the middle). In the meantime here is my updated code should any one be able to assist:
    Code:
    <html>
    <head>
    <style type='text/css'>
       
    	#middle_container	{margin:0 auto;height:400px;width:700px;background:pink;}
    
       .box {
          height: 30px;
          position: absolute;
          width: auto;
       }
       
       #div1 { background:0;color:red; }
       #div2 { background:0;color:blue; }
       #div3 { background:0; color:green;}
    </style>
    
    
    <script type='text/javascript'>
       function setDivPos() {
          for (i=1; i<=3; i++) {
             var x = Math.floor(Math.random()*250);
             var y = Math.floor(Math.random()*250);
             document.getElementById('div'+i).style.left = x + 'px';
             document.getElementById('div'+i).style.top = y + 'px';
          }
       }
    </script>
    </head>
    <body onload='setDivPos();'>
    <div id="middle_container">
    <div id='div1' class='box'>one word</div>
    <div id='div2' class='box'>another word</div>
    <div id='div3' class='box'>and so on</div>
    </div>
    
    </body>
    </html>

  6. #5
    Join Date
    Mar 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the advice. I have made suggested changes, tinkered a bit but still can't achieve the effect within the box. I'm guessing it is related to the script, possibly the bit that says body onload='setDivPos();' but know very little of this. I now have a box centered in the page but the text effect still happens in the top left corner. If I mess with it some more I can get the first div/text to show in the box but then the script effect doesn't work. Also, I can see how to make the text area larger but still can't move it's position - ?

    Here is the updated code just in case someone knows exactly what I am rambling about:
    Code:
    <html>
    <head>
    <style type='text/css'>
       
    	#middle_container	{margin:0 auto;height:400px;width:700px;background:pink;}
    
       .box {
          height: 30px;
          position: absolute;
          width: auto;
       }
       
       #div1 { background:0;color:red; }
       #div2 { background:0;color:blue; }
       #div3 { background:0; color:green;}
    </style>
    
    
    <script type='text/javascript'>
       function setDivPos() {
          for (i=1; i<=3; i++) {
             var x = Math.floor(Math.random()*250);
             var y = Math.floor(Math.random()*250);
             document.getElementById('div'+i).style.left = x + 'px';
             document.getElementById('div'+i).style.top = y + 'px';
          }
       }
    </script>
    </head>
    <body onload='setDivPos();'>
    <div id="middle_container">
    <div id='div1' class='box'>one word</div>
    <div id='div2' class='box'>another word</div>
    <div id='div3' class='box'>and so on</div>
    </div>
    
    </body>
    </html>
    192. directory has the effect I am looking for when you look up a business it has keywords at the bottom of the listing page that rearrange on load up/refresh.

    Thanks in advance.

Similar Threads

  1. A random content generator onload
    By nycNick in forum PHP
    Replies: 1
    Last Post: 03-02-2010, 11:15 PM
  2. random image onload
    By chechu in forum Looking for such a script or service
    Replies: 0
    Last Post: 11-27-2009, 12:36 PM
  3. Multiple Random image sets onload
    By jasonbender in forum JavaScript
    Replies: 5
    Last Post: 09-25-2008, 12:26 AM
  4. Random Text
    By distortia in forum HTML
    Replies: 1
    Last Post: 12-08-2007, 06:52 PM
  5. How to position text
    By magik in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 10-26-2007, 01:29 PM

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
  •