[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 952
  • 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.
0
jamesh1031
Asked:
jamesh1031
  • 8
  • 4
1 Solution
 
Eternal_StudentCommented:
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.

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

http://www.bobbyvandersluis.com/articles/unobtrusiveshowhide/example1b.html

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.
0
Technology Partners: 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!

 
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.
0
 
Eternal_StudentCommented:
ok, I will have to work up a solution for you.
0
 
Eternal_StudentCommented:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
      <head>
            <title>Example</title>
            <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)
                        dcontent.innerHTML=mycontent[i];
                  else if (document.getElementById){
                        rng = document.createRange();
                        el = document.getElementById("dcontent");
                        rng.setStartBefore(el);
                        htmlFrag = rng.createContextualFragment(mycontent[i]);
                  while (el.hasChildNodes()) el.removeChild(el.lastChild);
                  el.appendChild(htmlFrag);}
                  
                  i=(i==mycontent.length-1)? 0 : i+1
                  setTimeout("altercontent()", 3000)
                  }
                  
                  window.onload=altercontent      
            </script>

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

      </body>
</html>
0
 
Eternal_StudentCommented:
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.
0
 
Eternal_StudentCommented:
To see it working with some css add this to the file:

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

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.
0
 
jamesh1031Author Commented:
Ok, so this will change it based on elapsed time. I  could also do it on page load?
0
 
Eternal_StudentCommented:
This script runs when the page loads. I am not sure what you mean?
0
 
Eternal_StudentCommented:
The only problem is that javascript can be disabled so it is probably worth loading something static if this is the case:

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

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

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