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 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2007
    Location
    NC
    Posts
    39
    Thanks
    3
    Thanked 1 Time in 1 Post

    (simple?) Jquery problem

    First off, here's my code:

    Code:
    <html>
         <head>
              <title>A jQuery Script</title>
              <script src="jquery-1.3.2.js" type="text/javascript" /></script>
               <script type="text/javascript">
                  $(document).ready(function(){
    				$('ul').hide();
                       $('.closed, .open').click(function(){
                            $('#siteHide').animate({"opacity": "toggle"});
    						$(this).toggleClass('closed').toggleClass('open');
                       });				   
                  });
              </script>
    </head>
    
         <body>
              <p>
              <a href="#" id="site" class="closed">Site</a>
                   <ul id="siteHide">
                        <li>Home</li>
                        <li>About</li>
                        <li>Blog</li>
                        <li>Affiliates</li>
                   </ul>
              </p>
              <p>
              <a href="#" id="tutorials" class="closed">Tutorials</a>
                   <ul id="tutorialsHide">
                        <li>jQuery</li>
                        <li>PHP</li>
                        <li>Illustrator</li>
                        <li>Paint Shop Pro</li>
                   </ul> 
              </p>
              <p>
              <a href="#" id="linksout" class="closed">LinksOut</a>
    
                   <ul id="linksoutHide">
                        <li>Webitect</li>
                        <li>W3.org</li>
                        <li>Google</li>
                   </ul>
              </p>
         </body>
    
    </html>
    This works just fine, but as you can see it only opens/closes the id "siteHide". What I need to modify this script to do is detect which category is clicked and expand the associated url (basically, I need (this + 'Hide') but that doesn't work in the code). Does anyone know how to do this? I've also tried using this code:

    Code:
    <html>
         <head>
              <title>A jQuery Script</title>
              <script src="jquery-1.3.2.js" type="text/javascript" /></script>
               <script type="text/javascript">
                  $(document).ready(function(){
    				$('ul').hide();
                       $('.closed, .open').click(function(){
                            $(this).find('ul').animate({"opacity": "toggle"});
    						$(this).toggleClass('closed').toggleClass('open');
                       });				   
                  });
              </script>
         </head>
    
         <body>
              <p class="closed">
              <a href="#" id="site">Site</a>
                   <ul id="siteHide">
                        <li>Home</li>
                        <li>About</li>
                        <li>Blog</li>
                        <li>Affiliates</li>
                   </ul>
              </p>
              <p class="closed">
              <a href="#" id="tutorials">Tutorials</a>
                   <ul id="tutorialsHide">
                        <li>jQuery</li>
                        <li>PHP</li>
                        <li>Illustrator</li>
                        <li>Paint Shop Pro</li>
                   </ul> 
              </p>
              <p class="closed">
              <a href="#" id="linksout">LinksOut</a>
    
                   <ul id="linksoutHide">
                        <li>Webitect</li>
                        <li>W3.org</li>
                        <li>Google</li>
                   </ul>
              </p>
         </body>
    
    </html>
    Last edited by SnoringFrog; 07-09-2009 at 04:27 AM.

  • #2
    Regular Coder Iszak's Avatar
    Join Date
    Jun 2007
    Location
    Perth, Western Australia
    Posts
    332
    Thanks
    2
    Thanked 58 Times in 57 Posts
    In theory this will work.
    Code:
    $('.closed, .open').click(function(){
      $(this).next('ul').animate({opacity: 'toggle'});
      $(this).toggleClass('closed').toggleClass('open');
    });
    But it won't with your code because un-ordered lists cannot be inside paragraphs, so if you simply remove the paragraph tags and try that it should by all means, work.

    The reason why find didn't match it, is because it's looking for elements inside the hyperlink which there is none.

    Here's an example of the code working (http://pastebin.me/4a55bf2ac6a4e) - if you have firebug you can also see that the class attribute is also changing.

    If you're insistent on having invalid mark-up then the following should work with your current mark-up.
    Code:
    $('.closed, .open').click(function(){
      $('#'+$(this).attr('id')+'Hide').animate({opacity: 'toggle'});
      $(this).toggleClass('closed').toggleClass('open');
    });
    But I advise against it.

  • #3
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post

    The Jquery problem of JavaScript, as with most web development, are almost entirely related to browser compatibility.

    While the advances in browser programmability we've seen over recent years are, generally speaking, a good thing, if you don't implement them with care you can create a lot of inconsistencies and broken pages quite unintentionally using JavaScript. Code that works just great on IE4 might not work at all on Netscape 4, what works in NN6 doesn’t always work in NN 4, and so on.

    In essence, there are two main problems with JavaScript and browsers:

    · The different JavaScript versions in different browsers.

    · Browser programmability: the HTML elements and features of the browser that can be accessed through any scripting language. (IE4 , for example, makes most of the page and HTML accessible to scripts, but Navigator 4 limits what can be accessed and manipulated.)

  • #4
    New Coder
    Join Date
    Oct 2007
    Location
    NC
    Posts
    39
    Thanks
    3
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Iszak View Post
    In theory this will work.
    Code:
    $('.closed, .open').click(function(){
      $(this).next('ul').animate({opacity: 'toggle'});
      $(this).toggleClass('closed').toggleClass('open');
    });
    But it won't with your code because un-ordered lists cannot be inside paragraphs, so if you simply remove the paragraph tags and try that it should by all means, work.

    The reason why find didn't match it, is because it's looking for elements inside the hyperlink which there is none.

    Here's an example of the code working (http://pastebin.me/4a55bf2ac6a4e) - if you have firebug you can also see that the class attribute is also changing.

    If you're insistent on having invalid mark-up then the following should work with your current mark-up.
    Code:
    $('.closed, .open').click(function(){
      $('#'+$(this).attr('id')+'Hide').animate({opacity: 'toggle'});
      $(this).toggleClass('closed').toggleClass('open');
    });
    But I advise against it.
    Oh, I didn't realize that unordered lists couldn't go inside paragraphs. Your code worked perfectly once I fixed that, thanks.


  •  

    Posting Permissions

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