Develop Reference

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

Bind function to custom condition

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
}

Using resize function from minimum number of resizes

I have a website, which has some functions that are related to tablet view and some that are related to phone view - mostly menu configuration.
To overcome the need to refresh the website every time the device is changing it's orientation, i used the resize function to load the relevant functions each time the user resizes his window (aka orientation).
function res(){
var reswidth = $(window).width();
//REMOVING SOME MENU STYLES
$('.logo').removeClass('logoTop');
$('.menuList').removeClass('ulTop');
$('.menuList').removeClass('openMenu');
$('.menuList').removeClass('openMenu0');
$('.logo').unbind();
$('.menu-item').unbind();
$('.menuList').unbind();
$('.icon-menu').unbind();
$('.menuListItem').unbind();
$('.menu').unbind();
$('.info').unbind();
//DETECTING WHICH DEVICE IS IT.
if (reswidth > 1000) {
slideshow();
tablet();
if (reswidth > 1600) {
audio();
}
}
else {
phone();
$('.menu').localScroll();
}
}
$(window).ready(res).resize(res);
The problem with this method is that actually the mobile browsers are resizing all the time! every time the user scrolls (in any direction) the browser is changing it's size (menu bars, tab bars and address bar) which leads to removing and recalling the phone() function over and over again.
I'm looking for a way to enable the resize function ONLY if the user has passed a specific amount of pixels/resizes numbers.. so changing 100px won't count as a resize.
Is that possible with jQuery?
live example can be seen at boazkerengil.com/zoubisou

I fixed the issue by moving the .removeClass functions to the if statements - this results the expected behaviour that only when the user changes the device it removes the unnecessary classes.
function res(){
var reswidth = $(window).width();
$('.logo').unbind();
$('.menu-item').unbind();
$('.menuList').unbind();
$('.icon-menu').unbind();
$('.menuListItem').unbind();
$('.menu').unbind();
$('.info').unbind();
if (reswidth > 1000) {
$('.logo').removeClass('logoTop');
$('.menuList').removeClass('ulTop');
$('.menuList').removeClass('openMenu');
$('.menuList').removeClass('openMenu0');
slideshow();
tablet();
if (reswidth > 1600) {
audio();
}
}
else {
phone();
$('.menu').localScroll();
}
}

JQuery - Test window has been resizes over a threshold

hope you can help
My current project requires me to recall a set of functions on window resize so that I can keep the responsive nature correct. However the code I am using is rather twitchy as it calls the functions even if the window is resized by 1px.
I am relatively new to jQuery but learning more and more every day, but this is something I'm struggling to find a way to do.
In an ideal world I would like to call the functions when the window has been resized over a breaking point at anytime, for example:
say the breaking point is 500px, the initial load size is 400px the user resizes to 600px, so over the threshold so call the functions again.
It would also need to work in reverse... so window (or load) size 600px, breaking point 500px, resize to 400px call functions.
Here's the code I'm currently:
var windowWidth = $(window).width();
var resizing = !1;
$(window).resize(function(a) {
!1 !== resizing && clearTimeout(resizing);
resizing = setTimeout(doResize, 200);
});
function doResize() {
call_these_functions();
}
Cheers for the help guys
Thanks for the reply Zze
I am using something similar to what you've put, but I have it based within the start of my functions to filter what each thing does based on the window size. My problem is that these are getting called far too often and causing issues / twitchy behaviour.
For example I'm having issues on a tablet I'm testing on, when you scroll down, the scrollbar that appears on the right seems to trigger the window resize... causing functions to be called again that automatically accordion up or .hide() elements to their initial loaded state.
So my thinking is if I can test it's actually broken a set threshold rather than just what size the window is then it will be far more reliable.

There are some really handy jQuery functions available and it looks like you are very close to cracking this yourself. Hope this helps though.
$(window).resize(ResizeCode); // called on window resize
$(document).ready(function(e) { ResizeCode(); }); // called once document is ready to resize content immediatly
function ResizeCode()
{
if ($(window).width() < 500){
//insertCode
}
else if($(window).width() >= 500){
//insertCode
}
}
Update
If we are looking to 'restrict' the call time of this function, then you could add an interval which updates a bool every time it ticks, and then check this bool in the previous code:
var ready = true;
setInterval(function(){ready = true;}, 3000);
function ResizeCode()
{
if (ready)
{
// run code
ready = false;
}
}
But i would suggest storing the width and height of the window in a var and then comparing the current window with the var when the window is resized, that way you can tell if the window has actually been resized over 'x' amount or if it is that weird bug you've found.

Looks like i've found a solution that's going to do what i need with a little work (fingers crossed as i'm currently working on it), from http://xoxco.com/projects/code/breakpoints/
Thanks for the help Zze

execute JS function after certain windows width

I have read few similar questions regarding the same issue and I have implemented my function. However it doesn't work as expected. I am using Bootstrap for my website thus every element on the page is responsive.
Problem description: I am using jQuery stick plugin http://stickyjs.com/ and I am making one element of my page always visible. Now what I am trying to achieve that the sticky plugin call would only work if the window width is above 1024px. Since I am using bootstrap and below 1024 px every element get stacked underneath.
Here is my function
$(document).ready(function() {
function checkWidth() {
var windowSize = $(window).width();
if (windowSize >= 1024) {
$(".rightmain").sticky({
topSpacing:0
});
}
}
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});​
This code doesn't invoke the sticky plugin.
If I remover the width calculation function and simply invoke the sticky plugin like the one mentioned below then it works fine.
$(document).ready(function(){
$(".rightmain").sticky({
topSpacing:0
});
});
Also, if anyone can give me some pointers to some other library other than http://stickyjs.com/ where I have the option to disable the plugin after a certain given windows (height/width) then it would be great. Since I am using bootstrap I dont want to invoke the sticky plugin in every other cases.