Javascript Media Query no responding - javascript

So I am building a website, I have some custom menus that use HTML and JS. when the menu is open it is 25% of the screen:
function opensideNav() {
document.getElementById("mySidenav").style.width = "25%";
}
//Closes Right sidenav
function closesideNav() {
document.getElementById("mySidenav").style.width = "0";
}
If i use
var mq = window.matchMedia( "(min-width: 1023px)" );
if (mq.matches) {
function opensideNav() {
document.getElementById("mySidenav").style.width = "25%";
}
//Closes Right sidenav
function closesideNav() {
document.getElementById("mySidenav").style.width = "0";
}
} else {
function opensideNav() {
document.getElementById("mySidenav").style.width = "100%";
}
//Closes Right sidenav
function closesideNav() {
document.getElementById("mySidenav").style.width = "0";
}
}
It will only open the menu on a smaller screen than 1023.... I have tried changing the min to max but still the same problem. Pls help :)

Why not just use CSS media queries for this? you can do:
function toggleNav() {
document.getElementById("mySidenav").classList.toggle("open");
}
in your JavaScript which toggles the open class on and off, this needs to be attached to whatever it is you're clicking to toggle the menu.
Then in your CSS you can do:
#mySidenav {
width: 0;
}
#mySidenav.open {
width: 100%;
}
#media screen and (min-width: 1023px) {
#mySidenav.open {
width: 25%;
}
}
So what this is doing is the function in the JS is toggling the open class on and off of the mySidenav element when clicked. By default the CSS is giving mySidenav a width of 0, then overriding that when the open class is applied. This also looks at the width of the viewport and changes what the width being applied is based on that.
Note your open nav button would be something like:
<button onclick="toggleNav()">Menu</button>

You misunderstood min-width. min-width in the context of media queries means that it will be applied if the viewport is having a minimum width of the given value. However, you intend to query by the width of the device, so min-width and max-width are not really helpful for your purpose. You will need to use min-device-width and max-device-width, respectively to query the width of the device instead of the width of the viewport.

Related

Disable CSS transition when phone changes orientation (landscape/portrait)

On my page I have a:
<div id="id_modal_background"></div>
that is between a modal login window and a background image. It's task is to (a) blur the background image once the modal login window is shown and (b) dismantle the blur when modal login window is closed.
In order for the blur to look nice it needs transition time of 1s, which is set in CSS like this:
#id_modal_background{
z-index: 2;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
transition: 1s;
}
But this transition time gives me side effects on phones where change of the orientation from landscape to portrait (but not vice versa) needs 1s to redraw the blur. And it doesn't looks nice.
I am using this function to draw (id_modal_background_visibility(1)) or dismantle (id_modal_background_visibility(0)) the blur:
function id_modal_background_visibility(a){
let r = '';
let m = document.getElementById('id_modal_background');
switch(a){
case 0:
r = 'OFF';
// In order to reference "backdrop-filter" we camelcase it!
m.style.backdropFilter = 'blur(0px) grayscale(0)';
m.style.visibility = 'hidden';
break;
case 1:
r = 'ON';
// In order to reference "backdrop-filter" we camelcase it!
m.style.visibility = 'visible';
m.style.backdropFilter = 'blur(15px) grayscale(0.25)';
break;
default:
r = 'ERROR';
m.style.visibility = 'hidden';
break;
}
console.log('Modal background visibility: ' + r);
}
If anyone can help me to remove the transition time that happens at any kind of orientation change, but keep the transition time otherwise, I would be more than happy.
You can make use of css media queries
#media (orientation: landscape) {
}
Read more here How to set portrait and landscape media queries in css?
You can manage your code like below :
window.addEventListener("orientationchange", function() {
if(window.innerHeight > window.innerWidth){
console.log("Portrait");
} else {
console.log("Landscape");
}
}, true);
And you can apply CSS class accordingly. Also media query CSS is a possible way for your problem.

Position displacement when toggling several overflow-y Elements

I have a problem which I don't know how to solve, hopefully someone here can shed some light into it.
I have a very simple layout (JSBin) with a horizontally centered header, some content to experience vertical scrolling, a sticky footer and an off-canvas navigation menu. I want to prevent the user from scrolling the page when the sidebar is opened, I'm doing that by toggling a class on the <html> tag:
$('button').click(function () {
$('html').toggleClass('sidebar');
});
The .sidebar class will transition the sidebar into view and disable scrolling on the content:
html {
overflow-y: scroll; /* default state, always shows scrollbar */
}
html.sidebar {
overflow-y: hidden; /* hides scrollbar when .sidebar is on canvas */
}
html.sidebar aside {
-webkit-transform: translate3d(-100%, 0, 0); /* places .sidebar on canvas */
}
The problem is, it displaces every element in the page by whatever width the <html> scrollbar had.
Is there any way to prevent this shift in position (preferably without resorting to Javascript)?
Here's the JSBin editor in case you need to peek at the code.
Update: Seems that Javascript isn't an option, the scroll width calculation is not reliable at all.
You can toggle the margin-right of .container to compensate for the change in width
$(function () {
$('button').click(function () {
var marginR = $(".container").css("margin-right") == sWidth+"px" ? "auto" : sWidth;
$(".container").css("margin-right", marginR);
$('html').toggleClass('sidebar');
});
});
function getScrollbarWidth() {
var outer = document.createElement("div");
outer.style.visibility = "hidden";
outer.style.width = "100px";
outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps
document.body.appendChild(outer);
var widthNoScroll = outer.offsetWidth;
// force scrollbars
outer.style.overflow = "scroll";
// add innerdiv
var inner = document.createElement("div");
inner.style.width = "100%";
outer.appendChild(inner);
var widthWithScroll = inner.offsetWidth;
// remove divs
outer.parentNode.removeChild(outer);
return widthNoScroll - widthWithScroll;
}
var sWidth = getScrollbarWidth();
Demo
Scrollbar width calculation taken from this answer
I can't find a CSS solution that works reliably. However, I'm having success with the following Javascript:
window.onload=function(){
document.body.style.paddingLeft = (window.innerWidth - document.body.clientWidth);
document.body.onclick=function(){
document.body.style.paddingLeft = (window.innerWidth - document.body.clientWidth);
}
}
I haven't analyzed yet what the processing impact is for running this code each and every time somebody clicks on my site (it's probably ugly), but it works.

Detect if webapp is in landscape orientation and add padding-top

What I want the script:
-detect if site is in standalone app
-detect if site is in landscape
-add padding-top to header
if (window.navigator.standalone == true && window.innerWidth > window.innerHeight){
$('header').css('padding-top','20px');
}
Use media queries for device-conditional layout:
#media screen and (orientation:landscape) {
header {
padding-top:20px;
}
}
If the standalone property is really important, detect it in Javascript and add a class to the body:
if (window.navigator.standalone == true)
$('body').addClass('standalone');
Then use it in your CSS to apply extra requirements:
.standalone header {
padding-top:20px; /* only applied if standalone */
}
You can of course combine the media query with this.
I figured it out
if (window.navigator.standalone){
$(window).resize( function(){
var height = $(window).height();
var width = $(window).width();
if(width>height) {
// Landscape
$('header').css('padding-top','20px');
}
else{
$('header').css('padding-top','0px');
}
});
}

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.

Firefox 3.6 video full screen control

Firefox now supports full screen mode on the video html5 tag. ( right click on the movie .. )
Is there any way to create a control ( html tag ) to do this like this play/pause example ( using js ) ?
<script>
function play(){
var video = document.getElementById('movie');
var play = document.getElementById('play');
play.addEventListener('click',playControl,false);
function playControl() {
if (video.paused == false) {
video.pause();
this.firstChild.nodeValue = 'Play';
pauseCount();
} else {
video.play();
this.firstChild.nodeValue = 'Pause';
startCount();
}
}
}
basically all you need is creating a function (triggered by a fullscreen button) in which you assign a position: absolute, and an higher z-index to the video wrapper
the you will assign both video and video wrapper width and height : 100% (or fixed size if you prefer)
probably the best way to achieve this behaviour is defining a class (e.g. fullscreen) and assign it to the container, something like
.fullscreen {
position : absolute;
z-index : 1000;
width : 100%;
height : 100%;
top : 0;
left : 0;
}
.fullscreen video {
width : 100%;
height : 100%;
}
so the function call (fullscreen/normal view) is a switch for the .fullscreen class.

Categories