CODEWITHSUNDEEP
javascriptjquery
jons
jons

Reputation: 310

Javascript click function not reacting in proper parent

I have this javascript that animates a div into a parent div.

Javascript

$(document).ready(function() {
    $("a").click(function() {
        var $righty = $(this).next();
        $righty.animate({
            right: parseInt($righty.css('right'),10) == 0 ?
            -$righty.outerWidth() :
            0
        });
    });
});

HTML

    <div id="home" class="page">                
        <div id="page1">                
            <a href="#">Inside Div</a>
        </div>

        <a href="#">Outside Div</a>

        <div id="page2" class="page">
            content 
        </div>                     
   </div>

I want the <a> tag to live in the page1 div. As of now, the Javascript only works when the <a> tag lives in <div id="page1">. I apologize if this is very basic, as I am new to Javascript. Thank you!

Upvotes: 0

Views: 65

Answers (1)

shubniggurath
shubniggurath

Reputation: 966

Use a selector for your a tag, instead of just a. Like a class or an id. You don't want this to happen to every single a tag, right?

Also, righty is getting NEXT...well, there's nothing next to the a tag you want to hit.

You want to do $(this).parent().next(); - no, see edit below. I am guessing, because you never told us what you wanted, exactly.

EDIT: This may not help at all. Just know that you can't have an a tag in a div, and call .next() - it has no siblings. .next() hits the next sibling. Not as it appears visually on the page, but as it exists in the DOM tree....you need to have a sibling in the div for the a tag to grab with .next().....you don't. Does that make sense? What exactly are you trying to animate?

EDIT EDIT: Tell me the id or class of the tag you want animated when a given a tag with a given class or id is clicked, and I'll show you how to do it.

EDIT EDIT EDIT: If you just want to make page2 animate when page1 > a is clicked, do this:

$('#page1 a').click(function(){ $('#page2').animate(...put animation stuff here...) });

Upvotes: 1

Related Questions