Question

I am trying to make a ‘dropdown’ menu style of which its a div. When a button will be pressed the div will appear at a position exactly underneath it.

Here is an example from google’s translator:

This is a div and its positioned exactly underneath the button, using left and right.

How can you do this without specifying exactly the left and right because I can’t know the screen size of the user. Also this has to be cross browser.

This is what I currently have:
http://jsfiddle.net/pCg9N/

Answer 1

You could do something like this:

$(document).ready( function() {
    // So that we don't have jQuery search every time.
    var $button = $("button");

    // Button's left offset, relative to the document.
    var buttonLeft = $button.offset().left;
    // Button's right offset, relative to the document.
    var buttonTop = $button.offset().top;
    // innerHeight() includes CSS padding.
    var buttonHeight = $button.innerHeight();

    // Finally, set the div's left and top CSS attributes.
    $("div").css("left", buttonLeft + "px");
    $("div").css("top", buttonTop + buttonHeight + "px");
});

$('button').on('click', function () {
    // I changed this to toggle() so that it hides again if clicking twice ;-)
    $('div').toggle();
});

Basically now it’s making use of the button’s positioning information so you never have to set it on the div. This should help, but unfortunately cross-browser support isn’t necessarily this simple.

I also changed the CSS around a little in your example to better illustrate what we’re doing, see updated version below for the full thing:

http://jsfiddle.net/pCg9N/15/

Links to relevant jQuery function documentation:

• offset()
• css()
• innerHeight()
• toggle()