I have some CSS that needs the body to have a height set, but this needs to be done depending on the user.
I have made some code that kind of works - it calculates the window height but it's not changing the body height. What am I doing wrong?
function setWindowHeight(){
var windowHeight = window.innerHeight;
document.getElementsByTagName('body').style.height = windowHeight + "px";
}
You need to add an eventListener, and you don't need to use the getElementsByTagName because has only 1 body tag:
function setWindowHeight(){
var windowHeight = window.innerHeight;
document.body.style.height = windowHeight + "px";
console.log(document.body.style.height);
}
window.addEventListener("resize",setWindowHeight,false);
Or, if you want to use, you can do this:
function setWindowHeight(){
var windowHeight = window.innerHeight;
document.getElementsByTagName('body')[0].style.height = windowHeight + "px";
console.log(document.body.style.height);
//---------------------------------------ยด
//will get the first element tagged body
}
window.addEventListener("resize",setWindowHeight,false);
EDIT (Changed the code above): you can check the value in the Firefox Console. Open it(CTRL + SHIFT + K) and resize the window, you will see the event resize be fired when you do it.
try this may work
document.getElementsByTagName('body').height = windowHeight + "px";
Related
I want to use a background color with Gradient on the intro page, but when I shrink my browser, I want to work to reduce the height value without scrolling.
I don't know what method to use when it's resizing.
The code is as follows.
function __screenResize () {
var innerHeight = window.innerHeight;
var availHeight = window.screen.availHeight;
document.getElementById('section').style.height = innerHeight + 'px';
window.onresize = function () {
document.getElementById('section').style.height = availHeight + 'px';
}
}
I am trying to get the height and width of the browser window and display it on the body as well as changing the height to match.
Here's my current code:
window.onresize = window.onload = function() {
width = this.innerWidth;
height = this.innerHeight;
document.body.innerHTML = width + 'x' + height; // For demo purposes
}
The above code displays the width and height on the body ok, now time to add it to a css variable:
var header = document.querySelector('.header')
window.onresize = window.onload = function() {
width = this.innerWidth;
height = this.innerHeight;
header.style.setProperty('--height', height);
header.style.setProperty('--width', width);
document.body.innerHTML = width + 'x' + height; // For demo purposes
}
I know the code is not correct but I can't find any sample to compare with, here's a fiddle just in case the code is not enough.
https://jsfiddle.net/rbtwsxd8/6/
You have a number of different issues here:
(at least in the fiddle) you were trying to document.queryselect the header element before it existed
your debug code overwrote the header element by setting document.body
You omitted the units when setting the height and width (This used to work in "quirks mode" but will not work in modern doctypes.)
You added extra double hyphens when trying to set the height and width
Here's a working version which corrects these problems:
window.onresize = window.onload = function() {
var header = document.querySelector('.header');
// your original code used 'this.innerWidth' etc, which does work
// (because the function is being run on the window object) but can
// be confusing; may be better to refer to the window object
// explicitly:
var width = window.innerWidth;
var height = window.innerHeight;
header.style.width = width + "px"; // need 'px' units
header.style.height = height + "px";
// the above is equivalent shorthand for
// header.style.setProperty('height', window.innerHeight + 'px');
// header.style.setProperty('width', window.innerWidth + 'px');
// setting this inside the header, so we don't remove it in the process:
header.innerHTML = width + "x" + height;
}
https://jsfiddle.net/pm7rgx4q/1/
window.onresize = window.onload = function() {
var header = document.querySelector('.header')
width = this.innerWidth;
height = this.innerHeight;
header.innerHTML = width + 'x' + height; // For demo purposes
header.style.setProperty('height', height + 'px')
header.style.setProperty('width', width + 'px');
//header.style.height = height + 'px';
//header.style.width =width + 'px';
}
fiddle
This far i have succeded to make an Id to have same innerHeight as the window.
However when i resize the window the height stays the same.
Could anyone help me make the Id be the same innerHeight as the window whenever it is resized ?
Here is the code
function height()
{
var h = window.innerHeight;
document.getElementById("id").style.height = h+'px';
}
height();
this approach might play nicer with existing event handlers:
window.addEventListener('resize',function(){
document.getElementById("id").style.height = window.innerHeight + 'px';
});
You could use:
window.onresize = function(event) {
var h = window.innerHeight;
document.getElementById("id").style.height = h+'px';
};
On this site:
http://houston.aiga.org/
Although the slider is full width / variable on browser window size, the Title of each slider item is always indented to line up with the content.
I've tried setting this up:
http://jsfiddle.net/topiman/xS7vn/
$(window).resize(function() {
$('#item').css("padding-left",$(window).width()/2);
});
The function is working but the calculation pushes the item too far in on decreasing window size and too far out on increase.
The line in the working slider example is:
$('.layout-feature .box-section-image-gallery-controls-title, .layout-feature .box-section-image-gallery-title').css('paddingLeft', 60 + extraSpace/2);
where extraSpace is the $(window).width()
Any help gratefully received - thanks in advance
It seems you forgot about the width after all: http://jsfiddle.net/topiman/xS7vn/5/
This is what I came up with. Stupid thing is the console.log kept giving back a +8 difference which I had to hardcode remove. Is this what you were looking for?
$(window).resize(function() {
var ItemWidth = $(".wrapper").width();
$('#item').width( ItemWidth );
var WindowWidth = $(window).width();
// cannot resize because window is smaller than the wrapper
if( ItemWidth > WindowWidth ) {
var PadWidth = 0;
} else {
var PadWidth = (WindowWidth - ItemWidth)/2 - 8;
}
console.log( ItemWidth + " - " + WindowWidth + " - " + PadWidth );
$('#item').css("margin-left",PadWidth + "px");
});
Update; also check http://jsfiddle.net/xS7vn/8/ for the latest update including resizing on page load.
What I want to do is to change the size of a window and create a window next to it so they are exactly next to each other. In that sense, I need to position to the new window to the top right part of the screen, the way I am doing it is not working (code is below), I need help :)
function () {
var viewportwidth = document.documentElement.clientWidth;
var viewportheight = document.documentElement.clientHeight;
window.resizeBy(-300,0);
window.open("something.htm",
"mywindow",
"width=300,
height=viewportheight,
left=(viewportwidth - 300),
top=0,
screenX=0,
screenY=0");
}
var viewportwidth = document.documentElement.clientWidth;
var viewportheight = document.documentElement.clientHeight;
window.resizeBy(-300,0);
window.moveTo(0,0);
window.open("http://google.com",
"mywindow",
"width=300,left="+(viewportwidth-300)+",top=0");
I haven't tested out the actual window size math; not sure if that's correct. But the first, obvious, problem you have is embedding the variables into the call to window.open. Try changing
window.open("something.htm", "mywindow",
"width=300, height=viewportheight, left=(viewportwidth - 300), top=0, screenX=0, screenY=0");
to
window.open("something.htm", "mywindow",
"width=300, height=" + viewportheight + ", left=" + (viewportwidth - 300) + ", top=0, screenX=0, screenY=0");
Basically, if you want the variables or the math to get resolved, they have to be outside the string.