JQuery conditions based on "screen width" - javascript

I am super new to Javascript/JQuery, and I'm having trouble figuring out how to do this. I want to add it to a responsive site that I am working on in class.
I have a hamburger menu set up that hides/shows my menu, which works great. The thing is I only want the Javascript to run on a screen width of 414px or less. My menu is to be hidden until I click the hamburger.
For screens 415px, and above I don't want it to hide my menu, or show the hamburger and "X". I can hide the "X" and the hamburger easily enough with media queries if needed, but I still need my menu to display.
I tried to add an event loader, but must have done something wrong, as everything turned on (X, hamburger, & menu), and clicking did nothing. Please help me figure out how to make this work. I am super green at this, so any pointer would be greatly appreciated. Thanks ahead of time
// Hamburger menu
$(document).ready(function () {
$(".cross").hide();
$(".menu").hide();
$(".hamburger").click(function () {
$(".menu").slideToggle("slow", function () {
$(".hamburger").hide();
$(".cross").show();
});
});
$(".cross").click(function () {
$(".menu").slideToggle("slow", function () {
$(".cross").hide();
$(".hamburger").show();
});
});
});

You can use Jquery width() to get the current page width, and use it as a condition.
$(document).ready(function() {
WindowWidth = $(window).width();
if (WindowWidth < 415){
do logic...
}
else {
do other logic...
}
}
But remember that people often resize their screens so you need to handle that as well.
$(window).resize(function () {
WindowWidth = $(window).width();
if (WindowWidth < 415){
do logic...
}
else {
do other logic...
}
}

Based on #m4dm0nk3y
I usually extract the common code in a function and call it on ready, and then on resize.
function alignStuff() {
WindowWidth = $(window).width();
if (WindowWidth < 415) {
console.log('small');
} else {
console.log('large');
}
}
$(document).ready(function() {
alignStuff();
})
$(window).resize(function() {
alignStuff();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Related

jQuery: unwanted behavior of my drop down menu (desktop and mobile)

I've built a dropdown with jQuery and some css / scss. It works at first glance, but there are always errors that I think are due to jQuery code or unnecessary CSS rules. I'm just not sure which of them ..
You can see the current status here. The said dropdown menu is the item "Leistungen" in the Navbar:
https://www.s-wat.de
Especially in the mobile viewport errors appear. If I open the dropdown here and in the opened state click on another point (for example "Kontakt") and then on "Leistungen" again, there is an unwanted fadeIn fadeOut effect. The dropdown will open and close first, before I can open it normally.
Here is my jQuery code:
(function($) {
"use strict"; // Start of use strict
// Closes responsive menu when a scroll trigger link is clicked
$('.first .js-scroll-trigger, .last .js-scroll-trigger, .dropdown-menu .js-scroll-trigger').click(function() {
$('.navbar-collapse').collapse('hide');
if (!$('.dropdown-menu').hasClass('show')) {
$('.dropdown-menu').fadeOut('slow');
}
$('.dropdown-menu').removeClass('show');
$('.dropdown').removeClass('show');
});
var navbarBehave = function(){
if ($(window).width() < 992){
$('.dropdown-toggle').click(function() {
if (!$('.dropdown-menu').hasClass('show')) {
$('.dropdown-menu').fadeIn('slow');
}else{
$('.dropdown-menu').fadeOut('slow');
}
});
}else{
$('.dropdown-toggle').hover(function() {
if (!$('.dropdown-menu').hasClass('show')) {
$('.dropdown-menu').fadeIn(300);
}else{
$('.dropdown-menu').fadeOut(300);
}
});
}
}
navbarBehave();
$(window).resize(function(){
navbarBehave();
});
})(jQuery); // End of use strict

Bad idea: Responsive menu with resize()?

Is it a bad idea to use jquery's resize() event to toggle an responsive menu?
Okay it's actually not an menu but the idea is almost the same:
I have an sidebar with 4 boxes with different informations. Below a specific device-width I move the sidebar to another place. Now each box is hidden and a <selection> shows up. When the selection changes it'll show the selected box.
$("#my_selection").change(function () {
$.each(all, function () { // "all" are just my boxes
$(this).hide();
});
var val = "#my_box_" + $(this).val();
$(val).show();
});
I hope the concept is clear so far.
So but what happens when the user resizes the window? (aka changing orientation on mobile devices) Right:
Reducing width: Hide boxes
Increasing width again: Boxes are still missing
So.. that sucks. That's my solution:
$(window).resize(function () {
currentDisplay = $('#my_selection').css('display');
if (currentDisplay == lastDisplay)
return;
lastDisplay = currentDisplay;
if (currentDisplay == "none") {
$.each(all, function () {
$(this).show();
})
} else {
$.each(all, function () {
$(this).hide();
})
}
});
But I kinda have the feeling that this is a bit hacky, no? So - are there better solutions for this problem?
Here a simple sketch showing the design I've tried to explain.

Dreaded 100% Sidebar Height - jQuery Fix, but another issue arises

So I'm currently coding a UI and it's responsive so the sidebar has to be position: absolute to get 100% height.
I used jQuery to fix the height issue for pages extending further then the original 100% of the page.
Here is the jQuery:
<script>
if (document.documentElement.clientWidth > 959) {
$(document).ready(function () {
$(window).resize(function () {
var bodyheight = $(document).height();
$(".site-sidebar").height(bodyheight);
});
$(window).ready(function () {
var bodyheight = $(document).height();
$(".site-sidebar").height(bodyheight);
});
});
}
</script>
Now.. The issue is with a page that has tabs and the last tab is longer then the "active" tab so the height isn't be adjusted correctly.. So when you click the last tab theres a white space below the sidebar.
Heres a screenshot of what I mean: https://www.dropbox.com/s/i64vm9pf15kqlo1/Screenshot%202015-02-17%2016.20.46.png?dl=0
I think I need to adjust the code so that when a tab is clicked, it will "reload" that script. However, my jQuery is limited and don't know how to go about it. Please help :) I will love you forever.
<script>
function resizeSidebar() {
if (document.documentElement.clientWidth > 959) {
var bodyHeight = $(document).height();
$(".site-sidebar").height(bodyHeight);
}
}
$(document).ready(function() {
resizeSidebar();
}
</script>
If you're using jQuery UI's tabs, add this:
$( ".selector" ).on( "tabsactivate", function( event, ui ) { resizeSidebar(); } );
Replacing .selector with what's appropriate for your HTML. Otherwise, you'll need to bind resizeSidebar to the click event of your tabs.

only want my function to take place on larger screens when it is no longer a mobile device

Im having trouble getting this to work, so obviously i'm doing something wrong... I created a fade-in hover state on the submenus of my menu, which works perfectly, but when I scale down to mobile view the effect is still relevant, which I do not want as mobile devices don't have hover state. so I rapped my function in a jquery(window).resize function but then it does not work at all.
jQuery(window).resize(function() {
var w = jQuery(window).width();
if (w <= 768 ) {
jQuery('nav.main-nav li').each(function() {
var submenu = jQuery(this).find('ul:first');
jQuery(this).hover(function() {
submenu.css({opacity: 1});
submenu.stop().css({overflow:'hidden', height:'auto', display:'none'}).fadeIn(300, function() {
jQuery(this).css({overflow:'visible', height:'auto', display: 'block'});
});
},
function() {
submenu.stop().css({overflow:'hidden', height:'auto', display:'none'}).fadeOut(300, function() {
jQuery(this).css({overflow:'hidden', display:'none'});
});
});
});
}
});
Instead of using jQuery(window).width();,
try using document.documentElement.clientWidth

Unload jquery function if window resize

I try to unload function if browser window less than 944px. I start to write this
$(window).resize(function() {
if ($(window).width() >= '944') {
$(window).load(function() {
$('#slider').nivoSlider();
});
} else {
alert($(window).width());
if ($(window).width() <= '944') {
$(window).unload(function() {
$('#slider').nivoSlider();
});
}
}
});
but i stuck. I want if the user enters, verify resolution and if more than 944px to load jquery function, however if browser is resize or less resolution than 944px, function will be unload.
i have a different solution for your problem; you can prepare a new slider mask (just like slider but without nivoSlider functions) for <944px window width, when browser width <944px niveSlider will be hide and your mask will be seen.
check it out:
$(window).resize(function() {
windowWidth = $(this).width();//you need to use this for changable values
if ( windowWidth > 943) {
$('#sliderMask').hide();
$('#slider').show();
$(window).load(function() {
$('#slider').nivoSlider();
});
} else if ( windowWidth < 944) {
$('#slider').hide();// hide your nivoSlider
$('#sliderMask').show();// show your basic slider mask
}
});
please note that: you need to use $(this) to get current value.
here is jsfiddle example for you; check the console log from your browser's developer panel

Categories