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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jan 2011
    Posts
    120
    Thanks
    6
    Thanked 2 Times in 2 Posts

    problem with jquery toggle function

    When I click the add as friend, I'm wanting the interactContainer to slide down, but it's not reacting to my clicks.

    Here is the actual javascript
    Code:
    <script language="javascript" type="text/javascript">
    //jQuery function for toggling add friend interaction container
    function toggleInteractContainers(x) {
    	if($('#'+x).is(":hidden")) {
    	$('#'+x).slideDown(200);
    	}else {
    		$('#'+x).hide();
    	}
    	#('.interactContainers').hide();
    }
    </script>
    here is the section of html that should be reacting to the javascript
    Code:
      <div class="addAsFriend"><?php echo $addAsFriend;?></div>
    			  <div class="interactContainers" id="add_friend">
    			  Add as a friend container
    			  </div>
    and here is the php
    PHP Code:
    <?php
    if(isset($_SESSION['user_id'])&& $_SESSION['user_id']!=$id) { 
        
    $addAsFriend ='<div><a href="#" onclick="return false" onmousedown="javascript:toggleInteractContainers(\'add_friend\');">Add as Friend</a>
    </div>'
    ;
    } else if(isset(
    $_SESSION['user_id'])&& $_SESSION['user_id'] == $id) { 
        
    $addAsFriend ='<div>This is you</div>';
    } else { 
        
    $addAsFriend '<div><a href="signup.php">Sign Up</a> or <a href="login.php">Log In</a> to interact with ' $first_name ' ' $last_name'
    </div>'
    ;
    }
    ?>
    Last edited by MattClark; 03-14-2011 at 01:54 PM.

  • #2
    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
    You should remove the onclick() and onmousedown() events from the HTML, since you're using jQuery. One of the ideas of jQuery is to get the Javascript out of the HTML file and into your script file.

    You should, instead, capture the event using the jQuery "ready" function (I use the shorthand syntax):

    Code:
    //replace selectorForYourLink with a selector for your link (use ID, or class, or html tag, or whatever)
    //You should be able to use $(this) inside the function.
    $(function() {
        $("selectorForYourLink").click(function() {
            if($("selectorForYourLink").is(":hidden")) {
                $("selectorForYourLink").slideDown(200);
            }else {
                $("selectorForYourLink).hide();
            }
            #('.interactContainers').hide();
        });
    });
    (this is totally untested and is only demonstrating the idea; it will probably require tweaking to get working the way you want it)

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    You might find using slideToggle() useful as well since that toggles the visibility and slides all in one function.

  • #4
    Regular Coder
    Join Date
    Jan 2011
    Posts
    120
    Thanks
    6
    Thanked 2 Times in 2 Posts
    does the syntax at least seem correct? I'm REALLY new to javascript

  • #5
    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
    Since you're new to jQuery, here's the helpful jQuery beginner's tutorial:

    http://docs.jquery.com/How_jQuery_Works


  •  

    Posting Permissions

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