www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] Random/rotate Script

  1. #1
    Join Date
    Feb 2010
    Posts
    6

    resolved [RESOLVED] Random/rotate Script

    Hi Everyone,

    I have a page with multiple div's.
    I'm searching for a script that will make them randomly switch places at refresh.
    So I want ALL of them to load, but at different places each time. (it would be perfect if none of them showed twice)

    I've been searching, but so far I can only find scripts that show one image out of several.

    There must be a way to do this!? Can anyone help?

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,436
    Have you started any JS or HTML attempt as to what the layout and contents (image files) are to look like?

  3. #3
    Join Date
    Feb 2010
    Posts
    6
    I tried some different js scripts but removed them again.

    The layout is fairly simple, just some 95x95px divs with borders, and text or image content, some css with image hovers. The divs are linked to open greybox, and are not positioned.

    That's all.

    html:
    <div class="afb1"><a href="afb1.html" rel="gb_page_center[506, 506]"> </a></div>
    <div class="afb2"><a href="afb2.html" rel="gb_page_center[506, 506]"> </a></div>

    css.
    .afb1 a {
    height: 95px;
    width: 95px;
    border: 2px solid #5C97C9;
    margin: 3px;
    background-image: url(afb1a.jpg);
    }
    .afb1 a:hover {
    height: 95px;
    width: 95px;
    border: 2px solid #5C97C9;
    margin: 3px;
    background-image: url(afb1b.jpg);

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,436

    Lightbulb Consider these changes ...

    Well, you didn't give much information to work with
    (image links, number of images, image URLs, etc),
    nor the image display sample, so here's a simplified attempt.

    Code:
    <html>
    <head>
    <title>Random Image Positions</title>
    <script type="text/javascript">
    // Modified for: http://www.webdeveloper.com/forum/showthread.php?p=1065400#post1065400
    
    var imageList = [
      'http://www.nova.edu/hpd/otm/pics/4fun/11.jpg|URL11.html',
      'http://www.nova.edu/hpd/otm/pics/4fun/12.jpg|URL12.html',
      'http://www.nova.edu/hpd/otm/pics/4fun/13.jpg|URL13.html',
      'http://www.nova.edu/hpd/otm/pics/4fun/14.jpg|URL14.html',
      'http://www.nova.edu/hpd/otm/pics/4fun/15.jpg|URL15.html',
      'http://www.nova.edu/hpd/otm/pics/4fun/21.jpg|URL21.html',
      'http://www.nova.edu/hpd/otm/pics/4fun/22.jpg|URL22.html',
      'http://www.nova.edu/hpd/otm/pics/4fun/23.jpg|URL23.html',
      'http://www.nova.edu/hpd/otm/pics/4fun/24.jpg|URL24.html',
      'http://www.nova.edu/hpd/otm/pics/4fun/25.jpg|URL25.html',
      'http://www.nova.edu/hpd/otm/pics/4fun/31.jpg|URL31.html',
      'http://www.nova.edu/hpd/otm/pics/4fun/32.jpg|URL32.html',
      'http://www.nova.edu/hpd/otm/pics/4fun/33.jpg|URL33.html',
      'http://www.nova.edu/hpd/otm/pics/4fun/34.jpg|URL34.html',
      'http://www.nova.edu/hpd/otm/pics/4fun/35.jpg|URL35.html',
      'http://www.nova.edu/hpd/otm/pics/4fun/41.jpg|URL41.html',
      'http://www.nova.edu/hpd/otm/pics/4fun/42.jpg|URL42.html',
      'http://www.nova.edu/hpd/otm/pics/4fun/43.jpg|URL43.html',
      'http://www.nova.edu/hpd/otm/pics/4fun/44.jpg|URL44.html',
      'http://www.nova.edu/hpd/otm/pics/4fun/45.jpg|URL45.html'  // Note: no comma after last entry
    ];
    
    function randOrd() {
      return (Math.round(Math.random())-0.5);
    }
    function InitializeImageLinks() {
      var tarr = [];
      var str = '';
      var wcnt = 0;
    
    // randomize imageList contents
      var imgArr = imageList.sort(randOrd);
    
      for (var i=0; i<imgArr.length; i++) {
        tarr = imgArr[i].split('|');
        str += '<div class="imgInfo">';
        str += '<a href="'+tarr[1]+'">';
        str += '<img src="'+tarr[0]+'" height="100" width="100">';
        str += '</a>';
        str += '</div>';
        wcnt++;  if ((wcnt &#37; 4) == 0) { str += '<br>'; }
      }
      return str;
    }
    
    </script>
    
    <style type="text/css">
    #greybox {
      position:fixed;	top:50px; 	left:100px;
      height:546px; 	width:506px;
      text-align:center;  	vertical-align:middle;
    }
    .imgInfo {
      height:95px;  width:95px;
      border: 2px solid #5C97C9;
      margin: 3px;
      display:inline;
    }
    </style>
    
    </head>
    <body>
    <div id="greybox">
    <script type="text/javascript">
      document.write(InitializeImageLinks());
    </script>
    </div>
    </body>
    </html>
    Substitute your image locations and URL references in the imageList array.

    How close did I come?

  5. #5
    Join Date
    Feb 2010
    Posts
    6

    Smile

    This is perfect, thank you! Especially because the amount of div's isn't limited.
    I modified it a bit so that the assigned classes can be individual too (because of the hovers), and greybox will be used.

    Testpage here: http://0797738.student.wdka.nl/

    Code:
    <html>
    <head>
    <title>Random Image Positions</title>
    
    <!--links to css and greybox scripts-->
    
    <script type="text/javascript">
    // Modified for: http://www.webdeveloper.com/forum/showthread.php?p=1065457#post1065457
    
    var imageList = [
      'afb1.html|afb1',
      'afb2.html|afb2',
      'afb3.html|afb3',
      'afb4.html|afb4',
      'afb5.html|afb5',
      'afb6.html|afb6',
      'afb7.html|afb7',
      'afb8.html|afb8',
      'afb9.html|afb9',
      'afb10.html|afb10',
      'afb11.html|afb11',
      'afb12.html|afb12',
      'afb13.html|afb13'  // Note: no comma after last entry
    ];
    
    function randOrd() {
      return (Math.round(Math.random())-0.5);
    }
    function InitializeImageLinks() {
      var tarr = [];
      var str = '';
      var wcnt = 0;
    
    // randomize imageList contents
      var imgArr = imageList.sort(randOrd);
    
      for (var i=0; i<imgArr.length; i++) {
        tarr = imgArr[i].split('|');
        str += '<div class="'+tarr[1]+'">';
        str += '<a href="'+tarr[0]+'" ';
        str += 'rel="gb_page_center[506, 506]">';
        str += ' ';
        str += '</a>';
        str += '</div>';
      }
      return str;
    }
    
    </script>
    
    </head>
    <body>
    
    <script type="text/javascript">
      document.write(InitializeImageLinks());
    </script>
    
    </body>
    </html>
    Code:
    .afb1 a {
    height: 95px;
    width: 95px;
    border: 2px solid #5C97C9;
    margin: 3px;
    background-image: url(afb1a.jpg);
    }
    .afb1 a:hover {
    height: 95px;
    width: 95px;
    border: 2px solid #FFFFFF;
    margin: 3px;
    background-image: url(afb1b.jpg);
    Last edited by marenne; 02-03-2010 at 07:02 PM.

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,436
    You're most welcome.
    Happy to help.
    Good Luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles