We Keep Coding

Is there an easier way to get a tight, no-scroll responsive mobile layout than this?

I'm working on a simulation of the famous Prague astronomical clock. It's only partially done, but the work-in-progress can be seen here: https://shetline.com/orloj/
The page layout consists of an SVG image of the clock, plus a control panel for setting date, time, longitude, and latitude. The clock needs to expand to fill available space. The control panel is close to a fixed size, but can shrink a bit for smaller displays.
What I want (and I think should be MUCH easier to do) is for the contents of the web page to display nicely and neatly like this:
The tricky thing has been getting the layout to use available space well, but without needing to be scrolled, and without any components being clipped or hidden. What was especially difficult was automatically sizing things regardless of whether "chrome" (i.e. address and navigation bars) was being displayed or not.
Simple solutions only worked partially for me -- the user might have to pinch and scroll to get things right, manually hide toolbars, forcibly refresh after changing from landscape to portrait orientation, etc.
These are the difficulties I ran into:
With mobile browsers like Safari, 100vh was taller than window.innerHeight, so if I scaled using vh units, parts of what I wanted to display would be cut off until the user manually hid the toolbars. In desktop browsers, however, 100vh and window.innerHeight were always in sync.
Orientation changes weren't consistently reported. Safari didn't generate any resize events when the orientation of my phone was changed, only now-deprecated orientationchanged events. On one Android tablet I experimented with, orientation changes produced no browser events at all that I was aware of at all.
When the orientation changed, window.screen.width and window.screen.height weren't swapped as I would have expected... unless I was using the Chrome console responsive layout test.
After receiving resize or orientationchanged events, some of the values I needed to check like window.innerHeight weren't "settled" yet, so I needed to use setTimeouts to recheck if values changed over time.
When a user manually zooms into the display, the zoom state is sort of "sticky" and can keep the layout from returning to the preferred state after orientation changes.
All of this meant coming up with a bunch of ad hoc hackery to get the results I wanted. But this seems like such a basic result kind of layout effect to want to get, I can't help but wondering if I've made this much harder than it should be, and there isn't a much easier solution that I'm missing.
Here's the code I used to solve this layout:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
:root {
--mfh: 100vh; // mobile full height
--mvh: 1vh; // mobile vh-like unit
}
html {
height: 100%;
margin: 0;
overflow: hidden;
width: 100%;
}
body {
background-color: #4d4d4d;
font: 14px sans-serif;
height: var(--mfh);
left: 0;
margin: 0;
position: absolute;
top: 0;
width: 100vw;
}
// Get scrolling, zooming, and panning back if display is very small:
#media screen and (orientation:landscape) and (max-height: 340px),
screen and (orientation:landscape) and (max-width: 630px),
screen and (orientation:portrait) and (max-width: 360px),
screen and (orientation:portrait) and (max-height: 740px)
{
html {
overflow: auto;
}
body {
position: static;
}
}
const docElem = document.documentElement;
const doResize = (): void => {
setTimeout(() => {
const height = window.innerHeight;
const disallowScroll = docElem.style.overflow === 'hidden';
docElem.style.setProperty('--mfh', height + 'px');
docElem.style.setProperty('--mvh', (height * 0.01) + 'px');
if (this.lastHeight !== height) {
this.lastHeight = height;
if (disallowScroll && (docElem.scrollTop !== 0 || docElem.scrollLeft !== 0)) {
docElem.scrollTo(0, 0);
setTimeout(doResize, 50);
}
else
this.updateGlobe();
}
});
};
let lastW = window.innerWidth;
let lastH = window.innerHeight;
const poll = (): void => {
const w = window.innerWidth;
const h = window.innerHeight;
const disallowScroll = docElem.style.overflow === 'hidden';
if (lastW !== w || lastH !== h || (disallowScroll && (docElem.scrollTop !== 0 || docElem.scrollLeft !== 0))) {
lastW = w;
lastH = h;
doResize();
}
setTimeout(poll, 100);
};
poll();
doResize();
Full code is here: https://github.com/kshetline/prague-clock

How to run a jQuery Function in smaller width?

I want to do a something in a smaller width of screen But I have a problem. I'm creating a Responsive Navbar, So I want to show a Button when It is in small width & toggling the Menu. But when I hide the Menu in smaller width, It doesn't show the Menu in wider width Because of Hiding in jQuery ...
So I wanted to make jQuery Codes run JUST in smaller width, I wrote this But It doesn't work :
$(window).resize(function() {
if($(window).width() < '48em') {
$('.ji-toggle-btn').click(function() {
$(this).parent().find('ul').toggle();
});
}
});

The proper way to show/hide a button is with a media query in CSS:
.css example:
.ji-toggle-btn {
display: none;
}
#media (min-width: 48em) {
.ji-toggle-btn {
display: block;
}
}
.scss example:
.ji-toggle-btn {
display: none;
#media (min-width: 48em) {
display: block;
}
}
I mocked up a sample of how to do a responsive sidebar:
http://codepen.io/staypuftman/pen/dGOMYO
What you'll notice in this example is how little JS is used. Targeting a .toggle class and using css transitions will get you where you want to go. You're overthinking this approach with the JS.

Your problem is that you're assigning a behavior on smaller resolution. You practically want to assign a click event only when the window size is smaller than 48 em.
With simple words - just remove the click event:
$(window).resize(function() {
if($(window).width() < '48em') {
$('.ji-toggle-btn').parent().find('ul').toggle();
}
});
EDIT I agree with the guy above about the CSS. Those things basically should be done with media queries.

$(window).width() returns an int (screen width in pixels). In order to get that value in ems you need to divide that buy the body's font-size, then compare that with just '48' not '48em'. For example:
$(window).resize(function() {
if(($(window).width() / parseFloat($("body").css("font-size"))) < 48) {
// Do stuff here...
}
});

zslider javascript should work only in screen resolution below 768px

i want to use zslider javascript in my website, but can any one tell me how to make it work only in screen resolution below 768px
Here is the zslider script link:
http://www.cssscript.com/demo/mobile-friendly-content-carousel-slider-with-pure-javascript-zslider/

Use media queries to show slider content below 768px:
#media (min-width: 768px) {
.z-slide-wrap {
display: none;
}
}
Than use JavaScript to initialize slider only if width is below 768px:
if (window.innerWidth <= 768) {
var slider1 = new Slider('#demo', '.z-slide-item', {
// OPTIONS HERE
});
}

CSS Media Query and Javascript/jQuery don't match up

In my CSS I have a media query like so:
#media (min-width: 800px) { /* styles */ }
And then in my jQuery, I'm targeting the window width and performing some actions.
Edit: as per the answers below, I have changed this function but my JS and CSS still didn't align. The problem was fixed by using the Modernizr function as specified in the accepted answer.
$(window).resize(function() {
var viewportWidth = $(window).width();
if (viewportWidth >= 800) {
// do something
}
});
The problem is that while the jQuery is executing bang on 800px or more, the CSS is kicking in at 740px.
Is there a known problem with these not aligning? Or could there be something on my page affecting the CSS and why it's 740px not 800px? Maybe there's something else I should be using instead of $(window)?
Edit: I've tested in Safari and it works perfectly. In Chrome and Firefox, the jQuery functions run spot on to 800px and so does the CSS. But in Chrome, the CSS actually runs after 740px, even though the media query is 800px - how can I get these to align perfectly?

You can use Modernizr to execute the media query in JS (the mq() method will return a boolean):
$(window).resize(function() {
if (Modernizr.mq('(min-width: 800px)')) {
// do something
}
});

Move your width check, or else the viewportWidth variable will always be the same thing:
$(window).resize(function() {
var viewportWidth = $(this).width();
if (viewportWidth >= 800) {
// do something
}
});

Valid code would be:
$(window).resize(function() {
var viewportWidth = $(window).width();
if (viewportWidth >= 800) {
// do something
}
});
Everytime window resizes the new value will be stored in viewportWidth variable. In your code viewportWidth gets the only value of the $(window).width() when the page was loaded.

What I just tried, and it seems to work, is to use the CSS media query to style an object, and then use javascript to test if the object has that style. Javascript is asking CSS what the answer is, rather than having two parts of the page determine it separately:
CSS:
#media (min-width: 800px) {
#viewType {width:3px;}
}
HTML :
<div id="viewType" style="display:none"></div>
JavaScript:
var answer = ($("#viewType").width()==3)

I agree with Steve answer. the jquery(window).width(); is does not match with the media queries and even doesn't provide accurate window width size. here is my answer taken from Steve and modified.
CSS :
#media (max-width: 767px) {
//define your class value, anything make sure it won't affect your layout styling
.open {
min-width: 1px !important;
}
}
.open {
min-width: 2px;
}
Js :
// when re-sizing the browser it will keep looking for the min-width size, if the media query is invoked the min-width size will be change.
$(window).on('resize orientation', function() {
var media = $('.open').css('min-width');
if( media == '1px') // means < 767px
{
// do your stuff
}
});
That's it~ hope it help.

Change CSS Based on Mobile Orientation

What is the best approach to change a css file when a mobile application page orientation changes from landscape to portrait and vice versa. I need to suport both Android and iPhone only. It seems media queries aren't the cleanest way, any other ideas?

Example
/* For portrait */
#media screen and (orientation: portrait) {
#toolbar {
width: 100%;
}
}
/* For landscape */
#media screen and (orientation: landscape) {
#toolbar {
position: fixed;
width: 2.65em;
height: 100%;
}
p {
margin-left: 2em;
}
}
For more details see here

The below JQuery code seems to work best for me...the binding examples did not.
$(document).ready(function() {
$(window).resize(function() {
alert(window.orientation);
});
});

First give your style sheet include line an id="cssElement" or something.
Then Using jQuery:
$(document).ready(function(){
// The event for orientation change
var onChanged = function() {
// The orientation
var orientation = window.orientation;
if(orientation == 90) {
$('#cssElement').attr('href', '/path/to/landscape.css');
} else {
$('#cssElement').attr('href', '/path/to/portrait.css');
}
};
// Bind the orientation change event and bind onLoad
$(window).bind(orientationEvent, onChanged).bind('load', onChanged);
});

You can use window.onorientationchange event.