Centering img horizontally and vertically with JQuery - javascript

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.

Related

Resize slider with different sized images

I have a mobile first slider with 3 types of images: tall, horizontally long and square. I want the horizontally long image determine the size of slider and then scale and center other ones to fit it's size. Using width:100%; height:auto; in my CSS code so images will be loaded with same width(100%) and different heights. Then using JS I want to get height of the image which has max width/height ratio and use it as the height of all images. And in the end using width:auto; height:100%; for images so all of them will fit the height. Here is the code I used to achieve this:
every slide has the following HTML:
<div class="img">
<img src="" alt="">
</div>
CSS code:
.img{
position: relative;
vertical-align: middle;
}
.img img{
width:100%;
height:auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
JS code:
$(".img img").width = "100%";
$(".img img").height = "auto";;
var img_h , Imgs_heights=[] , ratio=[];
slider.item.find(".img img").each(function(){
Imgs_heights.push($(this).height());
ratio.push($(this).width()/(($(this).height())));
});
img_h = Math.max.apply(Math,ratio);
var i = r.indexOf(img_h );
$(".img").height(Imgs_heights[i]);
$(".img img").css("height", "100%");
$(".img img").css("width", "auto");
Everything works just fine but I have problem when I resize the window. In resizing the height of images does not change and keeps the height calculated before. And I need to refresh page to see the result I want. How can I get the height to change? I added the two first lines in JS to force it take width:100%; height:auto; again in resized window but it does not work.
I will appreciate any help.
If I'm understanding you correctly, can you simply use the Javascript window.resize event to recalculate the image sizes?
From Mozilla https://developer.mozilla.org/en-US/docs/Web/Events/resize
The resize event fires when the document view (window) has been
resized.
Your code might become something like:
function resizeImages(){
$(".img img").width = "100%";
$(".img img").height = "auto";
var img_h , Imgs_heights=[] , ratio=[];
slider.item.find(".img img").each(function(){
Imgs_heights.push($(this).height());
ratio.push($(this).width()/(($(this).height())));
});
img_h = Math.max.apply(Math,ratio);
var i = r.indexOf(img_h );
$(".img").height(Imgs_heights[i]);
$(".img img").css("height", "100%");
$(".img img").css("width", "auto");
}
window.onload = function(){
resizeImages();
};
window.onresize = function(){
resizeImages();
};

Can I use jQuery to resize an iframe to fill the remaining window space?

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

DIV cover/overlap other element

I want to make a reusable function that enable me to easily cover or overlap an element such as select, textfield, input, div, table and etc with a semitransparent div to it's exact height and width.
I am able to get the element position and size:
$(element).height()
$(element).width()
$(element).offset().top
$(element).offset().left
However, how can I bind the element position and size with the div? If the element position or size change, so as the div will change. Any suggestion that how I can do it? Or, is there any existing jquery plugin for this? I believe this will be very useful for temporary disable an element from user interaction for operation such as ajax and etc.
Thanks.
You could create a function/plugin using the jQuery .wrap() function and the appropriate CSS for the overlay..
$.fn.overlay = function() {
return this.each(function(){
var $this = $(this);
var left = $this.offset().left;
var top = $this.offset().top;
var width = $this.outerWidth();
var height = $this.outerHeight();
$this.wrap("<div id='overlay'> </div>")
.css('opacity', '0.2')
.css('z-index', '2')
.css('background','gray');
});
};
Demo on Bootply: http://bootply.com/87132
This should work generically and be reusable.. not just for Bootstrap elements!
Like this
demo
css
div {
position:relative;
z-index:1;
height:200px;
width:400px;
background-color:green;
}
div div {
position:absolute;
z-index:2;
top:0px;
bottom:0px;
left:0px;
right:0px;
background-color:black;
opacity:0.5;
}
div div input {
position:relative;
top:25px;
z-index:1;
}

Vertically centering child div in parent container with JavaScript on page load is not setting position?

I am using JavaScript to vertically center a child div within a fluid container. I essentially accomplish this by calculating the height of the parent container and the height of the child div. I then absolutely positon the child div in the center of the parent div based on the height. The issue I am experiencing is that when the page loads, it does not set the position of the child div. I created a function out of this and call it when the window is resized so that when the viewport changes it recalculates dynamically. How would I go about initially setting this position on page load?
<div class="lead">
<div class="message"></div>
</div>
var homepageLead = function () {
var lead = $('.lead'),
message = $('.message'),
lead_height = lead.height(),
message_height = message.height(),
lead_center = .5 * lead_height,
message_center = .5 * message_height,
center = (lead_center - message_center);
message.css('bottom',center);
}
homepageLead();
$(window).resize(function () {
homepageLead();
});
Try this fiddle: http://jsfiddle.net/nRRn6/
used css:
html, body {
height:100%;
}
.lead {
width:100%;
height:100%;
background:red;
position:relative;
}
.message {
width:120px;
height:200px;
background:yellow;
position:absolute; /* <---required*/
left:0; /* <---required*/
bottom:0; /* <---required*/
}
used html:
<div class="lead">
<div class="message"></div>
</div>
used jQuery:
var homepageLead = function () {
var lead = $('.lead'),
message = $('.message'),
lead_height = lead.height(),
message_height = message.height(),
lead_center = .5 * lead_height,
message_center = .5 * message_height,
center = (lead_center - message_center);
return message.css('bottom', center);
};
$(function () {
$(window).resize(function () {
homepageLead();
}).resize();
});

Vertical centering variable height image while maintaining max-width/height

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>​

Categories