Develop Reference

Resizing window always trigger a click event

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/

Window resize function

I have created a hamburger menu, which drops down fine, but if I maximize the window again, the ul lists remain hidden as they maintain the "display none" status.
I know I should add a window resize function, but I am not sure how.
How can I fix this?
This is the coding:
$(document).ready(function (){
$('.nav-btn').on("click", function() {
$('.hamburger').slideToggle("slow");
});
});
Thank you.

On resize if window width is bigger than 992 will remove styles added.
$(window).resize(function() {
if($(window).width() > 992) {
$(".hamburger").removeAttr("style");
}
});

Change position of tooltip on window resize

I'm using jQuery UI to create a tooltip for a search input field. I then want to position the tooltip according to the size of the browser window (top if less than 768px, left if more).
I initialise the tooltip with:
$('#search').tooltip({'placement':'top'});
Then I have this function to change the placement depending on the window size:
$(window).on('resize', function() {
if ($(window).width < 768) {
$("#damSearch").tooltip({'placement':'top'});
} else {
$("#damSearch").tooltip({'placement':'left'});
}
}).trigger('resize');
For some reason it's not working. The tooltip initialises fine but when I resize the browser above 768px it still appears positioned to the top.
[EDIT]
I've been away for a few days and have just come back to try and resolve this problem.
I've installed Modernizr because I intend using it elsewhere on the site and so I thought I'd use Modernizr.mq to detect the window resizing. I also read elsewhere that the code to reposition the tooltip should be in its own self contained function, so this is the function:
function positionTooltip() {
if (Modernizr.mq('(min-width: 768px)')) {
$("#damSearch").tooltip({'placement':'left'});
} else {
$("#damSearch").tooltip({'placement':'bottom'});
}
}
This is then followed in my Javascript file with:
$(document).ready(function() {
positionTooltip();
// Fire the function on page load
$(window).resize(positionTooltip);
// Fire function on window resize event
Unfortunately it's still not working correctly.
The tooltip appears correctly positioned when the page is first loaded, but if I then resize the browser the position is not updated. If I reload the page however the tooltip's position is changed accordingly.
It's as if the resize event is not triggering the function.
[/EDIT]
As ever all help and advice is greatly appreciated.
Tony.

you need to call the width function
if ($(window).width() < 768) {
notice the parentheses ()

jQuery: How to trigger windows resize event when scrollbar appears

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);
})

Responsive JavaScript: "Refresh" page depending on screen width?

i've made a responsive website with a horizontal menu. I wanted to make the menu a toggle drop down when a lower screen resolution is reached. The JQuery-Toggle works fine and i tried this to "make it responsive":
if (document.documentElement.clientWidth < 768) {
$(document).ready(function(e){
$('#menubutton').on('click',function(){
$('#main-nav').slideToggle();
});
})
}
This works also fine but not by changing the windowsize directly in the browser – i have to resfresh the page manually to load the Script!
Is there a way to "refresh" the page when the needed screen width is reached (768 px)? …and vise versa!
thanx,
Jochen

maybe instead of refreshing the page on every resize, you can do:
var mainNavActivated = false;
$(document).ready(function(e){
$('#menubutton').on('click',function(){
if(mainNavActivated || document.documentElement.clientWidth < 768){
window.mainNavActivated=true;
$('#main-nav').slideToggle();
}
});
})
which is binding click anyway and making it work when the window is "narrow"

You can use $(window).resize(). It will call your function every time the window is resized by the user.

You can use the resize event.
$(window).resize(function() {
// here your code
});