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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts

    Question Set two divs to have same randomly generated background image

    Hello!

    I'm looking for a relatively simple solution to a problem I've encountered. I have two divs on a page that need to be have random backgrounds (this isn't an issue), however I need a way to set BOTH of these divs to the same random background.

    The best way I can think to do it is to generate the random image, store it in a variable and then call the variable as a background image for both of the divs.

    I'm relatively new to jQuery and javascript, so while I understand HOW to do it, i'm not exactly sure syntax-wise how to accomplish it.


    Code:
    <script language="JavaScript">
    var randnum = Math.random();
    var inum = 4;
    // Change this number to the number of images you are using.
    var rand1 = Math.round(randnum * (inum-1)) + 1;
    images = new Array
    images[1] = "img1.jpg"
    images[2] = "img2.jpg"
    images[3] = "img3.jpg"
    images[4] = "img4.jpg"
    var image = images[rand1]
    </script>
    Then alter the background using a css modifier
    (this alteration code might not be correct, THIS IS NOT THE ISSUE, this is just an example to show my intent)
    Code:
    <script language="JavaScript">
    $('div.randomBackground').css({
        'background': image;
    });
    </script>
    I'm unsure how to store the random image in a variable and then call it inside a div....

    Can anybody help me?

    Many thanks!

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,145
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    You have your image stored in a variable already!

    var image = images[rand1];


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    Quote Originally Posted by Philip M View Post
    You have your image stored in a variable already!

    var image = images[rand1];

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    oh hey!

    Haha, ok, so when calling that inside of the divs would i just use that CSS replace and call it like I did in that example?


    Code:
    <script>
    var image = "black"
    $('div.randBg').css('background', ' +image+ ');
    </script>
    Last edited by dylanbaumannn; 06-28-2012 at 05:17 PM.


  •  

    Tags for this Thread

    Posting Permissions

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