Develop Reference

Why wont my navbar collapse when on mobile on page load

I'm trying to collapse the navbar when on mobile but the navbar only collapses when i resize the tab manualy. So it probably has something to do with it not checking the size of the screen when starting up the site. I've already tried some stuff with addeventlisteners but i just keep getting errors because op unexpected tokens. my original code was:
function openNav() {
document.getElementById("mySidebar").style.width = "190px";
document.getElementById("main").style.marginLeft = "190px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
var x = window.matchMedia("(max-width: 600px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
function myFunction(x) {
if (x.matches) { // If media query matches
closeNav()
}
}
after asking some people for help i eventualy started to mess around with this:
var x = window.matchMedia("(max-width: 600px)")
x.addEventListener("change", () => {
myFunction(x);
});
and
window.addEventListener('resize', ()=>{
var x = window.matchMedia("(max-width: 600px)")
if (x.matches) { // If media query matches
closeNav()
}
});
I have been awake for hours and i know it's probably something stupid.

Instead of JavaScript you can use CSS #media-queries like:
#media only screen and (min-width:0px) and (max-width: 767px)
{
'your style here'
}
#media only screen and (min-width:768px) and (max-width: 1024px) and (orientation: portrait)
{
'for tablet portrait view'
}
#media only screen and (min-width:768px) and (max-width: 1024px) and (orientation: landscape)
{
'tablet view landscape'
}
Also please don't forget to add viewport meta tag in your page section.
meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3"
(keep above meta tag inside < /> )
view port meta tag will read your browser resizing and you can achieve to response web layout, show and hide elements in specific device sizes etc.

mobile responsive form not working

On my mobile responsive website Registration page, The registration form is moved from its original position on PC to a different position on Phone/Mobile deviece.. The re positioned form does not work (I cant input in value or text)
(Works fine on iphone 5 and other phones excluding chrome on Iphone 6)
<script type="text/javascript">
$(document).ready(function(){
if ($(window).width() <= 767){
$('#side-content').insertAfter('#mobilePos').css;
} else {
$('#side-content').insertAfter('#desktopPos').css;
}
});
$(window).resize(function(){
if ($(window).width() <= 767){
$('#side-content').insertAfter('#mobilePos').css;
} else {
$('#side-content').insertAfter('#desktopPos').css;
}
});
</script>

I think you just want to move the form. So just put it with this code.
$('#side-content').insertAfter('#mobilePos');
Css function only to style element with jquery.
CMIIW.

Use this code:
$(document).ready(function(){
$(window).load(function(){
if ($(window).width() <= 767){
$('#side-content').insertAfter('#mobilePos');
} else {
$('#side-content').insertAfter('#desktopPos');
}
});
$(window).resize(function(){
if ($(window).width() <= 767){
$('#side-content').insertAfter('#mobilePos');
} else {
$('#side-content').insertAfter('#desktopPos');
}
});
});

Use Css Media Query
#media (min-width: 768px) and (max-width: 1100px) {
User Css Code For min - desktop Screen resolution
}
#media (min-width: 480px) and (max-width: 767px) {
User Css Code For Tab Screen resolution
}
Same for mobile screen and you want any ohter screen like smart tv & more ..

$(window).resize(); not working as expected [duplicate]

This question already has answers here:
$(window).resize(); doesn't work
(5 answers)
Closed 7 years ago.
I want on set of functionality to be used on screen sizes larger than 768px and another set to be used on everything smaller than that. I need the .resize() so I can know when a user is turning their tablet or phone between landscape and portrait views.
The code on the inside of the .resize() event works fine if i refresh the page but it's as if the event isn't being triggered. Any thoughts?
<script>
jQuery(document).ready(function($){
function mobileFilterMenu(){
var screenTest = $(window).width();
if (screenTest >= 769){
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop(),
elementOffset = $('.inventory-search > .col-md-9').offset().top,
distance = (elementOffset - scrollTop);
if(distance <= 0){
$('.filter-form').css('top', Math.abs(distance));
}else{
$('.filter-form').css('top', 0);
}
});
}else{
var vHeight = $(window).height() - $('#switch').height() - $('#primary-menu-toggle').height();
$('.filter-form').css('height', vHeight + 'px');
vTextHeight = vHeight - 20;
$('.wpv-filter-form').css('height', vTextHeight + 'px');
objNegHeight = (vHeight * -1) + 50;
$('.filter-form').css('top', objNegHeight + 'px');
var i;
$('#switch').click(function(){
if (i === 0){
$('.filter-form').css('top', objNegHeight + 'px');
i++;
}else{
$('.filter-form').css('top', '50px');
i = 0;
}
});
}
}
mobileFilterMenu();
$(window).resize(mobileFilterMenu());
});
</script>

Just change this part of your code. This should fix your problem.
$(window).resize(mobileFilterMenu);
Instead of passing mobileFilterMenu(), pass this mobileFilterMenu
The parameter inside the $window.resize should have a function not a function call.
Hope this solves your issue.

You should use media queries to apply CSS based on viewport dimensions not code!
Media queries enable us to create a responsive experience, where
specific styles are applied to small screens, large screens and
anywhere in between. The media query syntax allows for the creation of
rules that can be applied depending on device characteristics.
#media (query) {
/* CSS Rules used when query matches */
}
While there are several different items we can query on, the ones used
most often for responsive web design are min-width, max-width,
min-height and max-height.
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
<style>
#media (min-width: 500px) and (max-width: 600px) {
h1 {
color: fuchsia;
}
.desc:after {
content:" In fact, it's between 500px and 600px wide.";
}
}
</style>
https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en#apply-media-queries-based-on-viewport-size

Different measurement between #media querys and jquery

I notticed when resizing the window, that the effects applied from the responsive #media querys and the effects applied from the jQuery are not at the same point of width.
Is is dued to the browser? Is there a solution for that, or a way to calculate the difference between CSS and JS?
My CSS:
#media only screen
and (min-width : 768px)
and (max-width : 1024px) { }
My jQuery:
$(document).ready(function(){
if($(this).width() < 1024 && $(this).width() > 768) {
} else {
}
$(window).on('resize', function(){
if($(this).width() < 1024 && $(this).width() > 768) {
} else {
}
});
});
To avoid this difference at the moment, my solution is something like that: I have a #selector declared with the display:none when it's between 768px and 1024px. Then, in the jQuery code, instead of using the size < 1024 and > 768 I'm using this:
if($("#selector").is(":hidden")) { }
But, is there a better way to combine width from the #media querys and the jQuery without differences? Thanks.
UPDATE: I already found a solution explained here: https://stackoverflow.com/a/11310353/3018860. That occurs because «the CSS is using the device width, but the JS is using the document width».

CSS media queries and jQuery window .width() do not match

For a responsive template, I have a media query in my CSS:
#media screen and (max-width: 960px) {
body{
/* something */
background: red;
}
}
And, I made a jQuery function on resize to log the width:
$(window).resize( function() {
console.log( $(window).width() );
console.log( $(document).width() ); /* same result */
/* something for my js navigation */
}
And there a difference with CSS detection and JS result, I have this meta:
<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" name="viewport"/>
I suppose it's due to the scrollbar (15 px). How can I do this better?

You're correct about the scroll bar, it's because the CSS is using the device width, but the JS is using the document width.
What you need to do is measure the viewport width in your JS code instead of using the jQuery width function.
This code is from http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
function viewport() {
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

I found following code on http://www.w3schools.com/js/js_window.asp:
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
Practically its working the same way as the answer in #Michael Bird's answer, but it's more easy to read.
Edit: I was looking for a method to give exactly the same width as it is used for css media queries. But the suggested one does not work perfect on Safari with scrollbars, sorry. I ended up using modernizr.js in one central function and in the rest of the code I just check if display type is mobile, tablet or desktop. As I am not interested in the width, this works fine for me:
getDisplayType = function () {
if (Modernizr.mq('(min-width: 768px)')){
return 'desktop';
}
else if (Modernizr.mq('(min-width: 480px)')){
return 'tablet'
}
return 'mobile';
};

window.innerWidth is what you need.
if (window.innerWidth < 768) works for 768 break point in CSS

Workaround that always works and is synced with CSS media queries.
Add a div to body
<body>
...
<div class='check-media'></div>
...
</body>
Add style and change them by entering into specific media query
.check-media{
display:none;
width:0;
}
#media screen and (max-width: 768px) {
.check-media{
width:768px;
}
...
}
Then in JS check style that you are changing by entering into media query
if($('.check-media').width() == 768){
console.log('You are in (max-width: 768px)');
}else{
console.log('You are out of (max-width: 768px)');
}
So generally you can check any style that is being changed by entering into specific media query.

My experience was that the media query width tracks document.body.clientWidth. Because of a vertical scroll bar coming and going, checking document, window, or viewport().width could cause my Javascript to run late--after the media query rule change, depending on the height of the window.
Checking document.body.clientWidth allowed my script code to execute consistently at the same time the media query rule took effect.
#media (min-width:873px) {
//some rules
}
...
if ( document.body.clientWidth >= 873) {
// some code
}
The Andy Langton code put me onto this--thanks!

Hi i use this little trick to get JS and CSS work together easily on responsive pages :
Test the visibility of an element displayed or not on CSS #media size condition.
Using bootstrap CSS i test visibility of a hidden-xs class element
var msg = "a message for U";
/* At window load check initial size */
if ( $('#test-xsmall').is(':hidden') ) {
/* This is a CSS Xsmall situation ! */
msg = "#media CSS < 768px. JS width = " + $(window).width() + " red ! ";
$('.redthing-on-xsmall').addClass('redthing').html(msg);
} else {
/* > 768px according to CSS */
msg = "#media CSS > 767px. JS width = " + $(window).width() + " not red ! ";
$('.redthing-on-xsmall').removeClass('redthing').html(msg);
}
/* And again when window resize */
$(window).on('resize', function() {
if ($('#test-xsmall').is(':hidden')) {
msg = "#media CSS < 768px. JS width = " + $(window).width() + " red ! ";
$('.redthing-on-xsmall').addClass('redthing').html(msg);
} else {
msg = "#media CSS > 767px. JS width = " + $(window).width() + " not red ! ";
$('.redthing-on-xsmall').removeClass('redthing').html(msg);
}
});
#media (min-width: 768px) {
.hidden-xs {
display: block !important;
}
}
#media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
}
.redthing-on-xsmall {
/* need a scrollbar to show window width diff between JS and css */
min-height: 1500px;
}
.redthing {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- the CSS managed Element that is tested by JS -->
<!-- class hidden-xs hides on xsmall screens (bootstrap) -->
<span id="test-xsmall" class="hidden-xs">THIS ELEMENT IS MANAGED BY CSS HIDDEN on #media lower than 767px</span>
<!-- the responsive element managed by Jquery -->
<div class="redthing-on-xsmall">THIS ELEMENT IS MANAGED BY JQUERY RED on #media max width 767px </div>

Css media query is equal to window.innerWidth. Css Media Queries calculate the scrollbar as well.

The simple and reliable way of doing this is to use Media Queries.
To demonstrate, I want to check if the screen width is greater than or equal to 992px (Bootstrap's large device):
function isLargeDevice() {
if (window.matchMedia("(min-width: 992px)").matches) {
return true;
}
return false;
}
If you are using Modernizer then it's a bit easier, here I want to check if the screen is smaller than Bootstrap's large screen (992px)
function isSmallerThanLargeScreen() {
if (Modernizr.mq('(max-width: 991px)')) {
return true;
}
return false;
}