ProHTML selectables

**dragon_sa** · 02-19-2012, 04:51 AM

1) Script Title:
ProHTML Ticker

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...htmlticker.htm

3) Describe problem:
Say I have 6 div tags to scroll thru, I want to add 6 links underneath each one would take you to the equivalent div tag, I dont know how to add this function to the script so I can jump to the selected div and then let it continue scrolling from that point, any help with this would be much appreciated.

I am guessing it would possibly be some way of setting the inc var manually with some sort of if statement.

**vwphillips** · 02-19-2012, 09:27 AM

Code:

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
<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;
}

</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
***********************************************/

var tickspeed=2000 //ticker speed in miliseconds (2000=2 seconds)
var enablesubject=1 //enable scroller subject? Set to 0 to hide

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

function contractall(){
 var inc=0;
 while (document.getElementById("dropmsg"+inc)){
  document.getElementById("dropmsg"+inc).style.display="none";
  inc++;
 }
}

function GoTo(nu,ms){
 if (document.getElementById("dropmsg"+nu)){
  clearTimeout(GoTo.to);
  selectedDiv=nu;
  expandone(ms||tickspeed);
 }
 return false;
}

function expandone(ms){
 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;
 GoTo.to=setTimeout(function(){ expandone(); },ms||tickspeed);
}

function startscroller(){
 while (document.getElementById("dropmsg"+totalDivs)!=null){
  totalDivs++;
 }
 expandone();
 if (!enablesubject){
  document.getElementById("dropcontentsubject").style.display="none";
 }
}

if (window.addEventListener)
window.addEventListener("load", startscroller, false)
else if (window.attachEvent)
window.attachEvent("onload", startscroller)

</script>

</head>

<body>
<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>
<input type="button" name="" value="GoTo 0" onmouseup="GoTo(0,5000);" />
<input type="button" name="" value="GoTo 1" onmouseup="GoTo(1);" />
<input type="button" name="" value="GoTo 2" onmouseup="GoTo(2,10000);" />

</body>

</html>

**dragon_sa** · 02-19-2012, 10:35 AM

Thank you very much vwphillips, that works perfectly, I am not much of a javascript programmer, so I have been trying all sorts of obscene combinations all day without success.

**dragon_sa** · 02-21-2012, 02:45 PM

Hi, I created div boxes containing number for the links, to the corresponding div that displays, is it also possible to change the div style of these id's to an active style so they have a highlighted background to them current visible div?

so if I have 6 divs and 6 div selectors, the div selectors have a white background until the corresponding div is selected (either manual or by ticker) changing the div selector background to red for example, and then back to white when the next div displays?

Hope that makes sense.

Div 1 showing -> Div 1 selector box red bg all others white
Div 2 showing -> Div 2 selector box red bg all others white
etc

**vwphillips** · 02-21-2012, 03:55 PM

Code:

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
<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;
}

.page {
 background-Color:#FFCC66;
}

.pageactive {
 background-Color:red;
}

</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
***********************************************/

var tickspeed=2000 //ticker speed in miliseconds (2000=2 seconds)
var enablesubject=1 //enable scroller subject? Set to 0 to hide

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

function contractall(){
 var inc=0;
 while (document.getElementById("dropmsg"+inc)){
  document.getElementById("dropmsg"+inc).style.display="none";
  if (document.getElementById("page"+inc)){
   document.getElementById("page"+inc).className=inc!=selectedDiv?'page':'pageactive';
  }
  inc++;
 }
}

function GoTo(nu,ms){
 if (document.getElementById("dropmsg"+nu)){
  clearTimeout(GoTo.to);
  selectedDiv=nu;
  expandone(ms||tickspeed);
 }
 return false;
}

function expandone(ms){
 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;
 GoTo.to=setTimeout(function(){ expandone(); },ms||tickspeed);
}

function startscroller(){
 while (document.getElementById("dropmsg"+totalDivs)!=null){
  totalDivs++;
 }
 expandone();
 if (!enablesubject){
  document.getElementById("dropcontentsubject").style.display="none";
 }
}

if (window.addEventListener)
window.addEventListener("load", startscroller, false)
else if (window.attachEvent)
window.attachEvent("onload", startscroller)

</script>

</head>

<body>
<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>
<input id="page0" type="button" name="" value="GoTo 0" onmouseup="GoTo(0,5000);" />
<input id="page1" type="button" name="" value="GoTo 1" onmouseup="GoTo(1);" />
<input id="page2" type="button" name="" value="GoTo 2" onmouseup="GoTo(2,10000);" />

</body>

</html>