another fading way for ProHTML Ticker

**dukevn** · 07-17-2008, 05:36 AM

1) Script Title: PrpHTML Ticker

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

3) Describe problem:

I am testing another way applying fading effect for ProHTML Ticker based on Image Fader (http://home.comcast.net/~jscheuer1/s...eset_write.htm). Here is the code I came up with:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML Ticker</title>
<style type="text/css">

#tickersubject{
width: 250px;
font-weight: bold;
}

.tickercontainer{
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('.tickercontainer{display:none;}\n')
document.write('</style>\n')
}

var selectedDiv=0
var totalDivs=0

/* Cross Browser Image Fader © 2007 John Davenport Scheuer
   This comment must remain for Legal Use  */

var faders=[];
// Preset each image's initial opacity (0 to 100):
// ex:  faders[x]=['image_id', initial_opacity];

////////////// Stop Editing //////////////

function fade(el, way, op, opinc, speed){
	if(!fade.prprt&&!fade.ie)
		return;
	var id=typeof el=='string'? el : el.id, el=typeof el=='object'? el : document.getElementById(el);
	clearTimeout(fade[id+'timer']);
	var op_obj=fade.ie6? el.filters[0] : el.style,
	waym=way=='in'? 1 : -1, speed=speed? speed*1 : 30, opinc=opinc&&opinc>=1? opinc*(fade.ie? 1 : .01) : opinc? opinc : fade.ie? 5 : .05,
	op=op&&fade.ie? op*1 : op&&op*1>=1? Math.min(op*.01, .99) : op? op : waym>0&&fade.ie? 100 : waym>0? .99 : 0;
	if(!fade.ie6&&!fade[id+'yet']){
		if(fade.prprt)
			op_obj[fade.prprt]=Math.min(fade.preset(id)*.01, .99);
		else if(fade.ie)
			op_obj.filter='alpha(opacity='+fade.preset(id)+')';
		fade[id+'yet']=true;
	}
	if(fade.prprt&&Math.abs(op*1-op_obj[fade.prprt]*1)<opinc)
		op_obj[fade.prprt]=op;
	else if(fade.prprt)
		op_obj[fade.prprt]=fade.ie6? op_obj[fade.prprt]*1 + opinc*waym : Math.min(op_obj[fade.prprt]*1 + opinc*waym, .99);
	else if (fade.ie&&Math.abs(op*1 - op_obj.filter.replace(/\D/g,'')*1)<opinc)
		op_obj.filter='alpha(opacity='+op+')';
	else if (fade.ie)
		op_obj.filter='alpha(opacity='+[op_obj.filter.replace(/\D/g,'')*1 + opinc*waym]+')';
	else
		return;
	if(op_obj[fade.prprt]&&op_obj[fade.prprt]*waym<op*waym||!fade.ie6&&fade.ie&&op_obj.filter.replace(/\D/g,'')*waym<op*waym)
		fade[id+'timer']=setTimeout(function(){fade(el, way, op, opinc, speed)}, speed);
}

if(document.documentElement&&document.documentElement.style){
	fade.d=document.documentElement, fade.t=function(o){return typeof fade.d.style[o]=='string'}; if(fade.d.filters)
	document.write('<span id="ie_test" style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);position:absolute;top:-1000px;">p<\/span>');
	fade.ie=fade.d.filters&&ie_test.filters[0], fade.ie6=fade.ie&&typeof ie_test.filters[0].opacity=='number',
	fade.prprt=fade.t('opacity')||fade.ie6? 'opacity' : fade.t('MozOpacity')? 'MozOpacity' : fade.t('KhtmlOpacity')? 'KhtmlOpacity' : null;
}

fade.set=function(){
	var prop=fade.prprt=='opacity'? 'opacity' : fade.prprt=='MozOpacity'? '-moz-opacity' : '-khtml-opacity';
	document.write('\n<style type="text/css">\n')
	for (var i = 0; i < faders.length; i++)
		document.write('#'+faders[i][0]+' {\n'+(fade.ie? 'filter:progid:DXImageTransform.Microsoft.alpha(opacity='+faders[i][1]+')' : prop+':'+Math.min(faders[i][1]*.01, .99))+';\n}\n');
	document.write('<\/style>\n')
}

fade.preset=function(id){
	for (var i = 0; i < faders.length; i++)
		if (id==faders[i][0])
			return faders[i][1];
		return 0;
}

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


function expandone(){
var selectedDivObj=document.getElementById("message"+selectedDiv)
contractall()
document.getElementById("tickersubject").innerHTML=selectedDivObj.getAttribute("subject")
selectedDivObj.style.display="block"
fade("message"+selectedDiv,'in',100);
selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
setTimeout("expandone()",tickspeed)
}

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

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

</script>
</head>
<body>
<div id="tickersubject"></div>

<div id="message0" class="tickercontainer" 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="message1" class="tickercontainer" 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="message2" class="tickercontainer" 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>
</body>
</html>

The problem is every element fades the first time only, and after that they do not fade at all. Why is that? Everybody helps please!

Thanks,

D.

**jscheuer1** · 07-17-2008, 06:29 AM

As far as I can tell, you haven't preset any images, and aren't fading any images out. The fact that any fading occurs at all is more of a mystery to me than the fact, as you say that something(s) only fade in once. This would be a lot easier for me to work with if you put up a demo of the problem:

Please post a link to the page on your site that contains the problematic code so we can check it out.

**dukevn** · 07-17-2008, 12:15 PM

Originally Posted by jscheuer1

As far as I can tell, you haven't preset any images, and aren't fading any images out. The fact that any fading occurs at all is more of a mystery to me than the fact, as you say that something(s) only fade in once. This would be a lot easier for me to work with if you put up a demo of the problem:

Please post a link to the page on your site that contains the problematic code so we can check it out.

Sorry, I usually works with my local server so forgot to load it on a real server. Here it is:
http://mangthugian.com/test/HTMLTicker.html

I agree that I have not preset any images, because honestly I do not know how the code works. I believe fade.set is the function to preset all images, but even when I did not call it, it seems that all images are preset to opacity 0 before the code loads, then fade() works as normal when first time loaded, but after that, all opacity is set at 100 and there is nothing more for fade() to do now. It is kind of mystery for me

.

D.

**jscheuer1** · 07-17-2008, 02:48 PM

After all that, I now realize that you probably didn't need to put up that demo - though it shows that you are serious about this (I wanted the demo primarily to make sure I could see what images were involved and how they fit into the layout). But you have no images, so really shouldn't be using the image fader script. It will work in some browsers to fade ordinary elements, but not in IE unless the element 'has layout', which your elements do, owing to their set widths (other things can constitute 'layout' in IE). However, in IE 7 fading text results in a loss of its Clear Type anti-aliasing quality, which makes it look anemic. And, in order to fade things in IE, a filter must first be set for it. That and the desirability at times to have an initial opacity set for all browsers is what the preset array (which you skipped) is for.

So, even if we get the image fader working, it will make a mess of things in IE 7, and more importantly, since you are fading things in repeatedly, there needs to be a mechanism to fade them out again (reset) before the next fade in.

First, to solve IE 7's problem we will fade a covering element out to reveal each new ticker item beneath it. And to solve the reset problem for all browsers, we will fade this cover back in - instantly, just in time to slowly reveal the next ticker item.

This can all be done with a couple of extra elements, some added styles and a mod to the image fading script I recently made up that handles more (not all) elements than just images, and that has a reset function, and finally setting up the preset array for our added cover element, and using this reset function in the contractall phase of the ticker script.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HTML Ticker</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

#tickersubject{
width: 250px;
font-weight: bold;
}

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

/* Style for Fader script */
#fadeDivContainer {
position:relative;
width:258px; /* will generally constrain the width of the element you are covering, can be set to that element's width */
/* margin:0 auto; */ /* uncomment to center */
}
#fadeDivCover {
position:absolute;
z-index:10000;
top:0;
left:0;
display:none;
width:258px; /* Set to width of container */
height:100%; /* Leave as 100% for full coverage */
background-color:#fff; /* Set to covered element's background, may use full background styles including image */
}
/* End Style for Fader script */

</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 title? Set to 0 to hide

if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.tickercontainer{display:none;}\n')
document.write('<\/style>\n')
}

var selectedDiv=0
var totalDivs=0

/* Cross Browser Fader © 2008 John Davenport Scheuer
   This comment must remain for Legal Use  */

var faders=[];
// Preset each element's initial opacity (0 to 100):
// ex:  faders[x]=['element_id', initial_opacity, optional_extend_coverage_IE6_and_less];

faders[0]=['fadeDivCover', 100, true];

////////////// Stop Editing //////////////

function fade(el, way, op, opinc, speed, cover){
if(!fade.prprt&&!fade.ie)
return;
var id=typeof el=='string'? el : el.id; el=typeof el=='object'? el : document.getElementById(el);
clearTimeout(fade[id+'timer']);
var op_obj=fade.ie6? el.filters[0] : el.style,
waym=way=='in'? 1 : -1; speed=speed? speed*1 : 30, opinc=opinc&&opinc>=1? opinc*(fade.ie? 1 : .01) : opinc? opinc : fade.ie? 5 : .05,
op=op&&fade.ie? op*1 : op&&op*1>=1? Math.min(op*.01, .9999) : op? op : waym>0&&fade.ie? 100 : waym>0? .9999 : 0;
if(!fade.ie6&&!fade[id+'yet']){
if(fade.prprt)
op_obj[fade.prprt]=Math.min(fade.preset(id)*.01, .9999);
else if(fade.ie)
op_obj.filter='alpha(opacity='+fade.preset(id)+')';
fade[id+'yet']=true;
}
if(fade.prprt&&Math.abs(op*1-op_obj[fade.prprt]*1)<opinc)
op_obj[fade.prprt]=op;
else if(fade.prprt)
op_obj[fade.prprt]=fade.ie6? op_obj[fade.prprt]*1 + opinc*waym : Math.min(op_obj[fade.prprt]*1 + opinc*waym, .9999);
else if (fade.ie&&Math.abs(op*1 - op_obj.filter.replace(/\D/g,'')*1)<opinc)
op_obj.filter='alpha(opacity='+op+')';
else if (fade.ie)
op_obj.filter='alpha(opacity='+[op_obj.filter.replace(/\D/g,'')*1 + opinc*waym]+')';
else
return;
el.style.display=cover&&way=='out'&&op_obj[fade.prprt]<=0||(op_obj.filter&&op_obj.filter.replace(/\D/g,'')*1<=0)? 'none' : 'block';
if(op_obj[fade.prprt]&&op_obj[fade.prprt]*waym<op*waym||!fade.ie6&&fade.ie&&op_obj.filter.replace(/\D/g,'')*waym<op*waym)
fade[id+'timer']=setTimeout(function(){fade(el, way, op, opinc, speed, cover)}, speed);
}
fade.reset = function(el, way, cover){
if(!fade.prprt && !fade.ie) return;
var id=typeof el=='string'? el : el.id; el=typeof el=='object'? el : document.getElementById(el);
clearTimeout(fade[id+'timer']);
var op_obj=fade.ie6? el.filters[0] : el.style;
if(fade.prprt)
op_obj[fade.prprt] = fade.ie6 && way == 'in'? 100 : way == 'in'? 0.9999 : 0;
else
op_obj.filter='alpha(opacity=' + (way == 'in'? 100 : 0) + ')';
if(cover)
el.style.display = way == 'in'? 'block' : 'none';
}
if(document.documentElement&&document.documentElement.style){
/*@cc_on @*/ /*@if(@_jscript_version >= 5)try{fade.ieOK=document.documentElement.filters;}catch(e){fade.ieOK=false}; @end @*/
fade.d=document.documentElement, fade.t=function(o){return typeof fade.d.style[o]=='string'}; if(fade.ieOK)
document.write('<span id="ie_test" style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);position:absolute;top:-1000px;">p<\/span>'),
fade.ie=fade.d.filters&&ie_test.filters[0], fade.ie6=fade.ie&&typeof ie_test.filters[0].opacity=='number';
fade.prprt=fade.t('opacity')||fade.ie6? 'opacity' : fade.t('MozOpacity')? 'MozOpacity' : fade.t('KhtmlOpacity')? 'KhtmlOpacity' : null;
}
fade.set=function(){
var prop=fade.prprt=='opacity'? 'opacity' : fade.prprt=='MozOpacity'? '-moz-opacity' : '-khtml-opacity';
document.write('\n<style type="text/css">\n')
for (var i = 0; i < faders.length; i++){
fade[faders[i][0]+'timer']=0;
document.write('#'+faders[i][0]+' {\n'+
(fade.ie? 'filter:progid:DXImageTransform.Microsoft.alpha(opacity='+faders[i][1]+')' : prop+':'+Math.min(faders[i][1]*.01, .9999))+
(faders[i][2]? ';display:block;' : ';')+'\n}\n');
}
document.write('<\/style>\n')
}
fade.preset=function(id){
for (var i = 0; i < faders.length; i++)
if (id==faders[i][0])
return faders[i][1];
return 0;
}
if(fade.prprt||fade.ie)
fade.set();
fade.getHeightIe6AndLess=function(el){
var b = isNaN(b=parseInt(el.parentNode.currentStyle.borderWidth)*2)? 0 : b;
return el.parentNode.offsetHeight-b+'px';
}
if(fade.ieOK && navigator.appVersion.replace(/^.*MSIE (\d).*$/, '$1') < 7) /* Required for full Coverage in IE 5.5 to 6 browsers */
for (var i = faders.length-1; i > -1; --i)
if(faders[i][2])
document.write('<!--[if lte IE 6]><style type="text/css">#'+faders[i][0]+
' { height:expression(fade.getHeightIe6AndLess(this));}<\/style><![endif]-->');

function contractall(){
fade.reset('fadeDivCover', 'in');
var inc=0
while (document.getElementById("message"+inc)){
document.getElementById("message"+inc).style.display="none"
inc++
}
}


function expandone(){
var selectedDivObj=document.getElementById("message"+selectedDiv)
contractall()
document.getElementById("tickersubject").innerHTML=selectedDivObj.getAttribute("title")
selectedDivObj.style.display="block"
fade('fadeDivCover', 'out', '', '', '', true);
selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
setTimeout("expandone()",tickspeed)
}

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

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

</script>
</head>
<body>
<div id="fadeDivContainer"> 
<div id="fadeDivCover"></div>
<div id="tickersubject"></div>

<div id="message0" class="tickercontainer" title="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="message1" class="tickercontainer" title="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="message2" class="tickercontainer" title="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: I also modified the ticker script slightly so it would validate. The most important change is from using the invalid attribute subject, which I replaced with the valid attribute title. This will result in a sort of tool tip when hovering over the ticker items, but that could actually be considered a feature.

**dukevn** · 07-17-2008, 08:51 PM

Originally Posted by jscheuer1

After all that, I now realize that you probably didn't need to put up that demo - though it shows that you are serious about this (I wanted the demo primarily to make sure I could see what images were involved and how they fit into the layout). But you have no images, so really shouldn't be using the image fader script.

I prefer your Image Fader to Fading Scroller (http://www.dynamicdrive.com/dynamici...fadescroll.htm) because Fading Scroller only works for text. When applying Image Fader to ProHTML, the whole div block will fade, so it does not matter that the div has image or not. I want to learn so I keep it as simple as possible. That is why I did not put images in the demo.

Originally Posted by jscheuer1

It will work in some browsers to fade ordinary elements, but not in IE unless the element 'has layout', which your elements do, owing to their set widths (other things can constitute 'layout' in IE). However, in IE 7 fading text results in a loss of its Clear Type anti-aliasing quality, which makes it look anemic. And, in order to fade things in IE, a filter must first be set for it. That and the desirability at times to have an initial opacity set for all browsers is what the preset array (which you skipped) is for.

So, even if we get the image fader working, it will make a mess of things in IE 7, and more importantly, since you are fading things in repeatedly, there needs to be a mechanism to fade them out again (reset) before the next fade in.

First, to solve IE 7's problem we will fade a covering element out to reveal each new ticker item beneath it. And to solve the reset problem for all browsers, we will fade this cover back in - instantly, just in time to slowly reveal the next ticker item.

This can all be done with a couple of extra elements, some added styles and a mod to the image fading script I recently made up that handles more (not all) elements than just images, and that has a reset function, and finally setting up the preset array for our added cover element, and using this reset function in the contractall phase of the ticker script.

It turns out to be much more complicated than I thought, especially I have zero knowledge about browsers and compatibilities (even I am aware of them). Without your clarifications about browsers, I dont think I can make it (at least for now). Wow, things are always not easy!

Originally Posted by jscheuer1

Notes: I also modified the ticker script slightly so it would validate. The most important change is from using the invalid attribute subject, which I replaced with the valid attribute title. This will result in a sort of tool tip when hovering over the ticker items, but that could actually be considered a feature.

Yes I am aware of this invalid attribute, because my editor (eclipse using jseclipse and tity) shows that, but I do not know that title can replace subject and makes the code valid.

I applied your code and tested it with IE6, IE7, FF3, Safari3, Opera9 and it works just fine. Unfortunately I do not have older browsers to test, but for me that is *too* enough

. Thank you very much John.

D.

**jscheuer1** · 07-18-2008, 12:18 AM

As a side note to this, if you are still interested, and for others that may come upon this thread, I discovered that the work that was done with title (which is valid by the way for a division), and previously by the invalid subject attribute can be accomplished in a valid and unobtrusive manner by extending the class attribute by replacing the line that used title or subject with:

Code:

document.getElementById("tickersubject").innerHTML=selectedDivObj.className.replace(/tickercontainer / ,'');

And then extending the class attribute, ex:

Code:

<div id="message0" class="tickercontainer What is JavaScript?">

Where the highlighted portion will then become the subject/title/description for the ticker item.

**dukevn** · 07-18-2008, 02:58 AM

Originally Posted by jscheuer1

As a side note to this, if you are still interested, and for others that may come upon this thread, I discovered that the work that was done with title (which is valid by the way for a division), and previously by the invalid subject attribute can be accomplished in a valid and unobtrusive manner by extending the class attribute by replacing the line that used title or subject with:

Code:

document.getElementById("tickersubject").innerHTML=selectedDivObj.className.replace(/tickercontainer / ,'');

And then extending the class attribute, ex:

Code:

<div id="message0" class="tickercontainer What is JavaScript?">

Where the highlighted portion will then become the subject/title/description for the ticker item.

Very interesting. While I still prefer using title because it makes things clear and also keeps the div's class unchanged (so you can apply a single css class for all messages), I never refuse to learn such thing to add up my tiny knowledge about javascript

.

Thanks,

D.

**jscheuer1** · 07-18-2008, 04:04 AM

The interesting thing about class names is that, as far as style goes, an element may have as many class names as you like, including ones that have no styles defined for them. Only those classes that have styles defined for them will influence the style of the element. Browsers will ignore the rest, but scripts can use them for other purposes. The only time that this gets tricky is when a script is looking for a particular class name of an element, and wasn't written to accept other classes assigned to a given element. That is not the case with this script. Even when it does happen, the code can be changed to accommodate multiple class names and still work.

**AshleyQuick** · 12-18-2008, 04:09 AM

Hi John,

I can't believe I found this! I've been looking for this sort of script for a few days and it's ideal!

The only enhancement I see is that while the page is loading, the area where this resides is collapsed. It expands once everything is loaded but is it possible to ensure the height of this container is evident right away? How difficult would it be to add a loading animation (gif) there while the page loads?

Thanks!
Ashley

**jscheuer1** · 12-19-2008, 06:43 AM

The height may be set, if nowhere else, then in a container division placed around the code. That way it would reserve the space while the page and script load, eliminating the expansion that you are talking about. A loading image can be added to just about anything. To determine how best to do so in your particular case it would be good to see what you have so far:

Please post a link to the page on your site that contains the problematic code so we can check it out.

Also, in the future, please start a new thread for a new question.

Thread: another fading way for ProHTML Ticker

Thread Tools

Search Thread

another fading way for ProHTML Ticker

Bookmarks

Bookmarks

Posting Permissions