1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

rolling bug with IE8 and firefox

Discussion in 'JavaScript' started by catinuk, Nov 24, 2009.

0
  1. #1
    Hi buddys,
    I'm trying to create a rolling area on my webpage, which will rolling forever on the top corner of my webpage to show the up coming event, the following is my code, however it works in IE7 or lower, in IE 8, it only rolling one turn, in firefox, it's not moving at all!!! Can anyone help and see what shall I do with it??

    Many thanks,
    Cat

    <DIV id=rolllink011
    style="OVERFLOW: hidden; WIDTH: 189px; HEIGHT: 100px">
    <CENTER>
    <DIV id=rolllink1011 style="WIDTH: 189px; HEIGHT: 120px">
    <table width="100%" border="0" id="table011">
    <tr>
    <td height ="100px" width="98%" id="TdBox011">
    <p><strong>Events</strong></p>
    <p align="left">First Event ............Date</p>
    <p align="left">Second Event ........Date</p>
    <p align="left">Third Event ...........Date</p></td>
    </tr>
    </table>
    </DIV>
    </CENTER>
    <CENTER>
    <DIV id=rolllink2011></DIV></CENTER></DIV>


    <script language="Javascript">
    function Marquee011(){
    if(rolllink2011.offsetTop-rolllink011.scrollTop<=0)
    rolllink011.scrollTop-=rolllink1011.offsetHeight;
    else{
    rolllink011.scrollTop++;
    }
    }
    function Start011(){
    var rollspeed011=40;
    var rolllink1=TdBox011.offsetHeight;
    var temp=rolllink1;
    while(temp<rolllink011.offsetHeight)
    {
    document.getElementById("table011").insertRow(1);
    document.getElementById("table011").rows[1].insertCell(0).innerHTML=TdBox011.innerHTML;
    temp+=rolllink1;
    }
    rolllink2011.innerHTML=rolllink1011.innerHTML;
    var MyMar011=setInterval(Marquee011,rollspeed011);
    rolllink011.onmouseover=function() {clearInterval(MyMar011);}
    rolllink011.onmouseout=function() {MyMar011=setInterval(Marquee011,rollspeed011);}
    }
    setTimeout("Start011();",1000);
    </script>
     
    catinuk, Nov 24, 2009 IP
  2. Mike H.

    Mike H. Peon

    Messages:
    219
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #2 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Clickable Rolling Headline</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

/*   Clickable Rolling Headline */
/*   Copyright 2009, Michael J. Hill.  All rights reserved. Used with permission.  www.javascript-demos.com */
/*   Free use of the code, so long as the above notice is kept intact */

	/*** define the structure and behavior ***/
	
	var useWidth = "400px";     // the width of the container;
	var speed = 3.5;            // 3.5 second roll delay;

	/*** end define the structure and behavior ***/

	/*** define the data ***/

	var rollingInfo = [];         // continue the pattern, i.e. tagline_7, link_7;

	rollingInfo['tagline_1'] = "U.S. Pressure Strains Relations With Pakistan"; 
	rollingInfo['link_1'] = "http://news.antiwar.com/2009/10/26/growing-doubts-about-us-as-clinton-heads-to-pakistan/";

	rollingInfo['tagline_2'] = "Pakistan Accuses India of Backing Taliban"; 
	rollingInfo['link_2'] = "http://news.antiwar.com/2009/10/26/pakistan-accuses-india-of-backing-taliban/";

	rollingInfo['tagline_3'] = "Iran Eyes Compromise Deal, Hints at Endorsement of Current Offer"; 
	rollingInfo['link_3'] = "http://news.antiwar.com/2009/10/26/iran-eyes-compromise-deal-hints-at-endorsement-of-current-offer/";

	rollingInfo['tagline_4'] = "Resignation Letter From U.S. Official in Afghanistan"; 
	rollingInfo['link_4'] = "http://original.antiwar.com/news/2009/10/27/resignation-letter-from-us-foreign-service-officer-matthew-p-hoh/";

	rollingInfo['tagline_5'] = "Deadly Shootout at U.N Staff House in Kabul"; 
	rollingInfo['link_5'] = "http://www.msnbc.msn.com/id/33501858/ns/world_news-south_and_central_asia/";

	rollingInfo['tagline_6'] = "Arrogant US Misses the Message From Pakistan's People"; 
	rollingInfo['link_6'] = "http://original.antiwar.com/pfaff/2009/10/27/arrogant-us-misses-the-message-from-pakistans-people/";

	/*** end define the data ***/


	/***  Do no edit below this line ***/
	
	var rollerContainer = "";
	var rollerTimeout = "";
	var headlineCount = 1;
	var linkWindow = "";
	var nInfo = "";
	var nFirst = "";

	function rebuildCircleStr(){

		var circleStr = nInfo.innerHTML.replace(/<br>/gi, "<br>").replace(/<br>$/, "").split("<br>");
		nFirst = circleStr[0];
		var nCurr = circleStr[1];
		circleStr.shift();
		circleStr[circleStr.length] = nFirst + "<br>";
		circleStr = circleStr.join("<br>");
		nInfo.innerHTML = circleStr;
		nFirst = nCurr;
	}
	
	function initRoll(){

		var currPos = rollerContainer.scrollTop;
		if (currPos < rollerContainer.offsetHeight - 7)
			{
			 rollerContainer.scrollTop = currPos + 1;
			 rollerTimeout = setTimeout("initRoll()", 100);
			}
		else 	{
			 rebuildCircleStr();
			 rollerContainer.scrollTop = 0;
			 rollerTimeout = setTimeout("initRoll()", speed * 1000);
			}
	}	

	function openHeadline(nLink){	
		
		linkWindow = linkWindow.closed ? "" : linkWindow;
		var currLink = nLink;
		for (i=0; i<headlineCount; i++)
			{
			 if (rollingInfo['tagline_'+i] == currLink && linkWindow == "")				
				{				 
				 linkWindow = window.open(rollingInfo['link_'+i]);				 
				}	
			 else if (rollingInfo['tagline_'+i] == currLink)
				{ 
				 linkWindow.location.replace(rollingInfo['link_'+i]);
				 linkWindow.focus();
				}				
			}		
		return false;		
	}

	function rollerInit(){

		while (rollingInfo['tagline_'+headlineCount])
			{
			 headlineCount++;
			}
		var nDiv = document.getElementsByTagName('div');
		for (i=0; i<nDiv.length; i++)
			{
			 if (nDiv[i].className == "roller_container")
				{
				 rollerContainer = nDiv[i];
				}
			 if (nDiv[i].className == "roller")
				{
				 nInfo = nDiv[i];
				}
			 if (/right/.test(nDiv[i].className) && /j\.\sh/i.test(nDiv[i].firstChild.data))
				{
				 var rerun = true;
				}
			}	
		rollerContainer.onmouseover = function()
			{
			 clearTimeout(rollerTimeout);
			}
		rollerContainer.onmouseout = function()
			{
			 initRoll();
			}		
		rollerContainer.onclick = function()
			{
			 openHeadline(nFirst);
			}
		rollerContainer.style.width = useWidth;	
		var nRollingLines = "";
		if (!rerun && 1){return useWidth;}
		for (i=1; i<headlineCount; i++)
			{
			 nRollingLines += rollingInfo['tagline_'+i] + "<br>";			
			}	
		nFirst = rollingInfo['tagline_1'];	
		nInfo.innerHTML = nRollingLines;
		rollerTimeout = setTimeout("initRoll()", speed * 1000);		
	}

	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', rollerInit, false) : addEventListener('load', rollerInit, false);	

</script>
<style type="text/css">

	 body
 		{
		 background-color: #fffacd; 
		 margin-top: 60px;
		}

	
	.roller_container
		{    		 	 
   		 height: 20px;   
   		 border: 1px solid black;   		
  		 background-color: #ffffe0;
		 overflow: hidden;
		 cursor: pointer;
		}  

	.roller
		{
	 	 font-family: arial;
	 	 font-size: 9pt;    
		 color: blue;
		 text-align: center;		 	 		
	 	 padding-top: 3px;		 				      
		}	

	.copyright_MJH 
		{
		 width: 92%;
		 margin-left: auto; 
		 margin-right: auto; 
		 margin-top: 50px;
		 background-color: transparent;
	   	 text-align: center;
		 font-family: veranda; 
		 font-size: 8pt;
		 color: #d3d3d3;
		}

	.copyright_MJH  a 
		{
		 color: #b0e0e6;
		 text-decoration: none;
		}

</style>
</head>
	<body>

		<div class="roller_container">
			<div class="roller"></div>  					                                     
                </div>    

<!-- This copyright notice must be included in the document where the code is used -->
		<div class="copyright_MJH">
			Clickable Rolling Headline, Copyright &copy; 2009 Michael J. Hill
			<a href="http://www.javascript-demos.com">JavaScript Demos</a>
			All rights reserved. Used with permission.
		</div>
<!-- This copyright notice must be included in the document where the code is used -->

	</body>
</html>
    Code (markup):
     
    Last edited: Nov 24, 2009
    Mike H., Nov 24, 2009 IP
  3. catinuk

    catinuk Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi Mike

    Thanks for your code, but I'm confused, once I change the width and height of the heading box, the text is not rolling smoothly, the texts will suddenly drop down at some point, could you teach me how to control it please?
    thanks!

    Cat
     
    catinuk, Nov 25, 2009 IP
  4. Mike H.

    Mike H. Peon

    Messages:
    219
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #4
    It involves several values. The code below is a "larger" version.

    You'll just have to experiment.

    Here's the original applicable CSS:
    
.roller_container
		{    		 	 
   		[I][B] height: 20px;   [/B][/I]
   		 border: 1px solid black;   		
  		 background-color: #ffffe0;
		 overflow: hidden;
		 cursor: pointer;
		}  

	.roller
		{
	 	 font-family: arial;
	 	[I][B] font-size: 9pt;    [/B][/I]
		 color: blue;
		 text-align: center;		 	 		
	 	[I][B] padding-top: 3px;		 [/B][/I]				      
		}
    Code (markup):

    Here's the "larger" version:
    
.roller_container
		{    		 	 
   		[B][I] height: 22px; [/I][/B]
		 border: 1px solid black;   		
  		 background-color: #ffffe0;
		 overflow: hidden;
		 cursor: pointer;
		}  

	.roller
		{		
	 	 font-family: arial;
	 	[I][B] font-size: 11pt;  	[/B][/I]	
		 color: blue;
		 text-align: center;		 	 		
	 	[I][B] padding-top: 2px;		 [/B][/I]		      
		}
    Code (markup):
    You may even have to edit this line of script, the "7":
    function initRoll(){

		var currPos = rollerContainer.scrollTop;
		if (currPos < rollerContainer.offsetHeight - [B][I]7)[/I][/B]
    Code (markup):
    It wasn't necessary for THIS "larger" version, but it MAY be necessary for other sizes.

    That's all I can do.
    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Clickable Rolling Headline</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

/*   Clickable Rolling Headline */
/*   Copyright 2009, Michael J. Hill.  All rights reserved. Used with permission.  www.javascript-demos.com */
/*   Free use of the code, so long as the above notice is kept intact */

	/*** define the structure and behavior ***/
	
	var useWidth = "600px";     // the width of the container;
	var speed = 3.5;            // 3.5 second roll delay;

	/*** end define the structure and behavior ***/

	/*** define the data ***/

	var rollingInfo = [];         // continue the pattern, i.e. tagline_7, link_7;

	rollingInfo['tagline_1'] = "U.S. Pressure Strains Relations With Pakistan"; 
	rollingInfo['link_1'] = "http://news.antiwar.com/2009/10/26/growing-doubts-about-us-as-clinton-heads-to-pakistan/";

	rollingInfo['tagline_2'] = "Pakistan Accuses India of Backing Taliban"; 
	rollingInfo['link_2'] = "http://news.antiwar.com/2009/10/26/pakistan-accuses-india-of-backing-taliban/";

	rollingInfo['tagline_3'] = "Iran Eyes Compromise Deal, Hints at Endorsement of Current Offer"; 
	rollingInfo['link_3'] = "http://news.antiwar.com/2009/10/26/iran-eyes-compromise-deal-hints-at-endorsement-of-current-offer/";

	rollingInfo['tagline_4'] = "Resignation Letter From U.S. Official in Afghanistan"; 
	rollingInfo['link_4'] = "http://original.antiwar.com/news/2009/10/27/resignation-letter-from-us-foreign-service-officer-matthew-p-hoh/";

	rollingInfo['tagline_5'] = "Deadly Shootout at U.N Staff House in Kabul"; 
	rollingInfo['link_5'] = "http://www.msnbc.msn.com/id/33501858/ns/world_news-south_and_central_asia/";

	rollingInfo['tagline_6'] = "Arrogant US Misses the Message From Pakistan's People"; 
	rollingInfo['link_6'] = "http://original.antiwar.com/pfaff/2009/10/27/arrogant-us-misses-the-message-from-pakistans-people/";

	/*** end define the data ***/


	/***  Do no edit below this line ***/
	
	var rollerContainer = "";
	var rollerTimeout = "";
	var headlineCount = 1;
	var linkWindow = "";
	var nInfo = "";
	var nFirst = "";

	function rebuildCircleStr(){

		var circleStr = nInfo.innerHTML.replace(/<br>/gi, "<br>").replace(/<br>$/, "").split("<br>");
		nFirst = circleStr[0];
		var nCurr = circleStr[1];
		circleStr.shift();
		circleStr[circleStr.length] = nFirst + "<br>";
		circleStr = circleStr.join("<br>");
		nInfo.innerHTML = circleStr;
		nFirst = nCurr;
	}
	
	function initRoll(){

		var currPos = rollerContainer.scrollTop;
		if (currPos < rollerContainer.offsetHeight - 7)
			{
			 rollerContainer.scrollTop = currPos + 1;
			 rollerTimeout = setTimeout("initRoll()", 100);
			}
		else 	{
			 rebuildCircleStr();
			 rollerContainer.scrollTop = 0;
			 rollerTimeout = setTimeout("initRoll()", speed * 1000);
			}
	}	

	function openHeadline(nLink){	
		
		linkWindow = linkWindow.closed ? "" : linkWindow;
		var currLink = nLink;
		for (i=0; i<headlineCount; i++)
			{
			 if (rollingInfo['tagline_'+i] == currLink && linkWindow == "")				
				{				 
				 linkWindow = window.open(rollingInfo['link_'+i]);				 
				}	
			 else if (rollingInfo['tagline_'+i] == currLink)
				{ 
				 linkWindow.location.replace(rollingInfo['link_'+i]);
				 linkWindow.focus();
				}				
			}		
		return false;		
	}

	function rollerInit(){

		while (rollingInfo['tagline_'+headlineCount])
			{
			 headlineCount++;
			}
		var nDiv = document.getElementsByTagName('div');
		for (i=0; i<nDiv.length; i++)
			{
			 if (nDiv[i].className == "roller_container")
				{
				 rollerContainer = nDiv[i];
				}
			 if (nDiv[i].className == "roller")
				{
				 nInfo = nDiv[i];
				}
			 if (/right/.test(nDiv[i].className) && /j\.\sh/i.test(nDiv[i].firstChild.data))
				{
				 var rerun = true;
				}
			}	
		rollerContainer.onmouseover = function()
			{
			 clearTimeout(rollerTimeout);
			}
		rollerContainer.onmouseout = function()
			{
			 initRoll();
			}		
		rollerContainer.onclick = function()
			{
			 openHeadline(nFirst);
			}
		rollerContainer.style.width = useWidth;	
		var nRollingLines = "";
		if (!rerun && 1){return useWidth;}
		for (i=1; i<headlineCount; i++)
			{
			 nRollingLines += rollingInfo['tagline_'+i] + "<br>";			
			}	
		nFirst = rollingInfo['tagline_1'];	
		nInfo.innerHTML = nRollingLines;
		rollerTimeout = setTimeout("initRoll()", speed * 1000);		
	}

	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', rollerInit, false) : addEventListener('load', rollerInit, false);	

</script>
<style type="text/css">

	 body
 		{
		 background-color: #fffacd; 
		 margin-top: 60px;
		}

	
	.roller_container
		{    		 	 
   		 height: 22px; 
		 border: 1px solid black;   		
  		 background-color: #ffffe0;
		 overflow: hidden;
		 cursor: pointer;
		}  

	.roller
		{		
	 	 font-family: arial;
	 	 font-size: 11pt;  		
		 color: blue;
		 text-align: center;		 	 		
	 	 padding-top: 2px;		 		      
		}	

	.copyright_MJH 
		{
		 width: 92%;
		 margin-left: auto; 
		 margin-right: auto; 
		 margin-top: 50px;
		 background-color: transparent;
	   	 text-align: center;
		 font-family: veranda; 
		 font-size: 8pt;
		 color: #d3d3d3;
		}

	.copyright_MJH  a 
		{
		 color: #b0e0e6;
		 text-decoration: none;
		}

</style>
</head>
	<body>

		<div class="roller_container">
			<div class="roller"></div>  					                                     
                </div>    

<!-- This copyright notice must be included in the document where the code is used -->
		<div class="copyright_MJH">
			Clickable Rolling Headline, Copyright &copy; 2009 Michael J. Hill
			<a href="http://www.javascript-demos.com">JavaScript Demos</a>
			All rights reserved. Used with permission.
		</div>
<!-- This copyright notice must be included in the document where the code is used -->

	</body>
</html>
    Code (markup):
    Yet another version. "Medium, veranda 12pt":
    
.roller_container
		{    		 	 
   		 height: 23px; 
		 border: 1px solid black;   		
  		 background-color: #ffffe0;
		 overflow: hidden;
		 cursor: pointer;
		}  

	.roller
		{		
	 	 font-family: veranda;
	 	 font-size: 12pt;  		
		 color: blue;
		 text-align: center;		 	 		
	 	 padding-top: 2px;		 		      
		}
    Code (markup):
     
    Last edited: Nov 25, 2009
    Mike H., Nov 25, 2009 IP
  5. catinuk

    catinuk Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hi Mike
    Thanks for your kind reply.
    But what I mean is, how to have multiple lines in the box?

    :confused:

    Thank you!

    Cat
     
    catinuk, Nov 25, 2009 IP
  6. camjohnson95

    camjohnson95 Active Member

    Messages:
    737
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #6
    I'm pretty sure that with firefox, when specifyinng dimension values you need to add + "px" to the end off each. Which works with IE as welll. e.g:
    rolllink011.scrollTop=(rolllink011.scrollTop - rolllink1011.offsetHeight) + "px";

    but you should also use:
    document.getElementById("rolllink011") etc.. when selecting any element, you can assign these to variables for easier access.
     
    camjohnson95, Nov 25, 2009 IP
  7. catinuk

    catinuk Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I've changed my code to make it works in IE8, however the top 3 lines DOCTYPE make it not working with firefox, if I change

    <!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">

    to <html>, it works very well with firefox! but I do need those DOCTYPE, anyone could help with my code to make it working in firefox？ Guys please copy and paste my code to try, Many thanks!!


    <!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">


<body>
         
<div id=link_logo style="OVERFLOW: hidden; WIDTH: 160px; HEIGHT: 90px">
  <div id=link_logo1 style="OVERFLOW: hidden">
    <table cellspacing=0 cellpadding=0 width=164 border=0>
      <tbody>
        <tr>
          <td height=33 align=middle valign=top><p>Event</p></td>
        </tr>
        <tr>
          <td height=33 align=middle valign=top><p>Event1</p></td>
        </tr>
        <tr>
          <td height=33 align=middle valign=top><p>Event2</p></td>
        </tr>
        <tr>
          <td height=33 align=middle valign=top><p>Event3</p></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id=link_logo2></div>
</div>
<script >
 var speed=65
  link_logo2.innerHTML=link_logo1.innerHTML
    function Marquee2(){
	  if(link_logo2.offsetTop-link_logo.scrollTop<=0)
	     link_logo.scrollTop-=link_logo1.offsetHeight
		   else{
		    link_logo.scrollTop++
			   }
			      }
				     var MyMar2=setInterval(Marquee2,speed)
					    link_logo.onmouseover=function() {clearInterval(MyMar2)}
						   link_logo.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
</script>
 
<!-- End of Middle Part Content-->

</body>
</html>
    Code (markup):
     
    catinuk, Nov 25, 2009 IP