...

View Full Version : Random div class - not more than once though!



KyleVA
05-14-2009, 06:58 PM
Problem: I have three containers (divs) all with different background images assigned via a class. Each div will contain a background image displaying a different product. I'd like these three divs to randomly assign a class via JavaScript.

The problem I'm running into is preventing the same class from being assigned twice to two divs on the same page load. Then you'd have two divs with the same background image.

Any ideas?

Thanks for your help in advance.

Philip M
05-14-2009, 08:34 PM
Something like this:-


<script type = "text/javascript">

var imgArray = ['img1.gif','img2.gif','img3.gif','img4.gif','img5.gif', 'img6.gif', 'img7.gif', 'img8.gif', 'img9.gif', 'img10.gif'];
function randOrd(){return (Math.round(Math.random())-0.5); }
imgArray.sort(randOrd);
var pic1 = imgArray[0]; // first random image
var pic2 = imgArray[1]; // second random image
var pic3 = imgArray[2]; // third random image

alert (imgArray);

for (var i =0; i<=2; i++) {
document.write("<img src = imgArray[i]>"); // display first three random images
}

</script>


BTW, the time to say "thanks" is afterwards, not beforehand which gives the impression that you take other people's voluntary unpaid assistance for granted. Or as British politician Neil Kinnock put it, "Don't belch before you have had the meal." Prefer to use "please" beforehand and if you find a response helpful then you can use the "Thank User For This Post" button.

adios
05-14-2009, 10:48 PM
Expanding on Philip's solution ...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>untitled</title>
<style type="text/css">
div {width:95px;height:95px;margin:10px;}
div.one {background-image:url(http://www.codingforums.com/images/icons/icon5.gif);}
div.two {background-image:url(http://www.codingforums.com/images/icons/icon6.gif);}
div.three {background-image:url(http://www.codingforums.com/images/icons/icon9.gif);}
</style>
<script type = "text/javascript">

function something()
{
var divclasses = ['one','two','three'];
function randOrd(){return (Math.round(Math.random())-0.5); }
divclasses.sort(randOrd);
for (var i =0; i<=2; i++)
{
document.getElementById('product' + (i+1)).className = divclasses[i];
}
}

onload = something;

</script>
</head>
<body>
<div id="product1"></div>
<div id="product2"></div>
<div id="product3"></div>
</body>
</html>

KyleVA
05-15-2009, 03:10 PM
Something like this:-


<script type = "text/javascript">

var imgArray = ['img1.gif','img2.gif','img3.gif','img4.gif','img5.gif', 'img6.gif', 'img7.gif', 'img8.gif', 'img9.gif', 'img10.gif'];
function randOrd(){return (Math.round(Math.random())-0.5); }
imgArray.sort(randOrd);
var pic1 = imgArray[0]; // first random image
var pic2 = imgArray[1]; // second random image
var pic3 = imgArray[2]; // third random image

alert (imgArray);

for (var i =0; i<=2; i++) {
document.write("<img src = imgArray[i]>"); // display first three random images
}

</script>


BTW, the time to say "thanks" is afterwards, not beforehand which gives the impression that you take other people's voluntary unpaid assistance for granted. Or as British politician Neil Kinnock put it, "Don't belch before you have had the meal." Prefer to use "please" beforehand and if you find a response helpful then you can use the "Thank User For This Post" button.

Haha, I usually actually offer someone who helps me a couple bucks - actually. Regardless, once again - thanks for your help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum