Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Junior Member
    Join Date
    Feb 2008
    Posts
    24
    Member #
    16485
    Hi everyone.....

    I am trying to have multiple divs load in random positions...... I have managed to get one div to work
    I am not sure what to add to the javascript to make it work.....

    this is my script below......


    ---------------------------------------------------------------------------------------------------
    <html>
    <head>
    <title>
    Random Start Position Test
    </title>

    <style>
    #myobj {background-color:#cccccc;visibility:hidden;position:absolute}
    </style>

    <script>
    // Cross Browser DOM
    var aDOM = 0, ieDOM = 0, nsDOM = 0; var stdDOM = document.getElementById; if (stdDOM) aDOM = 1; else {ieDOM = document.all; if (ieDOM) aDOM = 1; else { var nsDOM = ((navigator.appName.indexOf('Netscape') != -1) && (parseInt(navigator.appVersion) ==4)); if (nsDOM) aDOM = 1;}}
    function xDOM(objectId, wS) { if (stdDOM) return wS ? document.getElementById(objectId).style: document.getElementById(objectId); if (ieDOM) return wS ? document.all[objectId].style: document.all[objectId]; if (nsDOM) return document.layers[objectId]; }

    // More Object Functions
    function setObjVis(objectID,vis) {var objs = xDOM(objectID,1); objs.visibility = vis;}
    function moveObjTo(objectID,x,y) {var objs = xDOM(objectID,1); objs.left = x; objs.top = y;}

    // Browser Window Size and Position
    function pageWidth() {return window.innerWidth != null? window.innerWidth: document.body != null? document.body.clientWidth:null;}
    function pageHeight() {return window.innerHeight != null? window.innerHeight: document.body != null? document.body.clientHeight:null;}
    function posLeft() {return typeof window.pageXOffset != 'undefined' ? window.pageXOffset:document.documentElement.scroll Left? document.documentElement.scrollLeft:document.body. scrollLeft? document.body.scrollLeft:0;}
    function posTop() {return typeof window.pageYOffset != 'undefined' ? window.pageYOffset:document.documentElement.scroll Top? document.documentElement.scrollTop: document.body.scrollTop?document.body.scrollTop:0; }

    // Random Position Script
    var xxx = Math.floor(Math.random()* (pageWidth()-230));
    var yyy = Math.floor(Math.random()* (pageHeight()-50));

    function start() {var x = (posLeft()+xxx) + 'px'; var y = (posTop()+yyy) + 'px'; moveObjTo('myobj',x,y); setObjVis('myobj','visible');}
    window.onload = start;
    window.onscroll = start;
    </script>
    </head>
    <body>
    <div id="myobj">This is a web page object.</div>
    </body>
    </html>

    ---------------------------------------------------------------------------------------------------



    I hope u can help!


    ben

    d-e-p-i-c-t dot com

  2.  

  3. #2
    Senior Member imagn's Avatar
    Join Date
    Jul 2007
    Location
    Los Angeles
    Posts
    156
    Member #
    15594
    Look into looping through all the element types and performing whatever actions you want:

    As an example:

    var divs = document.getElementsByTagName('div');

    // for every div ...
    for ( var i = 0; i < divs.length; i++ ) {

    // ... with the class 'random' ...
    if ( 'random' != divs[i].className ) {
    continue;
    }

    // RUN WHATEVER ACTIONS
    }

  4. #3
    Junior Member
    Join Date
    Feb 2008
    Posts
    24
    Member #
    16485
    thanks imagn!

    perhaps you could elaborate as i don't know where to start with this.....

    could you provide more information - perhaps help me try to solve this! -
    it's a huge issue and one that i can't pass in order to move on with the website!

    -----------
    ben


    Quote Originally Posted by imagn
    Look into looping through all the element types and performing whatever actions you want:

    As an example:

    var divs = document.getElementsByTagName('div');

    // for every div ...
    for ( var i = 0; i < divs.length; i++ ) {

    // ... with the class 'random' ...
    if ( 'random' != divs[i].className ) {
    continue;
    }

    // RUN WHATEVER ACTIONS
    }

  5. #4
    Senior Member imagn's Avatar
    Join Date
    Jul 2007
    Location
    Los Angeles
    Posts
    156
    Member #
    15594
    You said you had your randomize code working for one div right?

  6. #5
    Junior Member
    Join Date
    Feb 2008
    Posts
    24
    Member #
    16485
    Quote Originally Posted by imagn
    You said you had your randomize code working for one div right?

    yes.....

    but configuring it for multiple is proving the hardest part....

  7. #6
    Senior Member imagn's Avatar
    Join Date
    Jul 2007
    Location
    Los Angeles
    Posts
    156
    Member #
    15594
    I think this should work for you:

    https://www.imagndesign.com/_testing/random_div.html

    If this is what you're looking for just pull the source code off the page.

  8. #7
    Junior Member
    Join Date
    Feb 2008
    Posts
    24
    Member #
    16485
    Quote Originally Posted by imagn
    I think this should work for you:

    https://www.imagndesign.com/_testing/random_div.html

    If this is what you're looking for just pull the source code off the page.
    wow!

    thank you for taking the time to work on it......
    i did a quick test... and there just appears a black box - unfortunately not changing on each refresh....

    nor are there numerous divs...

    anyway...i will take the code and play with it...thank you very much...

    if you have a little extra time to try to fix the problem...let me know!

    thanks imagn

  9. #8
    Senior Member imagn's Avatar
    Join Date
    Jul 2007
    Location
    Los Angeles
    Posts
    156
    Member #
    15594
    Yeah, sorry I didn't do a x-browser test... I'll take a look.

    It's got to do with the code for the DOM... It's recognizing everything but the attributes for both X and Y coords aren't right.

    IE is working and the section that needs to be adjusted is:

    function moveObjTo(objectID,x,y) {var objs = xDOM(objectID,1); objs.left = x; objs.top = y;}

  10. #9
    Junior Member
    Join Date
    Feb 2008
    Posts
    24
    Member #
    16485
    Quote Originally Posted by imagn
    Yeah, sorry I didn't do a x-browser test... I'll take a look.

    It's got to do with the code for the DOM... It's recognizing everything but the attributes for both X and Y coords aren't right.

    IE is working and the section that needs to be adjusted is:

    function moveObjTo(objectID,x,y) {var objs = xDOM(objectID,1); objs.left = x; objs.top = y;}
    ie works and opera.....

    got any ideas on the what to change there for mozilla to accept?...

  11. #10
    Senior Member imagn's Avatar
    Join Date
    Jul 2007
    Location
    Los Angeles
    Posts
    156
    Member #
    15594
    Ha, well it's always the easy stuff that's the hardest to find

    function moveObjTo(objectID,x,y) {var objs = xDOM(objectID,1); objs.left = x + 'px'; objs.top = y + 'px';}

    Needed to add "+ 'px'" to both X and Y coords...

    It's now working across all browsers.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

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

Search tags for this page

javascript random position multiple divs

,

multiple divs load in random positions

,

randomly position divs

Click on a term to search for related topics.
All times are GMT -6. The time now is 05:30 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com