Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts

    Cannot get jQuery to function

    Hi all,

    Im pretty frustrated with this, as I feel like I am missing something really simple but just cant figure it out. Basically I was going to use jQuery to animate the "search" image at the top. After this didnt work, I realized I couldnt get any jquery to work

    So I went back to basics to try a very simple script and just cant get any jQuery to work.

    Code:
    Code:
    $(document).ready(function(){
       ("a#searchAnimate").click(function(event){
       alert("As you can see, the link no longer took you to jquery.com");
       event.preventDefault();
       });
     });
    Some of Relevenat HTML:
    Code:
    <ul><li id="searchBox">
    				<?php include (TEMPLATEPATH . '/searchform.php'); ?>
    			</li></ul>
    	<div style="display:block;"><a href="http://jquery.com" id="searchAnimate" title="Search"><img class="search" src="wp-content/themes/splat!/style/images/search.png" alt="Search" /></a></div>
    Test page is here.

    If you view the page, you can see the scripts are being called properly in the head and appear inf firebug, I thought it might have been a path issue, so threw in the absolute path and still couldnt get it to work.

    So, any ideas what have I done wrong? Appreciate any help or advice

    Best Regards,

    Drew

    Edit-Just would like to add before someone tells me to correct them, the 4 html markup errors are just from the free host that I use tracking script, the actual page and markup is valid
    Dev-Tips.com || Employee at the Envato Network || My Portfolio

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    You missed:
    Code:
    $(document).ready(function(){
       $("a#searchAnimate").click(function(event){
       alert("As you can see, the link no longer took you to jquery.com");
       event.preventDefault();
       });
     });
    Also, sincce id is unique in every page, you can just remove highlighted:
    Code:
    ("a#searchAnimate")
    Hope that helps.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    FWDrew (10-15-2008)

  • #3
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Hi Rangana,

    Wow, I feel pretty embarrassed that I missed that. Thank you very much. However, I still cannot jQuery to function as I want it to. Take for example this:
    Code:
    $(document).ready(function(){
       $("#searchAnimate").click(function(event){
       event.preventDefault();
       $(this).hide("slow");
     });
    
    });
    I still cant get this very simple script to work, any ideas? I think I need to step away from it and let my eyes rest for a bit

    Best Regards,

    Drew
    Dev-Tips.com || Employee at the Envato Network || My Portfolio

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Try to interchange the two:
    Code:
     event.preventDefault();
       $(this).hide("slow");
    event.preventDefault is the same as if you return false on JS which cancels any event from the point of declaration forward.

    Hope that helps.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #5
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Quote Originally Posted by rangana View Post
    Try to interchange the two:
    Code:
     event.preventDefault();
       $(this).hide("slow");
    event.preventDefault is the same as if you return false on JS which cancels any event from the point of declaration forward.

    Hope that helps.
    Hey Rangana,

    Thanks again, but I am still having no luck, here is my updated code:
    Code:
    $(document).ready(function(){
       $("#searchAnimate").click(function(){
       $(this).hide("slow");
       return false;
     });
    
    });
    About ready to pull my hair out, just dont know why I cant get this right. I really appreciate all of your help

    Best regards,

    Drew
    Dev-Tips.com || Employee at the Envato Network || My Portfolio

  • #6
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Working fine at my end.

    See testing example:
    Code:
    <script type="text/javascript" src="http://premiumthemes.net84.net/wordpress/wp-content/themes/splat!/style/scripts/jquery-1.2.6.min.js"></script>
    <script>
    $(document).ready(function(){
       $("#searchAnimate").click(function(){
       $(this).hide('slow');
       return false;
     });
    
    });
    </script>
    <ul><li id="searchBox">
    test
    			</li></ul>
    	<div style="display:block;"><a href="http://jquery.com" id="searchAnimate" title="Search"><img class="search" src="http://rangana.moonylist.com/images/Picture7.jpg" alt="Search" style="width:350px;height:300px;"/></a></div>
    Click on the image and it hides, nothing wrong (as far as I can see), or you expect it to do something else?
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    FWDrew (10-16-2008)

  • #7
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Quote Originally Posted by rangana View Post
    Working fine at my end.

    See testing example:
    Code:
    <script type="text/javascript" src="http://premiumthemes.net84.net/wordpress/wp-content/themes/splat!/style/scripts/jquery-1.2.6.min.js"></script>
    <script>
    $(document).ready(function(){
       $("#searchAnimate").click(function(){
       $(this).hide('slow');
       return false;
     });
    
    });
    </script>
    <ul><li id="searchBox">
    test
    			</li></ul>
    	<div style="display:block;"><a href="http://jquery.com" id="searchAnimate" title="Search"><img class="search" src="http://rangana.moonylist.com/images/Picture7.jpg" alt="Search" style="width:350px;height:300px;"/></a></div>
    Click on the image and it hides, nothing wrong (as far as I can see), or you expect it to do something else?
    Nope, that works great. It was really strange, I got it to work if I put the script hard coded on the html instead of linking to it. I then tried linking to it again and it worked

    Either way, im satisfied, thanks very much for all of your help Rangana

    Best Regards,

    Drew
    Dev-Tips.com || Employee at the Envato Network || My Portfolio

  • #8
    New to the CF scene
    Join Date
    May 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cant get JQuery To Work, Pls Help

    hi, I'm using eclipse for development and trying oout jQuery for the first time, I can't seem to get the following working.

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <style type="text/css">
    #box
    {
    background:red;
    width:80px;
    height:80px;
    }
    </style>

    <script type="text/javascript">
    $(document).ready(function(){
    $('a').click(function() {
    $('#box').fadeOut();
    });
    });

    </script>

    <title>Test</title>
    </head>
    <body>
    <div id="box"></div>
    <a href="#">Link</a>

    </body>
    </html>

  • #9
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Make a new thread for your question.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •