We Keep Coding

How to show only on screen with certain width JS

I am using the following code
Screen bigger 999px
<script>
if ((window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) >= 999) {
// Show on screens bigger than 999px
}
</script>
Screen smaller than 767px
<script>
if ((window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) < 767) {
// Show on screens smaller than 767px
}
</script>
Now my goal is to display somthing inbetween 970 and 768
I have tryed the following code, but this is also visible below 767px
<script>
if ((window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) < 970) {
// Show on screens from 970 till 768
}
</script>
How can I set this up it will only show on screens from 970 till 768? I can't use CSS.

const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if( width >=768 && width <= 970){
// do what you need
}
logical AND (&&)

let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if( width >=768 && width <= 970){
// Show on screens between 768 and 970 px
}
else if (width < 768){
// Show on screens smaller than 768px
}
else if (width > 970){
// Show on screens bigger than 970px
}
else {
// Show other cases
}

Window Resize in jQuery not working correctly

I have the jQuery function below that is meant to remove a class on window load and resize if the width is greater than 992 px and add a class if its less than 992px.
It seems to be working fine however the class stays added if i increase the window size from 992 to 1010px. At 1011px it is removed.
jQuery(document).ready(function($){
$(window).on('resize', function() {
if($(window).width() > 992) {
$('.bid-overlay-booking').removeClass('fancyboxID-booking');
}
else{
$('.bid-overlay-booking').addClass('fancyboxID-booking');
}
}).resize();
});

I wrestled with something similar a while back. Here was my kludge fix.
var windowHeight = 460;
var windowWidth = 800;
if (document.body && document.body.offsetWidth) {
windowHeight = document.body.offsetHeight;
windowWidth = document.body.offsetWidth;
}
if (document.compatMode == 'CSS1Compat' && document.documentElement && document.documentElement.offsetWidth) {
windowHeight = document.documentElement.offsetHeight;
windowWidth = document.documentElement.offsetWidth;
}
if (window.innerWidth && window.innerHeight) {
windowHeight = window.innerHeight;
windowWidth = window.innerWidth;
}
if(windowWidth > 992) {
$('.bid-overlay-booking').removeClass('fancyboxID-booking');
}
else{
$('.bid-overlay-booking').addClass('fancyboxID-booking');
}

Get css equivalent of "max-width: 600px" using JavaScript

This is a followup question to this quetsion: Get the device width in javascript.
What I'm trying to do, is get the equivalent css of #media (max-width: 600px) in JavaScript.
The accepted answer says to do the following:
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
Is that still correct? Will it work for all devices?
If it's correct, what's the point of checking (window.innerWidth > 0)?
I want to know if it still works. If you look at the last comment on the answer (with 6 upvotes) it says:
How does this have so many upvotes? var width = (window.innerWidth >
0) ? window.innerWidth : screen.width; returns 667 on iphone 6 AND 6
Plus. This solution does not work correctly.

You should be able to do something like this:
if (matchMedia) {
var mq = window.matchMedia("(max-width: 600px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
function WidthChange(mq) {
if (mq.matches) {
//Window width is less than or equal to 600px
} else {
//Window width is greater than 600px
}
}

From your question it seems you are asking for the following (It is a trivial answer but I assume this is what you are asking):
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
is equivalent to:
var width;
if (window.innerWidth > 0)
{
width = window.innerWidth;
}
else
{
width = screen.width;
}
or:
var width = screen.width;
if (window.innerWidth > 0)
{
width = window.innerWidth;
}
they all do the same thing...
from your comment below you may want the following jsFiddle:
(which shows "window.innerWidth" is what you want (size of containing element) - but some browsers don't support it - so "screen.width" becomes the fallback which may not be correct as it is the width of the whole window and not just the containing element)
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
$('#divOutput').html('The width is:' + width + 'px <br>' +
'window.innerWidth = ' + window.innerWidth + 'px & <br>' +
'screen.width = ' + screen.width + 'px');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divOutput"></div>
if that doesn't help maybe look at:
window.innerWidth can't work on IE7. How to fix via JS and jQuery?

Javascript: IE Full height

I have the following code to calculate the window width for a lightbox plugin from this site.
* getPageSize() by quirksmode.com
*
* #return Array Return an array with page width, height and window width, height
*/
function ___getPageSize() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
if(document.documentElement.clientWidth){
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
return arrayPageSize;
};
I noticed that in Internet Explorer 9, when I click on an image and the Lightbox plugin activates, the transparent back overlay only covers the VIEWABLE height and not the full height.
This creates a problem because, if I have another image with the modified Lightbox plugin and click below the transparent overlay, it opens another empty lightbox window at the top of the page and cannot be closed.
It works fine in Chrome, and Firefox.

MSIE Browser height?

Does anyone know how to get the browser height in IE7+ with javascript? I've seen several ways to get the document or the body height but this is not the same. window.innerHeight works fine in firefox and other browsers, but ie doesnt seem to support it. Thanks

var windowWidth = -1, windowHeight = -1;
if(typeof(window.innerWidth) == 'number') { //Non-IE
windowWidth = window.innerWidth;
windowHeight = window.innerHeight;
} else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { //IE 6+ in 'standards compliant mode'
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
}
That's worked pretty well for me.

To determine the actual size of the browser window, use the following properties:
Mozilla based browswers
window.innerWidth
window.innerHeight
Microsoft Internet Explorer
document.body.offsetWidth
document.body.offsetHeight
Here is some code that I use:
var winW = 630, winH = 460;
if (navigator.appName.indexOf("Microsoft") == -1) {
if (navigator.appName=="Netscape") {
winW = window.innerWidth;
winH = window.innerHeight;
}
if (navigator.appName.indexOf("Microsoft") != -1) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
}