How to update marquee content while determined time

[Richy]

I found a little News Bar script that runs in IE and Firefox;

<script language="JavaScript">

ticker_width = "700px";
ticker_height = "22px";
ticker_speed = 1;
ticker_pause_onhover = 1;
marqueecontent = '<nobr><span class=ticker><nobr><span class=ticker_text_start></span><a target=_blank class=ticker_news href="http://feeds.washingtonpost.com/~r/wp-dyn/rss/business/index_xml/~3/yBvTLfEYQwI/AR2009032703315.html"> Obama, Bankers Sit Face to Face </a><span class=ticker_text_end> Updated at: 02:08 ET - U.S.</span></nobr></span></nobr>';

ticker_speed = (document.all) ? ticker_speed : Math.max(1, ticker_speed-1);
var copyspeed = ticker_speed;
var pausespeed = (ticker_pause_onhover == 0) ? copyspeed : 0;
var iedom = document.all || document.getElementById;
if (iedom) {
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-200px;left:-100000px">'+marqueecontent+'</span>');
}

var actualwidth='';
var rh_ticker_iedom, rh_ticker_ns;

function populate() {
if (iedom) {
rh_ticker_iedom = document.getElementById? document.getElementById("ie_rh_ticker") : document.all.ie_rh_ticker;
rh_ticker_iedom.style.left = parseInt(ticker_width)+8+"px";
rh_ticker_iedom.innerHTML = marqueecontent;
actualwidth = document.all ? temp.offsetWidth : document.getElementById("temp").offsetWidth;
} else if (document.layers) {
rh_ticker_ns=document.rh_ticker_ns.document.ns_marquee2;
rh_ticker_ns.left=parseInt(ticker_width)+8;
rh_ticker_ns.document.write(marqueecontent);
rh_ticker_ns.document.close();
actualwidth=rh_ticker_ns.document.width;
}
lefttime = setInterval("rh_ticker_scroll()",20);
}
window.onload=populate;

function rh_ticker_scroll(){
if (iedom) {
if (parseInt(rh_ticker_iedom.style.left) > (actualwidth*(-1)+8)) {
rh_ticker_iedom.style.left=parseInt(rh_ticker_iedom.style.left)-copyspeed+"px"
} else {
rh_ticker_iedom.style.left=parseInt(ticker_width)+8+"px"
}
} else if(document.layers) {
if(rh_ticker_ns.left > (actualwidth*(-1)+8)) {
rh_ticker_ns.left -= copyspeed;
} else {
rh_ticker_ns.left=parseInt(ticker_width)+8
}
}
}

if (iedom||document.layers) {
with (document) {
document.write('<table border="0" cellspacing="0" cellpadding="0"><tr><td>');
if (iedom) {
write('<div style="position:relative;width:'+ticker_width+';height:'+ticker_height+';overflow:hidden;background-color:#e0e0ff;border:1px solid #808080;">')
write('<div style="position:absolute;width:'+ticker_width+';height:'+ticker_height+';" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=ticker_speed">')
write('<div id="ie_rh_ticker" style="position:absolute;left:0px;top:0px"></div>')
write('</div></div>')
} else if (document.layers) {
write('<ilayer width='+ticker_width+' height='+ticker_height+' name="rh_ticker_ns" bgColor='+ss_marquee_color_bg+'>')
write('<layer name="ns_marquee2" left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=ticker_speed"></layer>')
write('</ilayer>')
}
document.write('</td></tr></table>')
}
}

</script>

But I want to update marqueecontent from an PHP file with for example every one minute. How can I this?

[shyam]

make an xmlhttprequest to the php script to retrieve content and set the innerHTML for element with id ie_rh_ticker

[Richy]

make an xmlhttprequest to the php script to retrieve content and set the innerHTML for element with id ie_rh_ticker

Hi shyam,
Thank you for your post but I'm very amateur with JavaScript.

I found that;

new Ajax.PeriodicalUpdater("ie_rh_ticker", "updater.php", {
method: 'get',
frequency: 60,
decay: 2,
onComplete: function() {
populate();
}
});

How can I add this code to my script above :(. I couldn't run..

[nomanic]

not sure if you are using any frameworks so this might clash, assum ing you aren't try this -


<script type="text/javascript">

function goer() {
var url = 'updater.php';
makeHttpRequest(url, thanks);
}

function thanks(text) {

$("ie_rh_ticker").innerHTML=text;
}

function $() {
if (arguments.length == 1) return get$(arguments[0]);
var elements = [];
$c(arguments).each(function(el){
elements.push(get$(el));
});
return elements;

function get$(el){
if (typeof el == 'string') el = document.getElementById(el);
return el;
}
};

function makeHttpRequest(url, callback_function, return_xml)
{
var http_request, response, i;

var activex_ids = [
'MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP',
'Microsoft.XMLHTTP'
];

if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE6 and older
for (i = 0; i < activex_ids.length; i++) {
try {
http_request = new ActiveXObject(activex_ids[i]);
} catch (e) {}
}
}

if (!http_request) {
alert('Unfortunately your browser doesnt support this feature.');
return false;
}

http_request.onreadystatechange = function() {
if (http_request.readyState !== 4) {
// not ready yet
return;
}
if (http_request.status !== 200) {
// ready, but not OK
alert('There was a problem with the request.(Code: ' + http_request.status + ')');
return;
}
if (return_xml) {
response = http_request.responseXML;
} else {
response = http_request.responseText;
}
// invoke the callback
callback_function(response);
};

http_request.open('GET', url, true);
http_request.send(null);
}

setInterval(goer(),5000);

</script>

[Richy]

not sure if you are using any frameworks so this might clash, assum ing you aren't try this -


<script type="text/javascript">

function goer() {
var url = 'updater.php';
makeHttpRequest(url, thanks);
}

function thanks(text) {

$("ie_rh_ticker").innerHTML=text;
}

function $() {
if (arguments.length == 1) return get$(arguments[0]);
var elements = [];
$c(arguments).each(function(el){
elements.push(get$(el));
});
return elements;

function get$(el){
if (typeof el == 'string') el = document.getElementById(el);
return el;
}
};

function makeHttpRequest(url, callback_function, return_xml)
{
var http_request, response, i;

var activex_ids = [
'MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP',
'Microsoft.XMLHTTP'
];

if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE6 and older
for (i = 0; i < activex_ids.length; i++) {
try {
http_request = new ActiveXObject(activex_ids[i]);
} catch (e) {}
}
}

if (!http_request) {
alert('Unfortunately your browser doesnt support this feature.');
return false;
}

http_request.onreadystatechange = function() {
if (http_request.readyState !== 4) {
// not ready yet
return;
}
if (http_request.status !== 200) {
// ready, but not OK
alert('There was a problem with the request.(Code: ' + http_request.status + ')');
return;
}
if (return_xml) {
response = http_request.responseXML;
} else {
response = http_request.responseText;
}
// invoke the callback
callback_function(response);
};

http_request.open('GET', url, true);
http_request.send(null);
}

setInterval(goer(),5000);

</script>


Thank you but how can I combine these with my script?

[nomanic]

just stick it into the page at the end, should work by itself,its got its own script tags

[Richy]

I'd syntax error and I changed setInterval(goer(),5000); to setInterval( "goer()" ,5000 );

And it's worked in Firefox! Thank you nomanic. However, the context don't be updated in IE7. What is its problem? :S

[nomanic]

sorry about the typo

when you do an ajax call in ie, i can't remember but i think ie might be using a cached version of updater.php, 2 fixes possible, either change the 'GET' to a 'POST' if that fails try adding a random variable to the request, the 2 examples below


http_request.open('POST', url, true);
http_request.send(null);
}


or


var n=0;

function goer() {
var url = 'updater.php?x='+n;
n++;
makeHttpRequest(url, thanks);
}


try those 2

do you know a good progress bar file uploader for ajax, I can't seem to implement one at all?

[Richy]

Hi nomanic,
Using POST got success! :) Thank you very much...

Unfortunately I don't know any progress bar for ajax.

Also, I want to ask a question to JavaScript experts. I didn't try lots of news bar scipt. And I remember allmost of all tighten/contract in all browsers. Do you know its reason?

[Richy]

I still have a problem unfortunately! :(

When the content of marquecontent is updated, the width of rh_ticker_iedom remains same... Therefore, the script falls in empty (no ticker). How can we update width or marquecontent's character size?

Also, can we start to update marquecontent when the script is first opened?