CSS/JS 100% Height of Embed with jQuery Sliding Header

I have searched for the past two hours and have been unable to find a solution to this exact situation.

I have a website where I allow the user to "pop out" an embedded video stream from a 3rd party such as justin.tv. When they do that, I put a little full width header in the window which is mostly hidden except for 10px at the top.

When they hover the 10px area, the header expands into the content giving them some menu options such as "pop back in".

The problem is, no matter what I do (pure css, css/js, etc), I cannot get it so that in every case, being:

• Popup created, header displayed at 40px, after some time, it collapses back to 10px
• User hovers header, it expands 40px
• Users mouse moves off header, it contracts back to 10px

The embedded video will take up all remaining space in the window, and we will never see a scrollbar in the window.

I have gotten it to "mostly" work usin开发者_如何学JAVAg javascript to resize the div, but it does not work well in conjunction with the jquery.animate() function which is taking care of changing the height of the header.

Any help is appreciated!

EDIT:

A half working example can be found at:

http://wellplayed.org/channel/now_live

Depending on what channels are live when you read this, click on one, and in the "view stream" page, find the "popout stream" button at the top left.

Please note though, I have corrected some of how this was done in my development environment, so its not quite as bad as it is there.

Thanks for posting the visual of what you were trying to do

I think in this case it would be much easier if you used absolute positioning, that way there is only one variable (top co-ordinate) that needs manipulated, and you don't have to do resize functions, the AP (absolute positioning) will take care of that too.

The essence is that you need both divs, bar and video container, to animate at the same time, and when they're animating you also need your embedded object to resize at the same pace.. I found that there was way too many calculations and even then I couldn't get the object to resize along with it's parent at all at any speed.. so I thought it easier to let CSS do as mych as could then just use the jQuery for moving the position

The main thing is to make sure that top bar #stream-bar-hover is always the same height.. so don't put padding etc.. on it, you already have #stream-bar inside it so any embellishments can be put there

I went on the basis that that top left image was 38x38 as per your HTML but you can calculate the next bit differently if you want it to be smaller , by the time I added the 1px border and 2px padding and 2px margin in #stream-bar that meant the height of the "hover bar had to 48px (I did added overflow: hidden just in case ;))

Then absolutely position #stream-bar-hover and #stream-popup making the two of them fill the various parts of the screen so top: 0; for the bar and top: 48px; for the video container, the right left and bottom co-ordinates of these two divs need never change by changing only the top one your delayed function and hover functions should both work, you just need to animate the two divs tops co-ordinate at the same time

the advantage to this method is that it needs no window.resize() function which I think your method would

Here's a working example : link with the fiddle for code : here