I have a stack of imgs overlaying one-another which are shown/hidden as needed. For these images to overlap I am forced to use position:absolute(I am fading between them so I need at least two images on-top of one-another at a time). Their container div is floated, but the images' height varies so I cannot set a fixed height on this parent container. I need their container to accurately reflect their height as there is another floated div that clears the container which needs to sit below the image, whatever height it is.
Is there any way of achieving this without using javascript to adjust the height of the container appropriately for each image?
Here is a link to the page as it is at the moment. I am using images with identical heights but I would like to be able to vary the height of the images.
http://www.unwalked.com/
What if you don't make all the child images absolutely positioned, instead only temporarily set position: absolute; to the image that's being faded away? That way the container would naturally resize to fit active image.
Related
So, e.g. i have a div, i need to enlarge on mouseover.
I know 2 ways to do it:
a)actually to enlarge the DIV
b)Since I've heard of JS operating with
DOM is its main problem, it came to my mind, that we can create 2
DIVs, 1 stands for enlarged size, 2nd for minimized, BG size of
enlarged is equal to size of minimized DIV, e.g. 70%
On minimized DIV mouseenter - triggers function which set bg size to 100% of enlarged DIV's size
Scheme here: Bordered DIV - stands for Enlarged DIV, with 70% size of BG; minimized div has zero opacity, sized to image precisely
TL;DR
So which method is faster: operate with DIV's size itself, or operate with its css properties? Hope I describe my thoughts clear.
The most performant way for the browser is usually the css transform to make something bigger, since its hardware accelerated and doesn't conflict with the positioning of the DOM at all. it's also the easiest way to animate things :)
demo: https://jsfiddle.net/v0k69mq3/
html:
<div>foo</div>
css:
div:hover {
transform:scale(1.5)
}
I am using the Malihu custom content scroller with automatic scrolling. So far, I basically am experimenting with it. I noticed when I take the height of the scrolling div and use a percentage instead of a fixed amount in px, it expands the div the entire height of the scroll area (off the screen).
I'm literally just taking the code from this GitHub location then opening the file "auto_scrolling_example.html".
Then in the <style> section of the header, I'm simply changing .content: height:500px to .content: height:50%.
Does anyone know why this doesn't work and/or have a good workaround for it?
When you specify the height or width as a percentage, that's a percentage with respect to the element's parent.
If the parent doesn't have any height or width inner children will not work in percentage.
I'm looking for a way to fill the viewport with elements based on the viewport size.
Is there a way to use methods like createElement() and load() to do this?
Specifically, I'm trying to fill the viewport with small circle divs. The way I have it set up now, is to just manually code them all into the html and set overflow to hidden, so that the divs beyond the screen size aren't visible.
If this isn't possible, is there a way to tell the JS I'm running to animate only those divs which are visible?
I have a codepen with the divs set up here as a reference for what I'm talking about. At full screen size, you can see that there are divs missing from the bottom of the page.
I need to cerate a layout where a div that is the scroll container is absolutely positioned on three sides ( left,right and bottom ) but sizes dynamically with it's sibling container above. Both the scroll container and the sibling are in a fixed dimension container. I have made a jsfiddle which demonstrates my problem.
http://jsfiddle.net/HKu4j/4
If you follow the click instructions there you will see that when you click the top container after clicking the second container it resizes which ideally would push the top of div.myscroll down. This doesn't happen since div.myscroll has top set to 20px; Is there some way with the new CSS3 flexible box layouts to make this work ? I am looking for a solution that uses CSS rather than setting geometry dimensions explicitly with javascipt as I have done in the past.
I'm not sure that this is possible using css alone.
Try this jQuery dynamic width setting example: jQuery/CSS: Set dynamic width by content, avoid inheritance
I've got a <video> element inside a <div> that gets automatically resized when other elements on the page are dynamically resized / added / deleted.
I would like the video element to also automatically resize so that it always remains contained within its background div; this sort-of-works if I set the video element's CSS height & width to 100%, so it's always the same size as its container. However, if the containing div's dimensions go below the video image's inherent videoWidth or videoHeight, then it starts to behave as though the CSS height/width properties refer to percentages of the video image's inherent dimensions, not the container div! E.g., if the CSS height is 100%, it scales normally except that it has a minimum size of the video's inherent height; if the CSS height is 50%, it scales normally but with a minimum size of 50% of the video's inherent height.
I can fix this, sort of, by using JavaScript to periodically reset the video element's height in pixels to be the computed height of the container, but this is really slow and choppy. Is there any way to fix this in CSS so that the video element will size properly?
I am well aware this is an older question, but I have been struggling with accomplishing a layout with CSS where a video is automatically sized to fit some box, typically within parent element.
Just using width and height with static positioning only works in certain configuration of parent-child topologies, and also depends a lot on how the topology is styled. Even if you get some element to properly calculate its boundaries, once you put a playing video element inside it, it will expand the parents allowed box, even though that is the least sensible behavior you'd expect.
Throw in some fieldset elements, and you're in the rabbit hole of CSS and browser peculiarities.
What I have found out is that it was easiest to just take the video element out of its positioning context, using position: absolute. It doesn't mean that it won't visually well-behave -- using width: 100% and height: 100% effectively makes it properly constrain itself as it otherwise should (but wouldn't). You would then need to add position: relative to appropriate ancestor element of the video element, otherwise the video will be absolutely positioned in relation to document root, which is most likely not what you'd want.
Omitting left and right works because absolute positioning does not reset the position, just switches the calculation method. You could alternatively set both properties to zero, you'd get your video aligned to the offset parent top-left corner then. max-width and max-height are unnecessary -- I just have seen these being thrown in in a lot of cases where people struggle with constraining their video elements -- don't bother.
You can specify background color for either the video element or its offset parent. That way you will get the letter-boxing effect -- say, black bars on the sides of the video.
As your video is inside a div, this can be solved by setting both width and height of the video to 100%. This makes the video occupy 100% of the div element.
Markup example:
<div id="video_container">
<video></video>
</div>
Stylesheet:
#video_container video {
width: 100%;
height: 100%;
}