jQuery: How to trigger windows resize event when scrollbar appears - javascript

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

Related

Modernizr media query triggering inconsistently

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

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 ()

window.onresize = function { //code } doesn't seem to exeute my inner code

I'm using window.onresize to calculate the appropriate coordinates for my buttons on my page. The buttons are placed in the div called <div>trinity</div>. The coordinates of the buttons are relatively calculated according to the height and width of the "trinity" div.
The trinity div resizes correctly when the window is being resized, but the inner code of the window.onresize = function () doesn't seem to fire off. In other words my xml_button_create(window.myValue,height,width,false) isn't firing off. In this function I use jQuery to adjust the coordinates of my buttons.
Any help would be appreciated.
Here is my code.
window.onresize = function () {
// get HEIGHT and WIDTH of navigation div
var height= $("#trinity").height();
var width= $("#trinity").width();
// CREATE BUTTONS
xml_button_create(window.myValue,height,width,false);
};
If you are using jQuery to adjust the coordinates, try to use it for the eventbinding too.
$(document).ready(function() {
$( window ).resize(function() {
alert("Resize");
});
});
Otherwise have a look at this to detect resize on all html elements.
http://benalman.com/projects/jquery-resize-plugin/
With jQuery resize event, you can now bind resize event handlers to elements other than window, for super-awesome-resizing-greatness!

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

Getting wrong screen height when trigger orientationchange event

I wrote the code below to check my mobile screen height when I rotate it to Portrait or Landscape.
window.addEventListener("orientationchange", function(event) {
rotateScreen();
}, false);
function rotateScreen() {
alert(window.orientation)
alert($(window).height())
}
When I rotate it to Portrait, I get 0, 294. When I rotate it to Landscape, I get 90, 419. The figure is reversed, I have tried to wrap it in $(document).ready() but it does not work.
$(document).ready(function(){
alert($(window).height())
})
It looks like that when I rotate the mobile to Portrait, I get the height of Landscape, and when I rotate the mobile to Landscape, I get the height of Portrait. Can someone suggest how to fix it?
Thanks
The resize event gets triggered after the orientationchange event. However resize can also get triggered by other things such as showing the virtual keyboard.
So to get round this we can listen first for an orientationchange, once that occurs we can then add a resize listener. Once the orientationchange has completed it will fire our resize event. Once completed we then remove the resize listener to prevent it being fired in error
$(window).on('orientationchange', function() {
var orientationChange = function(evt) {
rotateScreen();
$(window).off('resize', orientationChange);
}
$(window).on('resize', orientationChange);
});
This effectively creates a kind of pseudo post:orientationChange event. (I would probably avoid using timeouts if you can)
Adding setTimeout could solve the problem, please try the code below:
function rotateScreen() {
window.setTimeout(function() {
alert(window.orientation)
alert($(window).height())
}, 500);
}

Categories

Resources