?
Solved

Javascript needed to rotate DIV class every 15 seconds

Posted on 2008-11-07
10
Medium Priority
?
1,988 Views
Last Modified: 2012-05-05
First, thank you Experts!  You all rock!  

Here is the situation:  I have a javascript that that changes the background image in a DIV by clicking a button, but I need an automated JS that randomly rotates the image through a list of predefined images without the involvement of the user.  I am using this as an example and I am willing to completely replace this model if someone has a better idea to randomly rotate the background image of a DIV without customer interaction.  :)

Here is the current code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
<style type="text/css">
#div1 {
width:100px;
height:30px;
background-image:url(blue.gif);
}
</style>

<script language="javascript" type="text/javascript">
function changeDivImage()
{
    document.getElementById("div1").style.backgroundImage = "url(green.gif)";
}
</script>
</head>
<body>

test <br />

<div id="div1"></div>

<br />
<input type="button" value="Change Background Image" onclick="changeDivImage()" />

</body>
</html>
0
Comment
Question by:The_Big_Tuna
  • 4
  • 3
  • 3
10 Comments
 
LVL 6

Expert Comment

by:lpxtech
ID: 22911185
Hi,

try the following code.
var divClasses = new array();
divClasses[1] = 'divClass';
divClasses[2] = 'divClass2';
divClasses[3] = 'divClass3';
 
var i = 1;
 
setInterval('rotateClasses', 15000);
 
function rotateClasses() {
  if (i == divClasses.length) {
    document.getElementById('divId').className = divClasses[i];
    i = 1;
  } else {
    document.getElementById('divId').className = divClasses[i];
    i++;
  }
}

Open in new window

0
 
LVL 82

Expert Comment

by:hielo
ID: 22911218
try:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<style type="text/css"> 
#div1 { 
width:100px; 
height:30px; 
background-image:url(blue.gif); 
} 
</style> 
 
<script language="javascript" type="text/javascript"> 
//provide comma-separated list of images
var imageList="blue.gif,green.gif,red.gif";
 
var counter=0;
imageList=imageList.split(",");
function changeDivImage() 
{ 
	counter = ((++counter) % imageList.length);
    document.getElementById("div1").style.backgroundImage = "url("+imageList[counter]+")";
    setTimeout("changeDivImage()",1000*60*15);
} 
window.onload=changeDivImage;
</script> 
</head> 
<body> 
 
test <br />
 
<div id="div1"></div> 
 
</body> 
</html>

Open in new window

0
 

Author Comment

by:The_Big_Tuna
ID: 22913068
Thanks...but:

lpxtech - how do I initiate the code?  Can you give me the complete HTML?  

hielo - I tried your code...but nothing happened.  

If you supply the complete HTML i wouldnt be able to mess it up.  :)
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 6

Expert Comment

by:lpxtech
ID: 22913456
I did make a couple mistakes in my first code. Sorry, it was late.

Here is a full code example below. You can view the results at http://www.lpxtech.com/test.php
<!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>My Website</title>
<script type="text/javascript">
	var divClasses = new Array();
	divClasses[1] = 'divClass';
	divClasses[2] = 'divClass2';
	divClasses[3] = 'divClass3';
 
	var i = 1;
 
	setInterval('rotateClasses()', 15000);
 
	function rotateClasses() {
		if (i == divClasses.length) {
			document.getElementById('divId').className = divClasses[i];
			i = 1;
		} else {
			document.getElementById('divId').className = divClasses[i];
			i++;
		}
	}
</script>
<style type="text/css">
	.divClass {
		background: #000000;
		color: #ffffff;
	}
	.divClass2 {
		background: #0099CC;
		color: #000000;
	}
	.divClass3 {
		background: #CC6600;
		color: #ffffff;
	}
</style>
</head>
<body>
 
<div id="divId">
This is the div.
</div>
 
</body>
</html>

Open in new window

0
 
LVL 82

Expert Comment

by:hielo
ID: 22913490
>>hielo - I tried your code...but nothing happened
Oops. I set it for 15 minutes not 15 secodnds. Here's the tested code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<style type="text/css"> 
#div1 { 
width:500px; 
height:300px; 
background:transparent url(http://blog.nanovic.com.au/wp-content/uploads/2006/11/nano-flowers.jpg) scroll no-repeat top left; 
} 
</style> 
 
<script language="javascript" type="text/javascript"> 
//provide comma-separated list of images
var imageList="http://blog.nanovic.com.au/wp-content/uploads/2006/11/nano-flowers.jpg,http://www.missouriplants.com/Yellowopp/Helianthus_divaricatus_flowers.jpg,http://www.cssnz.org/flower.jpg";
 
var counter=-1;
imageList=imageList.split(",");
function changeDivImage() 
{ 
	counter = ((++counter) % imageList.length);
    document.getElementById("div1").style.backgroundImage = "url("+imageList[counter]+")";
    setTimeout("changeDivImage()",1000*15);
} 
window.onload=changeDivImage;
</script> 
</head> 
<body> 
 
test <br />
 
<div id="div1"></div> 
 
</body> 
</html>

Open in new window

0
 

Author Comment

by:The_Big_Tuna
ID: 22913500
lpxtech, I think you are right on target....except that it seems to give the next picture instead of a random picture in the list.  Is this possible?

0
 
LVL 6

Accepted Solution

by:
lpxtech earned 500 total points
ID: 22913600
Code below.

http://www.lpxtech.com/test.php - I dropped the timer to 1sec for testing. The code below is 15secs and working.
<!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>My Website</title>
<script type="text/javascript">
	var divClasses = new Array();
	divClasses[0] = 'divClass';
	divClasses[1] = 'divClass2';
	divClasses[2] = 'divClass3';
	
	var i = 1;
 
	setInterval('rotateClasses()', 15000);
 
	function rotateClasses() {
		document.getElementById('divId').className = divClasses[i];
		i = Math.floor(Math.random()*divClasses.length);
	}
</script>
<style type="text/css">
	.divClass {
		background: #000000;
		color: #ffffff;
	}
	.divClass2 {
		background: #0099CC;
		color: #000000;
	}
	.divClass3 {
		background: #CC6600;
		color: #ffffff;
	}
</style>
</head>
<body>
 
<div id="divId">
This is the div.
</div>
 
</body>
</html>

Open in new window

0
 
LVL 82

Assisted Solution

by:hielo
hielo earned 500 total points
ID: 22913602
>>random picture in the list
try the attached code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<style type="text/css"> 
#div1 { 
width:500px; 
height:300px; 
background:transparent url(http://blog.nanovic.com.au/wp-content/uploads/2006/11/nano-flowers.jpg) scroll no-repeat top left; 
} 
</style> 
 
<script language="javascript" type="text/javascript"> 
//provide comma-separated list of images
var imageList="http://blog.nanovic.com.au/wp-content/uploads/2006/11/nano-flowers.jpg,http://www.missouriplants.com/Yellowopp/Helianthus_divaricatus_flowers.jpg,http://www.cssnz.org/flower.jpg";
imageList=imageList.split(",");
var prev=-1;
function changeDivImage() 
{
	do
	{
		var i=Math.floor(Math.random()*imageList.length);
	}while(prev==i);
	prev=i;
    document.getElementById("div1").style.backgroundImage = "url("+imageList[i ]+")";
    setTimeout("changeDivImage()",1000*15);
} 
window.onload=changeDivImage;
</script> 
</head> 
<body> 
 
test <br />
 
<div id="div1"></div> 
 
</body> 
</html>

Open in new window

0
 
LVL 6

Expert Comment

by:lpxtech
ID: 22913605
Just remember if you want to change the amount of time, in the setInterval('rotateClasses()', 15000) function the 15000 is the amount of time between the interval in milliseconds. 1000=1sec and so on.

Hope this helps.
0
 

Author Closing Comment

by:The_Big_Tuna
ID: 31514623
(Sorry about the delay on getting back to you)
Excellent!  Each answer totally answers the question...but in very different ways.

Thank you so much!
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question