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();
}
}
Related
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 ()
The website: http://negativgraffiti.hu/uj/
If you jumps from one page to another, every page has a different height, but they are all in one div, just they are not visible all the time.
I'm resizing the parent div everytime to the current page's height (not the full code, just a sample):
var magassag = jQuery("#post-5");
var egymagas = jQuery(".elsofo").height();
if (i == 1) {
magassag.animate({
height: egymagas
}, 100 );
}
it's working fine, but when i test it on tablet/mobile the height is ruins when i change the orientation, and i don't know why.
Use $(window).on('resize', fn) to detect window resizing.
$(window).on('resize', function() {
// re-animate the height for the current page
});
Although this works fine for tablet resizing, it will be very inefficient for desktop users who are resizing the window with their mouse. It is good to throttle the resize callback for that reason.
// Use `throttle` from any of the various throttle libraries available.
$(window).on('resize', throttle(function() {
// re-animate the height for the current page
}));
I'm trying to activate cycle2 on a list of images when the window gets too small to fit all the images and show all the images when the browser is big enough to display them. (#bignav is element containing the images.) I did some testing and the function stops working after I destroy it as it wont start it again. Is their another way of going about it? Could I activate it and deactivate by changing the name of the class?
$(window).resize(function() {
var width = $(window).width();
if (width < 1325) {
$('#bignav').cycle();
} else {
$('#bignav').cycle('destroy');
}
});
Re-initialize it...
$('#bignav').cycle('reinit');
They have an api here.
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
I'm working on a mobile web project that goes between a two column or single column view based on screen size. For some device sizes, changing from portrait to landscape switches you between the single and double column. Across the bottom of the page there are three feature images that are side by side for two column view, but we want to turn into a content slider in single column.
My issue:
The javascript conditional I have calls the function when the width of the screen is below a certain width. However if you change the orientation/size of the screen, it doesn't recall the function or re-evaluate the screen width.
What I have:
if( $(window).width() < 570) {
$(window).load(function() {
$('.flexslider').flexslider();
});
}
What is the best way to watch for resize and call/recall the function after the resize event?
Use jQuery resize event on window. jsfiddle
$(window).resize(function(){
//your code
});
To follow on from what Shusl said, you need to create the functions within $(window).resize();
What I would do is create the function and be sure to trigger it too. So it would be something like -
$(window)resize(function() {
winWidth = $(window).width();
winHeight = $(window).height();
if (winWidth < 570) {
$(window).load(function() { $('.flexslider').flexslider(); });
}
else {
// do something else
}
}).trigger("resize");