Opacity addition to Advanced RSS Ticker

[PurpleMoggy]

Script: Advanced RSS Ticker (Ajax invocation)
URL: http://www.dynamicdrive.com/dynamici...rsstickerajax/
-----------------------

hey all, well i was gonna come and ask a question, but i think i managed to figure it out and thought it might be useful for others........

the optional opacity transition this script uses only seems to work with IE and Mozilla-based browsers, so i did a little reading and found out that there's 4 different ways that different browsers use for opacity/css

Quoted from http://www.brainerror.net/scripts_js_blendtrans.php

* opacity: 0.5;
This one is the official CSS3 method, at the moment it works in newer Mozilla versions.
* -moz-opacity: 0.5;
This one works in older versions of Mozilla and Phoenix/FireBird/FireFox.
* -khtml-opacity: 0.5;
This is used by browsers that use teh KHTML rendering engine, namely Konquerer on Linux and Safari on MacOS.
* filter: alpha(opacity=50);
This one works only in MSIE.

Opera 9 (currently in alpha/beta/pre-release) also supports opacity

so i modified the rssticker.js to: (the parts in bold are what i added)

// -------------------------------------------------------------------
// Advanced RSS Ticker (Ajax invocation) core file
// Author: Dynamic Drive (http://www.dynamicdrive.com)
// -------------------------------------------------------------------

//Relative URL syntax:
var lastrssbridgeurl="lastrss/bridge.php"

//Absolute URL syntax. Uncomment below line if you wish to use an absolute reference:
//var lastrssbridgeurl="http://"+window.location.hostname+"/lastrss/bridge.php"

////////////No need to edit beyond here//////////////

function createAjaxObj(){
var httprequest=false
if (window.XMLHttpRequest){ // if Mozilla, Safari etc
httprequest=new XMLHttpRequest()
if (httprequest.overrideMimeType)
httprequest.overrideMimeType('text/xml')
}
else if (window.ActiveXObject){ // if IE
try {
httprequest=new ActiveXObject("Msxml2.XMLHTTP");
} 
catch (e){
try{
httprequest=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return httprequest
}

// -------------------------------------------------------------------
// Main RSS Ticker Object function
// rssticker_ajax(RSS_id, cachetime, divId, divClass, delay, optionallogicswitch)
// -------------------------------------------------------------------

function rssticker_ajax(RSS_id, cachetime, divId, divClass, delay, logicswitch){
this.RSS_id=RSS_id //Array key indicating which RSS feed to display
this.cachetime=cachetime //Time to cache feed, in minutes. 0=no cache.
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.logicswitch=(typeof logicswitch!="undefined")? logicswitch : ""
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over ticker (and pause it if it is)
this.pointer=0
this.opacitysetting=0.2 //Opacity value when reset. Internal use.
this.title=[], this.link=[], this.description=[], this.pubdate=[] //Arrays to hold each component of an RSS item
this.ajaxobj=createAjaxObj()
document.write('<div id="'+divId+'" class="'+divClass+'" >Initializing ticker...</div>')
if (window.getComputedStyle) //detect if moz-opacity is defined in external CSS for specified class
this.mozopacityisdefined=(window.getComputedStyle(document.getElementById(this.tickerid), "").getPropertyValue("-moz-opacity")==1)? 0 : 1
if (window.getComputedStyle)
this.khtmlopacityisdefined=(window.getComputedStyle(document.getElementById(this.tickerid), "").getPropertyValue("-khtml-opacity")==1)? 0 : 1
if (window.getComputedStyle)
this.css3opacityisdefined=(window.getComputedStyle(document.getElementById(this.tickerid), "").getPropertyValue("opacity")==1)? 0 : 1
this.getAjaxcontent()
}

// -------------------------------------------------------------------
// getAjaxcontent()- Makes asynchronous GET request to "bridge.php" with the supplied parameters
// -------------------------------------------------------------------

rssticker_ajax.prototype.getAjaxcontent=function(){
if (this.ajaxobj){
var instanceOfTicker=this
var parameters="id="+encodeURIComponent(this.RSS_id)+"&cachetime="+this.cachetime+"&bustcache="+new Date().getTime()
this.ajaxobj.onreadystatechange=function(){instanceOfTicker.initialize()}
this.ajaxobj.open('GET', lastrssbridgeurl+"?"+parameters, true)
this.ajaxobj.send(null)
}
}

// -------------------------------------------------------------------
// initialize()- Initialize ticker method.
// -Gets contents of RSS content and parse it using JavaScript DOM methods 
// -------------------------------------------------------------------

rssticker_ajax.prototype.initialize=function(){ 
if (this.ajaxobj.readyState == 4){ //if request of file completed
if (this.ajaxobj.status==200){ //if request was successful
var xmldata=this.ajaxobj.responseXML
if(xmldata.getElementsByTagName("item").length==0){ //if no <item> elements found in returned content
document.getElementById(this.tickerid).innerHTML="<b>Error</b> fetching remote RSS feed!<br />"+this.ajaxobj.responseText
return
}
var instanceOfTicker=this
this.feeditems=xmldata.getElementsByTagName("item")
//Cycle through RSS XML object and store each peice of an item inside a corresponding array
for (var i=0; i<this.feeditems.length; i++){
this.title[i]=this.feeditems[i].getElementsByTagName("title")[0].firstChild.nodeValue
this.link[i]=this.feeditems[i].getElementsByTagName("link")[0].firstChild.nodeValue
this.description[i]=this.feeditems[i].getElementsByTagName("description")[0].firstChild.nodeValue
this.pubdate[i]=this.feeditems[i].getElementsByTagName("pubDate")[0].firstChild.nodeValue
}
document.getElementById(this.tickerid).onmouseover=function(){instanceOfTicker.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){instanceOfTicker.mouseoverBol=0}
this.rotatemsg()
}
}
}

// -------------------------------------------------------------------
// rotatemsg()- Rotate through RSS messages and displays them
// -------------------------------------------------------------------

rssticker_ajax.prototype.rotatemsg=function(){
var instanceOfTicker=this
if (this.mouseoverBol==1) //if mouse is currently over ticker, do nothing (pause it)
setTimeout(function(){instanceOfTicker.rotatemsg()}, 100)
else{ //else, construct item, show and rotate it!
var tickerDiv=document.getElementById(this.tickerid)
var linktitle='<div class="rsstitle"><a href="'+this.link[this.pointer]+'">'+this.title[this.pointer]+'</a></div>'
var description='<div class="rssdescription">'+this.description[this.pointer]+'</div>'
var feeddate='<div class="rssdate">'+this.pubdate[this.pointer]+'</div>'
if (this.logicswitch.indexOf("description")==-1) description=""
if (this.logicswitch.indexOf("date")==-1) feeddate=""
var tickercontent=linktitle+feeddate+description //STRING FOR FEED CONTENTS 
this.fadetransition("reset") //FADE EFFECT- RESET OPACITY
tickerDiv.innerHTML=tickercontent
this.fadetimer1=setInterval(function(){instanceOfTicker.fadetransition('up', 'fadetimer1')}, 100) //FADE EFFECT- PLAY IT
this.pointer=(this.pointer<this.feeditems.length-1)? this.pointer+1 : 0
setTimeout(function(){instanceOfTicker.rotatemsg()}, this.delay) //update container every second
}
}

// -------------------------------------------------------------------
// fadetransition()- cross browser fade method for IE5.5+ and Mozilla/Firefox
// -------------------------------------------------------------------

rssticker_ajax.prototype.fadetransition=function(fadetype, timerid){
var tickerDiv=document.getElementById(this.tickerid)
if (fadetype=="reset")
this.opacitysetting=0.2
if (tickerDiv.filters && tickerDiv.filters[0]){
if (typeof tickerDiv.filters[0].opacity=="number") //IE6+
tickerDiv.filters[0].opacity=this.opacitysetting*100
else //IE 5.5
tickerDiv.style.filter="alpha(opacity="+this.opacitysetting*100+")"
}
else if (typeof tickerDiv.style.MozOpacity!="undefined" && this.mozopacityisdefined){
tickerDiv.style.MozOpacity=this.opacitysetting
}
else if (typeof tickerDiv.style.KhtmlOpacity!="undefined" && this.khtmlopacityisdefined){
tickerDiv.style.KhtmlOpacity=this.opacitysetting
}
else if (typeof tickerDiv.style.opacity!="undefined" && this.css3opacityisdefined){
tickerDiv.style.opacity=this.opacitysetting
}
if (fadetype=="up")
this.opacitysetting+=0.2
if (fadetype=="up" && this.opacitysetting>=1)
clearInterval(this[timerid])
}

and then you would also add into the css for the page:

-khtml-opacity: 0.8; 
opacity: 0.8;

Javascript isn't my first/best language so i tried to take my cues from what was already in the script, i don't know if everything i added is needed or written in the best way but it does seem to work in Opera 9 (doesn't seem to work in Konqueror 3.4 though, and i don't have a Mac to test Safari with)

[Twey]

Not bad. Not the prettiest code in the world, but this one was fairly ugly to start with. Good job. Some versions of Konqueror (I'm currently using 3.5.1) have some odd issues with opacity, though. I wouldn't worry about that too much.