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';
};
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';
}
}
The page I am working on has a tilt effect, which affects the orientation of the site body. I want to turn this off when the page reaches a mobile viewport; I have looked and tried a few thing but can't seem to get the effect I want. The code below is what i am using. This script runs separate from my main JS code.
window.addEventListener("mousemove",function(e) {
var width = window.innerWidth;
var height = window.innerHeight;
var clientHeight = document.body.clientHeight;
var skew = {};
skew.y = (20 * ((e.x / width) - 0.5));
skew.x = -(20 * ((e.y / height) - 0.5));
document.body.style.webkitTransform = "perspective("+clientHeight+"px) rotateX("+skew.x+"deg) rotateY("+skew.y+"deg)";
});
CSS changes won't remove themselves, so you'll have to remove the transform manually if the browser window is under your desired size.
Check on window resize,
window.addEventListener('resize', function() {
if (window.innerWidth < 568) {
document.body.style.webkitTransform = '';
}
});
And also make sure not to reapply it if the user moves their mouse.
// This is the function you already have
window.addEventListener('mousemove', function(e) {
if (window.innerWidth < 568) {
return;
}
...
}
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";
When i resize the window, the window.innerwidth doesn't update. I dont want to use jQuery.
var page = window.innerWidth;
var content = document.getElementById("content");
content.style.width = page - 300 + "px";
i tried:
window.addEvent("resize", function() {
console.log(window.getCoordinates().width);
});
with no avail
Edit: But that still doesn't fix the window.innerwidth not changing on resize
It should rather be:
window.addEventListener("resize", function() {
console.log(window.innerWidth);
});
This code works in my browser:
<script>
window.onresize = function() {
var widthWin = window.document.body.clientWidth;
console.log(widthWin);
}
</script>
window.onresize = function(event) {
console.log(window.innerWidth);
};
But it will be called only after resizing is completed.
im trying to get some images to resize automatically when a window resizes.
I have this working with the code below, however I would like to have a little more control over the image such as being able to set a min-height, any ideas??
also maybe wrap the images in a div so there is a little more control? Im not to good with js so any help or explanations would help
$(function() {
var $img = $(".l");
var ratio;
var offsetX = $img.offset().left;
var offsetY = $img.offset().top;
$(window).load(function () {
ratio = $img.width() / $img.height();
$(this).resize();
});
$(window).resize(function () {
var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
var availWidth = viewportWidth - offsetX - 70;
var availHeight = viewportHeight - offsetY - 70;
if (availWidth / availHeight > ratio) {
$img.height(availHeight);
$img.width(availHeight * ratio);
}
else {
$img.width(availWidth);
$img.height(availWidth / ratio);
}
});
});
Just use CSS:
img { width: 100%; }
You can then apply height or min-height as you need.
To see it working, resize the window of this fiddle:
Example fiddle