View Full Version : Resolved Rolling banner events

Jan 11th, 2010, 07:44 PM
Hi people,

I've been asked to build a rotative news/banner switcher. Like you would see on news channel on TV at the bottom.

I am using setInterval() to call an xajax method every X seconds.
Works great. I keep trace of an array index and return the next content everytime it is called. (Not forgeting to roll up the index (or go back to 0 if I reach the end))

So for so good. But I was asked to add mouse events to this. The ability to stop the rolling interval onmouseover and resume onmouseout. Same goes with a pause/play button.

So I kill the interval using clearInterval(), its stops. onmouseout resumes the first timer AND Creates a new one so it doubles the rotations.

I tried various solutions found on google but none of them works at all.
I need help to properly start/stop pause/resume a javascript timer.

now to the code. I'm using a little xajax here but my problem is from javascript.

init() gets called on body onload()

function init(){
$xAjax_objResponse = initXajaxObject();

//time script to refresh the banner
//I also declare the timer variable there.
$xAjax_objResponse->script("var timerMarquise; xajax_refreshMarquise();");

//Starts the timer

return $xAjax_objResponse;

refreshMarquise() sets the banner content

function refreshMarquise(){
$xAjax_objResponse = initXajaxObject();
$oRedaction = unserialize($_SESSION["creation2"]["redact"]["obj"]); //Session object

$oIdee = $oRedaction->getNextIdee(); //Gets the next object containing the info to show
$innerMarquise = getMarquiseInner($oIdee); //builds the html to show the content
$xAjax_objResponse->assign("redaction_marquise", "innerHTML", $innerMarquise); //Actually sets the result to the page

//without anything to show, I don't display the banner
$displayMarquise = count($oRedaction->getArrIdeesValides()) == 0 ? "none":"block";
$xAjax_objResponse->assign("redaction_marquise_cheat", "style.display", $displayMarquise);

$_SESSION["creation2"]["redact"]["obj"] = serialize($oRedaction); //Save objects new state - modified index

return $xAjax_objResponse;

getMarquisePlayScript() starts the timer

function getMarquisePlayScript(){
$script = getMarquisePauseScript(); //I clear the current timer

$script .= "timerMarquise = window.setInterval(\"xajax_refreshMarquise()\", 3000);"; //This should call refreshMarquise every 3 seconds

return $script;

getMarquisePauseScript() - should stop and clear the interval

function getMarquisePauseScript(){
return "window.clearInterval(timerMarquise);";

Mouse events - call the pause and play scripts

onmouseover='xajax_pauseMarquise();' onmouseout='xajax_playMarquise();

thanks for help

Jan 11th, 2010, 08:14 PM

I should found something : timerMarquise wasn't set on page for some reason during the init() I have to declare the variable prior to this calling or else javascript throws an error when it tries to clear the timer before starting it.

Now an other problem arises, whenever I mouseover the div, the event is fired multiple times. Hovering over some text fires onmouseout, onmouseover over and over. Since it calls an ajax function, you get the hourglass cursor with some loading. What should I do optimize this?

Jan 11th, 2010, 08:17 PM
Couldn't you just keep the interval running, but check a global variable in xajax_refreshMarquise?

onmouseover="running=false" onmouseout="running=true"

Jan 11th, 2010, 08:28 PM
onmouseover and out would still spam my server with requests.
I'm thinking about an other local timer that checks if 1 second has passed between events before calling the server.

but yeah, letting the rolling timer go and send a javascript variable to php is viable to regulate this mess.

Jan 11th, 2010, 08:41 PM
I have decided to let javascript deal with the timer without ever involving ajax.
So the client calls the server whenever he damn pleases to :P

its alot easier now.

I wonder why I had to think such a bloated idea!