Newbie needs help with setInterval

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • shawnwperkins@gmail.com

    Newbie needs help with setInterval

    Hi Folks,

    I'm new to Javascript and just need a little help. I downloaded a
    script from Dynamic Drive's Web site and I'm trying to make a simple
    modification and could use some help. :)

    The script below fetches data from the web server and displays it in
    the form as a ticker on the web page. See: http://www.dynamicdrive.com/dynamici...ajaxticker.htm

    What I would like to do is to have the Ajax ticker periodically go out
    and refetch the XML data say once every five seconds. The way it
    operates now it only fetches the data when the page loads. Is there a
    simple way to accomplish this? I've tried using
    setInterval(thi s.getXMLfile(), 5000) on line 46 with no success, but
    it's most likely the way I'm using it. See script script below.

    Any help would be greatly appreciated. :)

    Thanks,
    Shawn


    // -------------------------------------------------------------------
    // Ajax XML Ticker (txt file source)
    // Author: Dynamic Drive (http://www.dynamicdrive.com)
    // -------------------------------------------------------------------

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

    function createAjaxObj() {
    var httprequest=fal se
    if (window.XMLHttp Request){ // if Mozilla, Safari etc
    httprequest=new XMLHttpRequest( )
    if (httprequest.ov errideMimeType)
    httprequest.ove rrideMimeType(' text/xml')
    }
    else if (window.ActiveX Object){ // if IE
    try {
    httprequest=new ActiveXObject(" Msxml2.XMLHTTP" );
    }
    catch (e){
    try{
    httprequest=new ActiveXObject(" Microsoft.XMLHT TP");
    }
    catch (e){}
    }
    }
    return httprequest
    }

    // -------------------------------------------------------------------
    // Main Ajax Ticker Object function
    // ajax_ticker(xml file, divId, divClass, delay, optionalfadeorn ot)
    // -------------------------------------------------------------------

    function ajax_ticker(xml file, divId, divClass, delay, fadeornot){
    this.xmlfile=xm lfile //Variable pointing to the local ticker xml file
    (txt)
    this.tickerid=d ivId //ID of ticker div to display information
    this.delay=dela y //Delay between msg change, in miliseconds.
    this.mouseoverB ol=0 //Boolean to indicate whether mouse is currently
    over ticker (and pause it if it is)
    this.pointer=0
    this.opacitystr ing=(typeof fadeornot!="und efined")? "width: 100%;
    filter:progid:D XImageTransform .Microsoft.alph a(opacity=100); -moz-
    opacity: 1" : ""
    if (this.opacityst ring!="") this.delay+=500 //add 1/2 sec to account
    for fade effect, if enabled
    this.opacityset ting=0.2 //Opacity value when reset. Internal use.
    this.messages=[] //Arrays to hold each message of ticker
    this.ajaxobj=cr eateAjaxObj()
    document.write( '<div id="'+divId+'" class="'+divCla ss+'"><div
    style="'+this.o pacitystring+'" >Initializing ticker...</div></div>')
    /////////////line added with no success////
    setInterval(thi s.getXMLfile(), 5000)
    }

    // -------------------------------------------------------------------
    // getXMLfile()- Use Ajax to fetch xml file (txt)
    // -------------------------------------------------------------------

    ajax_ticker.pro totype.getXMLfi le=function(){
    if (this.ajaxobj){
    var instanceOfTicke r=this
    var url=this.xmlfil e+"?bustcache=" +new Date().getTime( )
    this.ajaxobj.on readystatechang e=function()
    {instanceOfTick er.initialize() }
    this.ajaxobj.op en('GET', url, true)
    this.ajaxobj.se nd(null)
    }
    }

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

    ajax_ticker.pro totype.initiali ze=function(){
    if (this.ajaxobj.r eadyState == 4){ //if request of file completed
    if (this.ajaxobj.s tatus==200 ||
    window.location .href.indexOf(" http")==-1){ //if request was successful
    this.contentdiv =document.getEl ementById(this. tickerid).first Child //
    div of inner content that holds the messages
    var xmldata=this.aj axobj.responseT ext
    this.contentdiv .style.display= "none"
    this.contentdiv .innerHTML=xmld ata
    if (this.contentdi v.getElementsBy TagName("div"). length==0){ //if no
    messages were found
    this.contentdiv .innerHTML="<b> Error</bfetching remote ticker file!"
    return
    }
    var instanceOfTicke r=this
    document.getEle mentById(this.t ickerid).onmous eover=function( )
    {instanceOfTick er.mouseoverBol =1}
    document.getEle mentById(this.t ickerid).onmous eout=function()
    {instanceOfTick er.mouseoverBol =0}
    if (window.attachE vent) //Clean up loose references in IE
    window.attachEv ent("onunload", function()
    {instanceOfTick er.contentdiv=i nstanceOfTicker .ajaxobj=null})
    //Cycle through XML object and store each message inside array
    for (var i=0; i<this.contentd iv.getElementsB yTagName("div") .length; i+
    +){
    if (this.contentdi v.getElementsBy TagName("div")
    [i].className=="me ssage")
    this.messages[this.messages.l ength]=this.contentdi v.getElementsBy TagName("div")
    [i].innerHTML
    }
    this.contentdiv .innerHTML=""
    this.contentdiv .style.display= "block"
    this.rotatemsg( )
    }
    }
    }

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

    ajax_ticker.pro totype.rotatems g=function(){
    var instanceOfTicke r=this
    if (this.mouseover Bol==1) //if mouse is currently over ticker, do
    nothing (pause it)
    setTimeout(func tion(){instance OfTicker.rotate msg()}, 100)
    else{ //else, construct item, show and rotate it!
    this.fadetransi tion("reset") //FADE EFFECT- RESET OPACITY
    this.contentdiv .innerHTML=this .messages[this.pointer]
    this.fadetimer1 =setInterval(fu nction()
    {instanceOfTick er.fadetransiti on('up', 'fadetimer1')}, 100) //FADE
    EFFECT- PLAY IT
    this.pointer=(t his.pointer<thi s.messages.leng th-1)? this.pointer+1 : 0
    setTimeout(func tion(){instance OfTicker.rotate msg()}, this.delay) //
    update container periodically
    }
    }

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

    ajax_ticker.pro totype.fadetran sition=function (fadetype, timerid){
    var contentdiv=this .contentdiv
    if (fadetype=="res et")
    this.opacityset ting=0.2
    if (contentdiv.fil ters && contentdiv.filt ers[0]){
    if (typeof contentdiv.filt ers[0].opacity=="numb er") //IE6+
    contentdiv.filt ers[0].opacity=this.o pacitysetting*1 00
    else //IE 5.5
    contentdiv.styl e.filter="alpha (opacity="+this .opacitysetting *100+")"
    }
    else if (typeof contentdiv.styl e.MozOpacity!=" undefined" &&
    this.opacitystr ing!=""){
    contentdiv.styl e.MozOpacity=th is.opacitysetti ng
    }
    else
    this.opacityset ting=1
    if (fadetype=="up" )
    this.opacityset ting+=0.1
    if (fadetype=="up" && this.opacityset ting>=1)
    clearInterval(t his[timerid])
    }
  • David Karr

    #2
    Re: Newbie needs help with setInterval

    On Sep 21, 4:52 pm, shawnwperk...@g mail.com wrote:
    Hi Folks,
    >
    I'm new to Javascript and just need a little help. I downloaded a
    script from Dynamic Drive's Web site and I'm trying to make a simple
    modification and could use some help. :)
    >
    The script below fetches data from the web server and displays it in
    the form as a ticker on the web page. See:http://www.dynamicdrive.com/dynamici...ajaxticker.htm
    >
    What I would like to do is to have the Ajax ticker periodically go out
    and refetch the XML data say once every five seconds. The way it
    operates now it only fetches the data when the page loads. Is there a
    simple way to accomplish this? I've tried using
    setInterval(thi s.getXMLfile(), 5000) on line 46 with no success, but
    it's most likely the way I'm using it. See script script below.
    Well, without spending a lot of time analyzing this code, one simple
    thing to fix is changing "this.getXMLfil e()" to "this.getXMLfil e".
    The former actually calls the function, and the return value from that
    function is what setInterval is going to attempt to call, which is
    certainly not what you intended. Removing the parens makes this a
    function object, not a function call, which has a much better chance
    of working.

    Comment

    • sasuke

      #3
      Re: Newbie needs help with setInterval

      On Sep 22, 4:52 am, shawnwperk...@g mail.com wrote:
      What I would like to do is to have the Ajax ticker periodically go out
      and refetch the XML data say once every five seconds. The way it
      operates now it only fetches the data when the page loads. Is there a
      simple way to accomplish this? I've tried using
      setInterval(thi s.getXMLfile(), 5000) on line 46 with no success, but
      it's most likely the way I'm using it. See script script below.
      >
      Any help would be greatly appreciated. :)
      Maybe what you wanted to do was use the variant of setInterval() which
      accepts a Javascript expression in the form of Javascript String i.e.
      setInterval("th is.getXMLFile() ", 5000). But then again, it won't work
      in your case since `this' when used in such a context always refers to
      the global window object. As already suggested, use the second variant
      of setInterval() which accepts a Function object as its first
      parameter. See < http://developer.mozilla.org/en/DOM/window.setInterval
      >
      /sasuke

      Comment

      Working...