hi, just need help on how to get started on how to make a scrolling text on an iframe..like a scrolling news on a page.. any ideas is greatly appreciated :)

Hmm..nope..i want it to scroll vertically in an iframe...and stop scrolling during mouseover.. and continue to scroll when mouse is not on focus on the iframe.. any ideas?

Hi cguan_77,

Try to load this in your iframe source:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Window-target" content="_top">
<title>Free Live Help!</title>
<style type="text/css">
<!--
table {
   margin : 0 auto;
   font : normal normal normal 80%/1.4 Verdana, Helvetica, Arial, sans-serif;
   border-collapse : collapse;
   border : none;
   letter-spacing : 1px;
   background-color : transparent !important;
}
td {
   vertical-align : bottom;
   text-align : left;
   border : none; }
-->
</style>
<script type="text/javascript">
<!--
/*

********************************
Developed By DANIuser : essential -
 * Created : August 6th, 2009 -
 * Title : Vertical Text Scroller -
 * This notice must stay intact for use - 

 - http://www.daniweb.com/
********************************
*/

var div;
var divx;
var postop;
var count = 0;
var ie = !!( document.all && !document.getElementById );
var settop = (( ie ) ? "pixelTop" : "top" );

/* [b]CONFIGURATION[/b] */
/* 
 @[b]xbgcolor[/b] - Specify the background color for the scroll area. */ 
var xbgcolor = "#F0F0F0";

/* 
 @[b]xWidth[/b] - Specify the width of the scroll area. */ 
var xWidth = 350; 

/* 
 @[b]xHeight[/b] - Specify the height of the scroll area */ 
var xHeight = 100; 

/* 
 @[b]Speed[/b] - Speed control */ 
var Speed = 2; // Speed Control.

/* 
 @[b]Pause[/b] - Control the pause duration of the text in seconds */ 
var Pause = 2; 

/* 
 @[b]Text[/b] - This is my preloaded text content. */

var Text = "";
Text += "******************************<br><br>";

Text += "Developed By DANIuser : essential -<br>";

Text += "* Created : August 6th, 2009 -<br>";
Text += "* Title : Vertical Text Scroller v1.0 -<br>";
Text += "* This notice MUST stay intact for use -<br><br>"; 
Text += "&#8212; <u><b>http://www.daniweb.com</b></u><br><br>";
Text += "******************************";

/* 
 @[b]xcontent[/b] - Add more slide here.
   You can add slide as many as you'd like by specifying new content inside the xcontent[Text[b],[/b] newVar[b],[/b] newVar[b],[/b] ... ]].
   New entry must be delimited with a ([b],[/b])..
 */

var xcontent = [ Text, "<b>&lt; NEW SAMPLE SLIDE CONTENT &gt;</b>" ];

/* [b]DO EDIT ANYTHING BELOW THIS LINE![/b] */
var Restart = Speed;
var element = ( function( xid ) {
   var xid = (( xid = document.getElementById( xid )) ? xid : xid ) || 0;
   return xid;
} );
   var scroller = ( function() {
   var xtop = (( ie ) ? div.style.top : parseInt( div.style.top ));

      if ( xtop > 0 && xtop <= Speed ) {
      div.style[ settop ] = 0;
      setTimeout( "scroller()", (( Pause ) * 1000 ));
      } else if ( xtop >= (( postop ) *- 1 )) {
      if ( ie )
         div.style[ settop ] = ((( xtop )  -= Speed ) + "px" );
      else
         div.style[ settop ] = ((( xtop ) - Speed ) + "px" );
      setTimeout( "scroller()", 100 );
      } else {
      (( count ===  xcontent.length ) ? count = 0 : count );
      div.style[ settop ] = xHeight + "px";
      div.innerHTML = xcontent[ count ];
      postop = div.offsetHeight;
      count++;
      return scroller();
      }
   } );
onload = ( function( html ) {
   return function() {
   var xtable = element("table");
   xtable.style.width = xWidth + "px";
   xtable.style.height = xHeight + "px";
   var xCell = xtable.rows[ 0 ].cells( 0 );
   xCell.setAttribute( "style", "background-color : " + xbgcolor + "; width : 100%; padding : 1em; " );
      if ( "createElement" in document ) {
      var divx = document.createElement( "div" );
      var xdiv = document.createElement( "div" );
      xdiv.id = "one";
      divx.id = "main";
      var setStyle = document.createAttribute("style");
      var node = "background-color : " + xbgcolor + "; ";
      node += "color : #405060; ";
      node += "width : " + xWidth + "px; height : " + xHeight + "px; margin : 0 auto; ";
      node += "overflow : hidden; position : relative; ";
      node += "clip : rect( 0 " + xWidth + "px " + xHeight + "px 0 );";
      setStyle.nodeValue = node;
      divx.setAttributeNode( setStyle );
      divx.appendChild( xdiv );
      xCell.appendChild( divx );
      div = element("one");
      div.style.position = "relative";
      div.style[ settop ] = xHeight + "px";
      div.style.width = xWidth + "px";
      div.innerHTML = xcontent[ 0 ];
      count = 1; 
      postop = div.offsetHeight;
      scroller();
      xtable.onmouseover = ( function() {
      Speed = 0;
         this.onmouseout = ( function() {
         Speed = Restart;
         } )
      } ); 
      }
   }
} )( )
// -->
</script>
</head>
<body>
<table id="table" frame="void" rules="none" cellpadding="0" cellspacing="0">
<tr>
<td style="width : 100%"></td>
</tr>
</table>
</body>
</html>

-essential

Hi cguan_77,

here's the enhanced version of my text-scroller code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Window-target" content="_top">
<title>Free Live Help!</title>
<style type="text/css">
<!--
html, body { 
   font : bold 80%/1.4 "Trebuchet MS", "Bernard MT Condensed", Verdana, Helvetica, Tahoma, Arial, sans-serif;
   height : auto;
   text-align : center;
   width : auto; }

html, body, div { 
   background-color : #000000;
   margin : 0;
   padding : 0;
   border : none; }

#tableOne { 

   margin : 0 auto; 
   background-color : transparent; }

#tableOne div {
   letter-spacing : 2px;
   text-align : center;
   margin : 0 auto }

#tableOne td {
   border : none;
   vertical-align : bottom;
   width : 100%; }
-->
</style>
<script type="text/javascript">
<!--
var ff = ie = ns4 = 0;
var xTop = { 1 : "top", 2 : "pixelTop" }[ (( document.all && !!!( ff = document.getElementById )) ? ie = 2 : (( ff ) ? ff = 1 : (( ns4 = document.layers ) ? ns4 = 1 : 0 ))) ];

// SETTINGS

var xBackground = "#000000";
var xColor = "#C0C0C0";
var xWidth = 350;
var xHeight = 200;
var xRestart = xSpeed = 2;
var xPause = 2;
var xCount = 0;
var xRes = 0;
var xContent = [];

xContent[ 0 ] = "<span style=\"white-space : nowrap;\">w w w . d a n i w e b . c o m</span>".fontcolor("grey");
var xElement = ( function( xid ) {
var xid = (( ie ) ? xid : (( ff ) ? document.getElementById( xid ) : (( ns4 ) ? document.layers[ xid ] : 0 )));
   return xid;
} );

var scroller = ( function() {
var yPos = 0;
var div = xElement( "one" );
   if( div ) {
   yPos = (( ns4 ) ? div.top : parseInt( div.style[ xTop ] ));
      if( yPos > 0 && yPos <= xSpeed ) {
      div.style[ xTop ] = 0;
      setTimeout("scroller()", (( xPause ) * 1000 ));
      } else if( yPos >= xRes *- 1 ) {
         (( ns4 ) ? div.top -= xSpeed : div.style[ xTop ] = ((( yPos ) - xSpeed ) + "px" ));
      setTimeout("scroller()", 100);
      } else {
         (( xCount === xContent.length ) ? xCount = 0 : xCount );
         if( ns4 ) {
            div.top = xHeight;
            div.document.write( xContent[ xCount ] );
            div.document.close();
            xRes = div.document.height;
         } else {
            div.style[ xTop ] = xHeight + "px";
            div.innerHTML = xContent[ xCount ];
            xRes = div.offsetHeight;
         } xCount++; return scroller();
      }
   }
} );
var canCreateElement = ( function() {
var xTable = xElement( "tableOne" );
xTable.onmouseover = ( function() { xSpeed = 0;
   this.onmouseout = ( function() { xSpeed = xRestart; } ); } );
   xTable.width = xWidth;
   xTable.height = xHeight;
var xCell = xTable.rows[ 0 ].cells( 0 );
   xCell.style.height = xHeight + "px";
var divOne = document.createElement( "div" );
   divOne.id = "main";
var divTwo = document.createElement( "div" );
   divTwo.id = "one";
var xRuleSetOne = "";
xRuleSetOne = "background-color : " + xBackground + "; ";
xRuleSetOne += "color : " + xColor + "; ";
xRuleSetOne += "width : " + xWidth + "px; ";
xRuleSetOne += "height : " + xHeight + "px; ";
xRuleSetOne += "clip : rect(0 " + xWidth + "px " + xHeight + "px 0); ";
xRuleSetOne += "position : relative; overflow : hidden;";
var xRuleSetTwo = "";
xRuleSetTwo = "position : relative; width : " + xWidth + "px;";
var xRuleOne = document.createAttribute( "style" );
   xRuleOne.nodeValue = xRuleSetOne;
var xRuleTwo = document.createAttribute( "style" );
   xRuleTwo.nodeValue = xRuleSetTwo;
   divOne.setAttributeNode( xRuleOne );
   divTwo.setAttributeNode( xRuleTwo );
   divOne.appendChild( divTwo );
   xCell.appendChild( divOne ); } );
window.onload = ( function() {
   return function() {
   var xContainer;
      if ( ns4 ) {
      xCotainer = xElement("main").xElement("one");
      xContainer.top = xHeight;
      xContainer.document.write( xContent[ 0 ] );
      xContainer.document.close();
      xRes = xContainer.document.height
      } else {
      xContainer = xElement("one");
      xContainer.style[ xTop ] = xHeight + "px";
      xContainer.innerHTML = xContent[ 0 ];
      xRes = xContainer.offsetHeight;
      } scroller();
   }
} )( );
// -->
</script>
</head>
<body id="html40T">
<table id="tableOne" border="0" cellpadding=" cellspacing="0" summary="JavaScript :: Vertical Text Scroller v1.0">
<tr>
<td><script id="scriptOne" type="text/javascript">
<!--
var divs = ( function( netscape ) {
var netscape = netscape;
   if ( netscape ) {
      document.write( "<ilayer id=\"main\" width=\""+ xWidth + "\" height=\"" + xHeight + "\" bgcolor=\"" + xBackground + "\">\n" );
      document.write( "<layer id=\"one\" width=\"" + xWidth + "\" height=\"" + xHeight + "\" onmouseover=\"xSpeed = 0;\" " );
      document.write( "onmouseout=\"xSpeed = xRestart;\"></layer>\n</ilayer>\n" ); 
   } else { 
      if ( !"createElement" in document ) {
      document.write( "<div style=\"position : relative; overflow : hidden; background-color : " + xBackground + "; width : " );
      document.write( xWidth + "px; height : " + xHeight + "px; clip : rect( 0 " );
      document.write( xWidth + "px " + xHeight + "px 0 ); color : " + xColor + ";\" onmouseover=\"xSpeed = 0;\" onmouseout=\"xSpeed = xRestart\">" );
      document.write( "<div id=\"one\" style=\"position : relative; width : " + xWidth + "px;\"></div></div>" );
      return;
      } canCreateElement();
   } return false;
} )( Boolean( ns4 ));
// Escaping HTML -->
</script></td>
</tr>
</table>
</body>
</html>

-essential

This question has already been answered. Start a new discussion instead.