I have a div,I need to show this div on the center of the screen (ie viewable area) even while the user scrolled through the page.
so its style should be (for example)
{position:fixed; top:90px; left:150 px; z-index:9999; overflow:hidden;}
Now i need to find the value of left and top, so that the div will place in the center of the screen (ie viewable area), for any page .
How can i find the value of left & top with a javascript or jquery ?
left:50%; top:50%; puts you in the middle, then you apply a fixed width and height and set margin-top and margin-left to negative a half of that width and height.
In order to center something with fixed positioning then you will need to know the height and width of the element.
You then just need to margin-top and margin-left to negative half of the width and height in order to center it.
E.g. this class would center and element that has 100px height and 200px width.
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
Update:
If you don't know the height and width of the element that needs to be centered ahead of page load then you'll need to use JavaScript to detect the size.
Here's a working example of how this can be done - http://jsfiddle.net/3Ag97/1/
You can use the flexbox module, although it's not widely supported yet: http://jsfiddle.net/b7nrS/.
.container {
display: flex;
align-items: center;
justify-content: center;
}
Try this:
var $box = $('#box');
var bw = $box.width() / 2;
var bh = $box.height() / 2;
var wh = $(window).height() / 2;
var ww = $(window).width() / 2;
$box.css({'left': ww-bw, "top": wh-bh})
http://jsfiddle.net/mqMwj/
function centerObject(selector) {
var x = $(window).height() - $(selector).height();
var y = $(window).width() - $(selector).width();
$(selector).css("left", y / 2).css("top", x / 2);
};
#divX {
position: fixed;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
margin-left: -50px;
margin-top: -50px;
background-color: #0000FF;
}
Related
I have a div that's 70% of the height of its' container/parent element. I want to expand this div to the very top as the user is scrolling downward within the div and vica versa ie the lowest the panel div can go is 70%. Is there an existing library for this? I need a smooth transition so getting the scrollTop property and setting the height (it is defined in percentage and not in pixel) of the panel div incrementally won't work.
Please find example here:
<div id='container'>
Scroll up to here
<div id='panel'>
As user scroll downs here in this div, expand this div to the top but only as much as the user has scrolled down: asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd
</div>
</div>
#container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: red;
}
#panel {
position: fixed;
width: 100%;
height: 70%;
bottom: 0;
background-color: green;
overflow-y: scroll;
}
https://jsfiddle.net/1ekpx3sd/
This is my proposed solution. The div's height is set via javascript as the user scrolls (by listening to the scroll event). Then, the height is set to 70% plus the amount the user has scrolled (by using the scrollTop property), up to a certain limit. The limit is the max possible height and is something that you must configure (I set it to 90% in my example, but it could also be a fixed amount):
function setHeight() {
var panel = document.getElementById("panel");
var container = document.getElementById("container");
var panelHeight = container.offsetHeight;
var y = panel.scrollTop;
// YOU MUST SET THE PERCENTAGE, OR A MAX HEIGHT
maxHeight = panelHeight * 0.9;
var targetHeight = Math.min(maxHeight, 0.7* panelHeight + y);
panel.style.height = targetHeight + "px";
document.getElementById("panelContent").style.marginTop = Math.min(y, panelHeight - maxHeight) + "px";
}
document.getElementById('panel').addEventListener("scroll", setHeight);
#container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: red;
}
#panel {
position: fixed;
width: 100%;
height: 70%;
bottom: 0;
background-color: green;
overflow-y: scroll;
}
#panelContent {
}
<div id='container'>
Scroll up to here
<div id='panel'>
<div id='panelContent'>
As user scroll downs here in this div, expand this div to the top but only as much as the user has scrolled down: asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd
</div>
</div>
</div>
I have a modal I position vertically like this:
method.center = function () {
var top, left;
top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;
$modal.css({
top:top + $(window).scrollTop(),
left:left + $(window).scrollLeft()
});
};
No matter the height of the window, Firefox is always + 157px on the top calculation. They both center horizontally fine. Is there a better, more consistent way to find the height of the window, subtract the height of the modal and divide by 2?
Are you really need to use JS calculation? Because it can achieve this with CSS only, like this:
.container {
border: 3px solid #73AD21;
display: flex;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.center {
margin: auto;
}
<div class="container">
<div class="center">
<b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.
</div>
</div>
I'm using the following CSS Styling for two div's that will place skyscraper ad's on my website to the left and right of the body.
/*-----Sky Scraper ad----*/
#SkyAdLeft{
width: 160px;
display: block;
position: fixed;
top: 100px;
left: 10px;
height: 600px;
z-index: 7;
}
#SkyAdRight{
width: 160px;
display: block;
position: fixed;
top: 100px;
right: 10px;
height: 600px;
z-index: 7;
}
I want each DIV to remain fixed however I want to dynamically calculate the left position in the left ad and the right positioning in the right ad to be able to sit 10px left or right of the body.
With my body always being 980px and centered I figured out the math to do this based on browser width. My Ad's are 160px in width.
Width Calc for Left AD:
(Browser width - 980) / 2 = X
(Browser Width - (160 + X + 980)) -10
Width Calc for Right Ad:
(Browser width - 980) / 2 = X
(Browser width - X) +10
Calculations explained: I am subtracting the body width of 980 from the dynamic browser width then dividing by 2 to get the value of the empty spaces between the end of my browser and the end of my body. This is where the ads with sit.
The second calculation for each respective ad then calculates where the ad should be positioned within the browser screen.
The right ad is simple. It's the Browser width minus X which is the empty space value form the first calculation. Then add 10px. This will set the ad 10x to the right of the body.
The second calculation for the left ad is more complicated but also will set the left ad 10px to the left of the body.
How do I use jquery or javascript to do these calculations and where do I run the jquery? In the css styling file or in my footer.php file where the div's are in the code?
Also if anyone knows a quicker solution to this problem that will allow my div's to sit 10px left or right of the body. Please let me know.
If I understand you correctly, you want the Ads to sit 10px away from the centered "container" (not the body).
If so, it's just a matter of positioning each ad 50% away from it's respective side and the adjusting the margins
Codepen Demo
**HTML**
<div class="Ad left">
</div>
<div class="Ad right">
</div>
<div class="container">
</div>
CSS
.container {
width:980px;
margin: 0 auto;
height:500px;
background-color: grey;
}
.Ad {
width: 160px;
display: block;
position: fixed;
top: 10px;
height: 600px;
}
.left {
left: 50%;
background-color: orange;
margin-left: calc(-160px - (980px/2) - 10px);
/* element width + 50 % of container width + required distance */
}
.right {
right:50%;
background-color: purple;
margin-right: calc(-160px - (980px/2) - 10px);
}
The goal is to define an aspect ratio (f.E. 4:3) for a DIV and all children of it, that have the styles WIDTH:100% and HEIGHT:100%.
This works fine, as long as I set the parent
WIDTH:100%
and then add to the first child a
PADDING-BOTTOM: 75%; // (3/4)*100
But if I resize my window to full screen on a 1080p monitor, the inner box will (sadly) correctly grow to be 100% in width and to 75% of the width, in height. Thus a 1920pixel wide div will grow to 1920x1440. On a 1080p screen this means, that I will have scrollbars to see the complete content of the div.
I'd prefer the inner box to only be (window.innerHeight / 3) * 4 wide and have a black bar on the left (and/or) right.
So I assumed that setting the height on the parent and then defining a padding-right on the child would have the same effect, but would give me the black bars on the right of the screen and not on the bottom.
But this does not work if you set the parent
HEIGHT:100%
and then add a
PADDING-RIGHT: 33% // ((4/3)-1)*100
to the children because the paddings are based on the containing elements width.
Now in a perfect world, I'd like to have my div, no matter what the height and width of the parent are, to be exactly 4:3, with black bars around it if neccessary , without ever being bigger in any dimension than the parent and thus creating scroll bars.
Is this possible with purely CSS? Or will I have to use JavaScript?
Edit:
with
<div style="width:133vmin;height:100vmin;margin-left:-66vmin;left:50%;background: #f00; overflow:hidden;">
I'm able to define a div that has 4:3 aspect ratio and has blackbars on the left and right, but if the height is not enough, it will not grow in size. Now I'd need to somehow combine both solutions...
I wrote a solution, but sadly it doesn't work with the latest stable Chrome, there is a bug filed: https://bugs.webkit.org/show_bug.cgi?id=94158
However it does work on Firefox 25.0 and Chrome Canary 36.0.1922.0
<html>
<style>
body {
margin:0;
background: #000;
}
#block1 {
display: inline-block;
position: relative;
width: 100vw;
max-width: calc(100vh * 1.33333); // (4 / 3)
}
#block1:after {
content: '';
display: block;
margin-top: 75%; // (3 / 4) * 100
}
#block2 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: red;
}
</style>
<body>
<div id="block1"><div id="block2"></div></div>
</body>
</html>
Your CSS should look like:
#block1{
position: relative;
width: 100%; /* desired width */
}
#block1:before{
content: "";
display: block;
padding-top: 75%; /* initial ratio of 1:1*/
}
#block2{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
That should do it. Works cross browser back to IE8.
Comes form this great article: http://www.mademyday.de/css-height-equals-width-with-pure-css.html
I have a div with a text. I want to create a yellow circle background when hovering the div instead of the cursor.
Here is what I got so far: JsFiddle Demo
HTML:
<div id="board">
<div id="ball"></div>
Lorem ipsum dolor sit....
</div>
JQuery:
$(function(){
$("#board").mousemove(function(e){
var ball = $("#ball");
var ballRadius = parseInt(ball.css("width"))/2;
var parentOffset = $(this).offset();
var relX = e.pageX - parentOffset.left - ballRadius;
var relY = e.pageY - parentOffset.top - ballRadius;
ball.css("top",relY + "px");
ball.css("left",relX + "px");
ball.css("display","inline-block");
});
});
I manage to do it, but, when hovering, all my text is being shifted.
Add position: relative to the #board and change #ball from position: relative to position: absolute.
The issue is your positioning. DEMO
#board{
position:relative;
#ball{
position: absolute;
The reason is that relative positioning just lets you moving things around with top and left but the element still effects the layout and positioning of its siblings. Position, absolute ultimately does the same thing, but it removes that element from the layout, so it does not effect any of its siblings or other's positioning.
The other thing both relative and absolute positioning do is they make the element an offsetParent. In other words other absolute or relatively positioned elements contained within will be positioned based on that element. Because of this you need to make the #board either relative or absolute, so that the positioning of #ball will be based on #board.
PS. When storing references to a jQuery object var ball = $('#ball); its considered a good practice to put a $ on your variable. So... var $ball = $('#ball);. That way other developers can easily tell what variables are actually jQuery objects.
You will want to set both the ball and the boards position to absolute
#board{
position:absolute;
margin: 0 auto;
margin-top: 50px;
padding: 15px;
width: 500px;
height: 300px;
border: 1px solid black;
overflow: hidden;
cursor: none;
font-size: 20px;
}
#ball{
position: absolute;
width: 40px;
height: 40px;
background-color: yellow;
border-radius: 100%;
top: -50px;
left: -50px;
display: none;
z-index: -1;
/* transition: all 0.1s;
-webkit-transition: all 0.1s;*/
}
http://jsfiddle.net/Zt7h3/18/
I managed to change it up a bit.
http://jsfiddle.net/Zt7h3/19/
var relY = e.pageY - parentOffset.top - ballRadius - $(this).height();
I put the ball div at the bottom, and then subtract the height of the div to determine current Y.