I'm trying to find out why this CSS3 transition affects the parent div:
http://jsfiddle.net/BpUqt/5/
I'm trying to move an object up inside a div without changing the height of its parent div.
But what happens is that the height of the box shrinks by 1px each time the transition begins/ends (with or without border)
While I want to use three of these in a row my content beyond begins to jump up too if the user hovers over these items very quickly.
Setting an fixed height is not an option since I'm working on an responsive layout.
Instead of animating margin (which means the box height needs to be recalculated, so rounding errors on partial pixels causes movement), use transforms.
Also, remember that IE10 has transitions, so use the ms prefix as well.
Have a look at http://jsfiddle.net/BpUqt/10/
Ok, here's a simple work-around. Simply add a negative margin and it works:
http://jsfiddle.net/BpUqt/12/
Here's how it actually looks like (minimal version):
http://jsfiddle.net/sSjQt/
Related
strong textSeems like a common problem, but in my case it's complicated by a few extra requirements, so what I found on SO and MDN didn't lead me to a full solution.
Simple premise:
Horizontal nav bar, full width of the page, semi-transparent background, variable number of tabs (extra space filled with same background as tabs).
Easy, right? Give the container element rgba background, set nav items display:inline or float them left and you're golden.
Complication 1: Active tab has to have a triangular cutout (see pic).
Ok, I can have a cutout by setting background-image to a png with transparent bit. The background of the parent element would get in the way - so set background to individual elements instead of parent.
What about the variable width "empty space" past the tabs (see pic)? Ok, put an empty element with a larger than life width, and cut it off with overflow:hidden on the parent.
Complication 2:
Buttons need tooltips on hover.
Ah, the thrill! The suspense! overflow:hidden won't do unless I put tooltips outside of nav div altogether (which would probably work - but seems smelly).
So, here are a few things I tried:
Old implementation which doesn't have the "filler" element width problem but clips off half a tooltip (with overflow:hidden):
http://codepen.io/istro/pen/aHcdi
Messing with display:table seems to give little control over how display:table-cell div width is decided, also needs content to display the div in the first place. Content can be moved away, but still no good (didn't even add a tooltip here):
http://codepen.io/istro/pen/uIcfn
Messing with floats (tooltip sorta where I'd want it to be more or less), but clueless how to make the last "filler" element fit remaining width:
http://codepen.io/istro/pen/aIGxB
So the question - how could I make a div to fill the remaining width with CSS only? Or perhaps I'm asking the wrong question altogether, in which case what ideas would I use to implement it cleanly?
Thanks!!!
We have a DIV that is centered vertically in its parent and shows different text at different times, meaning its height is not fixed.
Is it possible to use CSS only to position this DIV just off the screen, at the top, then slide it down with animation?
We tried various combinations of translateY and webkit-transform, but these fail because translateY is based on the element's height, not the parent's, when using percentages. Using pixels doesn't work since the DIV's height varies.
A JavaScript solution is obviously possible, but is there a way to do this with CSS only?
http://pastebin.com/pVmXyfxi
Not 100% sure if this is what you mean, but you can move the div off the screen with top:-1000px and then change the top: value on hover (or click or whatnot). The animation part is defined in the div css settings and it runs when one of the settings is changed.
I have a div element with to resize:vertical style on it. The contents of the div are generated, so it could be empty or filled. The div needs a max height, so that the height increases as new items are added, but it caps the size at 150px and makes the div scrollable.
I could easily accomplish that with the max-height style, but if I want to resize it, it doesn't work.
The second idea I had, was to just use the height style, but by doing this, the div's not adjusting its height if the contents are smaller than 150px.
Is there any way of doing this without javascript?
I don't think this is possible without JavaScript and even if it would be: What do you want this for? Please take a look at browser support of resize!
(What do you mean by "filled" - is this done via PHP or JS? Actually no matter which one you use, you could check if there is any content and if so add an .empty class to the div)
I have a group of div box's that will be displayed at different times based on what is clicked. It needed to be animated to slide down. For this, I change the height of the each div at a certain time, then the CSS3 Transition takes over and eases it down.
Now at the moment, if I provide the height for the box to change to, it works fine, but I can't always provide that as the content is dynamic and may be however tall. But when I define auto as the height, then the transition takes it up to 0, then sizes to the content. How can I get it to instead of slide to 0, slide to the height of the div based on the content?
sadly after much searching, found out that its not possible to do it to auto, but my solution was to find the inner element (the p element which was changing) and used the clientHeight added with any other constant's and used that as the defined new height. Bit busy, but it works nicely.
I have a main container div, where all the important content of the site is inserted, 800px wide, centered horizontally.
I need to put multiple absolute positioned divs layered below it (via z-index) and outside its width, without causing extra scrollbars to appear, and without losing the main container scrollbars (so puting overflow:hidden in a wraper won't do).
In other words, I was wondering if it's possible to create divs with different elements inside (videos, images, or text) that could be treated as backgrounds, so that the scrollbars would only appear when the window resizes below the 800px wide (width of the main container), and the rest of the divs would just bleed out (something similar to what swffit causes with an embebed flash movie).
Is there any way to do this via css or javascript?
Thanks in advance!
There is a way that requires CSS only. I once faced similar problem with this web site I created, take a look at the source. The curves by the side are done this way.
Trick is to change positioning of main container to relative with no shift - that causes change of coordinates base, here is a link. Than use absolute positioning of the "background divs" to get them outside the main box.
To solve the overflow problem use some extra div wrapper (in my site with id graphic). To specify its width use a range - min-width equal to main box and max-width as total width including the "backgound divs". And to this wrapper set the hidden overflow.
Hope it helps.