PDA

View Full Version : Pausing ProHTML Ticker



Squirrels
07-25-2006, 03:44 PM
1) Script Title: ProHTML Ticker

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/prohtmlticker.htm

3) Describe problem: I'm using the ticker to rotate small articles on a home page linking to content within the site. I'd like there to be an option to pause the ticker on mouseover so a reader will have time to read it and click the "more" link.

I'm trying to learn javascript, but this is beyond me. Does anyone have any thoughts on my problem?

jscheuer1
07-25-2006, 04:41 PM
Changes/additions red:


<!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.

Squirrels
07-25-2006, 05:00 PM
Works great. I appreciate your help. :)