We Keep Coding

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;

Why is slideDown Expanding an Image From the Top Left Hand Corner Instead of the Entire Width?

I have a series of pictures that I would like to slideDown() from left to right (creating a waterfall effect). I create the waterfall effect using setInterval():
var i = 1;
var numberCount = 5;
var counter = window.setInterval(function(){
$("#instagram-pictures .instagram-picture:nth-child(" + i + ")").slideDown(1200);
if(i === numberCount){
window.clearInterval(counter);
}
else{
i = i + 1;
}
}, 400);
This works without a hitch except the slideDown part. For some reason, my pictures are not sliding down from the width of the entire top line, rather they are "expanding out" from the top left hand corner.
jsFiddle here
How do I fix this?

.slideDown() animates the height of an element, not it's position. You're allowing the width of each picture to be automatically determined based on the height. So as the height changes, it's determining new widths as well, and animating a diagonal stretch.
If you give the images a fixed width you'll get the downward animation you're after.
Source: http://api.jquery.com/slidedown/

Try ths:
Give each image a fixed width
.instagram-picture{
display: none;
width:100px;
height: 160px;
}
The width is determined based on the height and since the height is changing when the image slides down, the width changes with it. Therefore, setting a fixed width will fix your problem!
JSFiddle Demo

Jquery, resize image by width keeping constant height

How can I go about resizing/cropping an image so the height is constant but its width gets smaller as the page is resized?
The same effect as you can see in the carousel here:
http://dai.com/
Thanks,

Did you looked at the website image closely? Because it's not resizing! It's just centered in the middle of the img element as an background property. When you change the width of the screen you will see that the image center is adjusted..
It's pretty simple to accomplish this effect by using only the background property:
background: url("img path") 50% 0 no-repeat;
The background image will get the height of the element.
Example: here

you should bind a function to the "resize" event, and give the image max-width and max-height instead of height and width,
function imageresize() {
if (($(window).width()) < '800'){
$('#img').css('max-width',$(window).width());
} else {
$('#img').css('max-width','');
}
}
imageresize();
$(window).resize(function(){
imageresize();
});
I attached a jsFiddle: http://jsfiddle.net/gGBRF/

As #Sven said, it's not being re-sized it's just centered and re-sizing the browser making it looks like it's an overflow from both sides.

Canvas width and height calculation is off

I'm using some script I found on Git that generates a snow effect. Somewhere in the code I have to set the width and the height of the canvas in which the snow is generated. I'm setting the canvas to the window full width / height :
canvas.width = $(window).width();
canvas.height = $(window).height();
But when rendered in the browser there are on both height and width some extra pixels adding scrollbars to the window. You can see the behavior here : Canvas ; I'm not quite sure why the width / height is calculated wrong or if there's something else interfering with those calculations that it makes it bigger than the actual window width / height. Maybe someone has a different view of the behavior or encountered it before ?

The canvas element is displayed inline by default, you can read here about similar problem.
The solution is quite simple :) Add following css code to the canvas element:
display: block;
and scrollbars should disappear.
old answer:
$(window).width() works properly but i don't know why $(window).height() returns too large value. It cause also showing vertical scrollbar because earlier computed width don't include the size of horizontal scrollbar.

Dynamically resize div based on window size

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);