Can someone please help with this code.
The window is supposed to automatically scroll and move but it isn't working.
(It was taken from a discontinued book called javascript in 24hrs)
The javascript
:
Quote:
var pos=100;
function Scroll(){
if (!document.getElementById ) return;
obj=document.getElementById("thetext");
pos -=1;
if(pos < 0-obj.offsetHeight + 130) return;
obj.style.top=pos;
window.setTimeout("Scroll();", 30);
}
//start scrolling when the page loads
window.onload=Scroll;
|
the css:
Quote:
#thewindow{
position:relative;
width:180px;
height:150px;
overflow:hidden;
border:2px solid red;
}
#thetext{
position:absolute;
width:170px;
left:5px;
top:100px;
}
|
the html:
Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="scroll.css" />
</head>
<body>
<h1> scrolling window example</h1>
<p>This example shows a scrolling window created using javascript and the w3cdom.The red border window is actually a layer that shows a cliped portion of a larger layer"</p>
<div id="thewindow">
<div id="thetext">
<p>This is the first paragraph of the scrolling message.The message is created with regular html</p>
<p>Entries within the scrolling area can use any html tags.They can contain <a href="#">links</a></p>
<p> No limit to the number of paragraphs that you can include here...</p>
<ul>
<li>For example you could format items using a bulleted list.</li>
</ul>
<p>The scrolling ends when the last part of tht scrolling text ids on the screen.You've reached the end.</p>
</div>
</div>
</body>
</html>
|