Change order of images on page load

What you have is a list of images, so using the <ul> (unordered list) and <li> (list item) tags is more semantically correct than using a series of <p> (paragraph) tags. Paragraphs imply text of some kind, and you have none.

1 Like

But if I don’t want to use text and want to use images, I don’t want the bullets with it. I was using the p tag for alignment and spacing. Would I be better to do this:

<center><img src="1.gif" border="0"></center><br><br>
etc

The images with also be hyperlinked so I don’t know if that would make a difference in your comment.

[quote=“javascript7, post:42, topic:288098, full:true”]
But if I don’t want to use text and want to use images, I don’t want the bullets with it.[/quote]

You would be better off using CSS to adjust the presentation of the list.

HTML is used to mark up what they are, in this case a list of images.

<ul id="images">
  <li>...</li>
  <li>...</li>
</ul>

CSS is used to style the presentation of the HTML elements.

#images {
  list-style-type: none;
  padding-left: 0;
}
2 Likes

Then use CSS to remove them. list-style-type:none; https://tympanus.net/codrops/css_reference/list-style-type/ You would also need to remove default padding.

Never choose an HTML element for its appearance. Always choose the most semantically-correct element and use CSS to style it as required.

No! That’s very outdated / obsolete code. Wherever you learned that, I’d forget it as fast as possible.

1 Like

I used this for spacing between images and that doesn’t work. What would be used for that?

  padding-top: 10px;
  padding-bottom: 10px;

Use margin as padding is the space inside the image and margin is the space outside the image.

With IE I get no spacing between images (they run together) and with Chrome I get a little space between images but the larger the margin number it just moves the entire block down the page and the separation between is the same.

<style>
#images {
  list-style-type: none;
  padding-left: 0;
  margin: 10px;
}
</style>

Without seeing your full html it becomes a guessing game but the code I offered above should have been applied to the images themselves and not to the parent as that is not an image.

If your images are inside list items then you could set a margin-bottom on the list items.

e.g.

#images li {margin-bottom:10px;}

If you have different gaps between your images then its likely you don’t have a modern doctype.

Generally when you want images to be stacked vertically you would set them to display:block so that they don’t get stacked on the baseline.

<style>
#images {
  list-style-type: none;
  padding-left: 0;
  margin-bottom:10px;
}
</style>

The code above I get no spacing.

The code below I get the spacing I want but also have bullets which I don’t want for images and then the entire block shifts right. It would appear that the li is overriding the list-style-type: none

<style>
#images li {margin-bottom:10px;}{
  list-style-type: none;
  padding-left: 0;
  margin-bottom:10px;
}
</style>

That’s because you’ve made an error in the CSS code, which should instead start like this:

/*#images li {margin-bottom:10px;}{*/
#images li {
  margin-bottom: 10px;
  list-style-type: none;

That gives me the spacing between images but is indented to the right. Sort of like it would be with bullets, but there are no bullets.

So I did this: padding-right: 40px;

…and it centered it out (took the offset out). Is that technically the best way to do that?

It sounds like you left out the rest of the CSS code.
Setting padding-left to 0 is the best way to remove the left padding on the list items.

#images li {
  margin-bottom: 10px;
  list-style-type: none;
  padding-left: 0;
}

I already had tried that and it still indents. Not sure, but I am thinking that since li deals with bullets the bullets start at the left which pushes the images right.

In testing, the list-style-type and padding are best applied to the container, with the margin being applied to the LI elements instead.

#numbers {
  list-style-type: none;
  padding-left: 0;
}
#numbers li {
  margin-bottom: 10px;
}
1 Like

Spot on! Great logic on your thought through process.

Can this code be replaced with a step-down of images code. Meaning if you have 5 images in the li tag, starting with 1,2,3,4,5 would become 2,3,4,5,1 and then after the timer 3,4,5,1,2 timer 4,5,1,2,3 timer 5,1,2,3,4 timer back to 1,2,3,4,5 etc and then continue that pattern. So each image would be in a chronological rotating order (sort of a loop)?

Yes the default marker (bullet) indent is created on the ul (or ol) element so you need to apply the rule to the ul and not the list (li) elements themselves. Note that the marker indent is created with a default UA left-padding in modern browsers but older IE used to use margin-left instead so its always best to reset the margins and padding on a ul to zero (note that ul/ol get a top and bottom margin by default in modern browsers but older browsers only applied a bottom margin so once again its better to reset all to zero and be done with it).

The list-style-type property actually applies to the list elements themselves but you can also apply that to the ul/ol because the property gets inherited into the list element anyway.

So for consistency cross-browser I would do this:


#numbers {
  list-style-type: none;
  padding: 0;
  margin:0;
}
#numbers li {
  margin-bottom: 10px;
}
1 Like

Yes, you can do that as simply as appending the first element to the container. I’ll do a simple example when I get to the computer tomorrow.

By using this setInterval instead, the top item in the container is moved to the bottom every 3 seconds.

setInterval(function () {
  container.appendChild(container.children[0]);
}, 3000);
1 Like

So you don’t have to take out the randomizer code I see. I thought you would have too.

Can you use both using one to shuffle and one to randomize, of course having to change #numbers to something else?