Develop Reference

Assign a style to a div with jquery

I would like to assign at a div named bannerdiv the max-width and the max-weightthat coincide with the browser resolution.
I have already captured the following data:
$(window).width()
$(window).height()
How can i assign these values at the style of bannerdiv?

You can use 'vw' which is viewport width and 'vh' which is viewport height, each number is representative of 1% of the viewport width(vw) or viewport height(vh) so '50vh' is 50% height of the browser window or '18vw' is 18% of the browser width.
https://www.w3schools.com/cssref/css_units.asp
And Mamun is correct you can apply this directly using jQuery's .css(), but using vw and vh you don't need to capture the window height and width.
So, if bannerdiv is a class
$('.bannerdiv').css({'max-height': '100vh', 'max-width': '100vw'});
if it is an ID
$('#bannerdiv').css({'max-height': '100vh', 'max-width': '100vw'});

To set style using jQuery use .css() like the following way:
var height = $(window).height();
var width = $(window).width();
$("#bannerdiv").css('height', height);
$("#bannerdiv").css('width', width);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bannerdiv">Test</div>
OR: In a single line
$("#bannerdiv").css('height', height).css('width', width);
OR: Even better with property initialiser
$("#bannerdiv").css({ 'width' : width, 'height' : height });

<div id="bannerdiv">YourDiv</div>
$('#YourDivID').css({
'max-width' : 'YourWidthForDiv',
'max-height' : 'YourHeightForDiv'
});
You can refer css() method Demo For More information

Welcome to StackOverflow.
You can use below snippet and in your code.
Store height and width in 2 variables:
var height = $(window).height();
var width = $(window).width();
Then assign value into container
$("#bannerdiv").attr('style','height:'+height+'px;width:'+width+'px');
"attr" event will append "style" attribute in the element.

Get constant browser height and width

I was wondering how I could constantly get the current browser's height and width. Right now, I am using jQuery and have something like this:
var height = window.innerHeight;
var width = window.innerWidth;
This does initially work as it gets the screen when the page is loaded up. However, when the user changes the screen width/height manually, I can't seem to get the current dimensions and the page starts faulting with errors. How should I be checking the dimensions at all times? I've tried googling the answer but I can't seem to find anything applicable, though I'm sure many others have had the same issue (I don't think I'm searching up the right keywords!). Please let me know what I can do!! Thanks!

Use a window.onresize function as well as a window.onload handler to update the width and height variables.
(Resizeable Demo)
var width,height;
window.onresize = window.onload = function() {
width = this.innerWidth;
height = this.innerHeight;
document.body.innerHTML = width + 'x' + height; // For demo purposes
}
Using jQuery objects it would look like this.
(Resizeable Demo)
var width,height;
$(window).on('load resize', function() {
width = this.innerWidth; // `this` points to the DOM object, not the jQuery object
height = this.innerHeight;
document.body.innerHTML = width + 'x' + height; // For demo purposes
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Try this:
$(window).on("resize",function(){
console.log($(this).height() + " " + $(this).width());
});
fiddle

Try this
var width = window.outerWidth;
var height = window.outerHeight;
To resize the current window, use
window.resizeTo(width, height);
You can trigger the resize function using:
$( window ).resize(function() {
//....
});
Hope it helps you

You can use this to detect a change in screen size:
$(window).resize(function() {
height = window.innerHeight;
width = window.innerWidth;
//other code you wish to run on screen size change;
});
This assumes that height and width were declared in a scope that the function has access to. Otherwise make sure to place var before each variable.

How to set a CSS property with a variable in JQuery?

I need to set the CSS property of width as the same size as the browser's current width. To do this, I did var setWidth = $(window).width(), but I don't know how to apply this to my current code, which is something like this:
$(document).ready(function(){
$("#backgroundImg").css("width", "");
});
Is there any way to do this? I'm new to JQuery so I might just be really amateur.

Try this
$(document).ready(function() {
var setWidth = $(window).width();
$("#backgroundImg").css("width", setWidth + 'px');
});
or you can use $.width
$(document).ready(function() {
$('#backgroundImg').width( $(window).width() )
});

update code to following
$("#backgroundImg").css("width", setWidth + "px");

One option: $("#backgroundImg").css("width","100%");
with your variable option do: var setWidth = $(window).width() +'px';
so your code would be
$(document).ready(function(){
$("#backgroundImg").css("width", setWidth);
});

This should make the background match the browser's current width:
$( "#backgroundImg" ).width( setWidth )
Source

how to get html content width not window's width

I want to retrieve the html content width. Suppose when we resize the window to smaller size then scrollbar comes, so I want to get the width of the entire html content content that is visible and also the content the that is not visible due to the vertical scrollbar.

You can use window.outerWidth and window.innerWidth.

You may try this:-
var width = document.getElementById('foo').offsetWidth;
Try this code:
window.moveTo(0,0);
window.resizeTo(screen.width,screen.height);
var navButtonsEtcHeight = screen.height - window.innerHeight;
var navButtonsEtcWidth = screen.width - window.innerWidth;

Here's a Fiddle
<div></div>
$(function() {
var dWth = $(document).innerWidth(),
dHgt = $(document).innerHeight();
$('div').append('<h2>'+dWth+'px X '+dHgt+'px</h2>');
$(window).resize(function() {
var dWth = $(document).innerWidth(),
dHgt = $(document).innerHeight();
$('div').html('<h2>'+dWth+'px X '+dHgt+'px</h2>');
});
});
$(window).width(); // Returns width of browser viewport
$(document).width(); // Returns width of HTML document

You want the Element.clientWidth property. It gives the content width of the element.
Here's the documentation: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements

Content Height Based On Browser Viewport

I have some Javascript using JQuery to give my main content's container a height if it is smaller than the browser's viewport. This is to ensure the footer is always at the bottom of the page. Wen I call it like this, it works:
$(document).ready(function() {
var windowHeight = $(window).height();
var contentHeight = windowHeight - 325;
if($("#content").height() <= contentHeight) {
alert(contentHeight);
$("#content").height(contentHeight+"px");
}
});
But I want to declare it as a function so I can use it on the page resize event, but when I do that, it doesn't work. Here is the code I am trying to use:
function pageSizer() {
var windowHeight = $(window).height();
var contentHeight = windowHeight - 325;
if($("#content").height() <= contentHeight) {
alert(contentHeight);
$("#content").height(contentHeight+"px");
}
}
$(document).ready(pageSizer());
$(window).resize(pageSizer());
Any ideas?

$(document).ready(pageSizer());
$(window).resize(pageSizer());
change to
$(document).ready(pageSizer);
$(window).resize(pageSizer);
You are invoking your functions instead of passing them as a reference which jQuery expects.