I want to center an image of unknown width/height on a page, while making sure that it shrinks if it is bigger than the page (i.e. use max-width/max-height).
I tried using the display:table-cell method, but max-width is ignored in Firefox for all elements within elements declared with display:table-cell. Is there a way to vertically center a variable-height element without using display:table-cell?
I can change the mark up. JavaScript is acceptable, but I cannot use JQuery (or any other JS library).
This should prove to work quite well... no JavaScript necessary :)
See the working demo on jsFiddle.
CSS
/* Don't Change - Positioning */
.absoluteCenter {
margin:auto;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
/* Sizing */
img.absoluteCenter {
max-height:100%;
max-width:100%;
}
HTML
<img class="absoluteCenter" src="PATHTOIMAGE">
Note: This class can be used for anything quite easily. If you use this for something other than an image, make sure to add a TAG.absoluteCenter CSS rule with a max-height and max-width of your choosing (where TAG is the HTML tag you're using [e.g. div.absoluteCenter] and max-width/max-height is less than 100%).
Try something like this...
Demo: http://jsfiddle.net/wdm954/jYnk8/1/
$(function() {
h = $('.img').height();
w = $(window).height();
if (h < w) {
$('.img').css('margin-top', (w - h) /2 + "px");
}
else {
$('.img').height(w);
}
});
(You can test different sizes by changing some CSS I have commented out.)
Here is one way with javascript:
<html>
<head>
<style>
html, body{
height:100%;
margin:0;
border:0;
padding:0;
background:#000;
}
body{
position:relative;
}
img{
border:0;
padding:0;
margin:0 auto;
max-width:100%;
max-height:100%;
display:block;
position:absolute;
}
</style>
</head>
<body>
<img />
<script>
(function(){
var imgs = [
'http://farm3.static.flickr.com/2396/2078094921_ee60c42d0f.jpg',
'http://farm6.static.flickr.com/5242/5353846171_9169f810dc_b.jpg',
'http://farm6.static.flickr.com/5284/5336493514_8e41696b66_b.jpg'
],
img = document.getElementsByTagName('IMG')[0],
getStyle = function(elm){
return window.getComputedStyle ? window.getComputedStyle(elm) : elm.currentStyle;
},
bodyStyle = getStyle(document.body),
toInt = function(pxSize){
return +pxSize.replace(/px/,'');
},
chgImg = function(){
img.src = imgs[i++ % imgs.length];
img.onload = function(){
var imgStyle = getStyle(img);
img.style.left = ( toInt(bodyStyle.width) - toInt(imgStyle.width) ) / 2 + 'px';
img.style.top = ( toInt(bodyStyle.height) - toInt(imgStyle.height) ) / 2 + 'px';
img.onload = null;
};
},
i = 0;
chgImg();
setInterval(chgImg, 3000);
})();
</script>
</body>
</html>
Related
How to get CSS height and width if they are in percentage value using JavaScript?
Lets say the CSS rule:
.field {
height:50%;
width:25%;
}
What we tried:
let a = document.getElementById("field");
console.log(a.style.height)
This give me empty string. Is there any way to get height in percentage using JavaScript?
The height of an element a as a percentage of its parent can be calculated as
getComputedStyle(a).height.replace('px','') / getComputedStyle(a.parentElement).height.replace('px','') * 100 + '%'
This works however the styles of a and its parent have been set (through classes, through inline style setting). It is not the same as finding out whether the heights were set by a percentages or by other units initially.
Here's a simple example:
let a = document.querySelector(".field");
console.log(getComputedStyle(a).height.replace('px','') / getComputedStyle(a.parentElement).height.replace('px','') * 100 + '%');
.container {
height: 50vh;
width: 30vw;
}
.field {
height:50%;
width:25%;
}
<div class="container">
<div class="field"></div>
</div>
Height = a.offsetHeight
Width = a.offsetWidth
This gives height and width in pixels. Doesn't matter how it's declared in CSS.
in css rule,field is with dot = class and in js, you are trying getElelmentById.
Change .field to #field in css rule and try ...
#field{
height:50%;
width:25%;
}
You can use getComputedStyle
let elem = document.getElementById('field');
let ht = window.getComputedStyle(elem, null).getPropertyValue("height");
console.log(ht)
I'm encountering a weird (maybe not) behaviour that I want to avoid because the end result is a horrible user experience. To help you understand the problem I put together the code snippet below.
var counter;
var counterDisplay;
var intervalRef;
window.onload = function(){
console.log("loading");
counter = 11;
counterDisplay = document.getElementById("spCounter");
intervalRef = setInterval(tickHandler, 1000);
};
function tickHandler(){
counter--;
counterDisplay.innerHTML = counter.toString();
if(counter == 0){
stop();
return;
}
}
function stop(){
clearInterval(intervalRef);
document.getElementById("daddyLongLegs").style.display = "block";
}
html,body{
width:100%;
height:100%;
font-family:Arial;
font-size:16px;
}
.page-wrapper{
height:100%;
background-color:#eee;
}
.growing-element{
height:800px;
display:none;
margin: 100px 100px 0 100px;
background-color:#ddd;
}
<div class="page-wrapper">
<div class="container-element">
<!--This element's height never changes once the page has been rendered-->
<div>
The hidden child element below will magically appear in: <span id="spCounter">10</span> seconds
</div>
<!--This element's height changes anytime after the page has been loaded-->
<div id="daddyLongLegs" class="growing-element">
Now you see me...
</div>
</div>
</div>
The code snippet is pretty simple, all the javascript does is to display a child element (#daddyLongLegs) after ten seconds. Make the "problem" more visual colored the parent element (div.container-element) different to the child element.
Problem
Now, when the child element (#daddyLongLegs) is displayed after 10 seconds, it doesn't seem to "stretch" the parent element (div.container-element). This is not the behaviour I'd like to achieve. I would like the parent element to re-adjust its height when its contents change. However, it is important that the height of the parent element ALWAYS cover the whole document
Question
How can I make the parent readjust its height once the content has changed? Is there a pure css solution to this?
.container-element has a defined height of 100%
If you remove that, or set it to auto, it should calculate the height based on its content.
Or you could change from height to min-height, which would calculate the height based on its content, but no shorter than 100% of its parent's height.
As described on MDN, you can use min-height attribute instead of height so whenever your <div>'s child rises, it will extend parent as well
so from my comment:
use min-height: 100% instead of height: 100% on your
.page-wrapper
Change height to 100% and margin to 0;
var counter;
var counterDisplay;
var intervalRef;
window.onload = function(){
console.log("loading");
counter = 5;
counterDisplay = document.getElementById("spCounter");
intervalRef = setInterval(tickHandler, 1000);
};
function tickHandler(){
counter--;
counterDisplay.innerHTML = counter.toString();
if(counter == 0){
stop();
return;
}
}
function stop(){
clearInterval(intervalRef);
document.getElementById("daddyLongLegs").style.display = "block";
}
html,body{
width:100%;
height:100%;
font-family:Arial;
font-size:16px;
}
.page-wrapper{
height:100%;
background-color:#eee;
}
.growing-element{
height:100%;
display:none;
background-color:#ddd;
}
<div class="page-wrapper">
<div class="container-element">
<!--This element's height never changes once the page has been rendered-->
<div>
The hidden child element below will magically appear in: <span id="spCounter">10</span> seconds
</div>
<!--This element's height changes anytime after the page has been loaded-->
<div id="daddyLongLegs" class="growing-element">
Now you see me...
</div>
</div>
</div>
Well, I'm using Materializecss framework and I have a issue with the footer. Materialize's footer have a variable height. In small devices, it gets bigger. So I can't use the classics method that use a padding-bottom equal to footer height.
My CSS:
html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height: 100%;
position: relative
}
#conteudo {
padding-bottom:425px; /* Fail height equal to footer height */
}
#rodape {
width:100%;
position:absolute;
bottom:0;
left:0;
}
My HTML:
<html>
<body>
<div id="wrapper">
<div id="conteudo">
<div class="container">
</div>
</div>
<div id="rodape">
</div>
</div>
</body>
</html>
I tried to add this script, but doesn't work:
JS:
$(document).ready(function fix_layout(){
if($(#rodape).height()<350){
$("#conteudo").css("padding-bottom", "276px");
}
if($(#rodape).height()>350 && $(#rodape).height()<500){
$("#conteudo").css("padding-bottom", "354px");
}
if($(#rodape).height()>500){
$("#conteudo").css("padding-bottom", "506px");
}
$(window).trigger('fix_layout');
});
Help!
If a jQuery solution is fine for you, then you can count the footer height and add it as padding-bottom to #conteudo, either once on DOM ready or on resize:
$(document).ready(function(){
var $conteudo = $('#conteudo'),
$rodape = $('#rodape'),
addPaddingBottom;
addPaddingBottom = function addPaddingBottom(){
var extraPadding = 6,
rodapeHeight = $rodape.height();
$conteudo.css({
'padding-bottom' : (rodapeHeight + extraPadding) + 'px'
});
}
//make it once on DOM ready
addPaddingBottom();
//and recalculate padding when window is resized
$(window).resize(addPaddingBottom);
});
I have a div of height 90 pixels. Below it is an iframe.
I would like to figure out how to write javascript (or jQuery) to always set the iframe to the correct height to occupy the rest of the screen. If there is a better HTML5-based solution I would love to know about that too of course.
Javascript:
$(document).ready(function() {
var $window = $(window);
function checkSize()
{
var windowHeight = $window.height();
var frameHeight = windowHeight - 90;
$('iframe').height() = frameHeight;
}
checkSize();
$(window).resize(checkSize);
});
HTML:
<body style="overflow:hidden;">
<div style="height:90px;">
Content goes here
</div>
<iframe src="www.someurl.com" style="width:100%; height:900px; seamless: seamless; frameborder: 0;"></iframe>
</body>
Display your iframe as block first of all. You can then use the top of the iframe relative to the window height, to work out how far it is until the bottom:
jQuery
$(window).on('load resize', function(){
$window = $(window);
$('iframe').height(function(){
return $window.height()-$(this).offset().top;
});
});
CSS
iframe{
display:block;
margin:0;
padding:0;
border:0;
}
JSFiddle
Some CSS may do the trick:
body, html { width:100% ;
height:100% ;
overflow:hidden ;
}
iframe { width:100% ;
height:100% ;
border:none ;
}
fiddle
$('iframe').height(frameHeight)
fiddle
Try this
I am trying to center this brand logo vertically and horizontally on the whole page with JQuery. It does work on browser resize but not initially. Notice this code resizes the image to fit the page. I tried $(window) and $(document) JS is:
$(function() {
var resizeToFit = function(){
var $this = $(document);
var imgw = $("#overlay-logo img").width();
var pw = $this.width();
var $overlaylogo = $("#overlay-logo img");
$overlaylogo.css("width", pw - 100);
var left = (pw / 2) - (imgw / 2);
$overlaylogo.css('margin-left',left);
}
$(window).resize(function(){
resizeToFit();
});
resizeToFit();
});
CSS:
#overlay-logo{
position:absolute;
top:50%;
z-index: 999999;
}
HTML:
<div id="overlay-logo">
<img src="img/overlay.png" alt="overlay" />
</div>
you should be able to do this with just straight css.
#overlay-logo{
height:99%;
width:99%;
margin:auto;
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
}
here's a fiddle: http://jsfiddle.net/GheZd/
EDIT
Just make your height and width 99% then. You can put apply this style directly to the image...you don't necessarily need the div.