jQuery Forum

Hi All,

I've been staring at this for hours. I've got nested li's for navigation.

The second level down does not show unless you click it's parent. Then it is supposed close when you click the parent again. The problem I'm having is when I click the child element it closes itself. I've done this before and had no problems, so I'm not sure why it's not working now. Here's my jquery:

1. main_nav.click(function() {  
              
       if($(this).children('ul.second_level').is(':hidden'))
           {
               $(this).children('ul.second_level').slideDown();   
           }
       else
           {
               $(this).children('ul.second_level').slideUp();
           }
                              
       });

This essentially works....but it is apparent when looking at it that when I hover over the child li's it's registering as if (which I guess technically I am) I'm hovering over the parent li and so when I click the link in the child li it will go to the link, but not before you can see the children of the parent li start to close.

I tried eliminating all my CSS to see if the problem was there, but it still does it. The strange thing is I have this working on several other sites no problem. I've played with z-index a lot with no luck. Here's are the nested li's:

1. <ul id="main_nav">
           <li class="link_portfolio li-level1"><a class="display-block level1">portfolio <span>+</span></a>
               <ul class="second_level">
                   <li class="link_CHANGE"><a class="display-block" href="">K - 12</a></li>
                   <li class="link_higher_education"><a class="display-block level2" href="">higher education</a>
                       <ul class="third_level">
                           <li class="link_CHANGE"><a class="display-block" href="">GCC Health Sciences</a></li>
                           <li class="link_CHANGE"><a class="display-block" href="">USD Student Pavillion</a></li>
                           <li class="link_CHANGE"><a class="display-block" href="portfolio.php">SDSU Love Library<img src="images/links/img_link_love_library.jpg" alt="SDSU Love Libray" title="SDSU Love Libray" width="141" height="34" /></a></li>
                           <li class="link_CHANGE"><a class="display-block" href="">GCC Digital Arts</a></li>
                           <li class="link_CHANGE"><a class="display-block" href="">PLNU Business School</a></li>
                           <li class="link_CHANGE last"><a class="display-block" href="">PLNU Religion Bldg.</a></li>
                       </ul>
                   </li>
                   <li class="link_CHANGE"><a class="display-block letter-spacing-1 level2" href="">zoological</a></li>
                   <li class="link_CHANGE"><a class="display-block level2" href="">health care</a></li>
                   <li class="link_CHANGE"><a class="display-block letter-spacing-1 level2" href="">military</a></li>
                   <li class="link_CHANGE"><a class="display-block level2 last" href="">other</a></li>
               </ul>
           </li>
           <li class="link_about_us li-level1"><a class="display-block level1">about us <span>+</span></a>
                <ul class="second_level">
                  <li class="link_our_history"><a class="display-block level2" href="our-history.php">history</a></li>
                  <li class="link_services"><a class="display-block level2" href="services.php">services</a></li>
                  <li class="link_community"><a class="display-block level2" href="community-involvement.php">community</a></li>
                  <li class="link_awards"><a class="display-block level2" href="design-awards.php">awards</a></li>                  
                </ul>  
          
           </li>
           <li class="link_CHANGE li-level1"><a class="display-block level1" href="">process <span>+</span></a></li>
           <li class="link_sustainability li-level1"><a class="display-block level1" href="">sustainability <span>+</span></a></li>
           <li class="link_people li-level1"><a class="display-block level1" href="people.php">people <span>+</span></a></li>
           <li class="link_CHANGE li-level1"><a class="display-block level1 letter-spacing-1" href="">blog <span>+</span></a></li>
           <li class="link_CHANGE li-level1"><a class="display-block level1 last" href="">contact <span>+</span></a></li>
       </ul>
    

On my other sites I'm using this jQuery:

1. $('#main_nav li').click(function(event){  
               if (this == event.target)
                   {
                     if ($(this).children('ul').is(':hidden'))
                       {
                           $(this).children('ul').slideDown();
                           //$(this).css('background-image','url(images/minus.gif)');
                       }
                     else
                       {
                           $(this).children('ul').slideUp();
                           //$(this).css('background-image','url(images/plus.gif)');
                       }
                   }
             })

When I try to use this on my current site....it doesn't work....it works, but (this == event.target) does not, i.e. "this" does not equal the event target.....

Any thoughts would be appreciated.

Thanks,

Glen

Hello,

I have photo gallery. Images are listed in a single container:

1. <div>
2. <img id="img_1" src="">
3. <img id="etc" src="">
4. <img id="img_3">
   
5. <img id="etc" src="">
6. <img id="etc" src="">
7. <img id="etc" src="">
8. </div>
   

The dragging works fine. What I want to do is when I drag the image, for example #img_3, is move the two images around it in exact relation to it as I drag it. Think of all the images in a horizontal line. Only one image shows at a time.  I just can't  figure out how to attach the two images (on either side of it) to the draggable image as it's moving so I can change their position on the fly. Currently I simply have this for the draggable image:

1. $('#portfolio_items img').draggable({
       axis: "x"
       });

Is there someway to actually drag the other two images at the same time in exact relation to the image being dragged?

I thought about simply attaching an event to the image being dragged and move the other images on the fly, but couldn't figure out how to do that.

Any help would be appreciated.

Thanks,

Glen

First, a general question, as I think my understanding of this is incorrect.

I have a page that shows a lot of different information . . . kind of a forum.

I'm using jQuery/Ajax/PHP to update sections of the page. In one section users can respond to a comment. There might be ten comments and multiple responses under each comment so with each comment there is a small form to enter information. When a user enters their response that section "refreshes" using Ajax and an Ajax file (i.e. a different file for the same information than the one that is used when the page first loads).

When building this I noticed that my jQuery code in an external .js file would not work in the loaded Ajax file, i.e. I had to duplicate the jQuery code in the loaded file. That's the first question. That doesn't seem right to me. Why would I need to repeat it? And if I don't why is not working in the loaded Ajax file?

Secondly, this has caused problems with the form (I think this is why) - - - it repeats entries - - - sometimes - - - and sometimes exponentially, the longer I stay on the page without a page refresh the more entries it will make . . .

Here's the code to submit my form:

1. 
   var $tweetSubmitBtn = $('#member-profile .tweet_form .submit_tweet_response');
   
   $tweetSubmitBtn.click(function(event) {
       if(this == event.target)
       {
           var tweet_id = $(this).siblings('.tweet_id').attr('value');
           var ss = $(this).siblings('.ss').attr('value');
           var npnp = $(this).siblings('.npnp').attr('value');
           var what_tweets = $(this).siblings('.what_tweets').attr('value');
           var tweet_response = $(this).siblings('.tweet_textarea').attr('value');
           var submit_tweet_response = $(this).siblings('.submit_tweet_response').attr('value');
           var user_id2 = $(this).siblings('.user_id2').attr('value');
           var comments_id = $(this).siblings('.comments_id').attr('value');
           var url_destination;
           var success_id;
          
          
           var data_string = 'tweet_id=' + tweet_id + '&ss=' + ss + '&npnp=' + npnp +
           '&what_tweets=' + what_tweets + '&tweet_response=' + tweet_response +
           '&submit_tweet_response=' +  'submit_tweet_response' + '&user_id2=' +  user_id2 + '&comments_id=' +  comments_id;
          
           if(what_tweets == 'ticker_mine')
               {
                   url_destination =     'profile-posts-ticker-1.php';
                   success_id = '#ticker_mine';
                  
               }
           else
               {
                   url_destination =     'profile-posts-ticker-2.php';
                   success_id = '#ticker_all';
               }
      
           $.ajax({
               type: "POST",
               url: 'ajax_process/'+url_destination,
               data: data_string,
               dataType: "html",
               success: function(data) {
                   $(success_id).html(data);
                  
               }
              
            });
            return false;
       }
   });
   
   

As I say, it updates fine, it submits fine, it submits the correct response to the appropriate comment fine, it's just that with this code repeated I assume it's causing the multiple submits so that I get sometimes 8 responses to a comment with the exact same response . . . I can see the Ajax file "refreshing" in the background for each submit.

Anyway, I spent hours on this yesterday . . . any help would be appreciated.