• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 957
  • Last Modified:

Rotate DIV content and background image.

Is there a way to rotate the content of <DIV>. At http://www.yardview.com on the home page there is a background pciture of an old yellow tractor and some text.

This is in <DIV id=pageonecontent> I would like to rotate the DIV so I can have different background pictures and then different text (to follow the theme of the picture). I looked at http://www.sitepoint.com/article/random-content-rotation-made  but this appears to just change a link address.

Any ideas are welcome. Thank you.
  • 8
  • 4
1 Solution
I would have everything load on the page but hide certain elements using visibility:none and then use DHTML to rotate through the series of ids, hiding and showing after a period of time.

jamesh1031Author Commented:
Great. Would you have an example that I could look at?
Have a look at this:


It is all loaded in the html but the javascript shows and hides certain divs. All you need to do is make this a timed function instead of onclick.
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

jamesh1031Author Commented:
I need an example of what I'm trying to do, because when you say "all you need to do is make this a timed function" I have no idea how to do that. I am really looking for the solution to the problem, not just discussion or "this is close". Thank you though.
ok, I will have to work up a solution for you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <script type="text/javascript">      
                  var mycontent=new Array()
                  mycontent[0]='<div id="one">Text1</div>'
                  mycontent[1]='<div id="two">Text2</div>'
                  mycontent[2]='<div id="three">Text3</div>'
                  mycontent[3]='<div id="four">Text4</div>'
                  var i=0
                  function altercontent(){
                        if (document.all)
                  else if (document.getElementById){
                        rng = document.createRange();
                        el = document.getElementById("dcontent");
                        htmlFrag = rng.createContextualFragment(mycontent[i]);
                  while (el.hasChildNodes()) el.removeChild(el.lastChild);
                  i=(i==mycontent.length-1)? 0 : i+1
                  setTimeout("altercontent()", 3000)

            <div id="dcontent" style="width:780px; background-color: #E2E2FC; padding: 5px"></div>

To explain a little ... We create an array where you can declare as many divs as you wish. You then call that function and iterate over the array and load the divs into the body div which has the id dcontent. You can play around with the value of 3000 [speed] and remember just put the text in the actual array and create different ids in your css with the various background images.
To see it working with some css add this to the file:

            <style type="text/css">
                  #two{background-color: #CCCCCC;}
                  #three{background-color: #CCCC99;}
                  #four{background-color: #FFFFFF;}                                                      

You will see that the background color is switching so all you need to do then is add your background images to the css and boom.
jamesh1031Author Commented:
Ok, so this will change it based on elapsed time. I  could also do it on page load?
This script runs when the page loads. I am not sure what you mean?
The only problem is that javascript can be disabled so it is probably worth loading something static if this is the case:

 <div>Load alternative static data</div>
jamesh1031Author Commented:
I appreciate your help. I am going to work on this later today. I am going to accept your solution. Thank you.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 8
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now