Randomize three lists

@John-footerJun 20.2017

Hello Everyone!

I’m currently working on a list with icons and I would like to shuffle it’s contents randomly and smoothly without having to refresh the page.

The list has three groups and I would like to randomize the contents of the fist group every minute, the second every 30 seconds and the third every 20 seconds.
I’m a bit stuck and I need your help.

Here’s what I did:

HTML

[code=html]

<html> <head> <title>My title</title> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”> <link rel =”stylesheet” href=”CSS/1.css”> </head> <body>

<div id=”group1″> <ul> <li><a href=”1.html”><img src=”Images/blue.jpg” alt=”.jpg” title=”www..com”>blue</img></a></li> <li><a href=”1.html”><img src=”Images/red.jpg” alt=”.jpg” title=”www..com”>red</img></a></li> <li><a href=”1.html”><img src=”Images/green.jpg” alt=”.jpg” title=”www..com”>green</img></a></li> <li><a href=”1.html”><img src=”Images/yellow.jpg” alt=”.jpg” title=”www..com”>yellow</img></a></li> <li><a href=”1.html”><img src=”Images/black.jpg” alt=”.jpg” title=”www..com”>black</img></a></li> <li><a href=”1.html”><img src=”Images/cyan.jpg” alt=”.jpg” title=”www..com”>cyan</img></a></li> <li><a href=”1.html”><img src=”Images/white.jpg” alt=”.jpg” title=”www..com”>white</img></a></li> <li><a href=”1.html”><img src=”Images/pink.jpg” alt=”.jpg” title=”www..com”>pink</img></a></li> <li><a href=”1.html”><img src=”Images/grey.jpg” alt=”.jpg” title=”www..com”>grey</img></a></li> <li><a href=”1.html”><img src=”Images/orange.jpg” alt=”.jpg” title=”www..com”>orange</img></a></li> </ul> </div>

<div id=”group2″> <ul> <li><a href=”1.html”><img src=”Images/swirl.jpg” alt=”.jpg” title=”www..com”>swirl1</img></a></li> <li><a href=”1.html”><img src=”Images/swirl.jpg” alt=”.jpg” title=”www..com”>swirl2</img></a></li> <li><a href=”1.html”><img src=”Images/swirl.jpg” alt=”.jpg” title=”www..com”>swirl3</img></a></li> <li><a href=”1.html”><img src=”Images/swirl.jpg” alt=”.jpg” title=”www..com”>swirl4</img></a></li> <li><a href=”1.html”><img src=”Images/light.jpg” alt=”.jpg” title=”www..com”>light</img></a></li> <li><a href=”1.html”><img src=”Images/grd.jpg” alt=”.jpg” title=”www..com”>gradient</img></a></li> <li><a href=”1.html”><img src=”Images/grdu.jpg” alt=”.jpg” title=”www..com”>text</img></a></li> </ul> </div>

<div id=”group3″> <ul> <li><a href=”1.html”><img src=”Images/grdd.jpg” alt=”.jpg” title=”www..com”>text</img></a></li> <li><a href=”1.html”><img src=”Images/grdl.jpg” alt=”.jpg” title=”www..com”>text</img></a></li> <li><a href=”1.html”><img src=”Images/grdr.jpg” alt=”.jpg” title=”www..com”>text</img></a></li> <li><a href=”1.html”><img src=”Images/grdx.jpg” alt=”.jpg” title=”www..com”>text</img></a></li> <li><a href=”1.html”><img src=”Images/wrtr.jpg” alt=”.jpg” title=”www..com”>Hi!!!!</img></a></li> <li><a href=”1.html”><img src=”Images/wrt.jpg” alt=”.jpg” title=”www..com”>text</img></a></li> <li><a href=”1.html”><img src=”Images/testing.jpg” alt=”.jpg” title=”www..com”>text</img></a></li> <li><a href=”1.html”><img src=”Images/testing.jpg” alt=”.jpg” title=”www..com”>text</img></a></li> <li><a href=”1.html”><img src=”Images/testing.jpg” alt=”.jpg” title=”www..com”>text</img></a></li> </ul> </div> </body> </html> [/code]

CSS

[CODE] #group1{user-select:none; width:100%; padding:0; margin:0;} #group1 ul{height:12%; width:auto; border-radius:10px; border:2px solid rgba(0,0,0,0,0.5); list-style-type:none; background:rgba(0,255,0,0.5); margin:0% 0% 0% 0%; overflow:hidden; padding:2% 0% 10% 0%;} #group1 li a{transition:0.25s; border-radius:10px; border:2px solid rgba(0,0,0,0.0); color:#e5e5e5; background:rgba(0,0,0,0.0); width:12vw; height:auto; display:block; text-decoration:none; font-weight:bold; font-size:1.1vw; margin:4% 7% -2% 0%; overflow:hidden; word-wrap:break-all; padding:1% 0.3% 2.7% 0%; float:left; position:relative; left:3.5%; text-align:center; line-height:1.2; text-shadow:1px 1px 2px black,1px 1px 2px black,1px 1px 2px black; } #group1 img{width:7.5vw; height:11vh; float:left; margin:-4.5% 100% 4.5% 18.5%; border-radius:7px; border:2px solid rgba(0,0,0,0.5); position:relative; top:5px; } #group1 li a:hover{border:2px solid rgba(80,80,80,0.9); background:rgba(20,20,20,0.7); transform:scale3d(1.1,1.1,1.1); z-index:2; color:white; } #group1 li a:active{background:rgba(60,60,60,0.9); opacity:0.8;}

#group2{user-select:none; width:100%; padding:0; margin:0;} #group2 ul{height:4%; width:auto; border-radius:10px; border:2px solid rgba(0,0,0,0,0.5); list-style-type:none; background:rgba(255,0,0,0.5); margin:0% 0% 0% 0%; overflow:hidden; padding:2% 0% 10% 0%;} #group2 li a{transition:0.25s; border-radius:10px; border:2px solid rgba(0,0,0,0.0); color:#e5e5e5; background:rgba(0,0,0,0.0); width:12vw; height:auto; display:block; text-decoration:none; font-weight:bold; font-size:1.1vw; margin:-0.7% 7% 5% 0%; overflow:hidden; word-wrap:break-all; padding:1% 0.3% 2.7% 0%; float:left; position:relative; left:3.5%; text-align:center; line-height:1.2; text-shadow:1px 1px 2px black,1px 1px 2px black,1px 1px 2px black; } #group2 img{width:7.5vw; height:11vh; float:left; margin:-4.5% 100% 4.5% 18.5%; border-radius:7px; border:2px solid rgba(0,0,0,0.5); position:relative; top:5px; } #group2 li a:hover{border:2px solid rgba(80,80,80,0.9); background:rgba(20,20,20,0.7); transform:scale3d(1.1,1.1,1.1); z-index:2; color:white; } #group2 li a:active{background:rgba(60,60,60,0.9); opacity:0.8;}

#group3{user-select:none; width:100%; padding:0; margin:0;} #group3 ul{height:4%; width:auto; border-radius:10px; border:2px solid rgba(0,0,0,0,0.5); list-style-type:none; background:rgba(0,0,255,0.5); margin:0% 0% 0% 0%; overflow:hidden; padding:2% 0% 10% 0%;} #group3 li a{transition:0.25s; border-radius:10px; border:2px solid rgba(0,0,0,0.0); color:#e5e5e5; background:rgba(0,0,0,0.0); width:12vw; height:auto; display:block; text-decoration:none; font-weight:bold; font-size:1.1vw; margin:-0.7% 7% 5% 0%; overflow:hidden; word-wrap:break-all; padding:1% 0.3% 2.7% 0%; float:left; position:relative; left:3.5%; text-align:center; line-height:1.2; text-shadow:1px 1px 2px black,1px 1px 2px black,1px 1px 2px black; } #group3 img{width:7.5vw; height:11vh; float:left; margin:-4.5% 100% 4.5% 18.5%; border-radius:7px; border:2px solid rgba(0,0,0,0.5); position:relative; top:5px; } #group3 li a:hover{border:2px solid rgba(80,80,80,0.9); background:rgba(20,20,20,0.7); transform:scale3d(1.1,1.1,1.1); z-index:2; color:white; } #group3 li a:active{background:rgba(60,60,60,0.9); opacity:0.8;} [/CODE]

[CODE] var ul = document.querySelector(‘group1’); for (var i = ul.children.length; i >= 0; i–) { ul.appendChild(ul.children[Math.random() * i | 0]);

var ul = document.querySelector(‘group2’); for (var i = ul.children.length; i >= 0; i–) { ul.appendChild(ul.children[Math.random() * i | 0]);

var ul = document.querySelector(‘group3’); for (var i = ul.children.length; i >= 0; i–) { ul.appendChild(ul.children[Math.random() * i | 0]); } [/CODE]

to post a comment

JavaScript

25 Comments(s) _↴

@JMRKERJun 21.2017 — #This is not complete, but it should give you the idea how the image shuffle would work.

I have not included the timed shifts, but you would never be able to do it with your original attempt.

It can be added, but unless this attempt is close to your needs, which I don't entirely understand,

it's not worth my extra time a this late hour.

You can test the randomized display by clicking on the top button for each shift.

I'm not sure I understand the links to all the same location (1.html) ?

I don't understand the same title assignment (www..com) either ?

Note: The <img> tag does not have a closing tag. I replaced with the <span> display.

Finally, I don't have access to your images, so you will need to change the

baseURL variable assignment.

There are other changes I would make, but again, not worth it to me if this is not what you wanted or intended to do in original post.

<i>
 </i>&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8" /&gt;
 &lt;title&gt; HTML5 page &lt;/title&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
 &lt;!-- link rel ="stylesheet" href="CSS/1.css" --&gt;
 
 &lt;style&gt;
 #group1 { user-select:none; width:100%;  padding:0; margin:0;}
 #group1 ul{height:12%; width:auto;  border-radius:10px; border:2px solid rgba(0,0,0,0,0.5); list-style-type:none; background:rgba(0,255,0,0.5); margin:0% 0% 0% 0%; overflow:hidden; padding:2% 0% 10% 0%;}
 #group1 li a{transition:0.25s;  border-radius:10px; border:2px solid rgba(0,0,0,0.0); color:#e5e5e5; background:rgba(0,0,0,0.0); width:12vw; height:auto; display:block; text-decoration:none; font-weight:bold; font-size:1.1vw; margin:4% 7% -2% 0%; overflow:hidden; word-wrap:break-all; padding:1% 0.3% 2.7% 0%; float:left; position:relative; left:3.5%; text-align:center; line-height:1.2; text-shadow:1px 1px 2px black,1px 1px 2px black,1px 1px 2px black;  }
 #group1 img{width:7.5vw; height:11vh; float:left; margin:-4.5% 100% 4.5% 18.5%; border-radius:7px; border:2px solid rgba(0,0,0,0.5); position:relative; top:5px; }
 #group1 li a:hover{border:2px solid rgba(80,80,80,0.9); background:rgba(20,20,20,0.7); transform:scale3d(1.1,1.1,1.1); z-index:2; color:white; }
 #group1 li a:active{background:rgba(60,60,60,0.9); opacity:0.8;}
 
 #group2 { user-select:none; width:100%;  padding:0; margin:0;}
 #group2 ul{height:4%; width:auto;  border-radius:10px; border:2px solid rgba(0,0,0,0,0.5); list-style-type:none; background:rgba(255,0,0,0.5); margin:0% 0% 0% 0%; overflow:hidden; padding:2% 0% 10% 0%;}
 #group2 li a{transition:0.25s;  border-radius:10px; border:2px solid rgba(0,0,0,0.0); color:#e5e5e5; background:rgba(0,0,0,0.0); width:12vw; height:auto; display:block; text-decoration:none; font-weight:bold; font-size:1.1vw; margin:-0.7% 7% 5% 0%; overflow:hidden; word-wrap:break-all; padding:1% 0.3% 2.7% 0%; float:left; position:relative; left:3.5%; text-align:center; line-height:1.2; text-shadow:1px 1px 2px black,1px 1px 2px black,1px 1px 2px black;  }
 #group2 img{width:7.5vw; height:11vh; float:left; margin:-4.5% 100% 4.5% 18.5%; border-radius:7px; border:2px solid rgba(0,0,0,0.5); position:relative; top:5px; }
 #group2 li a:hover{border:2px solid rgba(80,80,80,0.9); background:rgba(20,20,20,0.7); transform:scale3d(1.1,1.1,1.1); z-index:2; color:white; }
 #group2 li a:active{background:rgba(60,60,60,0.9); opacity:0.8;}
 
 #group3 { user-select:none; width:100%;  padding:0; margin:0;}
 #group3 ul{height:4%; width:auto;  border-radius:10px; border:2px solid rgba(0,0,0,0,0.5); list-style-type:none; background:rgba(0,0,255,0.5); margin:0% 0% 0% 0%; overflow:hidden; padding:2% 0% 10% 0%;}
 #group3 li a{transition:0.25s;  border-radius:10px; border:2px solid rgba(0,0,0,0.0); color:#e5e5e5; background:rgba(0,0,0,0.0); width:12vw; height:auto; display:block; text-decoration:none; font-weight:bold; font-size:1.1vw; margin:-0.7% 7% 5% 0%; overflow:hidden; word-wrap:break-all; padding:1% 0.3% 2.7% 0%; float:left; position:relative; left:3.5%; text-align:center; line-height:1.2; text-shadow:1px 1px 2px black,1px 1px 2px black,1px 1px 2px black;  }
 #group3 img{width:7.5vw; height:11vh; float:left; margin:-4.5% 100% 4.5% 18.5%; border-radius:7px; border:2px solid rgba(0,0,0,0.5); position:relative; top:5px; }
 #group3 li a:hover{border:2px solid rgba(80,80,80,0.9); background:rgba(20,20,20,0.7); transform:scale3d(1.1,1.1,1.1); z-index:2; color:white; }
 #group3 li a:active{background:rgba(60,60,60,0.9); opacity:0.8;}
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;button onclick="rndArrange()"&gt;Mix-em&lt;/button&gt;
 
 &lt;div id="group1"&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="1.html"&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
 
 &lt;div id="group2"&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="1.html"&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
 
 &lt;div id="group3"&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="1.html"&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
 
 &lt;script&gt;
 // From: http://www.webdeveloper.com/forum/showthread.php?364393-Randomize-three-lists&amp;p=1509069#post1509069
 
 var baseURL = './Images/';
 
 var imgGroup1 = [
 ['blue.jpg',  'blue.jpg',  'www..com', 'blue'],
 ['red.jpg',   'red.jpg',   'www..com', 'red'],
 ['green.jpg', 'green.jpg', 'www..com', 'green'],
 ['yellow.jpg','yellow.jpg','www..com', 'yellow'],
 ['black.jpg', 'black.jpg', 'www..com', 'black'],
 ['cyan.jpg',  'cyan.jpg',  'www..com', 'cyan'],
 ['white.jpg', 'white.jpg', 'www..com', 'white'],
 ['pink.jpg',  'pink.jpg',  'www..com', 'pink'],
 ['grey.jpg',  'grey.jpg',  'www..com', 'grey'],
 ['orange.jpg','orange.jpg','www..com', 'orange']
 ];
 
 var imgGroup2 = [
 ['swirl.jpg','swirl.jpg','www..com','text'],
 ['swirl.jpg','swirl.jpg','www..com','text'],
 ['swirl.jpg','swirl.jpg','www..com','text'],
 ['swirl.jpg','swirl.jpg','www..com','text'],
 ['light.jpg','light.jpg','www..com','light'],
 ['grd.jpg',  'grd.jpg',  'www..com','gradient'],
 ['grdu.jpg', 'grdu.jpg', 'www..com','text']
 ];
 
 var imgGroup3 = [
 ['grdd.jpg',   'grdd.jpg',   'www..com', 'text'],
 ['grdl.jpg',   'grdl.jpg',   'www..com', 'text'],
 ['grdr.jpg',   'grdr.jpg',   'www..com', 'text'],
 ['grdx.jpg',   'grdx.jpg',   'www..com', 'text'],
 ['wrtr.jpg',   'wrtr.jpg',   'www..com', 'Hi!!!!'],
 ['wrt.jpg',    'wrt.jpg',    'www..com', 'text'],
 ['testing.jpg','testing.jpg','www..com', 'text'],
 ['testing.jpg','testing.jpg','www..com', 'text'],
 ['testing.jpg','testing.jpg','www..com', 'text']
 ];
 
 function groupArrange() {
 var sel = document.querySelectorAll('#group1 img');
 for (var i=0; i&lt;sel.length; i++) {
 sel[i].src = baseURL+imgGroup1[i][0];
 sel[i].alt = imgGroup1[i][1];
 sel[i].title = imgGroup1[i][2];
 }
 sel = document.querySelectorAll('#group1 span');
 for (var i=0; i&lt;sel.length; i++) { sel[i].innerHTML = imgGroup1[i][3]; }
 
 <i>    </i>  sel = document.querySelectorAll('#group2 img');
 for (var i=0; i&lt;sel.length; i++) {
 sel[i].src = baseURL+imgGroup2[i][0];
 sel[i].alt = imgGroup2[i][1];
 sel[i].title = imgGroup1[i][2];
 }
 sel = document.querySelectorAll('#group2 span');
 for (var i=0; i&lt;sel.length; i++) { sel[i].innerHTML = imgGroup2[i][3]; }
 
 <i>    </i>  sel = document.querySelectorAll('#group3 img');
 for (var i=0; i&lt;sel.length; i++) {
 sel[i].src = baseURL+imgGroup3[i][0];
 sel[i].alt = imgGroup3[i][1];
 sel[i].title = imgGroup1[i][2];
 }
 sel = document.querySelectorAll('#group3 span');
 for (var i=0; i&lt;sel.length; i++) { sel[i].innerHTML = imgGroup3[i][3]; }
 }
 
 function shuffle(o) {
 for(var j, x, i=o.length; i; j=Math.floor(Math.random() * i), x=o[--i], o[i]=o[j], o[j]=x);  return o; }
 
 function rndArrange() {
 imgGroup1 = shuffle(imgGroup1);
 imgGroup2 = shuffle(imgGroup2);
 imgGroup3 = shuffle(imgGroup3);
 groupArrange();
 }
 
 function init() {
 groupArrange();
 } init();
 
 &lt;/script&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

@John-footerauthorJun 21.2017 — #JMRKER

Thank you! This is very close to what I wanted.

The links 1.html and the images are just placeholders for now.

Memory/performance wise, would this technique be safe if I add more list items?

Now I have to find a way to make each group randomize the list items at a specific interval without the use of a button.

@rootJun 21.2017 — #If you are looking to make an integer with [B]Math.random() * i | 0[/B] you are missing the [B]~~[/B] and [B]()[/B] to make [B]~~(Math.random() * i) | 0[/B] which will result in a whole integer.

As you have the majority of the information in the HTML side, you would use the document.images object to access the image data, this can be as easy as var imgData = Array.prototype.slice.call( document.images ); This results in an array that you can then shuffle and then apply back to the document.images object to change the positions of the images.

This doesn't solve the issue of the links that are associated with the images, you used to be able to use the name attribute in an anchor but some stuffed shirt thought it was a better idea to remove the attribute, so no you would need to use extra code and the data- tag attribute of that element.

Images can be grouped with a sinle name attribute, so group on have all the same name="grp1" and so on...

[code=html]<a href="1.html" data-name="grp1"><img name="grp1" src="images/blue.jpg" alt=".jpg" title="www..com">blue</img></a></li>
 <li><a href="1.html" data-name="grp1"><img name="grp1" src="images/red.jpg" alt=".jpg" title="www..com">red</img></a>[/code]

So... document.links and document.images can form the basis of a routine to get and manipulate images and links as needed.

Also note that using capitalize naming conventions is not best practice, it leads to typos and allot of chasing down of errors due to typo's.

@JMRKERJun 21.2017 — #JMRKER

Thank you! This is very close to what I wanted.

The links 1.html and the images are just placeholders for now.

Memory/performance wise, would this technique be safe if I add more list items?

Now I have to find a way to make each group randomize the list items at a specific interval without the use of a button.[/QUOTE]

Question: Are the links associated with the imgArray contents? If so, then they may get messed up if you shuffle them without also changing the '1.html' reference. There is a possible fix, but I don't know your expectations.

Use the setInterval() function for each group to establish which group becomes randomized.

One word of caution using this technique: The user may click an element just after it has changed and would result in not going to the selected site. Might antagonize some users.

Addition of additional links is not a problem so long as the links equal the number of array items.

Adjustment is automatic with the sel.length value in the for...loops.

@John-footerauthorJun 23.2017 — #Question: Are the links associated with the imgArray contents? If so, then they may get messed up if you shuffle them without also changing the '1.html' reference. There is a possible fix, but I don't know your expectations.

Use the setInterval() function for each group to establish which group becomes randomized.

One word of caution using this technique: The user may click an element just after it has changed and would result in not going to the selected site. Might antagonize some users.

Addition of additional links is not a problem so long as the links equal the number of array items.

Adjustment is automatic with the sel.length value in the for...loops.[/QUOTE]

The links (1.html) are associated with the image(s), even though for now they're used as placeholders. The images refer to company/website logos.

What I want to create is: three groups of lists. Those groups refer to advertisers.

The first group would shuffle every couple of minutes. The second group would shuffle every 30 seconds and the third every 20 seconds.

I will probably fill the lists with more links.

Is there any other way to achieve this?

Thanks for bearing with me! ?

@JMRKERJun 23.2017 — #This should meet your expectations. ?

It uses the '1.css' file in my previous post.

I still don't know what the 'www..com' is all about. Is it supposed to represent the <a> tag link?

If yes, then modifications can be made to use one less element in the imgGroup# arrays.

<i>
 </i>&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8" /&gt;
 &lt;title&gt; HTML5 page &lt;/title&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
 &lt;link rel ="stylesheet" href="CSS/1.css"&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div id="group1"&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
 
 &lt;div id="group2"&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
 
 &lt;div id="group3"&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" title="www..com"&gt; &lt;span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
 
 &lt;script&gt;
 // From: http://www.webdeveloper.com/forum/showthread.php?364393-Randomize-three-lists&amp;p=1509069#post1509069
 
 var baseURL = './Images/';
 
 var imgGroup1 = [
 ['blue.jpg',  'blue.jpg',  'www..com', 'blue', 'http://www.webdeveloper.com'],
 ['red.jpg',   'red.jpg',   'www..com', 'red', 'http://1.html'],
 ['green.jpg', 'green.jpg', 'www..com', 'green', 'http://1.html'],
 ['yellow.jpg','yellow.jpg','www..com', 'yellow', 'http://1.html'],
 ['black.jpg', 'black.jpg', 'www..com', 'black', 'http://1.html'],
 ['cyan.jpg',  'cyan.jpg',  'www..com', 'cyan', 'http://1.html'],
 ['white.jpg', 'white.jpg', 'www..com', 'white', 'http://1.html'],
 ['pink.jpg',  'pink.jpg',  'www..com', 'pink', 'http://1.html'],
 ['grey.jpg',  'grey.jpg',  'www..com', 'grey', 'http://1.html'],
 ['orange.jpg','orange.jpg','www..com', 'orange', 'http://1.html']
 ];
 
 var imgGroup2 = [
 ['swirl.jpg','swirl.jpg','www..com','text', 'http://1.html'],
 ['swirl.jpg','swirl.jpg','www..com','text', 'http://1.html'],
 ['swirl.jpg','swirl.jpg','www..com','text', 'http://1.html'],
 ['swirl.jpg','swirl.jpg','www..com','text', 'http://1.html'],
 ['light.jpg','light.jpg','www..com','light', 'http://1.html'],
 ['grd.jpg',  'grd.jpg',  'www..com','gradient', 'http://1.html'],
 ['grdu.jpg', 'grdu.jpg', 'www..com','text', 'http://1.html']
 ];
 
 var imgGroup3 = [
 ['grdd.jpg',   'grdd.jpg',   'www..com', 'text', 'http://1.html'],
 ['grdl.jpg',   'grdl.jpg',   'www..com', 'text', 'http://1.html'],
 ['grdr.jpg',   'grdr.jpg',   'www..com', 'text', 'http://1.html'],
 ['grdx.jpg',   'grdx.jpg',   'www..com', 'text', 'http://1.html'],
 ['wrtr.jpg',   'wrtr.jpg',   'www..com', 'Hi!!!!', 'http://1.html'],
 ['wrt.jpg',    'wrt.jpg',    'www..com', 'text', 'http://1.html'],
 ['testing.jpg','testing.jpg','www..com', 'text', 'http://1.html'],
 ['testing.jpg','testing.jpg','www..com', 'text', 'http://1.html'],
 ['testing.jpg','testing.jpg','www..com', 'text', 'http://1.html']
 ];
 
 function groupArrange1() { // group1 settings
 imgGroup1 = shuffle(imgGroup1);
 var sel = document.querySelectorAll('#group1 img');
 for (var i=0; i&lt;sel.length; i++) {
 sel[i].src = baseURL+imgGroup1[i][0];
 sel[i].alt = imgGroup1[i][1];
 sel[i].title = imgGroup1[i][2];
 }
 sel = document.querySelectorAll('#group1 span');
 for (var i=0; i&lt;sel.length; i++) { sel[i].innerHTML = imgGroup1[i][3]; }
 sel = document.querySelectorAll('#group1 a');
 for (var i=0; i&lt;sel.length; i++) { sel[i].href= imgGroup1[i][4]; }
 }
 
 function groupArrange2() { // group2 settings
 imgGroup2 = shuffle(imgGroup2);
 var sel = document.querySelectorAll('#group2 img');
 for (var i=0; i&lt;sel.length; i++) {
 sel[i].src = baseURL+imgGroup2[i][0];
 sel[i].alt = imgGroup2[i][1];
 sel[i].title = imgGroup1[i][2];
 }
 sel = document.querySelectorAll('#group2 span');
 for (var i=0; i&lt;sel.length; i++) { sel[i].innerHTML = imgGroup2[i][3]; }
 sel = document.querySelectorAll('#group2 a');
 for (var i=0; i&lt;sel.length; i++) { sel[i].href= imgGroup2[i][4]; }
 }
 
 
 function groupArrange3() { // group3 settings
 imgGroup3 = shuffle(imgGroup3);
 var sel = document.querySelectorAll('#group3 img');
 for (var i=0; i&lt;sel.length; i++) {
 sel[i].src = baseURL+imgGroup3[i][0];
 sel[i].alt = imgGroup3[i][1];
 sel[i].title = imgGroup1[i][2];
 }
 sel = document.querySelectorAll('#group3 span');
 for (var i=0; i&lt;sel.length; i++) { sel[i].innerHTML = imgGroup3[i][3]; }
 sel = document.querySelectorAll('#group3 a');
 for (var i=0; i&lt;sel.length; i++) { sel[i].href= imgGroup3[i][4]; }
 }
 
 function shuffle(o) {
 for(var j, x, i=o.length; i; j=Math.floor(Math.random() * i), x=o[--i], o[i]=o[j], o[j]=x);  return o; }
 
 var myGroup1, myGroup2, myGroup3;
 function init() {
 groupArrange1();    groupArrange2();    groupArrange3();
 myGroup1 = setInterval(function() { groupArrange1() }, 60000);
 myGroup2 = setInterval(function() { groupArrange2() }, 30000);
 myGroup3 = setInterval(function() { groupArrange3() }, 20000);
 }
 init();
 
 function myStopFunction() {  // not currently used, but is available
 clearInterval(myGroup1);  clearInterval(myGroup2);  clearInterval(myGroup3);
 }
 &lt;/script&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

@John-footerauthorJun 23.2017 — #WOW! This is extremely close to what I wanted to accomplish! ?

One thing I noticed:

only the images shuffle/randomize and not the list items.

For example:

I have about seven or so list items that contain a link and an image, but the images seem to shuffle (which is great!), but the list items seem to be static and don't shuffle along with their corresponding image.

Is it possible to shuffle the list items together along with their associated images and links?

Example: list item 1 blue with blue.jpg and list item 2 yellow with yellow.jpg etc.

This is very close and I want to thank you again for bearing with me!

@rootJun 23.2017 — #Why use JavaScript to store the image data when the images can be in the HTML and you use JavaScript to then manipulate the state of the images with fewer variables and less code and more reliability for users who don't have JavaScript and will be staring at a blank page that doesn't function.

@JMRKERJun 24.2017 — #WOW! This is extremely close to what I wanted to accomplish! ?

One thing I noticed:

only the images shuffle/randomize and not the list items.

For example:

I have about seven or so list items that contain a link and an image, but the images seem to shuffle (which is great!), [COLOR="#FF0000"]but the list items seem to be static and don't shuffle along with their corresponding image.[/COLOR]

[COLOR="#FF0000"]Is it possible to shuffle the list items together along with their associated images and links?

Example: list item 1 blue with blue.jpg and list item 2 yellow with yellow.jpg etc.

[/COLOR]

This is very close and I want to thank you again for bearing with me![/QUOTE]

Sorry, I don't understand your statements shown in [COLOR="#FF0000"]RED[/COLOR] above.

The items in each of the groups are shuffled (as shown in the displays).

What exactly are you trying to achieve?

I do not have access to your images so I am at a loss to see what images are not being displayed correctly.

@JMRKERJun 24.2017 — #Why use JavaScript to store the image data when the images can be in the HTML and you use JavaScript to then manipulate the state of the images with fewer variables and less code and more reliability for users who don't have JavaScript and will be staring at a blank page that doesn't function.[/QUOTE]

Do you have a brief example of what you are trying to point out?

Are you saying that the HTML elements should be shuffled?

Or that the elements should be removed and replaced with some dynamically code for each of the groups?

Or that JS should not be used at all and let the PHP (if any) generate the code?

? Confused

I assume the OP could use the 1st post to display an un-shuffled display of the elements and images, etc.

Then use the JS of the last post to scramble the displays EXCEPT when JS is not enabled.

The page would then work as a static site. Is that your objection to the demonstration?

@rootJun 24.2017 — #

1. grab a copy of the HTML elements.

2. filter the results so only the target elements are captured.

3. Shuffle the resulting array.

4. repopulate the elements with the new sources data.

Your source data is already in arrays and objects of the DOM, adding more arrays and objects to store data that should be in the HTML to start with is adding bloat.

document.images is the main image object that stores all references to images, a simple check to check the name="" attribute is the group of images you want is fairly simple to differentiate between other images and the target images.

I gave a brief overview of this here in post #4 http://www.webdeveloper.com/forum/showthread.php?364393-Randomize-three-lists&p=1509145#post1509145

[/quote]

[code=html]<body>
 
 <div id="group1">
 <ul>
 <li><a href="1.html"><img name="grp1" src="images/blue.jpg" alt=".jpg" title="www..com">blue</img></a></li>
 <li><a href="1.html"><img name="grp1" src="images/red.jpg" alt=".jpg" title="www..com">red</img></a></li>
 <li><a href="1.html"><img name="grp1" src="images/green.jpg" alt=".jpg" title="www..com">green</img></a></li>
 <li><a href="1.html"><img name="grp1" src="images/yellow.jpg" alt=".jpg" title="www..com">yellow</img></a></li>
 <li><a href="1.html"><img name="grp1" src="images/black.jpg" alt=".jpg" title="www..com">black</img></a></li>
 <li><a href="1.html"><img name="grp1" src="images/cyan.jpg" alt=".jpg" title="www..com">cyan</img></a></li>
 <li><a href="1.html"><img name="grp1" src="images/white.jpg" alt=".jpg" title="www..com">white</img></a></li>
 <li><a href="1.html"><img name="grp1" src="images/pink.jpg" alt=".jpg" title="www..com">pink</img></a></li>
 <li><a href="1.html"><img name="grp1" src="images/grey.jpg" alt=".jpg" title="www..com">grey</img></a></li>
 <li><a href="1.html"><img name="grp1" src="images/orange.jpg" alt=".jpg" title="www..com">orange</img></a></li>
 </ul>
 </div>
 
 <div id="group2">
 <ul>
 <li><a href="1.html"><img name="grp2" src="images/swirl.jpg" alt=".jpg" title="www..com">swirl1</img></a></li>
 <li><a href="1.html"><img name="grp2" src="images/swirl.jpg" alt=".jpg" title="www..com">swirl2</img></a></li>
 <li><a href="1.html"><img name="grp2" src="images/swirl.jpg" alt=".jpg" title="www..com">swirl3</img></a></li>
 <li><a href="1.html"><img name="grp2" src="images/swirl.jpg" alt=".jpg" title="www..com">swirl4</img></a></li>
 <li><a href="1.html"><img name="grp2" src="images/light.jpg" alt=".jpg" title="www..com">light</img></a></li>
 <li><a href="1.html"><img name="grp2" src="images/grd.jpg" alt=".jpg" title="www..com">gradient</img></a></li>
 <li><a href="1.html"><img name="grp2" src="images/grdu.jpg" alt=".jpg" title="www..com">text</img></a></li>
 </ul>
 </div>
 
 <div id="group3">
 <ul>
 <li><a href="1.html"><img name="grp3" src="images/grdd.jpg" alt=".jpg" title="www..com">text</img></a></li>
 <li><a href="1.html"><img name="grp3" src="images/grdl.jpg" alt=".jpg" title="www..com">text</img></a></li>
 <li><a href="1.html"><img name="grp3" src="images/grdr.jpg" alt=".jpg" title="www..com">text</img></a></li>
 <li><a href="1.html"><img name="grp3" src="images/grdx.jpg" alt=".jpg" title="www..com">text</img></a></li>
 <li><a href="1.html"><img name="grp3" src="images/wrtr.jpg" alt=".jpg" title="www..com">Hi!!!!</img></a></li>
 <li><a href="1.html"><img name="grp3" src="images/wrt.jpg" alt=".jpg" title="www..com">text</img></a></li>
 <li><a href="1.html"><img name="grp3" src="images/testing.jpg" alt=".jpg" title="www..com">text</img></a></li>
 <li><a href="1.html"><img name="grp3" src="images/testing.jpg" alt=".jpg" title="www..com">text</img></a></li>
 <li><a href="1.html"><img name="grp3" src="images/testing.jpg" alt=".jpg" title="www..com">text</img></a></li>
 </ul>
 </div>
 </body>
 </html>[/code]

then using

window.onload = function(){
 img = Array.prototype.slice.call( document.images );
 for(d in img)  <br/>
 console.log("&gt;&gt;&gt; "+img[d].name);
 }

or you could grab the images by the getElementsByTagName() method, either way you are accessing the data already present and no need to duplicate things in javascript, you only then have to manipulate the groups independently...

By naming in to groups, you are making it easier to access the data that you want to manipulate.

@John-footerauthorJun 25.2017 — #1. grab a copy of the HTML elements.

2. filter the results so only the target elements are captured.

3. Shuffle the resulting array.

4. repopulate the elements with the new sources data.

Your source data is already in arrays and objects of the DOM, adding more arrays and objects to store data that should be in the HTML to start with is adding bloat.

document.images is the main image object that stores all references to images, a simple check to check the name="" attribute is the group of images you want is fairly simple to differentiate between other images and the target images.

I gave a brief overview of this here in post #4 http://www.webdeveloper.com/forum/showthread.php?364393-Randomize-three-lists&p=1509145#post1509145

or you could grab the images by the getElementsByTagName() method, either way you are accessing the data already present and no need to duplicate things in javascript, you only then have to manipulate the groups independently...

By naming in to groups, you are making it easier to access the data that you want to manipulate.[/QUOTE]

I apologize for the late reply!

So I copied the above code and I made some changes to the CSS, but I think I broke something. It doesn't seem to randomize any of the elements at all.

I'm still very new to JS and I'm still trying to understand how it works.

Here's what I have so far:

HTML

[code=html]<html>
 <body>
 <div id="group1">
 <ul>
 <li><a href="1.html"><img name="grp1" src="images/blue.jpg" alt=".jpg" title="www..com">blue</img></a></li>
 <li><a href="1.html"><img name="grp1" src="images/red.jpg" alt=".jpg" title="www..com">red</img></a></li>
 <li><a href="1.html"><img name="grp1" src="images/green.jpg" alt=".jpg" title="www..com">green</img></a></li>
 <li><a href="1.html"><img name="grp1" src="images/yellow.jpg" alt=".jpg" title="www..com">yellow</img></a></li>
 <li><a href="1.html"><img name="grp1" src="images/black.jpg" alt=".jpg" title="www..com">black</img></a></li>
 <li><a href="1.html"><img name="grp1" src="images/cyan.jpg" alt=".jpg" title="www..com">cyan</img></a></li>
 <li><a href="1.html"><img name="grp1" src="images/white.jpg" alt=".jpg" title="www..com">white</img></a></li>
 <li><a href="1.html"><img name="grp1" src="images/pink.jpg" alt=".jpg" title="www..com">pink</img></a></li>
 <li><a href="1.html"><img name="grp1" src="images/grey.jpg" alt=".jpg" title="www..com">grey</img></a></li>
 <li><a href="1.html"><img name="grp1" src="images/orange.jpg" alt=".jpg" title="www..com">orange</img></a></li>
 </ul>
 </div>
 
 <div id="group2">
 <ul>
 <li><a href="1.html"><img name="grp2" src="images/swirl.jpg" alt=".jpg" title="www..com">swirl1</img></a></li>
 <li><a href="1.html"><img name="grp2" src="images/swirl.jpg" alt=".jpg" title="www..com">swirl2</img></a></li>
 <li><a href="1.html"><img name="grp2" src="images/swirl.jpg" alt=".jpg" title="www..com">swirl3</img></a></li>
 <li><a href="1.html"><img name="grp2" src="images/swirl.jpg" alt=".jpg" title="www..com">swirl4</img></a></li>
 <li><a href="1.html"><img name="grp2" src="images/light.jpg" alt=".jpg" title="www..com">light</img></a></li>
 <li><a href="1.html"><img name="grp2" src="images/grd.jpg" alt=".jpg" title="www..com">gradient+</img></a></li>
 <li><a href="1.html"><img name="grp2" src="images/grdu.jpg" alt=".jpg" title="www..com">Colour</img></a></li>
 </ul>
 </div>
 
 <div id="group3">
 <ul>
 <li><a href="1.html"><img name="grp3" src="images/grdd.jpg" alt=".jpg" title="www..com">gradient</img></a></li>
 <li><a href="1.html"><img name="grp3" src="images/grdl.jpg" alt=".jpg" title="www..com">gradient 2</img></a></li>
 <li><a href="1.html"><img name="grp3" src="images/grdr.jpg" alt=".jpg" title="www..com">gradient shape</img></a></li>
 <li><a href="1.html"><img name="grp3" src="images/grdx.jpg" alt=".jpg" title="www..com">another shape</img></a></li>
 <li><a href="1.html"><img name="grp3" src="images/wrtr.jpg" alt=".jpg" title="www..com">gradient and shape</img></a></li>
 <li><a href="1.html"><img name="grp3" src="images/wrt.jpg" alt=".jpg" title="www..com">image</img></a></li>
 <li><a href="1.html"><img name="grp3" src="images/testing.jpg" alt=".jpg" title="www..com">shape2</img></a></li>
 <li><a href="1.html"><img name="grp3" src="images/testing.jpg" alt=".jpg" title="www..com">shape3</img></a></li>
 <li><a href="1.html"><img name="grp3" src="images/testing.jpg" alt=".jpg" title="www..com">shape4</img></a></li>
 </ul>
 </div>
 
 <script>
 window.onload = function(){
 img = Array.prototype.slice.call( document.images );
 for(d in img) 

 console.log(">>> "+img[d].name);
 }
 </script>
 </body>
 </html>[/code]

CSS

[CODE] #group1{user-select:none; width:100%; padding:0; margin:0; }
 #group1 ul{height:15vh; width:100%; border-radius:10px; border:2px solid rgba(0,0,0,0,0.5); list-style-type:none; background:rgba(0,255,0,0.5); margin:5.5% 0% 0% 0%; overflow:hidden; padding:0% 0% 5% 0%;}
 #group1 li a{transition:0.25s;  border-radius:10px; border:2px solid rgba(0,0,0,0.0); color:#e5e5e5; background:rgba(0,0,0,0.0); width:12vw; height:auto; display:block; text-decoration:none; font-weight:bold; font-size:1.1vw; margin:1% 7% 2% 0%; overflow:hidden; word-wrap:break-all; padding:1% 0.3% 2.7% 0%; float:left; position:relative; left:3.5%; text-align:center; line-height:1.2; text-shadow:1px 1px 2px black,1px 1px 2px black,1px 1px 2px black;  }
 #group1 img{width:7.5vw; height:11vh; float:left; margin:-4.5% 100% 4.5% 18.5%; border-radius:7px; border:2px solid rgba(0,0,0,0.5); position:relative; top:5px; }
 #group1 li a:hover{border:2px solid rgba(80,80,80,0.9); background:rgba(20,20,20,0.7); transform:scale3d(1.1,1.1,1.1); z-index:2; color:white; }
 #group1 li a:active{background:rgba(60,60,60,0.9); opacity:0.8;}
 
 #group2{user-select:none; width:100%;  padding:0; margin:0;}
 #group2 ul{height:4vh; width:auto;  border-radius:10px; border:2px solid rgba(0,0,0,0,0.5); list-style-type:none; background:rgba(255,0,0,0.5); margin:0% 0% 0% 0%; overflow:hidden; padding:2% 0% 10% 0%;}
 #group2 li a{transition:0.25s;  border-radius:10px; border:2px solid rgba(0,0,0,0.0); color:#e5e5e5; background:rgba(0,0,0,0.0); width:12vw; height:auto; display:block; text-decoration:none; font-weight:bold; font-size:1.1vw; margin:-0.7% 7% 5% 0%; overflow:hidden; word-wrap:break-all; padding:1% 0.3% 2.7% 0%; float:left; position:relative; left:3.5%; text-align:center; line-height:1.2; text-shadow:1px 1px 2px black,1px 1px 2px black,1px 1px 2px black;  }
 #group2 img{width:7.5vw; height:11vh; float:left; margin:-4.5% 100% 4.5% 18.5%; border-radius:7px; border:2px solid rgba(0,0,0,0.5); position:relative; top:5px; }
 #group2 li a:hover{border:2px solid rgba(80,80,80,0.9); background:rgba(20,20,20,0.7); transform:scale3d(1.1,1.1,1.1); z-index:2; color:white; }
 #group2 li a:active{background:rgba(60,60,60,0.9); opacity:0.8;}
 
 #group3{user-select:none; width:100%;  padding:0; margin:0;}
 #group3 ul{height:4vh; width:auto;  border-radius:10px; border:2px solid rgba(0,0,0,0,0.5); list-style-type:none; background:rgba(0,0,255,0.5); margin:0% 0% 0% 0%; overflow:hidden; padding:2% 0% 10% 0%;}
 #group3 li a{transition:0.25s;  border-radius:10px; border:2px solid rgba(0,0,0,0.0); color:#e5e5e5; background:rgba(0,0,0,0.0); width:12vw; height:auto; display:block; text-decoration:none; font-weight:bold; font-size:1.1vw; margin:-0.7% 7% 5% 0%; overflow:hidden; word-wrap:break-all; padding:1% 0.3% 2.7% 0%; float:left; position:relative; left:3.5%; text-align:center; line-height:1.2; text-shadow:1px 1px 2px black,1px 1px 2px black,1px 1px 2px black;  }
 #group3 img{width:7.5vw; height:11vh; float:left; margin:-4.5% 100% 4.5% 18.5%; border-radius:7px; border:2px solid rgba(0,0,0,0.5); position:relative; top:5px; }
 #group3 li a:hover{border:2px solid rgba(80,80,80,0.9); background:rgba(20,20,20,0.7); transform:scale3d(1.1,1.1,1.1); z-index:2; color:white; }
 #group3 li a:active{background:rgba(60,60,60,0.9); opacity:0.8;} [/CODE]

@John-footerauthorJun 25.2017 — #Guys I created a gif explaining how I want the list with the randomized items to work. Pictures = 100 words, so here it goes:

http://gifmaker.me/PlayGIFAnimation.php?folder=2017062416sEmC7zT877BpZRFKTvAyyA&file=output_C7TGbx.gif

Note: the link will expire in about 6 hours.

@rootJun 25.2017 — #JavaScript is the back end to HTML that runs on the clients machine, therefore any specific random shuffling in a display will require JavaScript. CSS is just for styling options and a few effects that have taken over from JavaScript versions like fading and roll over.

What I have suggested is that the data is already present in your HTML, simply access it with JavaScript, randomize it how you need, repopulate the elements with the shuffled data.

What you want is a page that degrades gracefully, you have plenty of people on the internet that do not have JavaScript enabled in their systems because people see it as a security risk and an annoyance and only way to stop popup and popunder windows, I was one of those people, go so fed up of popups and how they bypassed early blockers that for 5 years I switched JavaScript off.

So a user with no JavaScript or a browser that does not support JavaScript (yes they do exist) may visit your site and depending on how you set it up depends on if they see a HTML page render (because you put all the information in at the time you wrote the HTML) or a blank screen (because you start with a blank page and no way of populating those entries).

@TrainJun 25.2017 — #Some of us only use text only browsers. That means no graphics, no javascript, no etc.

Dillo is such a browser.

@JMRKERJun 25.2017 — #Some of us only use text only browsers. That means no graphics, no javascript, no etc.

Dillo is such a browser.[/QUOTE]

Whoa! :eek: Middle ages internet. ?

I have a string and two cans you can borrow when your site goes down. ? ?

@rootJun 26.2017 — #Think thats bad, my modem is coal fired beast....

@TrainJun 26.2017 — #Think thats bad, my modem is coal fired beast....[/QUOTE]
As it does not need fixing, keep it.

@John-footerauthorJun 26.2017 — #JavaScript is the back end to HTML that runs on the clients machine, therefore any specific random shuffling in a display will require JavaScript. CSS is just for styling options and a few effects that have taken over from JavaScript versions like fading and roll over.

What I have suggested is that the data is already present in your HTML, simply access it with JavaScript, randomize it how you need, repopulate the elements with the shuffled data.

What you want is a page that degrades gracefully, you have plenty of people on the internet that do not have JavaScript enabled in their systems because people see it as a security risk and an annoyance and only way to stop popup and popunder windows, I was one of those people, go so fed up of popups and how they bypassed early blockers that for 5 years I switched JavaScript off.

So a user with no JavaScript or a browser that does not support JavaScript (yes they do exist) may visit your site and depending on how you set it up depends on if they see a HTML page render (because you put all the information in at the time you wrote the HTML) or a blank screen (because you start with a blank page and no way of populating those entries).[/QUOTE]

Thank you for the explanation. ?

I like the idea of having existing data in the html...which seems very efficient efficient.

It seems like when I use the code above nothing happens.

I'm not sure if I'm missing anything.

@rootJun 26.2017 — #What I posted in one of my posts is an example of how you can access the data which will appear in the console.log (F12 open & closes the console, click on the log tab)

You have options to grab the information by giving each image group a name attribute of the group that the image set belongs to and then use that data to push the src references in to an array which will be able to be shuffled, then you modify the existing element with the new data from the shuffles src information.

If you have other information then the best storage method would be an array set that has an array of object data.

You have already an example in this thread by JMRKER that shows you how to populate an image set, you can find others that look like

var newImage = new Image();
 newImage.src = "./path/to/file.jpg";
 newImage.title = "This is tool tip";
 newImage.alt = "JPG IMAGE";

I did have a demo I wrote, not sure if its on this site, I will try to dig it up as it shows how you can take an object and turn it in to an array copy and in that example it split the image groups in to two sections and rotated the images sequentially. Not promising but I do think that the subject of image population in the document has been covered more times than I can imagine, I have tried to explain the concept, all you are doing is creating a static page so that non JavaScript browsers will render the HTML, using JavaScript if it is available to copy that data, sort out what elements you need to keep an access reference to, then shuffle that array, then update the image sets.

@brad_jonesJun 28.2017 — #[I][COLOR="#FF0000"](Admin: posting for JMRKER)[/COLOR][/I]

Here is a demo you can try.

Modify the code to match your CSS and image choices.

<i>
 </i>&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8" /&gt;
 &lt;title&gt; HTML5 page &lt;/title&gt;
 &lt;style&gt;
 img { height: 50px; width: 50px; }
 ul { list-style: none; }
 li { float: left; }
 &lt;/style&gt;
 &lt;base href="https://www.nova.edu/portal/optometry/otm/pics/4fun/"&gt;
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;div id="group1"&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="1.html"&gt; &lt;img name="grp1" src="11.jpg" alt=".jpg" title="www..com"&gt; &lt;span&gt;blue&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt; &lt;img name="grp1" src="12.jpg" alt=".jpg" title="www..com"&gt; &lt;span&gt;red&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt; &lt;img name="grp1" src="13.jpg" alt=".jpg" title="www..com"&gt; &lt;span&gt;green&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt; &lt;img name="grp1" src="14.jpg" alt=".jpg" title="www..com"&gt; &lt;span&gt;yellow&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt; &lt;img name="grp1" src="15.jpg" alt=".jpg" title="www..com"&gt; &lt;span&gt;black&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt; &lt;img name="grp1" src="21.jpg" alt=".jpg" title="www..com"&gt; &lt;span&gt;cyan&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt; &lt;img name="grp1" src="22.jpg" alt=".jpg" title="www..com"&gt; &lt;span&gt;white&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt; &lt;img name="grp1" src="23.jpg" alt=".jpg" title="www..com"&gt; &lt;span&gt;pink&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt; &lt;img name="grp1" src="24.jpg" alt=".jpg" title="www..com"&gt; &lt;span&gt;grey&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt; &lt;img name="grp1" src="25.jpg" alt=".jpg" title="www..com"&gt; &lt;span&gt;orange&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
 &lt;p style="clear:both"&gt; 
 
 &lt;div id="group2"&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="1.html"&gt; &lt;img name="grp2" src="31.jpg" alt=".jpg" title="www..com"&gt; &lt;span&gt;swirl1&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt; &lt;img name="grp2" src="32.jpg" alt=".jpg" title="www..com"&gt; &lt;span&gt;swirl2&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt; &lt;img name="grp2" src="33.jpg" alt=".jpg" title="www..com"&gt; &lt;span&gt;swirl3&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt; &lt;img name="grp2" src="34.jpg" alt=".jpg" title="www..com"&gt; &lt;span&gt;swirl4&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt; &lt;img name="grp2" src="35.jpg" alt=".jpg" title="www..com"&gt; &lt;span&gt;light&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt; &lt;img name="grp2" src="41.jpg" alt=".jpg" title="www..com"&gt; &lt;span&gt;gradient&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt; &lt;img name="grp2" src="42.jpg" alt=".jpg" title="www..com"&gt; &lt;span&gt;text&lt;/a&gt;&lt;/span&gt; &lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
 &lt;p style="clear:both"&gt; 
 
 &lt;div id="group3"&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="1.html"&gt; &lt;img name="grp3" src="43.jpg" alt=".jpg" title="www..com"&gt; &lt;span&gt;text&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt; &lt;img name="grp3" src="44.jpg" alt=".jpg" title="www..com"&gt; &lt;span&gt;text&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt; &lt;img name="grp3" src="45.jpg" alt=".jpg" title="www..com"&gt; &lt;span&gt;text&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt; &lt;img name="grp3" src="51.jpg" alt=".jpg" title="www..com"&gt; &lt;span&gt;text&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt; &lt;img name="grp3" src="52.jpg" alt=".jpg" title="www..com"&gt; &lt;span&gt;Hi!!!!&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt; &lt;img name="grp3" src="53.jpg" alt=".jpg" title="www..com"&gt; &lt;span&gt;text&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt; &lt;img name="grp3" src="54.jpg" alt=".jpg" title="www..com"&gt; &lt;span&gt;text&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt; &lt;img name="grp3" src="55.jpg" alt=".jpg" title="www..com"&gt; &lt;span&gt;text&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="1.html"&gt; &lt;img name="grp3" src="61.jpg" alt=".jpg" title="www..com"&gt; &lt;span&gt;text&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
 &lt;p style="clear:both"&gt; 
 
 &lt;button onclick="mixem()"&gt;Mix&lt;/button&gt;
 &lt;div id="debug"&gt;&lt;/div&gt;
 
 &lt;script&gt;
 function shuffle(o) {
 for(var j, x, i=o.length; i; j=Math.floor(Math.random() * i), x=o[--i], o[i]=o[j], o[j]=x);  return o;
 }
 function mixem() { 
 var Grp1=[], Grp2=[], Grp3=[], p=0;
 Grp1 = shuffle(grp1);    Grp2 = shuffle(grp2);    Grp3 = shuffle(grp3);
 document.getElementById('debug').innerHTML = '';
 showGrp(Grp1);   showGrp(Grp2);   showGrp(Grp3);
 
 for (var i=0; i&lt;Grp1.length; i++) {
 atag1[i].href = Grp1[i][0];
 imgtag1[i].src = Grp1[i][1];
 imgtag1[i].alt = Grp1[i][2];
 imgtag1[i].title = Grp1[i][3];
 spantag1[i].innerHTML = Grp1[i][4];
 }
 
 for (var i=0; i&lt;Grp2.length; i++) {
 atag2[i].href = Grp2[i][0];
 imgtag2[i].src = Grp2[i][1];
 imgtag2[i].alt = Grp2[i][2];
 imgtag2[i].title = Grp2[i][3];
 spantag2[i].innerHTML = Grp2[i][4];
 }
 
 for (var i=0; i&lt;Grp3.length; i++) {
 atag3[i].href = Grp3[i][0];
 imgtag3[i].src = Grp3[i][1];
 imgtag3[i].alt = Grp3[i][2];
 imgtag3[i].title = Grp3[i][3];
 spantag3[i].innerHTML = Grp3[i][4];
 }
 }
 var  grp1 = [],     grp2 = [],     grp3 = [],
 atag1 = [],    atag2 = [],    atag3 = [],
 imgtag1 = [],  imgtag2 = [],  imgtag3 = [],
 spantag1 = [], spantag2 = [], spantag3 = [];
 
 window.onload = function(){
 var tmp = [];
 
 atag1 = document.querySelectorAll('#group1 a');
 imgtag1 = document.querySelectorAll('#group1 img');
 spantag1 = document.querySelectorAll('#group1 span');
 for (var i=0; i&lt;atag1.length; i++) {
 tmp = [];
 tmp.push(atag1[i].href);
 tmp.push(imgtag1[i].src);  tmp.push(imgtag1[i].alt);  tmp.push(imgtag1[i].title);
 tmp.push(spantag1[i].innerHTML);
 grp1.push(tmp);
 } 
 
 atag2 = document.querySelectorAll('#group2 a');
 imgtag2 = document.querySelectorAll('#group2 img');
 spantag2 = document.querySelectorAll('#group2 span');
 for (var i=0; i&lt;atag2.length; i++) {
 tmp = [];
 tmp.push(atag2[i].href);
 tmp.push(imgtag2[i].src);  tmp.push(imgtag2[i].alt);  tmp.push(imgtag2[i].title);
 tmp.push(spantag2[i].innerHTML);
 grp2.push(tmp);
 }
 
 atag3 = document.querySelectorAll('#group3 a');
 imgtag3 = document.querySelectorAll('#group3 img');
 spantag3 = document.querySelectorAll('#group3 span');
 for (var i=0; i&lt;atag3.length; i++) {
 tmp = [];
 tmp.push(atag3[i].href);
 tmp.push(imgtag3[i].src);  tmp.push(imgtag3[i].alt);  tmp.push(imgtag3[i].title);
 tmp.push(spantag3[i].innerHTML);
 grp3.push(tmp);
 }
 
 showGrp(grp1);   showGrp(grp2);   showGrp(grp3);
 }
 function showGrp(grp) {  // alert(grp.length); 
 for (var i=0; i&lt;grp.length; i++) {
 //    document.getElementById('debug').innerHTML += grp[i][0];
 document.getElementById('debug').innerHTML += ' '+grp[i][1];
 document.getElementById('debug').innerHTML += ' '+grp[i][4];
 document.getElementById('debug').innerHTML += '&lt;br&gt;';
 } document.getElementById('debug').innerHTML += '&lt;br&gt;';
 }
 &lt;/script&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

The 'Mixem' button is there to demo the case where a change can occur.

It could be modified like my earlier post to have the 'setInterval' timed changes.

@JMRKERJun 28.2017 — #Along the idea of '.'s suggestion, here is a demo (in previous post) you can try. ?

Modify the code to match your CSS and image choices.

The 'Mixem' button is there to demo the case where a change can occur.

It could be modified like my earlier post to have the 'setInterval' timed changes for each group.

@John-footerauthorJul 02.2017 — #Along the idea of '.'s suggestion, here is a demo (in previous post) you can try. ?

Modify the code to match your CSS and image choices.

The 'Mixem' button is there to demo the case where a change can occur.

It could be modified like my earlier post to have the 'setInterval' timed changes for each group.[/QUOTE]

Thank you, JMRKER!

I'll give it a try and I'll report back.

My goodness this example contains of a large amount of code that I'm still trying to understand! ?

@JMRKERJul 02.2017 — #Thank you, JMRKER!

I'll give it a try and I'll report back.

My goodness this example contains of a large amount of code that I'm still trying to understand! ?[/QUOTE]

Look carefully. A lot of it is repeated code with different variables to process.

It could be condensed a bit with a few subroutines.

Good Luck!;

?

@John-footerauthorJul 17.2017 — #Look carefully. A lot of it is repeated code with different variables to process.

It could be condensed a bit with a few subroutines.

Good Luck!;

?[/QUOTE]

Thank you. I think I'm ok now with the code.

Also in #JavaScript _↴

unique dropdown to url problem faulty syntax?onClick problem

Success!

Help @John-footer spread the word by sharing this article on Twitter...

Tweet This

Randomize three lists

25 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Randomize three lists

25 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

25 Comments(s) _↴

Also in #JavaScript _↴