conflict between javascript and links

[littlepig]

With the help of people on this site, I found the following script which achieves exactly what I need on a particular web page: any image, when clicked, will grow to a certain size, and revert to its original size when clicked again. However when I insert this script, the 'home' link (or any link to another page) no longer works on this page. Can someone explain to me why this is? How can I solve this issue? My test browser is Firefox. I am a beginner at this, teaching myself to use Kompozer.

<script
src="https://ajax.googleapis.com/ajax/lib.../jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).toggle(function(){
$('img').click(grow);
}, function(){
$('img').click(shrink);
});

function grow(){
$(this).css('height','450px');
$(this).css('width','900px');

}

function shrink(){
$(this).css('height','150px');
$(this).css('width','300px');

}
</script>

[Eric Mintz]

It looks to me like the script is capturing the click event for the image so it never makes it up to the containing link. I'm guessing the other links on the page that don't work also contain images? The most straight-forward way to solve this issue is take the img out of the "regular" links and make them background images of the anchor tag.

If that's not practical on your site, you can also fix the problem by changing the selector. For example, give class names to the links that you want to have the effect. Then use the selector in the jQuery.

Here an example:

<a href="#">some text</a>
<a class="grow-shrink" href="#"><img src=grow-me.png /></a>

Then your jQuery looks like this (just showing a small excerpt):

$(document).toggle(function(){
$('img.grow-shrink').click(grow);

---------

And another example:

<div id="nav">
<a href="#"><img src="regular-link.png" /></a>
</div>
<div id="content">
<a href="#"><img scr="grow-grow-me.png" /></a>
</div>

Then your jQuery looks like this (again, just showing a small excerpt):

$(document).toggle(function(){
$('div#content img').click(grow);

Either of the above examples avoid changing the events of "regular" links while allowing the script to work on the links that should display the effect.

[littlepig]

It looks to me like the script is capturing the click event for the image so it never makes it up to the containing link. I'm guessing the other links on the page that don't work also contain images? The most straight-forward way to solve this issue is take the img out of the "regular" links and make them background images of the anchor tag.

If that's not practical on your site, you can also fix the problem by changing the selector. For example, give class names to the links that you want to have the effect. Then use the selector in the jQuery.

Here an example:

<a href="#">some text</a>
<a class="grow-shrink" href="#"><img src=grow-me.png /></a>

Then your jQuery looks like this (just showing a small excerpt):

$(document).toggle(function(){
$('img.grow-shrink').click(grow);

---------

And another example:

<div id="nav">
<a href="#"><img src="regular-link.png" /></a>
</div>
<div id="content">
<a href="#"><img scr="grow-grow-me.png" /></a>
</div>

Then your jQuery looks like this (again, just showing a small excerpt):

$(document).toggle(function(){
$('div#content img').click(grow);

Either of the above examples avoid changing the events of "regular" links while allowing the script to work on the links that should display the effect.

Thanks Eric; the problem is there regardless of wether I use an image for my 'home' link or just some text. So I will try your solutions to see if they fix my problem.

[littlepig]

Thanks Eric; the problem is there regardless of wether I use an image for my 'home' link or just some text. So I will try your solutions to see if they fix my problem.

Hi Eric. I have tried those ideas, of specifying a class or Div to distinguish the 'nav' image from the 'grow' image, but this doesn't solve the problem. But I have noticed something interesting; even with my original code, the 'home' link does work when I control-click (on a mac; I guess its the same as a right click in Windows). Then the new window or tab will come up with the target link. Its just that the single click won't do it. I thought, if I could specify that my 'grow' images grow on a double click, this might make a difference? But I don't know how to change the jQuery to do this. Can you help?

[Eric Mintz]

By right clicking, you verified that the link still has the href in tact. Good! That tells us that whatever's going on, nothing is monkeying with the href. Have you tried viewing the site in a different browser (and even on a different machine)? It's worth a shot just to eliminate the possibility of any issues with the local environment.

The more I think about this, especially the part where links with no images are effected makes me think that the problem is not this script at all but maybe some other script (assuming the issue is not the local machine environment). Can you start by removing the code you posted above to see if the links work again? If not, continue by ripping out any links to javascript files to see if the links work, then start adding the javascript links back in to see what's breaking it. Also, remove any <script> tags as part of this process.

The reason I don't believe the problem isn't with the script you posted is that only img tags are being selected by the script so links that don't contain img's shouldn't be affected by it at all.

[littlepig]

By right clicking, you verified that the link still has the href in tact. Good! That tells us that whatever's going on, nothing is monkeying with the href. Have you tried viewing the site in a different browser (and even on a different machine)? It's worth a shot just to eliminate the possibility of any issues with the local environment.

The more I think about this, especially the part where links with no images are effected makes me think that the problem is not this script at all but maybe some other script (assuming the issue is not the local machine environment). Can you start by removing the code you posted above to see if the links work again? If not, continue by ripping out any links to javascript files to see if the links work, then start adding the javascript links back in to see what's breaking it. Also, remove any <script> tags as part of this process.

The reason I don't believe the problem isn't with the script you posted is that only img tags are being selected by the script so links that don't contain img's shouldn't be affected by it at all.

Great Eric I have tried the page on a different machine with a different browser and the results are identical so that possibility is ruled out. The only script on the page is the one I posted; maybe I have just made some dumb error in the typing. This is the whole script (when I delete this the links work fine again). Can you see some error in this?

<script
src="https://ajax.googleapis.com/ajax/lib.../jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).toggle(function(){
$('div#content img').click(grow);
}, function(){
$('div#content img').click(shrink);
});

function grow(){
$(this).css('height','450px');
$(this).css('width','900px');

}

function shrink(){
$(this).css('height','150px');
$(this).css('width','300px');

}
</script>

[Eric Mintz]

Aha! I should have noticed this before but I just now caught it. try changing:

$(document).toggle(function(){
$('div#content img').click(grow);
}, function(){
$('div#content img').click(shrink);
});

to:

$('div#content img').toggle(function(){
$(this).click(grow);
}, function(){
$(this).click(shrink);
});

If the script you have isn't at the bottom of the page (after all the images), then wrap the entire script in:

<script type="text/javascript">
$().ready(function(){

... your script here

});
</script>

[Ronald Roe]

With the help of people on this site, I found the following script which achieves exactly what I need on a particular web page: any image, when clicked, will grow to a certain size, and revert to its original size when clicked again. However when I insert this script, the 'home' link (or any link to another page) no longer works on this page. Can someone explain to me why this is? How can I solve this issue? My test browser is Firefox. I am a beginner at this, teaching myself to use Kompozer.

<script
src="https://ajax.googleapis.com/ajax/lib.../jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).toggle(function(){
$('img').click(grow);
}, function(){
$('img').click(shrink);
});

function grow(){
$(this).css('height','450px');
$(this).css('width','900px');

}

function shrink(){
$(this).css('height','150px');
$(this).css('width','300px');

}
</script>

This is why I suggested you use a class for the selector for the images instead of the img tag. Try the class, it'll likely work just fine after that.

[littlepig]

Aha! I should have noticed this before but I just now caught it. try changing:

$(document).toggle(function(){
$('div#content img').click(grow);
}, function(){
$('div#content img').click(shrink);
});

to:

$('div#content img').toggle(function(){
$(this).click(grow);
}, function(){
$(this).click(shrink);
});

If the script you have isn't at the bottom of the page (after all the images), then wrap the entire script in:

<script type="text/javascript">
$().ready(function(){

... your script here

});
</script>

Thanks Eric

I tried your suggestions; they make the 'home' link work fine again, but the grow-shrink stops working on the images! Maybe you could explain to me the part about where the script is on the page. I have put all this script straight under the <head> tag; am I putting the text in the wrong place?

By the way, I think I found the bit of text in my script that makes the difference as to whether the 'home' link works or not. It is the </script> at the end of <script
src="https://ajax.googleapis.com/ajax/lib.../jquery.min.js"
type="text/javascript"></script>
If I remove it the link works fine.

[littlepig]

This is why I suggested you use a class for the selector for the images instead of the img tag. Try the class, it'll likely work just fine after that.

Hi Ronald. I did try defining images by class; that was successful in that the image for my home link did not grow-shrink (good) but had the effect of making every image in the grow-shrink class grow or shrink at the same time. The home link still did not fire.:bye: