Changes/additions red:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>ProHTML ticker w/mouseover Pause</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#dropcontentsubject{
width: 250px;
font-weight: bold;
}
.dropcontent{
width: 250px;
height: 200px;
border: 1px solid black;
background-color: #DFDFFF;
padding: 3px;
display:block;
}
#dropcontainer {
width:250px
}
</style>
<script type="text/javascript">
/***********************************************
* ProHTML Ticker script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
* Modified for mouseover pause 7/25/06 in
* http://www.dynamicdrive.com/forums/ by jscheuer1
***********************************************/
var tickspeed=3000 //ticker speed in miliseconds (2000=2 seconds)
var enablesubject=1 //enable scroller subject? Set to 0 to hide
var pause=1 //enable mouseover pausing? 1=yes 0=no
if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.dropcontent{display:none;}\n')
document.write('</style>\n')
}
var selectedDiv=0
var totalDivs=0
var going
function contractall(){
var inc=0
while (document.getElementById("dropmsg"+inc)){
document.getElementById("dropmsg"+inc).style.display="none"
inc++
}
}
function expandone(){
var selectedDivObj=document.getElementById("dropmsg"+selectedDiv)
contractall()
document.getElementById("dropcontentsubject").innerHTML=selectedDivObj.getAttribute("subject")
selectedDivObj.style.display="block"
selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
going=setTimeout("expandone()",tickspeed)
}
function startscroller(){
while (document.getElementById("dropmsg"+totalDivs)!=null)
totalDivs++
expandone()
if (!enablesubject)
document.getElementById("dropcontentsubject").style.display="none"
}
function pauseIt(){
if(pause)
clearTimeout(going)
}
function resume(){
if(pause)
going=setTimeout("expandone()", 750);
}
if (window.addEventListener)
window.addEventListener("load", startscroller, false)
else if (window.attachEvent)
window.attachEvent("onload", startscroller)
</script>
</head>
<body>
<div id="dropcontainer" onmouseover="pauseIt();" onmouseout="resume();">
<div id="dropcontentsubject"></div>
<div id="dropmsg0" class="dropcontent" subject="What is JavaScript?">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
</div>
<div id="dropmsg1" class="dropcontent" subject="Java & JavaScript Differences">
Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages. Java programs need to be compiled before they can run, while JavaScript do not.
</div>
<div id="dropmsg2" class="dropcontent" subject="What is DHTML?">
DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
</div></div>
</body>
</html>
Notes: Style, Script and Markup have all changed. Be sure to set the width of #dropcontainer to the same value as the width of .dropcontent in the style section. Don't miss the added closing </div> tag at the end.
New Comer (less than 5 posts)
Pausing ProHTML Ticker
Posting Permissions
Reply With Quote
Bookmarks