dynamically change height attribute - javascript

I am currently re-sizing a DIV class based on the users window size / resolution - I tested it and once I re-size my browser window to below 1024 x 768 the css attribute changes properly. The problem is now, when I maximize the window the attribute stays with the new properties (400 / 380). Is there a way to have it reset once my resolution goes back to over 1024 x 768?
$(function(){
$(window).resize(function(){
var h = $(window).height();
var w = $(window).width();
$("#scrollbar1").css('height',(h < 1024 || w < 768) ? 400 : 380);
});
});
Some advice would be appreciated, thank you.

Assuming your screen-resolution is height:768 * width:1024 :
First see the comment by https://stackoverflow.com/users/222714/mdmullinax , you currently detect if the width is < 768 or height is < 1024 , you should switch this.
Then: you cant rely on the fact that a maximized browser-window will have a inner size similar to the screen-size.
width()/height() will return the size of the viewport, so when the window is maximized there still may be some bars on the desktop (and the browsers bars like toolbar, adressbar etc. too) that let the browser-windows size differ from the screen-size)

Related

Calculating a responsive header's height and using the result in the style of another div's height

Please bear with me as I attempt to explain the issue I'm having. It's kinda tricky!
I have a fixed header that includes a responsive image, because of this, the height of the header depends on the width of the device. I also have a fixed footer sitting on the bottom of the screen. In-between the header and footer I have a fixed div with scrollable overflow positioned towards the left side of the screen. I need the fixed div in-between the header and footer to have a HEIGHT that is the following:
calc(100% - the header's height in px - the footer's height in px)
To do this, I know I need to use Javascript or jQuery, but I'm unsure how to go about setting that up. Furthermore, I need that styling to only be applied on a specific media query.
I have similar code that adds padding to the top and bottom of another div that is centered between the header and footer. This is the code that I'm using and it works perfectly (in the fiddle I've provided at the bottom, I don't use "DOMContentLoaded" because it doesn't quite work with JSFiddle like it should. same idea slightly different syntax in the fiddle) :
document.addEventListener("DOMContentLoaded", function() {
var headerHeight = document.getElementById('header').clientHeight;
document.getElementById("content").style.paddingTop = headerHeight + "px";
var footerHeight = document.getElementById('footer').clientHeight;
document.getElementById("content").style.paddingBottom = footerHeight + "px";
}, true);
window.addEventListener('resize', function() {
var headerHeight = document.getElementById('header').clientHeight;
document.getElementById("content").style.paddingTop = headerHeight+ "px";
var footerHeight = document.getElementById('footer').clientHeight;
document.getElementById("content").style.paddingBottom = footerHeight + "px";
}, true);
I need to use code similar to that, but instead of styling the div "content", I need to be styling a div titled "description" and instead of styling the padding, I need to be styling the height. The last difference is that the styling should only be applied to this media query:
#media screen and (orientation: landscape)
I've created a JSFiddle: http://jsfiddle.net/yg7mjhvn/
Thank you guys so much! I really appreciate it.
If I get it correctly, you just need to set the height of content/description div calc(100% - <header-height> - <footer-height>) with javascript.
So, to do that add a function setDescriptionHeight to your js code which sets the height of description div and add it as a load and resize event handler. All this will be done like this.
function setContentHeight() {
if (window.innerWidth > window.innerHeight) { // window.orientation === 90 for checking the real orientation
var headerHeight = document.getElementById('header').clientHeight;
var footerHeight = document.getElementById('footer').clientHeight;
document.getElementById("description").style.height = `calc(100% - ${headerHeight}px - ${footerHeight}px)`;
} else{
document.getElementById("description").style.height = "";
}
document.getElementById("description").style.top = `${headerHeight}px`;
}
window.addEventListener('load', setContentHeight, true);
window.addEventListener('resize', setContentHeight, true);
Now, you see that it has a condition window.orientation === 90. That is there to check whether the device is in landscape orientation, and if it is then the styling is done.
note that window.innerHeight < window.innerWidth simply detects whether the width is greater than the height. And, window.orientation === 90 checks the device orientation and it won't be 90 for a laptop or a dekstop screen. Moreover, it is deprecated now and you can see more about it here

Viewport / Autozoom for desktop view

I designed a website to be used as digital signage 1920x1080 filling entire screen.
is there such a thing to work (sort of like a viewport works on mobile) to zoom all text/images recursive to all sub DIV's etc as if you hit Ctrl - to zoom in your browser settings.
i want this to happen on page load or adjusting window size. it should scale to the best possible width height to fit in that desktop window's size height.
looking for an option in either CSS or as a jquery plugin. i googled around and did not find anything.
Your help is appreciated.
SOLVED - ENJOY
CSS Transform Scale https://www.w3schools.com/css/css3_2dtransforms.asp
function scalebody() {
var veiwwid = $(window).width() / 1920;
var veiwwidhh = $(window).height() / 1080;
if(veiwwidhh < veiwwid){veiwwid = veiwwidhh;}
$('body').css( {"transform": "scale("+veiwwid+")"});
var margintop = ((1080 - $(window).height() )/2) *-1 ;
var marginleft = ((1920 - $(window).width() )/2) *-1 ;
$('body').css( {"margin-top": margintop, "margin-left": marginleft});
}
$(document).ready(function(){scalebody();});
$(window).resize(function() {scalebody();});

Javascript get viewport height without overflow Y [duplicate]

This question already has answers here:
How to get screen width without (minus) scrollbar?
(8 answers)
Closed 5 years ago.
I would like to get the viewport height of a screen, without the overflowY.
In other words, I want to see the height of the user's screen, NOT the entire website's page height including the overflowy which the user can then scroll down.
So, if he has an iphone and the iphone has 600px in height, then i want to get 600, and not the entire body including the scroll which can be higher.
This works fine but it is hacky, is there another solution? I failed to come up with anything else.
// First you forcibly request the scroll bars to be shown regardless if they will be needed or not.
$('body').css('overflow', 'scroll');
// Take your measures.
// (These measures WILL take into account scroll bars dimensions)
var heightWithScrollBars = $(window).height();
var widthWithScrollBars = $(window).width();
// Set the overflow css property back to it's original value (default is auto)
$('body').css('overflow', 'auto');
Not entirely sure I understand, but if you want the users viewport / screen size
you can access them through vanilla javascript like so
var viewportWidth = window.innerWidth + "px";
var viewportHeight = window.innerHeight + "px";
It will just get you a number so you have to prefix it with px.
Viewport height and width can be accessed using:
width = window.innerWidth
height = window.innerHeight

crazy values for window.outerWidth

window.outerHeight / window.outerWidth
are this values not in pixels ?
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_inner_outer
(screen is 2560)
firefox outerWidth: 2576
edge outerWidth: 3435
chrome outerWidth: 2560
IE outerWidth: 2862
what are this values ?
how can i get the screen size in pixels ?
//if you need the screen width and height
//Screen height
var height = screen.height
//Screen Width
var width = screen.width
//if you want to know what the code you use do:
Get the window's height and width: (including toolbars/scrollbars):
var w = window.outerWidth;
var h = window.outerHeight;
source:http://www.w3schools.com/jsref/prop_win_outerheight.asp
Get the window's height and width: (NOT including toolbars/scrollbars):
var w = window.innerWidth;
var h = window.innerHeight;
source: http://www.w3schools.com/jsref/prop_win_innerheight.asp
Did you set your doctype at the top of your HTML, I remember this was giving me an issue awhile back. Try putting
<!DOCTYPE html>
before your opening tag
Grrrmppf
i not realy use IE or edge and chrome behaves different eg ZOOM is on a domain level in opposite to ie and edge where it is on a global level
problem was i had pagee zoom on

Why doesn't the window resize to the correct height?

I want to resize my safari browser window to match the height of a div with id 'po'.
I have the following javascript:
var divHeight = document.getElementById('po').offsetHeight;
console.log(divHeight);
divHeight = divHeight + 30;
var y = parseInt(divHeight,10);
var w=window.innerWidth;
window.resizeTo(w,y);
console.log(divHeight);
The output of the console is:
83
113
But the window gets resized to an actual inner height of only 30!
Why isn't the window resizing correctly? If I measure the div (it contains a table), the height of the div is indeed 83. So why won't the window size match? How to fix it?
The problem was in my calculation and misunderstanding how window.resizeTo() works.
The size that window.resizeTo() sizes to includes the chrome(scrollbars, address bar,favourites bar, etc)! Once I added some "padding" to include that, it worked as expected.

Categories

Resources