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
Related
How can I change an element with a fixed width in px when i resize the window? I need to use an absolute unit, i can not use relative units like % or vw.Every time the window is resized with 1 px i need to decrease the element width by 0.2px.
I tried to use the window resize eventListener but i don't know what calculations needs to be done.
What you want can be achieved by using javascript. I've created a logic to do that :
<script>
function myFunction() {
var initialscreenwidth = window.innerWidth; //Set Initial Screen Width
setInterval(function() { //looping the script
var screenwidth = window.innerWidth;
var difference = initialscreenwidth - screenwidth; //Calculating the change in screen-size
if (difference != 0) { //Checking if there is a change in width
var element = document.getElementById('demo');
var style = window.getComputedStyle(element, null).getPropertyValue('font-size'); //Getting default font-size of the element
var initialfontsize = parseFloat(style);
var fontdifference = -(parseFloat(difference) / 5); //1px change in screen-size = 0.2px change in font-size
var newfontsize = initialfontsize + fontdifference;
var newfontsizepx = newfontsize + "px";
if (newfontsize > 1) {
document.getElementById("demo").style.fontSize = newfontsizepx;
}
}
initialscreenwidth = window.innerWidth;
}, 300); //reloads in every 300ms
}
myFunction();
</script>
Paste this at the end of your body section, somehow using this in the head section is not working.
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';
}
}
As a self-improvement exercise I am building a piece of plain js that takes a set of various sized squares (all of the same aspect ratio) and lays them out in a fluid grid so that there are no gaps.
After spending the evening I have a very basic model that works for the test data I have given it.
The last problem I need to solve before I can justify sinking more time in it is this:
When resizing the browser window the width of the parent element (#container) is not being re calculated.
This width is being used with the aspect ratio of the grid items to calculate the row height so when you resize the window everything shifts correctly except the vertical position.
The function being called by window.onresize is as follows
function() {
var parentElem = this.element;
console.log(parentElem.offsetWidth);
var elems = parentElem.getElementsByTagName('*'), i;
for (i in elems) {
if((' ' + elems[i].className + ' ').indexOf(' ' + 'tile' + ' ') > -1) {
var ele = elems[i];
var tile_size = ele.getAttribute('data-grid-size');
var tile_col = ele.getAttribute('data-grid-col');
var tile_row = ele.getAttribute('data-grid-row');
var col_width = (100 / this.options.cols); // column width in %
var row_height = (parentElem.getElementWidth() / this.options.cols) / this.options.tile_ratio;
var left_offset = col_width * tile_col;
var top_offset = row_height * tile_row;
// Position tiles
var currentStyle = ele.getAttribute('style');
ele.setAttribute('style', currentStyle + ' left: ' + left_offset + '%; top: ' + top_offset + 'px;');
}
}
}
See the full fiddle here.
So any ideas as to why the width of the element is not being recalculated?
This line from your fiddle:
window.onresize = gridfill.layoutGrid();
...doesn't assign your function as a resize handler, it calls your function immediately and tries to assign the return value as a resize handler. You need to remove the parentheses:
window.onresize = gridfill.layoutGrid;
Except to keep the correct context within the function you will need to use:
window.onresize = gridfill.layoutGrid.bind(gridfill);
Note that the .bind() function is not supported by IE<=8, but you can use a polyfill, or just wrap the function call:
window.onresize = function() { gridfill.layoutGrid(); };
Demo: http://jsfiddle.net/WzaXF/1/
I want to increase the height of the div tag on click of button. Every time a user clicks a button it should increase the height of that particular div tag, say by 200px or so..
HTML
<div id="controls">
<input type="button" onclick="incHeight()" id="btn" name="btn">
</div>
<div id="container" style="min-height:250px;"> </div>
The below script works properly
Javascript
<script type="text/javascript">
function incHeight()
{
document.getElementById("container").style.height = 250+'px';
}
</script>
But I want to do something like this, which is not working. The problem I think is the 'px' portion in the value. Anybody have any idea how to extract the INT portion of the value...
<script type="text/javascript">
function incHeight()
{
document.getElementById("container").style.height += 250;
}
</script>
The problem is how do I get the '250' portion of the height value neglecting the 'px' in javascript..
Try this:
function incHeight() {
var el = document.getElementById("container");
var height = el.offsetHeight;
var newHeight = height + 200;
el.style.height = newHeight + 'px';
}
Fiddle
Try something like
var container = document.getElementById('container');
container.style.height = (container.offsetHeight + 250) + "px";
In case offsetHeight is not working, try parsing the style.height for its numeric value instead.
var currentHeight = (container.style.height) ? (parseInt(container.style.height.match(/[0-9]+/)[0]) : container.offsetHeight;
Also, simply parseInt(container.style.height) might work
Try this:
getElementById('container').setAttribute("style","height:500px");
or
function resize(element) {
var height = 0;
var body = window.document.body;
if (window.innerHeight) {
height = window.innerHeight;
} else if (body.parentElement.clientHeight) {
height = body.parentElement.clientHeight;
} else if (body && body.clientHeight) {
height = body.clientHeight;
}
element.style.height = ((height - element.offsetTop) + "px");
}
You can use a regular expression to only keep the numbers in the string:
var style = document.getElementById("container").style;
style.height = style.height.replace( /^\D+/g, '') + 'px';
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";