Search jQuery

jQuery Forum

Changing background on different parts of 3 x 3 grid

in Using jQuery • 5 years ago

I have a 3 x 3 grid - each part of the grid has a different background image. I would like to change 1 section of the grid background after say 5 seconds - fade in a new background. Three seconds later I would like a different random part of the grid to change its background.

The following html, css and jQuery changes the background image on each container but to the same background - not what I'm trying to achieve - any help would be greatly appreciated.

Here is the html:

<body>
<div class="grid">
<div class = "row1">
<div class = "container column1"></div>
<div class = "container column2"></div>
<div class = "container column3"></div>
</div>
<div class = "row2">
<div class = "container column1"></div>
<div class = "container column2"></div>
<div class = "container column3"></div>
</div>
<div class = "row3">
<div class = "container column1"></div>
<div class = "container column2"></div>
<div class = "container column3"></div>
</div>
</div>
</body>

This the css so far - I have only put a background on the top left so far

* {
margin: 0px;
padding: 0px;
box-sizing:border-box;
}
.grid {
margin-left: auto;
margin-right: auto;
width: 900px;
height: 300px;
background-color:#22F501;
}
.container {
float: left;
width: 300px;
height: 300px;
background-color: #E4F903;
border-top: 20px solid #B6B6B6;
border-right: 20px solid #B6B6B6;
border-bottom: 20px solid #B6B6B6;
}
.container:first-child {
border-left: 20px solid #B6B6B6;
}
.row1 .column1 {
background-image: url(images/maatariki_main.jpeg);
background-size: 280px 280px;
background-repeat: no-repeat;
}

This jQuery will change the background but it will change it for all of the containers to the same background -p not the desired result.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function () {
var container = $('.container');
var backgrounds = [
'url(http://static.jsbin.com/images/jsbin_static.png)',
'url(http://static.jsbin.com/images/popout.png)'];
var current = 0;
function nextBackground() {
container.css(
'background',
backgrounds[current = ++current % backgrounds.length]);
setTimeout(nextBackground, 5000);
}
setTimeout(nextBackground, 5000);
body.css('background', backgrounds[0]);
});
});

Replies(1)

watusiware

Re: Changing background on different parts of 3 x 3 grid

5 years ago

You are more likely to get help if you make a jsFiddle that others can try and modify.

It's unclear if you have any jQuery question - it seems like you are just asking others to debug or finish your program logic. The forum is more for help with jQuery in case you have some misunderstanding about how some jQuery function works, etc.

I see you have a list of URLs (currently, only two URLs). But you only ever use the first one.

You can use the Javascript Math.random() function to choose a random URL, and again to choose a random square. See especially "Getting a random integer between two values"

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

It will be useful to get a jQuery object with all of your squares:

var $containers = $('.container');

$containers.length will return the number of containers.

$containers.get(0) will return the first container's element. $containers.get(1) will return the second. Etc.

Top Reply

Response title

Attachments

jQuery Forum

Changing background on different parts of 3 x 3 grid

Replies(1)

Re: Changing background on different parts of 3 x 3 grid

Statistics

Tags

Actions