How can I make two fixed elements stay with their sibling element.
<div class="left-img"> IMAGE HERE </div> <!-- fixed positioned -->
<div class="container"> Lorem ipsum... </div>
<div class="right-img"> IMAGE HERE </div> <!-- fixed positioned -->
Here is a fiddle. So far I set:
top: 50%;
To center it vertically. But when the window re sizes horizontally the fixed elements are need to stay with their sibling, the container. How in jQuery or CSS can I do this?
I thought about doing something like
$(window).resize(function() {
$('img').css("right", /*size here*/);
$('.right-side-img');
})
But I'm not sure how I would set the window size. I'm using bootstrap so all my content is in the container and I would like to set an image to stay in the middle on the outside of each side.
You could achieve that by setting an explicit width of the left and right absolutely positioned elements and using a proper value for left/right properties.
Example Here.
.left-img,
.right-img{
position: fixed;
background: blue;
top: 50%; /* <------ 15% -----> */
width: 12%; /* = ((100% - 70%) / 2) - 3%
| | | |
width of the body --- | | --- needed gap for left/right (*)
width of the container ----- ----- get remaining width for each side */
}
.left-img { left: 3%; } /* (*) The gap between edges of the page and elements */
.right-img{ right: 3%; }
For unequal widths you could use CSS3 calc() function in order to calculate the needed value for left and right properties depending on the width of each fixed positioned element.
Example Here
.left-img {
width: 150px;
left: calc(15% - 150px);
}
.right-img{
width: 100px;
right: calc(15% - 100px);
}
It's worth noting that calc() is supported in IE9+.
Here is the old answer which seems to be under a misunderstanding
Related
The body element by default is of course taking up 100% width so when the browser window is resized this width in pixels will obviously decrease. For every pixel the body width is decreased I want to increase the padding of a group of elements ( header, main, and footer ) by 1 pixel. Not sure where to start. Here is a basic set up:
function start() {
//code here..
}
start();
#import url( 'https://necolas.github.io/normalize.css/latest/normalize.css' );
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body, header, main, footer {
padding: 1%;
}
header, main, footer {
height: 33.333%;
}
div {
height: 100%;
background-color: #444;
color: #ddd;
}
p {
margin: 0;
padding: 0;
position: relative;
top: 50%;
transform: translateY( -50% );
text-align: center;
}
<header>
<div>
<p>When this snippet is made <b>Full page</b>.</p>
</div>
</header>
<main>
<div>
<p>And the browser window width is <i>decreased</i>.</p>
</div>
</main>
<footer>
<div>
<p>The padding on these rectangles should <i>increase</i>.</p>
</div>
</footer>
When the browser window is resized and body width decreased I want the padding value on header, width, and height to increase proportionately.
I originally tried accomplishing this without JavaScript utilizing CSS viewport units. That did not work out very well.
PS: I'm trying not to use Jquery.
EDIT: I just realized this but it might be worth pointing out that the default padding behavior is to decrease in value as the containing elements width decreases. As both top & bottom and left & right padding is calculated by the containers width as can be seen when my snippet is resized.
padding: 0 calc( 500px - 50vw );
This works, but only for a limited range of viewport sizes (500px - 1000px).
The issue with doing the calculation in just CSS is that there will have to be a defined upper and lower bound, because viewports could in theory be thousands of pixels wide and it will have exhausted the amount of padding available to it at some point.
My code works by setting the upper limit with the value of 500px, so 1000px total when applied to left and right, and then the lower limit is the half of that by the value of 50vw, or in other words 50%. If you play with these values you can hopefully align the upper and lower bounds to suit your needs.
http://codepen.io/zepha/pen/QpMRYQ
I am trying to place a position: absolute div inside a scrolling div and make it stay on the left when scrolling left or right. This is because I want the div to move like one unit (when scrolling left, right, top, bottom). It's working great on screen that lower then 2K but on HD screens (ie. 2k, 3k, 4k...) the child div is jumping around and looks bad.
Is there a better way to do it? What change should I make to the CSS for HD screens?
#parent {
overflow: auto;
width: 100%;
height: 100%;
position: relative;
}
#child {
overflow: hidden;
width: 20%;
height: 100%;
z-index:1;
position: absolute;
}
<div id="parent">
<div id="child"></div>
</div>
$("#parent").on('scroll', function (event) {
$("#child")[0].style.marginLeft = this.scrollLeft+"px";
});
You can use jQuery's css function to set the value. And use the parent element as jQuery object to use scrollLeft() function:
$("#parent").on("scroll", function() {
$("#child").css("margin-left", $(this).scrollLeft() + "px");
});
But I would not use jQuery for this at all. Why not use a fixed position in css for this? Like in this example. It should not flicker on any screen.
For a website I'm designing directly with CSS and Foundation 5, I am centering all content vertically in the middle of the viewport when the content area is taller than the browser window.
I found an excellent pure CSS solution that works perfectly. I'm very happy with the current behavior when the content area is small enough to fit entirely within the viewport without a scroll fold. I fairly sure that I don't need or want any kind of vertical centering when the content is long enough for scrolling.
The problem is that when there is too much content to fit on the screen, the CSS crops off the header and makes it impossible to scroll up to see the top of the content.
The CSS I adapted from davidwalsh.name uses a transformation to raise the container by half its height after its top was placed 50% down from the top.
#non-framework-container {
height: 100%;
width: 100%;
}
#non-framework-wrapper {
height: auto;
width: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
This is applied to these two nested containers around the Foundation classes.
<div id="non-framework-container">
<div id="non-framework-wrapper">
<header class="row">
[...]
</header>
[...]
</div>
</div>
I want to disable the CSS when the content (specifically #non-framework-container) is taller than the viewport. I was hoping it would be as simple as this bit of JQuery:
$(document).ready(function) {
if ( $("#non-framework-container").height() > $(window).height() ) {
$("#non-framework-wrapper").css("position":"static", "top":"0", "transform":"none");
}
});
Unfortunately, my script doesn't do anything, no matter the amount of content or the browser size (and regardless of whether I load it in the head tag or at the bottom of the body tag).
I love how the CSS transformation method works, so I'm reluctant to try a pure JavaScript solution.
Try this (not tested, cannot currently test where I am):
HTML:
<div id="non-framework-container">
<div id="non-framework-wrapper">
<header class="row">
<h1>Your mom makes the best pizza</h1>
</header>
</div>
</div>
CSS:
#non-framework-container {
height: 100%;
width: 100%;
}
.transform {
height: auto;
width: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
JAVASCRIPT:
var div = $("#non-framework-wrapper").height();
var winSize = $(window).height();
$(document).ready(function() {
if (div < winSize) {
$("#non-framework-wrapper").addClass('transform');
} else {
$("#non-framework-wrapper").removeClass('transform');
}
});
This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 7 years ago.
My question is very similar to this question: CSS: 100% width or height while keeping aspect ratio?
I have a div whose position is fixed. The width of the div must be 100% and its height exactly 1/6th of its width. Is there a -webkit-calc() way of doing this?
Note: JS solutions are not preferred as a zoom/orientation change can affect the width/height.
Is this what you are after? I'm not using -webkit-calc() at all. I've inserted a 1px by 6px image into a outer div which has position: fixed applied to it, and set the image to have a width of 100% and position: relative. Then I have added an inner div which is absolutely positioned to be as high and wide as its ancestor.
Now you can change the width of the outer div, and the images' width: 100% setting will ensure that both the outer and the inner div's are guaranteed to always have a height equal to 1/6th of their width (or at least as close to exactly equal as it can get, the heights will be rounded off to the closest whole number of pixels). Any content could go inside the inner div.
HTML
<div>
<div></div>
<img src="https://dl.dropboxusercontent.com/u/6928212/sixbyone.png" />
</div>
CSS
html, body {
margin: 0px;
padding: 0px;
}
div {
position: fixed;
width: 100%;
}
div > div {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
img {
width: 100%;
display: block;
position: relative;
}
Here's a jsFiddle showing the requested behaviour.
You can also use the solution I described in Responsive square columns.
It is based on the fact that % padding-top/bottom and margin-top/bottom are calculated according to the whidth of the parent element.
Adapted to your situation it would look like this :
FIDDLE
HTML :
<div class="wrap">
<div class="content">
</div>
</div>
CSS :
.wrap{
position:fixed;
width:100%;
padding-bottom:16.666%; /* 100x1/6 = 16.666...*/
}
.content{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
you can always set div width like this:
$('#div1').css("width", $('#div1').height()/6);
EDIT:
or you could use something like this:
/* Firefox */
width: -moz-calc(100% / 6);
/* WebKit */
width: -webkit-calc(100% / 6);
/* Opera */
width: -o-calc(100% / 6);
/* Standard */
width: calc(100% / 6);
This is only an example-..But it is impossible to get height of a div in a pixels in the css file..you need to use jquery for that
EDIT:
height 1/6 of a width
$('#div1').css("height", window.width()/6);
you could use jquery, e.g.$('.someclass').css('width', 180);
$('.someclass').css('height', $('.someclass').width() / 6);
moved the second suggestion from the comment for readability
$('.btnResize').click(function() { $('.div').css('height', $('.div').width()/6);});
I have a div with some text inside and absolute position. I can set the left or the right, but is there a way to set the center, so Div's text would expand in both directions.
So far I could only think about creating exstremly long div and centering text inside.
If your div is positioned absolutely, you can simply set it's left property so that it's centered.
Example:
HTML:
<div class="outer">
<div class="inner">Some text...</div>
</div>
CSS:
.outer {
position: relative;
width: 900px;
}
.inner {
position: absolute;
width: 500px;
top: 0;
left: 200px;
}
If you don't know the width of the inner element, you'll have to rely on javascript.
Here's an example using jQuery:
var $el = $('.inner');
$el.css('left',
( $el.parent().width() - $el.width() ) / 2
);
and here's the fiddle: http://jsfiddle.net/aa93G/ . Play around with the text inside .inner, and you'll see that the text stays centered.
to centralize inner text and inline elements use text-align: center in the parent element.
If you're dealing with block elements, you should use margin: auto in the element itself. but you must first set a width for the element, otherwise it will just occupy the whole width of the parent.