dcsimg
www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 26

Thread: Randomize three lists

  1. #1
    Join Date
    Jun 2017
    Posts
    18

    Randomize three lists

    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
    HTML Code:
    <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>
    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;}
    JS
    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]);
    }

  2. #2
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,835

    Lightbulb

    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.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> HTML5 page </title>
    <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" -->
    
    <style>
    #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;}
    </style>
    
    </head>
    <body>
    <button onclick="rndArrange()">Mix-em</button>
    
    <div id="group1">
     <ul>
      <li><a href="1.html"><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href="1.html"><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href="1.html"><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href="1.html"><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href="1.html"><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href="1.html"><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href="1.html"><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href="1.html"><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href="1.html"><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href="1.html"><img src="" alt="" title="www..com"> <span></span> </a></li>
     </ul>
    </div>
    
    <div id="group2">
     <ul>
      <li><a href="1.html"><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href="1.html"><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href="1.html"><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href="1.html"><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href="1.html"><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href="1.html"><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href="1.html"><img src="" alt="" title="www..com"> <span></span> </a></li>
     </ul>
    </div>
    
    <div id="group3">
     <ul>
      <li><a href="1.html"><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href="1.html"><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href="1.html"><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href="1.html"><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href="1.html"><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href="1.html"><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href="1.html"><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href="1.html"><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href="1.html"><img src="" alt="" title="www..com"> <span></span> </a></li>
     </ul>
    </div>
    
    <script>
    // From: http://www.webdeveloper.com/forum/showthread.php?364393-Randomize-three-lists&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<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<sel.length; i++) { sel[i].innerHTML = imgGroup1[i][3]; }
    
          sel = document.querySelectorAll('#group2 img');
      for (var i=0; i<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<sel.length; i++) { sel[i].innerHTML = imgGroup2[i][3]; }
    
          sel = document.querySelectorAll('#group3 img');
      for (var i=0; i<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<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();
    
    </script>
    
    </body>
    </html>

  3. #3
    Join Date
    Jun 2017
    Posts
    18
    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.

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,736
    If you are looking to make an integer with Math.random() * i | 0 you are missing the ~~ and () to make ~~(Math.random() * i) | 0 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
    Code:
    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...
    HTML Code:
    <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>
    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.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  5. #5
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,835
    Quote Originally Posted by John-footer View Post
    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.
    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.

  6. #6
    Join Date
    Jun 2017
    Posts
    18
    Quote Originally Posted by JMRKER View Post
    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.
    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!

  7. #7
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,835

    Lightbulb

    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.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> HTML5 page </title>
    <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=""><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href=""><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href=""><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href=""><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href=""><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href=""><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href=""><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href=""><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href=""><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href=""><img src="" alt="" title="www..com"> <span></span> </a></li>
     </ul>
    </div>
    
    <div id="group2">
     <ul>
      <li><a href=""><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href=""><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href=""><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href=""><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href=""><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href=""><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href=""><img src="" alt="" title="www..com"> <span></span> </a></li>
     </ul>
    </div>
    
    <div id="group3">
     <ul>
      <li><a href=""><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href=""><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href=""><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href=""><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href=""><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href=""><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href=""><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href=""><img src="" alt="" title="www..com"> <span></span> </a></li>
      <li><a href=""><img src="" alt="" title="www..com"> <span></span> </a></li>
     </ul>
    </div>
    
    <script>
    // From: http://www.webdeveloper.com/forum/showthread.php?364393-Randomize-three-lists&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<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<sel.length; i++) { sel[i].innerHTML = imgGroup1[i][3]; }
          sel = document.querySelectorAll('#group1 a');
      for (var i=0; i<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<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<sel.length; i++) { sel[i].innerHTML = imgGroup2[i][3]; }
          sel = document.querySelectorAll('#group2 a');
      for (var i=0; i<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<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<sel.length; i++) { sel[i].innerHTML = imgGroup3[i][3]; }
          sel = document.querySelectorAll('#group3 a');
      for (var i=0; i<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);
    }
    </script>
    
    </body>
    </html>
    Last edited by JMRKER; 06-23-2017 at 10:19 PM.

  8. #8
    Join Date
    Jun 2017
    Posts
    18
    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!

  9. #9
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,736
    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.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  10. #10
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,835

    Question

    Quote Originally Posted by John-footer View Post
    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!
    Sorry, I don't understand your statements shown in RED 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.
    Last edited by JMRKER; 06-23-2017 at 10:11 PM.

  11. #11
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,835
    Quote Originally Posted by \\.\ View Post
    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.
    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?
    Last edited by JMRKER; 06-23-2017 at 10:24 PM. Reason: Additional clarification request.

  12. #12
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,736
    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/sh...45#post1509145

    HTML Code:
    <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>
    then using
    Code:
    window.onload = function(){
      img = Array.prototype.slice.call( document.images );
      for(d in img)  
    		console.log(">>> "+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.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  13. #13
    Join Date
    Jun 2017
    Posts
    18
    Quote Originally Posted by \\.\ View Post
    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/sh...45#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.
    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
    HTML 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">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>

    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;}

  14. #14
    Join Date
    Jun 2017
    Posts
    18
    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....put_C7TGbx.gif

    Note: the link will expire in about 6 hours.

  15. #15
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,736
    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).
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

Thread Information

Users Browsing this Thread

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

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