943,563 Members | Top Members by Rank

Ad:
Aug 4th, 2009
0

Javascript Scroll Text

Expand Post »
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
Similar Threads
Reputation Points: 19
Solved Threads: 115
Nearly a Posting Virtuoso
cguan_77 is offline Offline
1,317 posts
since Apr 2007
Aug 4th, 2009
0

Re: Javascript Scroll Text

Hi cguan_77,

I guess a <marquee> tag would be enough to help you out on getting this issue.
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Aug 5th, 2009
0

Re: Javascript Scroll Text

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?
Reputation Points: 19
Solved Threads: 115
Nearly a Posting Virtuoso
cguan_77 is offline Offline
1,317 posts
since Apr 2007
Aug 5th, 2009
0

Re: Javascript Scroll Text

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
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Aug 6th, 2009
0

Re: Javascript Scroll Text

thanks essential...i'll try it out...
Reputation Points: 19
Solved Threads: 115
Nearly a Posting Virtuoso
cguan_77 is offline Offline
1,317 posts
since Apr 2007
Aug 9th, 2009
0

Re: Javascript Scroll Text

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
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Aug 9th, 2009
0

Re: Javascript Scroll Text

wow..javascript is just a handy stuff for you..
Reputation Points: 19
Solved Threads: 115
Nearly a Posting Virtuoso
cguan_77 is offline Offline
1,317 posts
since Apr 2007

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Detect div change
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: A little problem I aam haaving wih a drag and drop





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC