I’m using javascript to expand the volume element when you mouse over it. Here is a visual:
Currently all the elements within the control bar have absolute positioning, and I animate the width value for the volume div and the left value for the timecode. I think it’s kind of messy having to hard code the position for everything with CSS and JavaScript. Is there a better way to accomplish this?
.video-control-bar {
overflow:hidden; /* wrap floats */
width:100%; /* trip haslayout, wrap floats IE */
}
.video-play-button,
.video-volume,
.video-volume-slider,
.video-volume-button,
.video-timecode {
float:left;
}
.video-maximize-button {
float:right;
}
.video-position {
// needs no extra CSS, should fill gap between floats
}
Stack the ones on the left, max on the right, position fills the gap. SIMPLE. Methinks you’re diving too quickly for the APO. Let normal flow and floats do their job!
Silly question, but what’s with the valid XML that’s invalid in most user agents (the self closing DIV) - are you omitting code, or just saying to hell with EVERY version of IE? Also not sure what you need the twin span or paragraph tag for (as that’s not a paragraph).
If I have time I’ll code up an example once your attachment is approved.
I am animating the position of video-control-bar with JS, to make it “pop up” when your mouse is over the video container. The layout and functionality is identical to YouTube’s if you need an example of how things should work.
I don’t think making this work is as simple as “float everything left.”
Instead of posting pictures, which don’t show up right away – could you post a link to live code? Snippets and images are useless as we don’t get the entire “picture”
Especially when we often have to wait HOURS to see pictures you put on your posts as attachments… but even when we see the pictures we’re stuck guessing which visual element you want is which element in the code… for example .video-position; is that the bit ABOVE the bar, in which case why is it source-order at the end of it?!?
Here is what it looks like with things set to float:
Not every version of IE. IE9 is smart enough to understand application/xhtml+xml. I’m saying to hell with all version of IE that are 8 and older.
I have the paragraph so I can vertically align the text to the middle of the bar, and the spans are so I can access the position of the video and the overall duration separately. They are also to theme the font color differently.
I’m wondering why you’re not just using floats – there’s nothing there that should need APO. It also feels element heavy with all the classes for nothing. Set .video-control-bar to overflow:hidden and width:100%; (giving IE haslayout), float everything left except .video-maximize-button – simple.
I tried inline-block, but then there was a gap between the play button and the volume that I couldn’t get rid of and the elements inside of the volume div are absolutely positioned themselves, so they then get screwed up.
