I have a load of images overlapping, I just done this by giving a css style of margin:0 -20px 0 -20px;. They overlap the one on the left and the one above, its to unioform looking. Is there any way to use js/jquery to give a class a random z-index?
Cheers................
Yes I would imagine implementing this by simply creating a function that reads in the length (count) of images then during a loop pick a random value, the. Use the .css() method to apply it.
If you attmo to provide code, we can probably help tweak this concept.
Hey thanks for the reply.
This is the code I have tried
<script type="text/javascript">
function nailthumb-container{
document.getElementByClass('nailthumb-container').style.zIndex = Math.floor(Math.random() * 256);
}
</script>
But this doesnt work!
So I also tried this
<script type="text/javascript">
$(document).ready(function(){
$(".nailthumb-container").css('zIndex','Math.floor(Math.random() * 256'));
});
</script>
This is the css for .nailthumb-container
.nailthumb-container {
width: 120px;
height: 120px;
margin:0 -30px -45px 0;
padding: 0px;
overflow: hidden;
text-align: left;
float:left
}
Not working either...................
I dont have a moment right now to do some testing with this concept... in the meantime, with the samples you tried, did you look at the source code to see if in fact, the styles are being applied? did you check with any browser dev tool?
I checked the source and it seems that the styles are not being applied! Ive never used any browser dev tools! I'll look into it now.......................
So, try this when applying CSS via jQuery...
var randomNum = do your random math here...$(".nailthumb-container").css('z-index', randomNum);
That still isnt applying the styles!
This is what I have now
<script type="text/javascript">
var randomNum = Math.floor(Math.random() * 256)
$(".nailthumb-container").css('z-index', randomNum);
)};
</script>
I'll give it a try as soon as I have a chance in front of a PC.
Thank you very much
Ok, so as I mentioned in my first response, you need to loop through the elements and apply a random z-index value to each. I took a look at your example and put something together which you should be able to work from.
here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div class="nailthumb-container"></div>
<div class="nailthumb-container"></div>
<div class="nailthumb-container"></div>
<div class="nailthumb-container"></div>
<script>
$( ".nailthumb-container").each(function() {
$(this).css('z-index', Math.floor(Math.random() * 256));
});
</script>
</body>
</html>
Here is a screenshot from Chrome's Dev tool showing that random z-index's were applied...
If you look at the script block, all that it is doing is looping through each of the elements that are assigned the class of "nailthumb-container". Then we assign the random z-index to the current item within the loop. The loop continues until all items are evaluated.
Thank you very much, that is working now!
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.