Dynamically resize div based on window size - javascript

I'm trying to optimise my website for different resolutions. In the center of the website I have a DIV that currently has a fixed size. I'm trying to make its size (and contents) change according to the size of the browser window. How do I do that?
This is my website if you want to take a look at its code:
http://www.briefeditions.com

If you resize the page the div will resize with it and on load of the page.
$(window).on('load resize', function(){
$('#div').width($(this).width());
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
$(document).ready(function(){
var windowHeight = $(window).height();
$('#divID').css('min-height',windowHeight+'px');
});
UPDATE
If you want that site will resize based on browser resize then use % instead of px
CSS:
html {height:100%; overflow:hidden}
body {height: 100%;}

I guess you need screen width and height for client(users) machine.
at onload of page get screen width & height and set those values to divs using jquery/javascript
var userscreen_width,userscreen_height;
userscreen_width = screen.width;
userscreen_height = screen.height;
check this for more info

Keep in mind that in your example iframe also has fixed size. You should also resize it to the parents width. In your example this would work:
$(window).on('load resize', function(){
$('#content, #content > iframe').width($(this).width());
});
Keep in mind that you must remove all margins, as well as absolute positioning like: top, left, position:absolute from you element styles.

I checked the code from the provided link in question.
Change width to 80% in #content style.
And in .wrapper change width to 100%.
You have used mainly 920px for width, so whenever you will resize window the control will not re-size. Use equivalent % instead of 920px;

You can do like this
var width = $(window).width();
$("#divId").width(width);

Related

jQuery: How to get the dynamic height of header

I am new to jQuery. And I can't figure out the solution to this problem.
So, the problem is that I want a fixed header on my website. I did that with CSS. But I want to give the main container div(right below the header) a margin-top of the height of the header.
For example, if the #masthead (header) height is 100px, I want to give a margin-top of 100px to .site-container.
I can easily do it with CSS, but due to some reason, there will be different header height on different pages. Or let's suppose that I don't know the height of the header.
So I want to do it using jQuery.
Here is the code -
jQuery(document).ready(function($) {
var header = document.getElementById("masthead");
var header_height = header.offsetHeight + "px";
$( '.site-content' ).css( {
'margin-top': header_height
} );
});
It works perfectly. But there is just one problem.
That, the header height on my website changes in different screen size. In Desktop Screen size, the #masthead height is 80px, in tablet, the screen size is 160px and in mobile, it's 60px.
But, the value of header height does not change with the change in screen size in jQuery.
In jQuery, I want the value of the variable header to change dynamically, with the change in screen size.
Please note that I am working on a WordPress website.
Please help me.
Thank you.
Use:
Use a window resize function
You could also use: (to make your life easier :)
jQuery selectors
.outerHeight() to "Get the current computed outer height (including padding, border, and optionally margin)"
Example code:
jQuery(document).ready(function($) {
// When the window resizes
$(window).on('resize', function () {
// Get the height + padding + border of `#masthead`
var mastHeight = $('#masthead').outerHeight();
// Add the height to `.site-content`
$('.site-content').css('margin-top', mastHeight);
});
// Trigger the function on document load.
$(window).trigger('resize');
});
Write the same function on window.resize.
By the way, after resize the screen reload the page, hope your code will work as it will get the document ready function.
You can execute the same function on both page load and window resize.
jQuery(document).ready(function($) {
function resizeContent(){
var header = document.getElementById("masthead");
var header_height = header.offsetHeight + "px";
$( '.site-content' ).css( {
'margin-top': header_height
});
}
resizeContent();
$(window).resize(resizeContent);
});

How to set side bar between two div and it should fit in the any browser window based on resize

I am having two grid one div is header another one is footer between the two grid, I am using sidebar in left side.
Here is my JavaScript code
function resize()
{
var heights = window.innerHeight;
document.getElementById("left").style.height = heights + "px";
}
resize();
window.onresize = function() {
resize();
};
I want to show this full content with in the page without show any browser scroll bar.
Here is my demo
Click here to see my demo
You can use pure CSS: there are a few ways to determine the behavior of CSS to adjust to screen size. I think that a good method for this is to use the viewport units: vw and vh, this will let you achieve responsive design easily...
vw stands for "viewport width" and vh is for "viewport height". and,
you can use it with CSS like in this example:
div {
width: 100vw;
height: 100vh;
}
This guide may be helpful to understand this method better...
You can also set px for pixels and other CSS sizing units instead of % and also use vmin and vmax for minimum and maximum size adjustment, or just use min-height/width like in this example:
.sidebar {
min-width: 30%;
min-height: 30%;
}
Another more modern way is to do it with flexbox...
Using Jquery:
You take the browser screen height
$(window).height()
& then reduce the height of header & footer
$(window).height() - $('header').outerHeight() - $('footer').outerHeight()
Using JS
window.innerWidth - document.getElementById('header').offsetHeight - document.getElementById('footer').offsetHeight;
Instead of offsetHeight you can also use clientHeight. Difference is:
clientHeight includes padding.
offsetHeight includes padding, scrollBar and borders.
Updated
Update your function resize() as:
document.getElementById('inner').style.maxHeight = window.innerWidth - document.getElementById('header').offsetHeight - document.getElementById('footer').offsetHeight;

How can one find the "maximized" height of a browser window?

I am trying to make a picture take up 70% of the user's screen. However, if the screen is made smaller when the page is loaded or if the person has inspect element open, the picture becomes small and stretched. I believe the best solution would be to find the maximum height of the browser window and make the image that size. However, I am not sure how to do that?
Here is my current code for image sizing:
var topoffset = window.innerHeight * 0.77;
var profilestart = topoffset - $(".prof-header").height();
$('.splashPic').css("height", topoffset);
$('.splashPlaceholder').css("top", profilestart);
I also want to make it so that if someone is using a huge monitor (i.e. large Mac), the image size maxes out at that point? Any suggestions would be very helpful!
Edit: I don't want to make the image resize dynamically. Only load once.
Use window.screen.availHeight instead of window.innerHeight
or screen.height
var x = screen.height*0.7;
EDIT: Here's more code to show that it works for what you asked. Gets the height upon load and doesn't resize.
<img id="img2" src="http://lorempixel.com/320/240/food" />
<script>
$(document).ready(function () {
var x = screen.height*0.7;
$('#img2').css("height",x);
}
</script>
It sounds like what you want to do is something like this:
img{
display:block;
width:70%;
min-width:320px;
max-width:1200px;
}
If you want the image to take up 70% of the viewport height (and obviously retain its ratio) you could use the new css unit vh (viewport height) like this:
img
{
height: 70vh;
}
FIDDLE

CSS through jQuery not applied

I am in a process to make a slideshow responsive. I am using simple jQuery to achieve this. My logic is:
If width of window is < 620, make the changes in CSS through jQuery.
else
set default(fixed) css
I have a element who has top:470px fixed css when the window is of normal size. If the size of the window goes below 620, I've changed this to be relative to the image size (which changes on window resize). Here is my code:
function resizeVideo() {
var width = $(window).width();
if(width < 620) {
$('#controls').css('top', $('img').height());
}
else {
$('#controls').css('top', '470');
}
}
$(window).resize(resizeVideo);
In this way, the controls would stick to the bottom of the image when size is less than 620. Some of the problems which are stopping me right now are:
Whenever I'm maximizing the window from a size which is less than 620, the images scale back to its original sizes, but the #controls element remains at the same height as it was before maximizing.
When I resize the window to a size greater than 620, then too the #controls stay somewhere around 345px when in actual, the height of the image is greater.
Whenever the image in the slideshow changes and I resize the window at that time, the #controls goes at the top of everything, i.e. it doesn't apply the top: property at all.
I have asked all these queries in on single question because all of them are about the #controls element and I believe that fixing one would automatically fix others. Any pointers would be highly appreciated!
You need the 'px' suffix when manipulating the css via jQuery.
function resizeVideo() {
var width = $(window).width();
if(width < 620) {
$('#controls').css('top', $('img').height()+'px'); // $.height() returns the height without 'px' - so we need to add it manually
} else {
$('#controls').css('top', '470px');
}
}
$(window).resize(resizeVideo);
Think you have to wrap a closure function inside .resize() e.g. $(window).resize(function(){ resizeVideo(); });.
Also because the function resizeVideo is not a reference you will have to call it with ()
For the jquery .css() function they've made some css hooks you can use without strings so to apply css it will be:
$('#controls').css({top: 470 + "px"});

How to find using javascript the maximum users browser window width and current

I am searching a way using javascript to find visitors browser window width and height but i want also find the maximum window sizes so if the user make the window smaller or bigger some elements change automatic position or size like facebook chat. Any suggestions ?
The maximum browser size width would be the width and height of the screen:
screen.height;
screen.width;
But I'd use CSS media queries for what you're trying to do:
http://css-tricks.com/css-media-queries/
Something like this would make the page background black if the window is less than 500px wide:
#media only screen and (max-width: 500px) {
body {
background: #000;
}
}
Update:
Oh, and you'll want a polyfill for older browsers that don't support media queries:
https://github.com/scottjehl/Respond
That'll get you media queries all the way down through IE6!
Maximum window height is
window.screen.availHeight - (window.outerHeight - window.innerHeight)
You can use window.innerWidth and window.innerHeight
You can position any dom element relative to window using css position 'fixed' or absolute so that on window resize the will readjust itself.
You can use window.onresize to listen window resize event
jQuery equivalent
$(window).width(); $(window).height() and $(window).resize(function(){});
If you can use jQuery, it's pretty easy to set up a listener in a cross-browser fashion:
$(window).resize(function() {
alert($(window).width()) //window width
alert($(window).height()) //window height
}).trigger("resize") //to ensure that you do whatever you're going to do when the window is first loaded;

Categories