Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    41
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Random div class - not more than once though!

    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.
    Last edited by KyleVA; 05-14-2009 at 06:02 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,078
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Something like this:-

    Code:
    <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.

  • Users who have thanked Philip M for this post:

    KyleVA (05-15-2009)

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Expanding on Philip's solution ...

    Code:
    <!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>

  • Users who have thanked adios for this post:

    KyleVA (05-15-2009)

  • #4
    New Coder
    Join Date
    Jan 2009
    Posts
    41
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    Something like this:-

    Code:
    <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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •