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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Location
    Amsterdam
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question how to get this function work for multiple div?

    hello,

    I posted a threat a couple of days ago, but i got no answer. I guess it was just too messy. So i'm trying over again. You might therefore have a little deja vu, but still, any help will be greatly appreciated.

    I need this function to work on all my div, separately, on loading.
    here is the function:

    Code:
    <script>
    // 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;// JavaScript Document
    
    </script>
    At the moment, the function is working on one object ('myObj'). I laced all my documents into separate divs and i need them all (and seperatly) to load on a random position at start. So i need to write in something that makes this function keep on going for all my objects.

    It might seem like a very dumb question, but 'm just starting with javascript, so not much of a coder yet. Hope you can help o this one.

    nice day to everybody!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Please post a working copy (with all required HTML).
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Location
    Amsterdam
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ok, here is my whole "code".
    I'm sorry it must look very messy.
    learning javascript by copy-pasting...


    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>marine delgado</title> 				
    
    <style>
    #myobj {background-color:#cccccc;visibility:hidden;position:absolute}
    </style>
    
    	<!--// function drag and drop, external style sheet--> 
    <script type="text/javascript" src="dragAndDrop.js"></script>
    
    
    	<!--// function random start position-->
    <script>
    
    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;}
    
    function objWidth(objectID) {var obj = xDOM(objectID,0); if(obj.offsetWidth) return obj.offsetWidth; if (obj.clip) return obj.clip.width; return 0;}
    
    function objHeight(objectID) {var obj = xDOM(objectID,0); if(obj.offsetHeight) return obj.offsetHeight; if (obj.clip) return obj.clip.height; return 0;}
    
    // 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.scrollLeft? document.documentElement.scrollLeft:document.body.scrollLeft? document.body.scrollLeft:0;}
    function posTop() {return typeof window.pageYOffset != 'undefined' ? window.pageYOffset:document.documentElement.scrollTop? 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;// JavaScript Document
    </script>
    
    
    </head>
    
    <body bgcolor="#9A9B95" background="background.jpg"> 
    <p align="center"> <b> my website </b> </p>
    
    <div id="myobj" style="position:absolute" >
    	<img src="files on size 72ppi/oblique strategies holes.jpg" width="595" height="842" style="position:absolute" class="dragme"/>
    </div>
    
    <div id="div2">
      <img src="files on size 72ppi/oblique strategies choices.jpg" width="842" height="595" style="position:absolute" class="dragme" />
    </div>
    
    <!-- further on, all the other files... same coding
     
    </body>
    </html>

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Ummm...are you *REALLY* worried about supporting MSIE 4 and Netscape 4???

    After all, both those products became obsolete roughly 10 years ago.

    And the funny part is that you also have this code:
    <script type="text/javascript" src="dragAndDrop.js"></script>
    and I guarantee you that drag and drop didn't work in MSIE 4 or NS 4.

    Isn't it about time you moved into the real 21st century?

    This gets rid of *some* of the ancient code. Too hard to figure out all of the unneeded stuff.
    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>marine delgado</title> 				
    
    <style>
    #myobj {background-color:#cccccc;visibility:hidden;position:absolute}
    </style>
    
    <!--// function drag and drop, external style sheet--> 
    <script type="text/javascript" src="dragAndDrop.js"></script>
    
    <script type="text/javascript">
    // Misc Object Functions
    function setObjVis(id,vis) { document.getElementById(id).style.visibility = vis; }
    function moveObjTo(id,x,y) { var obj = document.getElementById(id); obj.style.left = x; obj.style.top = y; }
    function objWidth( id ) 
    { 
        var obj = document.getElementById(id); 
        if(obj.offsetWidth) return obj.offsetWidth; 
        if (obj.clip) return obj.clip.width; 
        return 0;
    }
    function objHeight( id ) 
    {
        var obj = document.getElementById(id);
        if(obj.offsetHeight) return obj.offsetHeight; 
        if (obj.clip) return obj.clip.height; 
        return 0;
    }
    // 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.scrollLeft
                    ? document.documentElement.scrollLeft
                    : document.body.scrollLeft
                         ? document.body.scrollLeft
                         : 0;
    }
    function posTop() {return typeof window.pageYOffset != 'undefined' ? window.pageYOffset:document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop?document.body.scrollTop:0;}
    
    // Random Position Script
    function randomPos( id )
    {
        var xxx = Math.floor(Math.random()* (pageWidth()-230));
        var yyy = Math.floor(Math.random()* (pageHeight()-50));
        moveObjTo( id, posLeft()+xxx, posTop()+yyy );
        setObjVis( id, 'visible' );
    }
    
    function start() 
    {
        randomPos( "myobj" );
        randomPos( "div2" );
    }
    
    window.onload = start;
    window.onscroll = start;
    </script>
    
    
    </head>
    
    <body bgcolor="#9A9B95" background="background.jpg"> 
    <p align="center"> <b> my website </b> </p>
    
    <div id="myobj" style="position:absolute" >
    	<img src="files on size 72ppi/oblique strategies holes.jpg" width="595" height="842" style="position:absolute" class="dragme"/>
    </div>
    
    <div id="div2">
      <img src="files on size 72ppi/oblique strategies choices.jpg" width="842" height="595" style="position:absolute" class="dragme" />
    </div>
    
    <!-- further on, all the other files... same coding
     
    </body>
    </html>
    The stuff in red is the truly new code.
    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:

    marinedel (06-20-2010)

  • #5
    New to the CF scene
    Join Date
    Jun 2010
    Location
    Amsterdam
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    haha, thank you so much!

    I'm a bit ashamed off the messiness and obsolescence of my "style".
    But i guess you have to begin somewhere, for me it started with copy pasting (too) old scripts. I'm going to try this all out, get back to you for more thanks soon i guess.

  • #6
    New to the CF scene
    Join Date
    Jun 2010
    Location
    Amsterdam
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    It seems that the random position isn't working...
    I get both elements to load on the top left corner of the window browser... ?
    any hints on the possible reason for that?

    Also, the element "div2" is visible during loading ( but this should be performed with the function "randomPos", so i guess fixing one will fix the other).

    I also have changed the intergers (230 and 50) in the last part of the function (in red) by the functions obj widht and height. I guess this is ok (but maybe i shouldn't put "(id)" ?



    Code:
    <script type="text/javascript">
    // Misc Object Functions
    function setObjVis(id,vis) { document.getElementById(id).style.visibility = vis; }
    function moveObjTo(id,x,y) { var obj = document.getElementById(id); obj.style.left = x; obj.style.top = y; }
    function objWidth( id ) 
    { 
        var obj = document.getElementById(id); 
        if(obj.offsetWidth) return obj.offsetWidth; 
        if (obj.clip) return obj.clip.width; 
        return 0;
    }
    function objHeight( id ) 
    {
        var obj = document.getElementById(id);
        if(obj.offsetHeight) return obj.offsetHeight; 
        if (obj.clip) return obj.clip.height; 
        return 0;
    }
    // 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.scrollLeft
                    ? document.documentElement.scrollLeft
                    : document.body.scrollLeft
                         ? document.body.scrollLeft
                         : 0;
    }
    function posTop() {return typeof window.pageYOffset != 'undefined' ? window.pageYOffset:document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop?document.body.scrollTop:0;}
    
    // Random Position Script
    function randomPos( id )
    {
        var xxx = Math.floor(Math.random()* (pageWidth()-objWidth(id)));
        var yyy = Math.floor(Math.random()* (pageHeight()-objHeight(id)));
        moveObjTo( id, posLeft()+xxx, posTop()+yyy );
        setObjVis( id, 'visible' );
    }
    
    function start() 
    {
        randomPos( "myobj" );
        randomPos( "div2" );
    }
    
    window.onload = start;
    window.onscroll = start;
    </script>
    
    
    </head>
    
    <body bgcolor="#9A9B95" background="background.jpg"> 
    <p align="center"> <b> my website </b> </p>
    
    <div id="myobj" >
    	<img src="files on size 72ppi/oblique strategies holes.jpg" width="595" height="842" style="position:absolute" class="dragme"/>
    </div>
    
    <div id="div2">
      <img src="files on size 72ppi/oblique strategies choices.jpg" width="842" height="595" style="position:absolute" class="dragme" />
    </div>
    
    <!-- further on, all the other files... same coding-->
     
    </body>
    </html>
    >

    well, not being a master coder, I am just going to go and hunt for typos,
    I'm looking forward to hear what you guys can find on this one!!

  • #7
    New to the CF scene
    Join Date
    Jun 2010
    Location
    Amsterdam
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ok, still dusty and not 21st century still, but taking off this part of the code disable the whole thing (and i'm not good enough to know why, unfortunatly).

    still, maybe this will be usefull for someone to start something new.
    a code for random start position:

    Code:
    <html>
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>drag and drop is now working, but that's the only thing...</title> 				
    <!--////the title that will appear on the top of your browser-->
    
     
    <style>
    #myobj {background-color:#cccccc;visibility:hidden;position:absolute}
    #div2 {background-color:#cccccc;visibility:hidden;position:absolute}
    #div3 {background-color:#cccccc;visibility:hidden;position:absolute}
    #div4 {background-color:#cccccc;visibility:hidden;position:absolute}
    #div5 {background-color:#cccccc;visibility:hidden;position:absolute}
    #div6 {background-color:#cccccc;visibility:hidden;position:absolute}
    #div7 {background-color:#cccccc;visibility:hidden;position:absolute}
    </style>
    
    
    
    	<!--// function drag and drop, external style sheet--> 
    <script type="text/javascript" src="dragAndDrop.js"></script>
    
    	
    
    <!--// function random start position-->
    <script>
    
    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(id,vis) 
    {var objs = xDOM(id,1); objs.visibility = vis;}
    
    function moveObjTo(id,x,y) 
    {var objs = xDOM(id,1); objs.left = x; objs.top = y;}
    
    function objWidth(objectID) 
    {
    var obj = xDOM(objectID,0); 
    if(obj.offsetWidth) return obj.offsetWidth; 
    if (obj.clip) return obj.clip.width; return 0;
    }
    
    function objHeight(objectID) 
    {
    var obj = xDOM(objectID,0); 
    if(obj.offsetHeight) return obj.offsetHeight; 
    if (obj.clip) return obj.clip.height; return 0;
    }
    
    
    
    // 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.scrollLeft
                    ? document.documentElement.scrollLeft
                    : document.body.scrollLeft
                         ? document.body.scrollLeft
                         : 0;
    }
    function posTop() 
    {
    	return typeof window.pageYOffset != 'undefined'
    		 ? window.pageYOffset
    		 : document.documentElement.scrollTop
    		 		? document.documentElement.scrollTop
    				: document.body.scrollTop
    					? document.body.scrollTop
    					:0;
    }
    
    
    // Random Position Script
    function randomPos( id )
    
    {
    var xxx = Math.floor(Math.random()* (pageWidth() - objWidth(id)));
    var yyy = Math.floor(Math.random()* (pageHeight() - objHeight(id)));
    var x = (posLeft()+xxx) + 'px'; 
    var y = (posTop()+yyy) + 'px';
        
        moveObjTo( id,x,y );
        setObjVis( id, 'visible' );
    }
    
    function start() 
    {
        randomPos( "myobj" );
        randomPos( "div2" );
    	randomPos( "div3" );
    	randomPos( "div4" );
    	randomPos( "div5" );
    	randomPos( "div6" );
    	randomPos( "div7" );
    }
    
    window.onload = start;
    
    </script>
    
    
    
    </head>
    
    
    <body bgcolor="#9A9B95">
    <p align="left"> info blabla my website
    <a href="mailto:info@mywebsite.com" class="style1"> Mail </a></font></p>
      
    <div id="myobj" style="position:absolute" title="When we were kings" >
      <img src="files on size 72ppi/movie posters/movie-poster-ali.gif" width="500" height="740" style="position:absolute" class="dragme"/>
    </div>
    
     
    <div id="div2" style="position:absolute" title="the slaves of the vision">
      <img src="files on size 72ppi/slave-of-the-vision.gif" width="462" height="264" style="position:absolute" class="dragme" />
    </div>
    
    
    <div id="div3" style="position:absolute" title="drawings">  
      <img src="files on size 72ppi/drawing 2009/reproduction_0026.jpg" width="357" height="506" style="position:absolute" class="dragme" />
    </div>
    
    <div id="div4" style="position:absolute" title="let's do business" > 
    <img src="files on size 72ppi/let's do business/Stock_Reply-shuterstock.jpg" width="350" height="664" style="position:absolute" class="dragme"/
    
    </div>
    
    <div id="div5" style="position:absolute" title="Lost information">
      <img src="files on size 72ppi/Lost_information/campingnature-(1).jpg" width="315" height="350" style="position:absolute" class="dragme"/> 
    </div>
    
    <div id="div6" style="position:absolute" title="oblique strategies">
    <img src="files on size 72ppi/obliques_strategies/oblique-strategies-choices.gif" width="358" height="253" style="position:absolute" class="dragme" />
    </div>
     
    <div class="style1" id="div7" style="position:absolute" title="Type manual/Grid systems">
    <img src="files on size 72ppi/type maual/gridniks-final.gif" width="260" height="196" style="position:absolute" class="dragme" /></div>
    
      
    </body>
    </html>


  •  

    Tags for this Thread

    Posting Permissions

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