I have a bootstrap sidebar that can be toggled into a narrow icon bar, and now I am required to show the sidebar when screen height is greater than 768, and to a narrow side bar when height is lower than 768. But my script appears to be triggering a click event when lower than 768, therefore if I resize the screen multiple times, and when height reaches lower than 768, it continuously toggles the sidebar multiple times. If the height reaches greater than 768, the toggling stops.
My code is:
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
$("span", this).toggleClass("fa fa-lock fa fa-unlock");
});
$("#menu-toggle-2").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled-2");
$("span", this).toggleClass("fa fa-lock fa fa-unlock");
});
$(document).ready(function() {
var $window = $(window);
// Function to handle changes to style classes based on window width
function checkWidth() {
if ($window.height() <= 768) {
$("#wrapper").toggleClass("toggled-2");
}
else if ($window.height() > 768) {
$("#wrapper").toggleClass("toggled");
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});
Any help is appreciated and thanks in advance.
Are you sure the click event is triggering? (Try making a log inside the click function(s) to confirm using console.log)
Based on the code you posted it looks like resize may be firing multiple times as you resize the window.
Try using the following:
$(window).resize($.throttle(checkWidth, 300));
Throttle returns a new function that executes no more than once every 300ms (or whatever delay you decide to set)
Note: This uses jQuery debounce/throttle plugin
https://code.google.com/archive/p/jquery-debounce/
Related
I have a navigation menu set to display:none, which appears upon scroll and disappears once back at the top.
Is there a way to disable the scroll function once I reach a certain breakpoint (ex. max-width: 786px) and display the menu?
Javascript
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('show');
}
else {
$('nav').removeClass('show');
}
})
CSS
.show {
display: block
}
You can solve this using either javascript or CSS, however I would personally go with the javascript one.
First up, for a javascript solution, the function you need is:
window.innerWidth
It will return the entire window width not including scroll bars. Read more about it here.
So, as Temani Afif suggested, you would write a test inside your scroll function to check for the desired window width like so:
$(window).on("scroll", function() {
if (window.innerWidth <= 786) return;
// Your other code here
})
For a purely CSS solution, you could override the effect of the 'show' class with a media query:
.show {
display: block
}
#media screen and (max-width: 786px) {
nav {
display: block !important
}
}
More on media queries here
You can activate/deactivate the scroll listener on browser resize. This way your scroll listener wont be called everytime user scrolls when browser width is more than 786px.
var scrollListenerActive = false;
var handleScrollListener = function() {
if( $(window).width() < 786 && !scrollListenerActive ) {
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('show');
}
else {
$('nav').removeClass('show');
}
});
scrollListenerActive = true;
} else {
$(window).off("scroll");
scrollListenerActive = false;
}
}
$(document).ready(handleScrollListener); // attach the listener on page load
$(window).resize(handleScrollListener); // attach/remove listener on window resize
That's a good strategy above, however the event you want to listen for is simply 'resize', on the window object (some older browsers can do it on any dom element, but better to be consistent and current with the standard).
So something like:
window.addEventListener('resize',function(){
if(window.innerWidth >= 768){
document.body.style['overflow-x'] = 'hidden';
}
else{
document.body.style['overflow-x'] = 'auto';
}
});
You can trade 'auto' for 'scroll' if you want the scrollbar to always show when less than 768.
Similarly, you can switch out 'overflow' instead of 'overflow-x' if you want to affect both scrollbars.
Keep in mind that the event tends to fire for every width and height change as the window is resized, in case you have other logic that might have an issue with firing many times (thousands or more) as it is resized.
This also works on maximize/restore, as they trigger the resize event as well.
Here's MDN's doc on the resize event if needed:
https://developer.mozilla.org/en-US/docs/Web/Events/resize
This is vanilla javascript, so it should work whether you're using a lib like jquery or not.
I'm trying to have my script trigger only when the screen size is above a specific size (800px), not just on load, but on screen resize.
I've put it inside a Modernizr mq script, but it's triggering inconsistently. Sometimes it will trigger my script at a small screen size.. sometimes at large.. sometimes not at all. Which leads me to believe that I've completely screwed it up!
Can anyone point me in the right direction?
$(function() {
$(window).resize(function(){
if (Modernizr.mq('(min-width: 800px)')) {
// script to trigger
$('.dropdown').on('mouseenter mouseleave click tap', function() {
$(this).toggleClass("open");
});
}
}).resize();
});
Could be because you are triggering the resize event from the resize event, which causes an infinite looping of event triggering.
Also, why not just test the screen size directly?
$(function() {
$(window).resize(function(){
// Use this for browser width: if(window.innerWidth >= 800)
if (screen.width >= 800) {
// script to trigger
$('.dropdown').on('mouseenter mouseleave click tap', function() {
$(this).toggleClass("open");
});
}
});
});
I want to have font awesome icon only when the window size is under 960px so i add this condition if (window.matchMedia("(max-width: 960px)").matches) and also when i resize the window over 960 this icon had to disappear and reappear when the window is resize under 960 so i have this code :
$(window).resize(function() {
if (window.matchMedia("(max-width: 960px)").matches) {
$('li.has_children').prepend('<i class="fa fa-arrow-up"></i>');
$('li.has_children').click(function (e) {
$(this).children('i').toggleClass("fa-arrow-up fa-arrow-down");
$(this).children('ul.navi').toggle('1000');
return false;
});
}
}).trigger("resize");
but the problem is that when i resize the window i had multiple icon instead of one
You are getting multiple font-awesome icons because you use the jQuery.prepend(). Each time you resize, the script is executed and prepend one more icon to <li class="has_children">...</li>.
To fix it, you will have to first remove it to make it disappear. The code will look like this
$(window).resize(function() {
if (window.matchMedia("(max-width: 960px)").matches) {
// attempt to remove the icon before prepending it
$('li.has_children').children('i.fa.fa-arrow-up').remove();
$('li.has_children').prepend('<i class="fa fa-arrow-up"></i>');
$('li.has_children').click(function (e) {
$(this).children('i').toggleClass("fa-arrow-up fa-arrow-down");
$(this).children('ul.navi').toggle('1000');
return false;
});
}
}).trigger("resize");
JSFiddle: https://jsfiddle.net/j2o62a45/1/`
Yes, you end up with multiple icons because your code puts them there:
$('li.has_children').prepend('<i class="fa fa-arrow-up"></i>');
You can either move this live outside of the event so you end up with only one icon or you can remove the ".fa .fa-arrow-up" from 'li.has_children'. Either works.
Note: I rarely use JS and jQuery so please excuse if the question is odd.
I am trying to add a div to my page (to a menu specifically) but only if the page is smaller than a certain width. Basically I need an event handler that allows me to wait for that condition to be met and run a function once it is (similar to how you would do with on.("click")) but I have no idea how to accomplish that.
Any help would be greatly appreciated!
have a look at the following code:
var $myDiv = $("<div class='myDiv'></div>");
$(window).resize(function () {
var windowWidth = $(this).width();
if (windowWidth < 200) {
$("body").append($myDiv);
} else {
$myDiv.remove();
}
});
we monitor the window resize event, and append/remove the div as per your condition.
Live Example
play around with the bottom right side of the fiddle (the result pane) and resize it to see what happens.
This is without the event handler, but you can add it in a resize event handler:
if (window.matchMedia("(min-width:700px)").matches) {
// viewport width is at least 700px
} else {
// viewport is smaller than 700px
}
When vertical scrollbar appears on the page, windows resize event need to be triggered. Is there any way to capture scrollbar appearance event using javascript?
I'm having problem with the width of the page as it makes div to jump to next line when the vertical scrollbar appears. It seems to work fine when I resize page, so I want to trigger resize event manually when vertical scrollbar appears.
You could use setInterval to monitor for the scrollbar. If the document width exceeds the window width, you can trigger the window.resize event manually.
function checkForScrollbar() {
if ($(window).width() < $(document).width()) {
$(window).trigger('resize');
}
}
$(document).ready(function() {
setInterval(function() { checkForScrollbar(); }, 500);
$(window).on('resize', function() {
//Resize triggered.
//Do Your Stuff
});
});
See this JS Fiddle: http://jsfiddle.net/USvsW/9/
OrganicPanda has posted a clever solution without the need for a timer. Basically he places an iFrame with 100% somewhere and listens to 'resize' events on it:
Detect when window vertical scrollbar appears
u can use this:this will through alert on resize
$(window).on('load resize', function(){
var w1 = $(window).width();
alert(w1);
})