stop javascript timer when onmouseover

Question

0.00/5 (No votes)

See more:

Hi
I am currently updating the http://www.yapi.com.tr/AnaSayfa/. When I mouseover the 1,2,3,4,5 images, the news does not change. That is what I want when I mouseover the image as well. What should I do ? Using google chrome you can see the code.

Modification: /JScript/Manset.js

JavaScript

// body onload
function Start() {
Haberler_Show(1);
Haberler_timerStart(1);
Etkinlikler_Show(1);
Etkinlikler_timerStart(1);
UrunHaberleri_Show(1);
UrunHaberleri_timerStart(1);
Sektorden_Show(1);
Sektorden_timerStart(1);
Yarismalar_Show(1);
Yarismalar_timerStart(1);
Oduller_Show(1);
Oduller_timerStart(1);
}
/* Haberler Başlangıç */
var Haberler_counter = 1;
var Haberler_timerCount;
var Haberler_maxHeaderlineCount = 5;
function Haberler_Show(Haberler_selectedItemIndex) {
//HERE I STOP THE TIMER
Haberler_stopTimer();
for (i = 1; i <= Haberler_maxHeaderlineCount; i++) {
if (i != Haberler_selectedItemIndex) {
document.getElementById('Haberler_Resim_' + i).style.display = 'none';
document.getElementById('Haberler_Sayi_Resim_' + i).src = '../Images/PageNumber/' + i + '.jpg';
document.getElementById('Haberler_Detay_' + i).style.display = 'none';
}
else {
document.getElementById('Haberler_Resim_' + i).style.display = 'block';
document.getElementById('Haberler_Sayi_Resim_' + i).src = '../Images/PageNumber/' + i + '_hover.jpg';
document.getElementById('Haberler_Detay_' + i).style.display = 'block';
}
}
}
function Haberler_timerStart(Haberler_counterNum) {
if (Haberler_counterNum != -1)
Haberler_counter = Haberler_counterNum;
if (Haberler_counter == Haberler_maxHeaderlineCount + 1) Haberler_counter = 1;
for (i = 1; i <= Haberler_maxHeaderlineCount; i++) {
if (i != Haberler_counter) {
document.getElementById('Haberler_Resim_' + i).style.display = 'none';
document.getElementById('Haberler_Sayi_Resim_' + i).src = '../Images/PageNumber/' + i + '.jpg';
document.getElementById('Haberler_Detay_' + i).style.display = 'none';
}
else {
document.getElementById('Haberler_Resim_' + i).style.display = 'block';
document.getElementById('Haberler_Sayi_Resim_' + i).src = '../Images/PageNumber/' + i + '_hover.jpg';
document.getElementById('Haberler_Detay_' + i).style.display = 'block';
}
}
Haberler_counter = Haberler_counter + 1;
Haberler_timerCount = setTimeout("Haberler_timerStart(-1)", 5000);
}
function Haberler_stopTimer() {
clearTimeout(Haberler_timerCount);
}

Thanks in advance,

Nice

Posted 8-Dec-10 2:32am

Close Network

Updated 8-Dec-10 3:24am

Manfred Rudolf Bihy

v2

Add a Solution

Comments

Manfred Rudolf Bihy 8-Dec-10 8:38am

You have to be more precise, when you mouse over 1,2,3,4,5 the timer driven news change is suspended. I tried your page and thought WTF, but now I got it :)
Oh no: in IE news change is suspended on mouseover of images 1,2,3,4,5, but it's not working in FireFox. Is this intended to work correctly primarily in Internet Exploder?

Close Network 8-Dec-10 8:48am

sorry on http://www.yapi.com.tr/AnaSayfa/ when I mouseover 1,2,3,4,5 images, the news (Haberler) do change. It does not work here either.

Close Network 8-Dec-10 8:49am

yes you are right, in IE it does not change, in chrome it changes.

Manfred Rudolf Bihy 8-Dec-10 8:52am

And also in FireFox!

Close Network 8-Dec-10 8:53am

it must work in all browsers. when I mouseover images, the timer driven news should be suspended.

Manfred Rudolf Bihy 8-Dec-10 8:56am

Please find the javascript function definition of Haberler_Show(). Inside that function the news change must be initiated and also the automatic news update is suspended there. You're using tons of script resources that are included via <script src="..."> so you should be able to find the definition of that function faster than I. Can you have a look?

Close Network 8-Dec-10 9:09am

Please see the file

http://www.yapi.com.tr/JScript/Manset.js

This is the relevant js file.

Manfred Rudolf Bihy 8-Dec-10 9:18am

Thanks, but I already found it using Fiddler2. See my answer hope it works for you! (Well at least in IE ;) )

Manfred Rudolf Bihy 8-Dec-10 9:25am

Edit: Moved Javascript from your answer to your question.

Close Network 8-Dec-10 9:46am

it says : Microsoft JScript error: Object Expected
Haberler_StopTimer() expects a parameter, an object. I broke the debugging here at this point.
Beside in IE it still does not work. Sorry.

onmouseover="Haberler_StopTimer();" onmouseout="Haberler_timerStart(-1)

Manfred Rudolf Bihy 8-Dec-10 9:57am

Well please read my answer there was no such thing as a Haberler_StopTimer() function. It is called Haberler_stopTimer() and it doesn't take a parameter just look at your Manset.js script file. Do exactly as told in my answer and it will work. And what do you mean in IE still not work. It worked before didn't it or are you talking about the mouseover and mouseout for the news picture?

4 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

E.F. Nijboer · Answer 1 · 2010-12-08T02:38:00

Solution 1

You could use clearTimeout for that.
http://www.w3schools.com/js/js_timing.asp[^]

Another method would simply be to check some variable that you defined that represents some value that indicates if there should be any action or not.

You can use the mouseenter/mouseleave for it.

Good luck!

Posted 8-Dec-10 2:38am

E.F. Nijboer

Comments

Close Network 8-Dec-10 8:41am

I am already using clearTimeOut. http://www.yapi.com.tr/JScript/Manset.js

E.F. Nijboer 8-Dec-10 8:45am

Did you look at the example on w3c school?
// Global variable to hold timer reference
var t;
...
// set timer and store reference in t
t=setTimeout("timedCount()",1000);
...
// stop timer with referenced in t
clearTimeout(t);

Close Network 8-Dec-10 9:08am

The problem is that onmouseover 1,2,3,4,5 images (using Firefox and Google Chrome), clearTimeOut does not function. in IE it works when I mouseover 1,2,3,4,5 images.

E.F. Nijboer 8-Dec-10 9:34am

I think the problem is that there are multiple timers set. So instead of just do a setTimer:
t=setTimeout('...',1000);
It would be better to do a clearTimeout, just in case t was already set with a timer reference.
clearTimeout(t);t=setTimeout('someAction();',1000);

Manfred Rudolf Bihy 8-Dec-10 9:37am

Hi Close, did something change? FireFox seems to be working all of a sudden whilst Chrome is still not playing nicely.

Close Network 8-Dec-10 9:45am

I did not change anything on live !

Close Network 8-Dec-10 9:50am

when I mouseover on 1,2,3,4,5 images (in IE or Firefox or Chrome), it does not stop either.

Manfred Rudolf Bihy 8-Dec-10 10:03am

Which IE are you using. I have IE8.

Close Network · Answer 2 · 2010-12-08T03:06:00

Here is the relevant js file.
http://www.yapi.com.tr/JScript/Manset.js

Here is the only code that is relevant.

I commented where I use Haberler_Show and I also stopped the timer when entering this method.

I have been trying to find a solution for hours. I have already looked.

Thanks in advance,
Nice

// body onload
function Start() {
Haberler_Show(1);
Haberler_timerStart(1);
Etkinlikler_Show(1);
Etkinlikler_timerStart(1);
UrunHaberleri_Show(1);
UrunHaberleri_timerStart(1);
Sektorden_Show(1);
Sektorden_timerStart(1);
Yarismalar_Show(1);
Yarismalar_timerStart(1);
Oduller_Show(1);
Oduller_timerStart(1);
}

/* Haberler Başlangıç */
var Haberler_counter = 1;
var Haberler_timerCount;
var Haberler_maxHeaderlineCount = 5;
function Haberler_Show(Haberler_selectedItemIndex) {
//HERE I STOP THE TIMER
Haberler_stopTimer();
for (i = 1; i <= Haberler_maxHeaderlineCount; i++) {
if (i != Haberler_selectedItemIndex) {
document.getElementById('Haberler_Resim_' + i).style.display = 'none';
document.getElementById('Haberler_Sayi_Resim_' + i).src = '../Images/PageNumber/' + i + '.jpg';
document.getElementById('Haberler_Detay_' + i).style.display = 'none';
}
else {
document.getElementById('Haberler_Resim_' + i).style.display = 'block';
document.getElementById('Haberler_Sayi_Resim_' + i).src = '../Images/PageNumber/' + i + '_hover.jpg';
document.getElementById('Haberler_Detay_' + i).style.display = 'block';
}
}
}
function Haberler_timerStart(Haberler_counterNum) {
if (Haberler_counterNum != -1)
Haberler_counter = Haberler_counterNum;
if (Haberler_counter == Haberler_maxHeaderlineCount + 1) Haberler_counter = 1;
for (i = 1; i <= Haberler_maxHeaderlineCount; i++) {
if (i != Haberler_counter) {
document.getElementById('Haberler_Resim_' + i).style.display = 'none';
document.getElementById('Haberler_Sayi_Resim_' + i).src = '../Images/PageNumber/' + i + '.jpg';
document.getElementById('Haberler_Detay_' + i).style.display = 'none';
}
else {
document.getElementById('Haberler_Resim_' + i).style.display = 'block';
document.getElementById('Haberler_Sayi_Resim_' + i).src = '../Images/PageNumber/' + i + '_hover.jpg';
document.getElementById('Haberler_Detay_' + i).style.display = 'block';
}
}
Haberler_counter = Haberler_counter + 1;
Haberler_timerCount = setTimeout("Haberler_timerStart(-1)", 5000);
}
function Haberler_stopTimer() {
clearTimeout(Haberler_timerCount);
}

Manfred Rudolf Bihy · Answer 3 · 2010-12-08T03:15:00

Solution 3

Hi Close,
I found it using Fiddler2. The function that is being called in function Haberler_Show(item) is called Haberler_stopTimer(). So on the divs with the id="Haberler_Resim_X" where X runs from 1 to 5 you'd have to do onmouseover="Haberler_stopTimer();" and onmouseout="Haberler_timerStart(-1)".
That should do it, for the first news box. Second one should be analogous.

Cheers,

Manfred

Posted 8-Dec-10 3:15am

Manfred Rudolf Bihy

Comments

Close Network 8-Dec-10 9:42am

I could not comment, instead I added an answer, please check.

Manfred Rudolf Bihy 8-Dec-10 9:54am

By leaving a comment you proved that you could.

Close Network · Answer 4 · 2010-12-08T03:42:00

XML

it says : Microsoft JScript error: Object Expected
Haberler_StopTimer() expects a parameter, an object. I broke the debugging here at this point.
Beside in IE it still does not work. Sorry.

<div id="Haberler_Resim_1" class="MansetResimAktif" style="display: block;" onmouseover="Haberler_StopTimer();" önmouseout="Haberler_timerStart(-1);"><a href="../Haberler/atasehire-selimiye_84258.html" title="Ataşehir’e Selimiye..."><img src="http://www.yapi.com.tr/V_Images/2010/haberler/mtn_84258_Selimiye-camii.jpg" alt="Ataşehir’e Selimiye..." class="MansetHaberlerResim" border="0" /></a></div>

onmouseover="Haberler_StopTimer();" onmouseout="Haberler_timerStart(-1)

stop javascript timer when onmouseover

4 solutions

Solution 1

Solution 2

Solution 3

Solution 4

Add your solution here

Preview 0