Change order of images on page load


#21

Excuse the interruption (but as a matter of interest only perhaps) for modern browsers and depending on structure you could use flex to change the order without changing the actual html order.

I'm not sure if I adapted your code correctly or efficiently but this seems to work.:slight_smile:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul {
	margin:0;
	padding:0;
	display:flex;
	flex-wrap:wrap;
}
li {
	flex:1 0 100%;
	padding:10px;
	background:#f9f9f9;
	border-bottom:1px solid #fff;
}
</style>
</head>

<body>
<ul id="numbers">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ul>
<script>
function knuthShuffle(arr) {
    var rand, temp, i;
 
    for (i = arr.length - 1; i > 0; i -= 1) {
        rand = Math.floor((i + 1) * Math.random());//get random between zero and i (inclusive)
        temp = arr[rand];//swap i and the zero-indexed number
        arr[rand] = arr[i];
        arr[i] = temp;
    }
    return arr;
}

var numbers = document.querySelector('#numbers');
var list = [];

for (var i = 0; i < numbers.children.length; i += 1) {
  list.push([i]);
}
list = knuthShuffle(list);

for (var i = 0; i < numbers.children.length; i += 1) {
  numbers.children[i].style.order = list[i];
}
</script>
</body>
</html>

Whether it is more efficient to use css to re-order is another question but I was just interested n the practicality. :slight_smile:


#22

I am not using the li tag. I am using images going down the page.

I also have the script in the header tag and using window.onload=function() { just under the script tag. Is that okay to do?

Also, id="numbers", is that a reference back to the JS? (div id="numbers")

Thanks


#23

The script is agnostic about which tags they are in.

It works, but is slower than the best-practice technique of having your scripts at the end of the </body> tag.

That gives the script an easy way to target the items that are to be randomised.


#24

Not exactly sure what you mean by that. This is how I have it set-up:

<div id="numbers">
<p align="center"><img src="1.gif" border="0"></p>
<p align="center"><img src="2.gif" border="0"></p>
<p align="center"><img src="3.gif" border="0"></p>
<p align="center"><img src="4.gif" border="0"></p>
<p align="center"><img src="5.gif" border="0"></p>
</div>

If I have it at the end, do I still use: window.onload=function() {

But do I have to use "numbers" for it to work, meaning the script is looking for "numbers"?


#25

What I mean is that the script has no preference about them being <li> tags. They can be any kind of tags at all

That will be just as slow. Remove the onload piece and the code will start running much faster.

But do I have to use "numbers" for it to work, meaning the script is looking for "numbers"?
[/quote]

No, you don't have to use "numbers". A more generic name of container can be used instead.

// var numbers = document.querySelector('#numbers');
var container = document.querySelector('#numbers');
...
// for (var i = 0; i < numbers.children.length; i += 1) {
for (var i = 0; i < container.children.length; i += 1) {
...
// for (var i = 0; i < numbers.children.length; i += 1) {
  // numbers.children[i].style.order = list[i];
for (var i = 0; i < container.children.length; i += 1) {
  container.children[i].style.order = list[i];

That way, you can change document.querySelector('#numbers') to any kind of selector that you like. So long as it retrieves an appropriate container for what you want to randomise, it will work well.


#26

We can even put that code inside of a function called shuffleElements() and call that function with any container that we want to use.

function shuffleElements(container) {
    ...
}

shuffleElements(document.querySelector('#numbers'));

The code has been updated at https://jsfiddle.net/0azkL7s9/4/ and it's only the last line that needs to be changed, depending on the container that you have for the shuffled elements.


#27

Should the word "numbers" be "container here: Therefore: container.children

function shuffleElements(container) {
    var list = [];

    for (var i = 0; i < container.children.length; i += 1) {
        list.push(numbers.children[i]);
    }

#28

Took out onload and used your last updated code and it works fine, thanks.

It works smoother this way and got rid of that bounce effect that I mentioned previously.

Can a timer component be used where it changes on it's own rather than having to refresh?


#29

Yes of course.

var container = document.querySelector('#numbers');
shuffleElements(container);
setInterval(shuffleElements, 3000, container);

https://jsfiddle.net/0azkL7s9/5/


#30

Yes, very nice!


#31

So to be sure I understand containers, if I want something else to randomize on the page, let's say some text, would I only have to do the following and then change the id="text"?

    var container = document.querySelector('#text);
    shuffleElements(container);
    setInterval(shuffleElements, 3000, container);

#32

Nearly - you are missing a closing quote from the edit you made to the code.


#33

Yes, I see that, thanks.

So in the code, does numbers need to be changed to container?

for (var i = 0; i < container.children.length; i += 1) {
            list.push(numbers.children[i]);

#34

Yes, I missed that - numbers only works because it "just-so-happens" to have the same name as the id name in the HTML. It's not good to rely on that.

It needs to be container instead.

function shuffleElements(container) {
  var list = [];

  for (var i = 0; i < container.children.length; i += 1) {
    // list.push(numbers.children[i]);
    list.push(container.children[i]);
  }
  ...
}

https://jsfiddle.net/0azkL7s9/6/


#35

Now if you wanted to just exchange a text line where it would alternate line 1, then line 2 replaces line 1, then back and forth with it timed - would that be a completely different JS and then using different id's? I am guessing that would be separate in that you are alternating not randomizing.


#36

Yes, that is very different from randomizing.


#37

Thank you.

One last question relating to JS. Does JS code need to changed out from time to time or does it become outdated? Because the code that you wrote works great in the original iPad. I also have 18 year old JS that still works today.


#38

JS tried to be backwards compatible, but even the safest JavaScript in the world cannot work on earlier browsers, such as Netscape 1.


#39

Good knowing that. One more thought ... Can one script conflict with another script on the same page? And if so, is that common? And I suppose that if it conflicts, then 1 won't work?


#40

Yes, yes, and yes.