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

Rotate DIV content and background image (2)

This question is related to this question and solution: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_22719909.html  Title "Rotate DIV content and background".

<script type="text/javascript">      
                  var mycontent=new Array()
                  mycontent[0]='<div id="pageonecontenone1">Text1</div>'
                  mycontent[1]='<div id="pageonecontentone2">Text2</div>'
                  mycontent[2]='<div id="pageonecontentone3">Text3</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>

A test page can be seen at http://www.yardview.com/indextest.asp 

I want to format the text:  mycontent[0]='<div id="one">Text1</div>' but when I try to format text inside the javascript it doesn't work.
I don't want to change the text and pictures on a time interval, I want to change the text and pictures when the visitor refreshes the page.....
On my local computer it cycles through text1, text2 and text3, online you will see it cycles from text1 to text2 and then says "undefined".
0
jamesh1031
Asked:
jamesh1031
  • 2
1 Solution
 
jasonsbytesCommented:
Seems like you would style it in your css for each id:
#pageoneconentone1
{
  style this one here
}
0
 
JohnModigCommented:
>> I don't want to change the text and pictures on a time interval, I want to change the text and pictures when the visitor refreshes the page.

The only way to do this without passing any parameters to the page is to have a random generated number picking which content to display. Please try the code below. It shows you how to format the text (and the entire div) and it displays the content randomly whenever the page is refreshed.

--------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Javascript test</title>
<style type="text/css" title="currentStyle" media="all">
body {
font:small arial;
margin:20px;
background-color:#ebebeb;
color:#000;
}
#dynamicContent {
width:200px;
height:200px;
border:1px solid black;
}
/* ---- format dynamic content ---- */
.news0 {
font:12px Georgia, Times, 'Times New Roman', serif;
background-color:red;
}
.news1 {
font:10px Arial, Helvetica, sans-serif;
background-color:yellow;
}
.news2 {
font:12px Courier, Helvetica, sans-serif;
background-color:silver;
}
</style>
<script type="text/JavaScript">
//<![CDATA[
function setDynamicContent(){
var myContent=new Array();
//----content------
myContent[0]='Lorem ipsum';
myContent[1]='Dolor sit amet';
myContent[2]='Consectetuer adipiscing elit';
//----code to alter------
// get a random number
var i = Math.round((myContent.length-1)*Math.random());
// set the content
document.getElementById('dynamicContent').innerHTML=myContent[i];
// set the class name
document.getElementById('dynamicContent').className='news'+i;
}
//]]>
</script>
</head>
<body onload="setDynamicContent()">
<div id="dynamicContent"></div>
</body>
</html>
--------------------------------------------------------

Regards,
John
0
 
jamesh1031Author Commented:
This is online at www.yardview.com/indextest2.asp

This is the current text and how I am using CSS to style it. i don't see how I can add a span or <br/> as it is styled in your example.
<p><span class="largefont bold">Yard Management Software Solutions</span></p>
<p><span class="largerfont">Sometimes it's easy to spot late arrivals by the age of the truck. At all other tmes,YardView can help you automatically track carrier performance.<br/><br/> YardView..see what you've been missing.</span></p>

My div content is basically different background images defined in css as pageonecontentone1 pageonecontentone2 and pageonecontentone3

Have I renamed the className correctly. Am I to rename the "myContent"? I'm not seeing my background images.

<script type="text/javascript">
//<![CDATA[
function setDynamicContent(){
var myContent=new Array();
//----content------
myContent[0]='Lorum ipsum';
myContent[1]='Dolor sit amet';
myContent[2]='Consectetuer adipiscing elit';
//----code to alter------
// get a random number
var i = Math.round((myContent.length-1)*Math.random());
// set the content
document.getElementById('dynamicContent').innerHTML=myContent[i];
// set the class name
document.getElementById('dynamicContent').className='pageonecontentone'+i;
}
//]]>
</script>
0
 
JohnModigCommented:
>> i don't see how I can add a span or <br/> as it is styled in your example

Yes, you can. Look in the javascript. You see this line:

 //----content------

Under that line is an array of the content. Simply replace the dummy text with whatever HTML you want, like so:

 myContent[0]='<p><span class="myClass">My styled text</span></p>';
 myContent[1]='<p><span class="anotherClass">Different styled text</span></p>';
 myContent[2]='<p><span class="evenAnotherClass">Even another styled text</span></p>';


>> Have I renamed the className correctly? I'm not seeing my background images.

No, you have not. In your style sheet you are using "#" as a suffix, which means id, not class. A class is identified in CSS by using "." - also the array is zerobased, so the number in the name should go from zero to two, instead of one to three. So - change your CSS to this (using your code):

.pageonecontentone0{

      background-image:url('Images/Strawberry.jpg');
      background-repeat:no-repeat;
      background-position:left;
      margin-top:0px;
      height:350px;
      padding:0px;
            }

.pageonecontentone1{

      background-image:url('Images/OldTractor.jpg');
      background-repeat:no-repeat;
      margin-top:0px;
      height:350px;
      padding:0px;
      }

.pageonecontentone2{

      background-image:url('Images/Binoculars2.jpg');
      background-repeat:no-repeat;
      background-position:left;
      margin-top:0px;
      height:350px;
      padding:0px;
      }


Regards,
John
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

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

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