Javascript Scroll Text

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved

•
•
Join Date: Apr 2007
Posts: 1,117
Reputation: cguan_77 has a little shameless behaviour in the past 
Solved Threads: 92
cguan_77's Avatar
cguan_77 cguan_77 is offline Offline
Veteran Poster

Javascript Scroll Text

 
0
  #1
Aug 4th, 2009
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Javascript Scroll Text

 
0
  #2
Aug 4th, 2009
Hi cguan_77,

I guess a <marquee> tag would be enough to help you out on getting this issue.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2007
Posts: 1,117
Reputation: cguan_77 has a little shameless behaviour in the past 
Solved Threads: 92
cguan_77's Avatar
cguan_77 cguan_77 is offline Offline
Veteran Poster

Re: Javascript Scroll Text

 
0
  #3
Aug 5th, 2009
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?
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Javascript Scroll Text

 
0
  #4
Aug 5th, 2009
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" );

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

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

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

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

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

/* 
 @Text - 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 += "— <u><b>http://www.daniweb.com</b></u><br><br>";
Text += "******************************";

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

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

/* DO EDIT ANYTHING BELOW THIS LINE! */
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2007
Posts: 1,117
Reputation: cguan_77 has a little shameless behaviour in the past 
Solved Threads: 92
cguan_77's Avatar
cguan_77 cguan_77 is offline Offline
Veteran Poster

Re: Javascript Scroll Text

 
0
  #5
Aug 6th, 2009
thanks essential...i'll try it out...
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Javascript Scroll Text

 
0
  #6
Aug 9th, 2009
Hi cguan_77,

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

javascript Syntax (Toggle Plain Text) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.    "http://www.w3.org/TR/html4/loose.dtd">
  3. <html lang="en">
  4. <head>
  5. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7. <meta http-equiv="Content-Style-Type" content="text/css">
  8. <meta http-equiv="Content-Script-Type" content="text/javascript">
  9. <meta http-equiv="Window-target" content="_top">
  10. <title>Free Live Help!</title>
  11. <style type="text/css">
  12. <!--
  13. html, body { 
  14.    font : bold 80%/1.4 "Trebuchet MS", "Bernard MT Condensed", Verdana, Helvetica, Tahoma, Arial, sans-serif;
  15.    height : auto;
  16.    text-align : center;
  17.    width : auto; }
  18.  
  19. html, body, div { 
  20.    background-color : #000000;
  21.    margin : 0;
  22.    padding : 0;
  23.    border : none; }
  24.  
  25. #tableOne { 
  26.  
  27.    margin : 0 auto; 
  28.    background-color : transparent; }
  29.  
  30. #tableOne div {
  31.    letter-spacing : 2px;
  32.    text-align : center;
  33.    margin : 0 auto }
  34.  
  35. #tableOne td {
  36.    border : none;
  37.    vertical-align : bottom;
  38.    width : 100%; }
  39. -->
  40. </style>
  41. <script type="text/javascript">
  42. <!--
  43. var ff = ie = ns4 = 0;
  44. var xTop = { 1 : "top", 2 : "pixelTop" }[ (( document.all && !!!( ff = document.getElementById )) ? ie = 2 : (( ff ) ? ff = 1 : (( ns4 = document.layers ) ? ns4 = 1 : 0 ))) ];
  45.  
  46. // SETTINGS
  47.  
  48. var xBackground = "#000000";
  49. var xColor = "#C0C0C0";
  50. var xWidth = 350;
  51. var xHeight = 200;
  52. var xRestart = xSpeed = 2;
  53. var xPause = 2;
  54. var xCount = 0;
  55. var xRes = 0;
  56. var xContent = [];
  57.  
  58. xContent[ 0 ] = "<span style=\"white-space : nowrap;\">w w w . d a n i w e b . c o m</span>".fontcolor("grey");
  59. var xElement = ( function( xid ) {
  60. var xid = (( ie ) ? xid : (( ff ) ? document.getElementById( xid ) : (( ns4 ) ? document.layers[ xid ] : 0 )));
  61.    return xid;
  62. } );
  63.  
  64. var scroller = ( function() {
  65. var yPos = 0;
  66. var div = xElement( "one" );
  67.    if( div ) {
  68.    yPos = (( ns4 ) ? div.top : parseInt( div.style[ xTop ] ));
  69.       if( yPos > 0 && yPos <= xSpeed ) {
  70.       div.style[ xTop ] = 0;
  71.       setTimeout("scroller()", (( xPause ) * 1000 ));
  72.       } else if( yPos >= xRes *- 1 ) {
  73.          (( ns4 ) ? div.top -= xSpeed : div.style[ xTop ] = ((( yPos ) - xSpeed ) + "px" ));
  74.       setTimeout("scroller()", 100);
  75.       } else {
  76.          (( xCount === xContent.length ) ? xCount = 0 : xCount );
  77.          if( ns4 ) {
  78.             div.top = xHeight;
  79.             div.document.write( xContent[ xCount ] );
  80.             div.document.close();
  81.             xRes = div.document.height;
  82.          } else {
  83.             div.style[ xTop ] = xHeight + "px";
  84.             div.innerHTML = xContent[ xCount ];
  85.             xRes = div.offsetHeight;
  86.          } xCount++; return scroller();
  87.       }
  88.    }
  89. } );
  90. var canCreateElement = ( function() {
  91. var xTable = xElement( "tableOne" );
  92. xTable.onmouseover = ( function() { xSpeed = 0;
  93.    this.onmouseout = ( function() { xSpeed = xRestart; } ); } );
  94.    xTable.width = xWidth;
  95.    xTable.height = xHeight;
  96. var xCell = xTable.rows[ 0 ].cells( 0 );
  97.    xCell.style.height = xHeight + "px";
  98. var divOne = document.createElement( "div" );
  99.    divOne.id = "main";
  100. var divTwo = document.createElement( "div" );
  101.    divTwo.id = "one";
  102. var xRuleSetOne = "";
  103. xRuleSetOne = "background-color : " + xBackground + "; ";
  104. xRuleSetOne += "color : " + xColor + "; ";
  105. xRuleSetOne += "width : " + xWidth + "px; ";
  106. xRuleSetOne += "height : " + xHeight + "px; ";
  107. xRuleSetOne += "clip : rect(0 " + xWidth + "px " + xHeight + "px 0); ";
  108. xRuleSetOne += "position : relative; overflow : hidden;";
  109. var xRuleSetTwo = "";
  110. xRuleSetTwo = "position : relative; width : " + xWidth + "px;";
  111. var xRuleOne = document.createAttribute( "style" );
  112.    xRuleOne.nodeValue = xRuleSetOne;
  113. var xRuleTwo = document.createAttribute( "style" );
  114.    xRuleTwo.nodeValue = xRuleSetTwo;
  115.    divOne.setAttributeNode( xRuleOne );
  116.    divTwo.setAttributeNode( xRuleTwo );
  117.    divOne.appendChild( divTwo );
  118.    xCell.appendChild( divOne ); } );
  119. window.onload = ( function() {
  120.    return function() {
  121.    var xContainer;
  122.       if ( ns4 ) {
  123.       xCotainer = xElement("main").xElement("one");
  124.       xContainer.top = xHeight;
  125.       xContainer.document.write( xContent[ 0 ] );
  126.       xContainer.document.close();
  127.       xRes = xContainer.document.height
  128.       } else {
  129.       xContainer = xElement("one");
  130.       xContainer.style[ xTop ] = xHeight + "px";
  131.       xContainer.innerHTML = xContent[ 0 ];
  132.       xRes = xContainer.offsetHeight;
  133.       } scroller();
  134.    }
  135. } )( );
  136. // -->
  137. </script>
  138. </head>
  139. <body id="html40T">
  140. <table id="tableOne" border="0" cellpadding=" cellspacing="0" summary="JavaScript :: Vertical Text Scroller v1.0">
  141. <tr>
  142. <td><script id="scriptOne" type="text/javascript">
  143. <!--
  144. var divs = ( function( netscape ) {
  145. var netscape = netscape;
  146.    if ( netscape ) {
  147.       document.write( "<ilayer id=\"main\" width=\""+ xWidth + "\" height=\"" + xHeight + "\" bgcolor=\"" + xBackground + "\">\n" );
  148.       document.write( "<layer id=\"one\" width=\"" + xWidth + "\" height=\"" + xHeight + "\" onmouseover=\"xSpeed = 0;\" " );
  149.       document.write( "onmouseout=\"xSpeed = xRestart;\"></layer>\n</ilayer>\n" ); 
  150.    } else { 
  151.       if ( !"createElement" in document ) {
  152.       document.write( "<div style=\"position : relative; overflow : hidden; background-color : " + xBackground + "; width : " );
  153.       document.write( xWidth + "px; height : " + xHeight + "px; clip : rect( 0 " );
  154.       document.write( xWidth + "px " + xHeight + "px 0 ); color : " + xColor + ";\" onmouseover=\"xSpeed = 0;\" onmouseout=\"xSpeed = xRestart\">" );
  155.       document.write( "<div id=\"one\" style=\"position : relative; width : " + xWidth + "px;\"></div></div>" );
  156.       return;
  157.       } canCreateElement();
  158.    } return false;
  159. } )( Boolean( ns4 ));
  160. // Escaping HTML -->
  161. </script></td>
  162. </tr>
  163. </table>
  164. </body>
  165. </html>

-essential
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2007
Posts: 1,117
Reputation: cguan_77 has a little shameless behaviour in the past 
Solved Threads: 92
cguan_77's Avatar
cguan_77 cguan_77 is offline Offline
Veteran Poster

Re: Javascript Scroll Text

 
0
  #7
Aug 9th, 2009
wow..javascript is just a handy stuff for you..
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



ajax ajaxexample ajaxjspservlets api array browser bug captcha captchaformproblem cart checkbox child class close codes cookies createrange() cursor date debugger dependent developer disablefirebug dom dropdown editor element embed engine events explorer ext file firefox form forms getselection google gxt hiddenvalue highlightedword hint html ie7 ie8 iframe images internet java javascript javascripthelp2020 jquery jsf jsfile jsp jump libcurl maps marquee masterpage math matrixcaptcha media object onerror onmouseoutdivproblem onreadystatechange parent paypal pdf php position post programming progressbar prototype rated redirect runtime safari scale scriptlets scroll search security session shopping size software star stars synchronous toggle tweet unicode variables web webservice wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC