Why ball.getBoundingClientRect().bottom and parseInt(getComputedStyle(ball).bottom) give out different values here?
console.log( ball.getBoundingClientRect().bottom );
console.log( parseInt(getComputedStyle(ball).bottom) );
.ball {
height : 5rem;
width : 5rem;
background-color : salmon;
border-radius : 50%;
position : relative;
top : 40vh;
left : 45vw;
}
<div class="ball"></div>
I was expecting the values to be same.
The getBoundingClientRect().bottom gets the distance in pixels from the top of the viewport (window) and the bottom of the element. So if a box is 40px and it's 10px away form the top of the window, the getBoundingClientRect().bottom returns 50
getBoundingClientRect docs: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
The getComputedStyle(element) get the rendered css (final result with all styles applied) from the element, so if you define bottom position to 10px, it's gonna return 10.
getComputedStyle docs: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
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
Is there any way to switch jQuery UI Draggable / Resizable to use other alignment than from top left, such as bottom right so it does not conflict with DOM objects that are aligned other than top left?
So I can use CSS properties such as right or bottom instead of left or top.
I have a demo and gives result 'auto' from the CSS right position when originally set with Right as 10px and Left unspecified.
In Firefox it gives the calculated pixels whereas Chrome and Internet Explorer gives the result of auto.
Is there any easier way to calculate the pixel value when the result is 'auto'?
https://jsfiddle.net/zerolfc/53apo8z7/
<div class="drag"></div>
.drag {
position: absolute;
right: 10px;
top: 10px;
width: 100px;
height: 100px;
background-color: blue;
}
$('.drag').draggable({
stop: function(e,ui){
console.log( 'Right position: '+$('.drag').css('right') );
}
});
(I am looking for an HTML/CSS fix but if there really is none then JS (prefereably JQuery) works for me)
I have two main divs inside my page, I have the #maincontent and the #footer.
Basically, I want the footer to always sit at the bottom on the page:
#footer{
position:fixed;
bottom:0;
}
BUT I do not want it to overflow on the #maincontent when the page is too small.
For the sake of the question the page can be thought of as simple as:
<body>
<div id="maincontent">Dynamic Content</div>
<div id="footer">StaticContent</div>
</body>
My problem is that I can do one or the other, either I fix it to the bottom of the page but when I make the viewport < (footer + maincontent) the footer sits on top of the content. I want the footer to always be at the bottom of the page but disappear off page before it overtakes the main content.
Add a class to the footer with jQuery that changes it to position: absolute when the viewport is too small.
$(document).ready(function() {
var height = $(window).height();
function windowHeight() {
height = $(window).height();
}
windowHeight();
$(window).resize(function() {
windowHeight();
});
if (height < 600) { //arbitrary height value you can set yourself
$('#footer').addClass('not-fixed');
} else {
$('#footer').removeClass('not-fixed');
}
});
If you know your footer's height whatever happens to the window height, or its content :
Just add a "padding-bottom" to your body or main content that matches the footer's height.
If you don't know your footer's height. This is trickier, as you will probably need some javascript to calculate the height of the footer, the height of the main content, compare the sum of both with the window height, and if it doesn't fit, add some adequate bottom padding to the body / main content.
EDIT :
Ok I understand, I think this jsfiddle should do the trick : http://jsfiddle.net/ah4XA/2/
The javascript would be :
$(document).ready(function () {
function updateFooter () {
var footerH = $("#main-footer").height();
var contentH = $("#main-content").height();
var windowH = $(window).height();
if ( contentH + footerH > windowH) {
$("#main-footer").removeClass("fixed");
} else {
$("#main-footer").addClass("fixed");
}
}
$(window).resize(function () {
updateFooter();
});
updateFooter();
});
If I understand what you're looking for, you want the footer to stay on the bottom of the window regardless of the page content, but also not overlap the page as the window is resized vertically.
One possible solution is to switch between position:absolute; and position: fixed; with a media query. So past a certain height it's fixed, but below that the footer position:absolute;.
EXAMPLE FIDDLE
CSS:
#media all and (max-height:300px) {
#footer {
background: red; <- added for testing
position: absolute;
}
}
The only drawback to this approach is that you need to know the height to set the switchover to. This may be tricky, but position:fixed;.
The simplest solution would be to position footer at the bottom permanently and increase the z-index of your maincontent so that it comes over the footer if window size is decreased.
NOTE: This is not the only way to do this.
JSFIDDLE DEMO
Sample CSS
#maincontent{
height : 400px;
background-color : green;
/*
position : relative is added to enable z-index.
*/
position:relative;
/*
z-index will bring it above footer,
if window size is reduced.
*/
z-index: 1;
width : 100%;
}
#footer{
height : 100px;
width : 100%;
background-color : black;
/* Below two properties will
postion footer at the bottom of the page.
*/
position : fixed;
bottom : 0;
color : white;
}
You should play with CSS position property to get this done.
EDIT:
Here is another CSS solution :
The maincontent and footer are wrapped in a bodyContainer div its position is set to relative and then footer is positioned w.r.t it.
JSFIDDLE DEMO 1 Footer is below body and not shown.
JSFIDDLE DEMO 2 Footer is shown since body height is less.
HTML
<div id="bodyContainer">
<div id="maincontent">Dynamic Content
</div>
<div id="footer">StaticContent</div>
</div>
CSS
#bodyContainer {
min-height: 100%;
position: relative;
}
#maincontent{
height : 800px;
background-color : green;
padding-bottom: 60px;
width : 100%;
}
#footer{
background-color: black;
bottom: 0;
color: #FFFFFF;
height: 48px;
position: absolute;
width: 100%;
}
I am attempting to create a circle with a height of 10% the browser window. If I also make the width 10%, and you scale the browser, you get a misshapen or squished circle. I want to try to create the width of the circle with jquery to change in proportion with the height. so if 10% converts to 200px height, the width would be changed to 200px. I have tried a few solutions, but keep getting a width of 0px in return.
assuming you are using jQuery and your circle is an HTML element you could do this:
var $window = $(window),
$el = $('#someElement');
$window.on('resize', function () {
var size = $window.height() * 0.1;
$el.width(size).height(size);
});
Get the width and the height of the window and then simply check which one of them is the smallest. Get 10% of that value and use this as the circle's radius.
Little experiment using a transparent square image which is the direct child of <body>:
http://jsfiddle.net/2S3xU/3/
<html><body><img src="transparent-square.gif">
img {
border-radius: 99999px;
position: absolute;
top: 0; left: 0;
height: 100%; /* width will follow height to keep image undistorted*/
max-width: 100%;
max-height: 10%;
}
/* Opera fix*/
body, html {
width: 100%;
height: 100%;
}
Please check this out http://jsfiddle.net/e8UQn/
In the display screen, you can see the the text at the bottom position when you drag the scroll bar down, I've set the position of #text-box to absolute which is necessary to show the position at the specified top and left position.
What I need is when the browser shrinks, the backstretch image is looking perfect, but the text needs to modify its position so that the scroll bar should not be shown.
There should not be any change in top and left property, because those values are dynamically derived from my web application which is necessary. Is there any possibility in changing the values dynamically according to the screen size?
Thanks!
You need to position #text-box relative to the bottom of the window:
#text-box {
position: absolute;
display: inline-block;
zoom: 1;
bottom: 20px; /* This value here */
left: 51px;
padding-top: 10px;
padding-left: 20px;
}
Fiddle: http://jsfiddle.net/e8UQn/2/
If you don't have the ability to change that output, overwrite the top value:
#text-box {
top: 'auto';
bottom: 20px;
}
updated:
try this:
var t = $(window).height() - $("#text-box").outerHeight();
$("#text-box").css("top", t);
http://jsfiddle.net/e8UQn/3/