Question

I would like to position a dynamically generated div directly above a button (higher in the page, not Z-index). When the button is clicked, I want to reveal the div with a reverse jQuery slideToggle().

I have set up an example in the fiddle: http://jsfiddle.net/sablefoste/YWnJE/30/

I am close, but I can’t seem to position the reveal to appear directly above the button. I am able to get it to slide upward with by using my CSS position:absolute; left:0;bottom:0; following the first example in http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/.

If I change the left:0; bottom:0; to something else, I can position it correctly until the browser window is resized.

Is there a way to do this without brute force (specifically, identifying the top of the #storiesbutton, and jQuery to reposition the bottom of the #storylist)?

I appreciate any ideas! Thank you!

Answer 1

I’m going on pure guesswork here, but my thing is that you want the menu to appear above the button. I’ve tried it using

var list = $('#storylist'),
    button = $('#storiesbutton'),
    speed = 500;

list.hide().css('bottom', button.css('top'))
    .css('margin-top', list.outerHeight() * -1);

So the position of the stories is set on load based on the position of the button and the height of the list.

Fiddle: http://jsfiddle.net/qt3LE/

Like I said though, I’m not 100% on what you are after. This may help with the positioning.

Also I used $.toggle(function(){}, function(){}) rather that toggleSlide as you have more control over the individual toggles.