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])
}
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])
}
Comment