Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Mar 2008
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How to update marquee content while determined time

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

    Code:
    <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?

  • #2
    Senior Coder shyam's Avatar
    Join Date
    Jul 2005
    Posts
    1,563
    Thanks
    2
    Thanked 163 Times in 160 Posts
    make an xmlhttprequest to the php script to retrieve content and set the innerHTML for element with id ie_rh_ticker
    You never have to change anything you got up in the middle of the night to write. -- Saul Bellow

  • #3
    New Coder
    Join Date
    Mar 2008
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by shyam View Post
    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;

    Code:
    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..

  • #4
    Regular Coder nomanic's Avatar
    Join Date
    Feb 2009
    Location
    United Kingdom
    Posts
    255
    Thanks
    9
    Thanked 33 Times in 33 Posts
    not sure if you are using any frameworks so this might clash, assum ing you aren't try this -

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

  • #5
    New Coder
    Join Date
    Mar 2008
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by nomanic View Post
    not sure if you are using any frameworks so this might clash, assum ing you aren't try this -

    Code:
    <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?

  • #6
    Regular Coder nomanic's Avatar
    Join Date
    Feb 2009
    Location
    United Kingdom
    Posts
    255
    Thanks
    9
    Thanked 33 Times in 33 Posts
    just stick it into the page at the end, should work by itself,its got its own script tags

  • Users who have thanked nomanic for this post:

    Richy (03-29-2009)

  • #7
    New Coder
    Join Date
    Mar 2008
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  • #8
    Regular Coder nomanic's Avatar
    Join Date
    Feb 2009
    Location
    United Kingdom
    Posts
    255
    Thanks
    9
    Thanked 33 Times in 33 Posts
    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

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

    Code:
    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?
    Last edited by nomanic; 03-30-2009 at 12:24 AM. Reason: change

  • Users who have thanked nomanic for this post:

    Richy (03-30-2009)

  • #9
    New Coder
    Join Date
    Mar 2008
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?

  • #10
    New Coder
    Join Date
    Mar 2008
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?


  •  

    Posting Permissions

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