dcsimg
www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 26 of 26

Thread: Randomize three lists

  1. #16
    Join Date
    Oct 2013
    Location
    Sheboygan, Wisconsin
    Posts
    1,390
    Some of us only use text only browsers. That means no graphics, no javascript, no etc.
    Dillo is such a browser.

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

    Wink

    Quote Originally Posted by Train View Post
    Some of us only use text only browsers. That means no graphics, no javascript, no etc.
    Dillo is such a browser.
    Whoa! Middle ages internet.

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

  3. #18
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,730
    Think thats bad, my modem is coal fired beast....
    --> 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...

  4. #19
    Join Date
    Oct 2013
    Location
    Sheboygan, Wisconsin
    Posts
    1,390
    Quote Originally Posted by \\.\ View Post
    Think thats bad, my modem is coal fired beast....
    As it does not need fixing, keep it.

  5. #20
    Join Date
    Jun 2017
    Posts
    18
    Quote Originally Posted by \\.\ View Post
    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).
    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.

  6. #21
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,730
    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
    Code:
    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.
    --> 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...

  7. #22
    Join Date
    Feb 2005
    Location
    Indianapolis, IN
    Posts
    477
    (Admin: posting for JMRKER)

    Here is a demo you can try.
    Modify the code to match your CSS and image choices.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> HTML5 page </title>
    <style>
     img { height: 50px; width: 50px; }
     ul { list-style: none; }
     li { float: left; }
    </style>
    <base href="https://www.nova.edu/portal/optometry/otm/pics/4fun/">
    </head>
    <body>
    
    <div id="group1">
    <ul>
    <li><a href="1.html"> <img name="grp1" src="11.jpg" alt=".jpg" title="www..com"> <span>blue</span> </a></li>
    <li><a href="1.html"> <img name="grp1" src="12.jpg" alt=".jpg" title="www..com"> <span>red</span> </a></li>
    <li><a href="1.html"> <img name="grp1" src="13.jpg" alt=".jpg" title="www..com"> <span>green</span> </a></li>
    <li><a href="1.html"> <img name="grp1" src="14.jpg" alt=".jpg" title="www..com"> <span>yellow</span> </a></li>
    <li><a href="1.html"> <img name="grp1" src="15.jpg" alt=".jpg" title="www..com"> <span>black</span> </a></li>
    <li><a href="1.html"> <img name="grp1" src="21.jpg" alt=".jpg" title="www..com"> <span>cyan</span> </a></li>
    <li><a href="1.html"> <img name="grp1" src="22.jpg" alt=".jpg" title="www..com"> <span>white</span> </a></li>
    <li><a href="1.html"> <img name="grp1" src="23.jpg" alt=".jpg" title="www..com"> <span>pink</span> </a></li>
    <li><a href="1.html"> <img name="grp1" src="24.jpg" alt=".jpg" title="www..com"> <span>grey</span> </a></li>
    <li><a href="1.html"> <img name="grp1" src="25.jpg" alt=".jpg" title="www..com"> <span>orange</span> </a></li>
    </ul>
    </div>
    <p style="clear:both"> 
    
    <div id="group2">
    <ul>
    <li><a href="1.html"> <img name="grp2" src="31.jpg" alt=".jpg" title="www..com"> <span>swirl1</span> </a></li>
    <li><a href="1.html"> <img name="grp2" src="32.jpg" alt=".jpg" title="www..com"> <span>swirl2</span> </a></li>
    <li><a href="1.html"> <img name="grp2" src="33.jpg" alt=".jpg" title="www..com"> <span>swirl3</span> </a></li>
    <li><a href="1.html"> <img name="grp2" src="34.jpg" alt=".jpg" title="www..com"> <span>swirl4</span> </a></li>
    <li><a href="1.html"> <img name="grp2" src="35.jpg" alt=".jpg" title="www..com"> <span>light</span> </a></li>
    <li><a href="1.html"> <img name="grp2" src="41.jpg" alt=".jpg" title="www..com"> <span>gradient</span> </a></li>
    <li><a href="1.html"> <img name="grp2" src="42.jpg" alt=".jpg" title="www..com"> <span>text</a></span> </li>
    </ul>
    </div>
    <p style="clear:both"> 
    
    <div id="group3">
    <ul>
    <li><a href="1.html"> <img name="grp3" src="43.jpg" alt=".jpg" title="www..com"> <span>text</span> </a></li>
    <li><a href="1.html"> <img name="grp3" src="44.jpg" alt=".jpg" title="www..com"> <span>text</span> </a></li>
    <li><a href="1.html"> <img name="grp3" src="45.jpg" alt=".jpg" title="www..com"> <span>text</span> </a></li>
    <li><a href="1.html"> <img name="grp3" src="51.jpg" alt=".jpg" title="www..com"> <span>text</span> </a></li>
    <li><a href="1.html"> <img name="grp3" src="52.jpg" alt=".jpg" title="www..com"> <span>Hi!!!!</span> </a></li>
    <li><a href="1.html"> <img name="grp3" src="53.jpg" alt=".jpg" title="www..com"> <span>text</span> </a></li>
    <li><a href="1.html"> <img name="grp3" src="54.jpg" alt=".jpg" title="www..com"> <span>text</span> </a></li>
    <li><a href="1.html"> <img name="grp3" src="55.jpg" alt=".jpg" title="www..com"> <span>text</span> </a></li>
    <li><a href="1.html"> <img name="grp3" src="61.jpg" alt=".jpg" title="www..com"> <span>text</span> </a></li>
    </ul>
    </div>
    <p style="clear:both"> 
    
    <button onclick="mixem()">Mix</button>
    <div id="debug"></div>
    
    <script>
    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<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<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<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<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<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<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<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 += '<br>';
      } document.getElementById('debug').innerHTML += '<br>';
    }
    </script>
    
    </body>
    </html>
    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.
    Last edited by brad jones; 06-28-2017 at 04:26 PM. Reason: testing to see if post can be updated. (SWW issue)

  8. #23
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,830
    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.

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

  10. #25
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,830
    Quote Originally Posted by John-footer View Post
    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!
    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!;

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

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

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