Fading and/or scrolling for ProHTML ticker

[diamondnular]

1) Script Title:
ProHTML ticker
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...htmlticker.htm
3) Describe problem:

I want to add more functions to ProHTML ticker, such as fading or scrolling as DHTML Ticker script (http://www.dynamicdrive.com/dynamici...neraltick.htm). Is this possible? Anybody help please?

[Blake]

Yes, it's quite possible. Here's an example of making the text slide in from the bottom:

in the header:

<style type="text/css">

#dropcontentsubject{
overflow: hidden;
width: 250px;
font-weight: bold;
}

.dropcontentwrapper{
overflow: hidden;
width: 250px;
height: 200px;
border: 1px solid black;
background-color: #DFDFFF;
padding: 3px;
display:block;
}

</style>

<script type="text/javascript">

var pos = 250;

function slideIn(selectedDivObj)
{
	pos = Math.max (0, pos - 10);
	selectedDivObj.style.paddingTop = pos + "px";
	if (pos != 0) setTimeout(function () {slideIn(selectedDivObj);}, 20);
}

/***********************************************
* ProHTML Ticker script- &#169; 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 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;
pos = 250;
slideIn(selectedDivObj);
setTimeout("expandone()",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>

in the body:

<div id="dropcontentsubject"></div>

<div class="dropcontentwrapper">

<div class="dropcontent" id="dropmsg0" 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 class="dropcontent"  id="dropmsg1"  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 class="dropcontent" id="dropmsg2" 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>

I just took the DD code, rearranged the divs a bit to my liking (I made a wrapper div to surround all the ticker content, which contains all the style info), with overflow set to hidden so that text that is push outside won't be visible, and yet the box itself won't move.

Then I added the function slideIn and the variable pos. The variavle pos always holds the distance of the top of the text from the top of the box. The slide in function calls itself recursively, each time decrementing pos and updating the padding on top of the text until the padding is zero.

Everything else works exactly like the DD code.

Using this example, you should be able to come up with other effects. The basic idea is to have a function like slideIn that recursively calls itself, each time updating some style attribute.

[diamondnular]

Hi Blake,

Thanks for your instruction. I tested your code and it works just fine. Then I tried to code with fading effect like one in http://dynamicdrive.com/dynamicindex2/generaltick.htm but it seems not to work. I am a totally newbie and know little about javascripts. Could you please give another example of fading effect? and where should I find for other dynamic effects?

Thanks you very much.

[diamondnular]

Hi,

I added fade function like this,

<style type="text/css">

#dropcontentsubject{
overflow: hidden;
width: 468px;
font-weight: bold;
}

.dropcontentwrapper{
overflow: hidden;
width: 468px;
height: 60px;
border: 0px solid black;
background-color: white;
padding: 0px;
display:block;
}

</style>

<script type="text/javascript">

var degree = 0;

function fade(selectedDivObj) {
if (degree < 100) degree=degree+10
var d = selectedDivObj
d.filter = "alpha(Opacity="+degree+")"
d.opacity = degree/100
if (degree == 100) setTimeout("fade(selectedDivObj)",100)
}

/***********************************************
* ProHTML Ticker script- &#169; 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=0 //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 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;
degree = 0;
fade(selectedDivObj);
setTimeout("expandone()",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>

but it does not fade at all. Anyone knows why it is?

[Blake]

Here's one problem that jumps out at me:

if (degree == 100) setTimeout("fade(selectedDivObj)",100)

When fade(selectedDivObj) is called, selectedDivObj has gone out of scope. To prevent that you need to do the following instead:

if (degree == 100) setTimeout(function () {fade(selectedDivObj)},100)

[diamondnular]

Hi Blake,

Thanks. I changed the code as you instructed, but the ticker still does not fade at all. You know what is wrong here?

[Blake]

I've been playing around with it, but I haven't had any luck. I've gotten it to work in Mozilla, but since Internet Exploder doesn't support the opacity attribute, it won't work in ie. It obviously can be done with cross-browser support, but doing it may be beyond me.

Of course, if you're not using a background image, it would be easy to do a fade effect by changing the color of the text gradually. I can help you with that if you want.

[diamondnular]

Hi Blake,

The main thing is that I want to add more options in the ProHTML Ticker which fades any html code, not just text. So I still need to look more . Anyway, could you please let me know how you did so that fade option works in Mozilla? Such a newbie like me will learn a lot from that though.

Thanks,