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 :)
cguan_77 8 Nearly a Posting Virtuoso
essential 84 Posting Shark Featured Poster
Hi cguan_77,
I guess a <marquee> tag would be enough to help you out on getting this issue.
cguan_77 8 Nearly a Posting Virtuoso
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?
essential 84 Posting Shark Featured Poster
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 += "— <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>< NEW SAMPLE SLIDE CONTENT ></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
cguan_77 8 Nearly a Posting Virtuoso
thanks essential...i'll try it out... :)
essential 84 Posting Shark Featured Poster
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
cguan_77 8 Nearly a Posting Virtuoso
wow..javascript is just a handy stuff for you.. :)
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.