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 2 of 2 FirstFirst 1 2
Results 11 to 15 of 15
  1. #11
    Member Eric Mintz's Avatar
    Join Date
    Mar 2012
    Location
    Atlanta, GA
    Posts
    48
    Member #
    31243
    Liked
    7 times
    One thing that might be going on: in my example I had:
    $('div#content img').toggle(function(){ ... }

    Notice the $('div#content img') is just an example to target only images in <div id="content">...</div>. If you want ALL images on your page to have the effect, then change that to $('img')

    The reason that any scripts that work on the DOM should go at the bottom of the page is that the script might depend on the element having been loaded first. In this case, the script (as modified now) depends on the images being loaded, so it can attach click handlers to them. It used to attach the event directly to the document, which was causing the problems with links.

    You can also leave the script where is is if you wrap it in the $().ready() function (see my last post for the syntax). That's because the jQuery ready() method fires after the document has finished loading - which guarantees all of your images have already been rendered by the browser. Keep the reference script tags (like for jQuery) in the head (or at least above any other scripts that use jQuery)

    So... you can just move the whole script to the bottom of the page, or make it a delegate of the ready() method. Either way should work equally well.

    The script tags themselves look fine - whether the script tag references a javascript file, or whether it contains inline javascript code, it should end with </script> I think the reason your links work when you remove </script> is that then the jQuery lib isn't getting loaded.

    I just tried this and the image resizes and the link works:

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

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

    function shrink(){
    $(this).css('height','150px');
    $(this).css('width','300px');
    }
    });
    </script>
    </head>
    <body>
    <a href="http://www.google.com">Google</a>
    <div id="content"><img src="somepic.jpg" /></div>
    </div>
    </body>
    </html>

    --------------------

  2.  

  3. #12
    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: 233398
    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:
    Like Eric said, you'll have to target the images you want to grow. I don't have everything you're looking at. You'll need to adjust based on your situation. People around here like to help, but you have to adjust the code to fit your situation.
    littlepig likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #13
    Junior Member
    Join Date
    Mar 2012
    Location
    Melbourne, Australia
    Posts
    14
    Member #
    31178
    Quote Originally Posted by Eric Mintz, post: 233403
    One thing that might be going on: in my example I had:
    $('div#content img').toggle(function(){ ... }

    Notice the $('div#content img') is just an example to target only images in <div id="content">...</div>. If you want ALL images on your page to have the effect, then change that to $('img')

    The reason that any scripts that work on the DOM should go at the bottom of the page is that the script might depend on the element having been loaded first. In this case, the script (as modified now) depends on the images being loaded, so it can attach click handlers to them. It used to attach the event directly to the document, which was causing the problems with links.

    You can also leave the script where is is if you wrap it in the $().ready() function (see my last post for the syntax). That's because the jQuery ready() method fires after the document has finished loading - which guarantees all of your images have already been rendered by the browser. Keep the reference script tags (like for jQuery) in the head (or at least above any other scripts that use jQuery)

    So... you can just move the whole script to the bottom of the page, or make it a delegate of the ready() method. Either way should work equally well.

    The script tags themselves look fine - whether the script tag references a javascript file, or whether it contains inline javascript code, it should end with </script> I think the reason your links work when you remove </script> is that then the jQuery lib isn't getting loaded.

    I just tried this and the image resizes and the link works:

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

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

    function shrink(){
    $(this).css('height','150px');
    $(this).css('width','300px');
    }
    });
    </script>
    </head>
    <body>
    <a href="http://www.google.com">Google</a>
    <div id="content"><img src="somepic.jpg" /></div>
    </div>
    </body>
    </html>

    --------------------
    Thats it Eric!:dance:That works me for me too.

    You and Ronald have been so much help I really appreciate it. I will send you a link to my site when its done so you can check it out.:redface:

  5. #14
    Junior Member
    Join Date
    Mar 2012
    Location
    Melbourne, Australia
    Posts
    14
    Member #
    31178
    Quote Originally Posted by Ronald Roe, post: 233411
    Like Eric said, you'll have to target the images you want to grow. I don't have everything you're looking at. You'll need to adjust based on your situation. People around here like to help, but you have to adjust the code to fit your situation.
    Thanks Ronald, you guys have been so much help, with putting up with my dumb questions. Really appreciate it.

  6. #15
    Member Eric Mintz's Avatar
    Join Date
    Mar 2012
    Location
    Atlanta, GA
    Posts
    48
    Member #
    31243
    Liked
    7 times
    Glad to help!


Page 2 of 2 FirstFirst 1 2

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 04:23 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com