Develop Reference

onMouseOver event still triggering when you go to previous page on browser

I'm using the following function to create an image loop on mouse-over. (I don't remember where I scavenged the code, but I didn't write it myself)
Script:
function zxcCycle(zxcimg,zxcary,zxcdly,zxcindex){
if (!zxcimg.srtimg) zxcimg.srtimg=zxcimg.src;
if (!zxcindex) zxcindex=0;
zxcimg.src=zxcimg.src.substring(0,zxcimg.src.lastIndexOf('/')+1)+zxcary[zxcindex];
zxcimg.onmouseout=function(){ clearTimeout(this.to); this.src=this.srtimg; }
zxcindex=++zxcindex%zxcary.length;
zxcimg.to=setTimeout(function(){ zxcCycle(zxcimg,zxcary,zxcdly,zxcindex); },zxcdly);
}
Html:
<a class="example_class" href="example.html"><img src="example00.jpg" onmouseover="zxcCycle(this,example_var,160);"/></a>
The image loop works perfectly. It starts on mouse-over, and stops on mouse-out.
However, I'm using the same image as a link to another page – and once I visit that page, and press the "show previous page" arrow on Safari (to go back to the page with the image loop), the loop is still going.
So how do I make this not happen?
I've tried using mouse-out events, and onload functions, but I can't seem to get it to work.
Thanks in advance!

Chrome ignoring jquery click function

I have the following html/code that works fine in IE but when I click the link in Chrome, nothing happens.
The HTML is as follows:
<h1 id="pagetitle">Daina - kora dziesmu kr&#257jums</h1>
<div class="frontpage">
<p id="arvilcinu">Ar vilci&#326u R&#299ga braucu</p>
</div>
<!--***************** Ar Vilcinu *******************-->
<div id="arvilcinudisplay" class="singlesong">
<p>Click here to download PDF file for printing</p>
<p>Click here to watch the video - sung by Daina</p>
<p id="back"><img src="backbutton.jpg" alt="Back to Main menu" height="40" width="100"></p>
</div>
The jquery bit of script is as follows:
$("#arvilcinu").click(function(){
$(".frontpage").fadeOut(1000,function(){
document.getElementById("pagetitle").innerHTML = "Ar vilci&#326u R&#299ga braucu";
$("#arvilcinudisplay").css("display","block");
});
});
The idea is that when the user clicks the link (id=arvilcinu) that the link fades out and the relevant info is then displayed. Clicking the link in Chrome just makes the screen flash for a second but nothing on the screen changes.
Thanks

You need to use preventDefault() to remove natural behaviour of link and to fire click event written by you, like below :
Also you can write your code in jQuery only (no javascript) --
$("#arvilcinu").click(function(e){
e.preventDefault();
$(".frontpage").fadeOut(1000,function(){
$("#pagetitle").html("Ar vilci&#326u R&#299ga braucu");
$("#arvilcinudisplay").show();
});
});
Working Demo

It is because of the two event will be occur when you click on the link. one is of your anchor tag <a href="" >... and another is of your click event on element whose id is arvilcinu. anchor tag is inside of the <p id="arvilcinu"> which leads to this behaviour.
You need to prevent default behaviour of the <a> tag which will be done by using
event.preventDefault() function on the event.
If this method is called, the default action of the event will not be triggered.
You code should look like below :
$("#arvilcinu").click(function(e){
e.preventDefault();
// rest of you logic on click event
});

Focus to an image of a HTML page

I have 4 images that when I click them they show information under the images and when I click the last ones the images go under the page and whens the new page loads with that information I have to go down with scroller to see the image and information of the last image.
I want to put focus to the last image when the new page loading.
I do this but it's not working:
<script>
function setFocusToTextBox(){
document.getElementById("abc").focus();
}
</script>
<img src="images/Practidose.fw.png" alt="" width="770" height="150" id="abc" onclick="setFocusToTextBox()"/>
Picture of the 4 images and when I click the last one I want to focus that image when the new page loads:

.focus() can normally only be applied to links or form inputs.
However, you can use it on arbitrary elements by giving the element a tabindex attribute.
This is usually a good idea for accessibility reasons anyway if you want to make use of onClick handlers, as this will help keyboard navigation and other accessibility tools understand that your element is supposed to be clickable.

I am not fully sure of why you want to focus the image you are ON, but try
function setFocusToTextBox(){
document.getElementById("abc").scrollIntoView();
}
If onload:
window.onload=function(){
document.getElementById("abc").scrollIntoView();
}

Fancybox open with autplay via secondary link

I am using the free "Fancybox for Wordpress" Plugin to open a Couple of images with a nice lightbox.
Now I have a huge title image saying "show diashow" and all pictures of the gallery underneath as single pics. Clicking the single images opens them how it is supposed to be, beeing able to navigation left/right.
The problem now is, if I click the huge title image, it should open the first image of the gallery + set it to autoplay. How can I achieve this?
I tried it with this, but it didnt work out:
HTML
<a id="diashow" href="/wp-content/gallery/galerie/1457454_10152045202815199_1685986480_n.jpg" rel="fancybox"><img src="/wp-content/themes/kt2014/images/diashow.jpg" alt="Diashow starten" /></a>
JS
$(document).ready(function() {
/// START DIASHOW AUTPLAY ON CLICK
jQuery('#diashow').click(function(evt) {
jQuery("a.fancybox").fancybox.open();
jQuery.fancybox.play();
});
});
Thanks for every help on this!

IE not triggering onclick

For some reason IE won't trigger an onclick event. I have a link in my webpage which should renew a captcha image, but no matter what I try, the onclick event won't trigger. I even tried this to test the onclick event:
<a href="#" id="rc" onclick='alert("test"); return false;'>change image</a>
But nothing happened. I also tried to add the onclick event using js in the window.onload event, same result. All other javascript scripts do work, so js is working. Does anyone has any idea why this doesn't work?
by the way, the event doesn't work in any version of IE, and it does work in any other browser.
Edit: If you want to see the full source, go to: http://www.rosegardenvoorburg.nl/Contact?stackoverflow
The page is in Dutch, but the sourcecode is (of course) HTML, so you must be able to understand that.
edit2: I've found a solution myself, and you're never gonna believe what's wrong:
When I'm logged in to the control panel, a div is added at the top of the page, similar to the one shown in ie7 (which tells you you're browser is too old). However, when I don't add a border to that div, the captcha refresh button doesn't work. This doesn't make any sense at all, but at least I've found a solution...

Try with the below:
<a href="javascript:void(0);" id="rc" onclick='alert("test"); return false;'>change image</a>
Also have a look at Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

You are doing it in the wrong order
FIRST add the onload, THEN change the source
var cImg;
function renewCaptcha(){
cImg = new Image();
cImg.onload=function(){document.getElementById("captcha").src = cImg.src;};
cImg.src='/Img/captcha/securimage_show.php?' + Math.random();
}

Few tips to ponder!
check if javascript:alert("test") on your ie address bar pops up the message.
Also check and make sure that javascript option is not turned off.
You may also want to reset your ie settings and see if it work.
Also try to see if same works on your fellow colleague's computer.