Results 1 to 2 of 2

Thread: Opacity addition to Advanced RSS Ticker

  1. #1
    Join Date
    Apr 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Opacity addition to Advanced RSS Ticker

    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)
    Code:
    // -------------------------------------------------------------------
    // 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:
    Code:
    -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)

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •