Unable to get the position of Div after animating

Question

I am trying to animate a div on a link click to 3px at bottom if the position is already 30%, and goes up if it's 3px.

$(document).ready(function () {

    $('#picsClick').click(function () {

        if ($('#mainLogo').position().bottom === '30%') {
            $("#mainMenu").animate({ bottom: "3px" }, 1100);
        }
        else if (($('#mainLogo').position().bottom === '3px')) {
            $("#mainMenu").animate({ bottom: "30%" }, 1100);

        }

    });
});

Somehow it does not run as I have set mainMenu div position to bottom 30% and it's position is absolute.
Thanks.

Add this as your first line in your click handler: `alert($('#mainLogo').position().bottom);` — Mister Epic, Aug 23 '13 at 11:04
sorry pal, i am quite new here, i dont know how to make fidde. — designerNProgrammer, Aug 23 '13 at 11:09

score 1 · Answer 1 · answered Aug 23 '13 at 11:09

1

The object returned by position() only contains the properties left and top. So bottom is and unexisting property and therefor your code fails.

For more information take a look at the jQuery documentation.

answered Aug 23 '13 at 11:09

Wim Mostmans

3,485
1
20
20

score 0 · Answer 2 · edited May 23 '17 at 11:49

The jquery position API does gives an element's coordinates. X and Y - which for you would mean top and left. You would need to refactor your logic around these. Even after you do that, you should note that the returned values are numbers - absolute values based on your elements position w.r.t page's dimensions. You cannot expect percentages. Hence your comparison logic too would change.

For example, if this were your element:

<input type="text" id="inpId" name="address" value="* Property Address :" style="top: 30%; position: absolute; ">
console.log(typeof $('#inpId').position()['top'])  // "number"
console.log(typeof $('#inpId').position()['bottom'])  // "undefined"

See jquery position

EDIT: to center your logic around bottom, you need to calculate the same in terms of top. See this question:

Get bottom and right position of an element

Hope it helps :)

So how can i really animate the dv to bottom 0px and then on another click animate to t0p? — designerNProgrammer, Aug 23 '13 at 13:57

Unable to get the position of Div after animating

2 Answers2