Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 15
  1. #1
    Junior Member
    Join Date
    Mar 2012
    Location
    Melbourne, Australia
    Posts
    14
    Member #
    31178
    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>

  2.  

  3. #2
    Member Eric Mintz's Avatar
    Join Date
    Mar 2012
    Location
    Atlanta, GA
    Posts
    48
    Member #
    31243
    Liked
    7 times
    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.

  4. #3
    Junior Member
    Join Date
    Mar 2012
    Location
    Melbourne, Australia
    Posts
    14
    Member #
    31178
    Quote Originally Posted by Eric Mintz, post: 233196
    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.

  5. #4
    Junior Member
    Join Date
    Mar 2012
    Location
    Melbourne, Australia
    Posts
    14
    Member #
    31178
    Quote Originally Posted by littlepig, post: 233201
    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?

  6. #5
    Member Eric Mintz's Avatar
    Join Date
    Mar 2012
    Location
    Atlanta, GA
    Posts
    48
    Member #
    31243
    Liked
    7 times
    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.

  7. #6
    Junior Member
    Join Date
    Mar 2012
    Location
    Melbourne, Australia
    Posts
    14
    Member #
    31178
    Quote Originally Posted by Eric Mintz, post: 233328
    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>

  8. #7
    Member Eric Mintz's Avatar
    Join Date
    Mar 2012
    Location
    Atlanta, GA
    Posts
    48
    Member #
    31243
    Liked
    7 times
    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>

  9. #8
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by littlepig, post: 233170
    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.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  10. #9
    Junior Member
    Join Date
    Mar 2012
    Location
    Melbourne, Australia
    Posts
    14
    Member #
    31178
    Quote Originally Posted by Eric Mintz, post: 233363
    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.

  11. #10
    Junior Member
    Join Date
    Mar 2012
    Location
    Melbourne, Australia
    Posts
    14
    Member #
    31178
    Quote Originally Posted by Ronald Roe, post: 233394
    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:


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:52 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com