JQuery - Test window has been resizes over a threshold - javascript

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

Related

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

Call jquery function only when window width gets resized

I have a function responsive that changes behaviour of certain elements on my website, including hiding popups etc. I call it in 2 cases:
$(document).ready(responsive);
$(window).resize(responsive);
The problem occurs on android chrome, as the virtual keyboard actually changes the height of the screen, and triggers responsive function, which closes my popups (some of them have text fields, making it impossible to type).
How can I prevent this from happening? I read somewhere a good point that android virtual keyboard only changes height of the screen, not a width, so I assume it would be a good idea to compare width before and after resize. So I created this function to compare the widths before and after and run resize() if width is different, but it doesn't work as expected, and console logs show different document widths even though I only changed the height of the screen (using chrome developer tools).
Any idea what went wrong or how can I prevent function responsive being launched on height change?
function resizeWidth() {
var existingWidth = $(document).width();
$(window).resize(function() {
var newWidth = $(document).width();
if (existingWidth != newWidth) {
$(window).resize(responsive);
console.log(existingWidth);
console.log(newWidth);
};
});
};
$(window).resize(resizeWidth);
Firstly you are attaching a handler to the resize event multiple times. One on load, then another every time the resize happens and resizeWidth is called. You should remove the handler within that function. Also, I guess you just want to call the responsive() function, not attach yet another resize handler when the width changes.
The main issue you have is that the scope of existingWidth is not low enough for it to be seen over multiple events. You could make it global, although that is generally considered bad practice. Instead you could use a data attribute, like this:
function resizeWidth() {
var existingWidth = $(document).data('resize-width');
var newWidth = $(document).width();
if (existingWidth != newWidth) {
responsive();
$(document).data('resize-width', newWidth);
};
};
$(window).resize(resizeWidth);

Reloading google map

i have 3 different google maps on my site, one for when viewing on desktop, tablet and mobile, when i resize my browser which people might do the new map pointer that has now resized isn't in the right place until i refresh the page, i want to just reload the iframe, im very new to javascript and tried this but its nots working
<script type="text/javascript">
if( $(window).width() == 985){
document.getElementById('map-desk').contentWindow.location.reload(true);
}
if( $(window).width() == 975){
document.getElementById('map-tab').contentWindow.location.reload(true);
}
if( $(window).width() == 765){
document.getElementById('map-mob').contentWindow.location.reload(true);
}
</script>
so like when the screen equals a certain width the iframe with that id reloads or refreshes
There's no actual event handler so it'll only fire once, when the browser loads (which is obviously not what you want). As you're using jQuery, wrap your code in:
$(window).resize(function() {
// code goes here...
});
... which will run the code inside every single time there's even a minute change to the browser size. Though you're going to come across the issue that $(window).width() is very rarely going to hit that exact pixel value. I'm not certain of the best solution, but something involving checking the condition +/- 30 pixels either way or so might work.
I think you are looking for the following event in jQuery
window.onresize = function(event) {
//your code to resize and reload here
}
Google maps reloads itself if the mapdiv is resized. Give 100% width to mapdiv. It will fit the size of the window. If you want to change the contents of maps (layers, markers, routes...), you should use google map events. Events, options and methods are listed here:https://developers.google.com/maps/documentation/javascript/reference

Loading jQuery function only when window width > 940px whether by page load or resize

I want a function to load only when the browser window width is greater than 940px.
I can do this on initial page load with:
if ( $(window).width() > 940) {
// my function
}
However, doing it the above way won't work on browser resize. I've been able to somewhat get it working on browser resize with the following:
$(window).resize(function() {
if ($(window).width() < 940) {
return;
}
else {
// my function
}
});
The problem with this, however, is once the function is loaded, it stays loaded whether the browser window is resized smaller or not. I need to clear the function out or un-load it whenever the window is smaller.
Is there a way to only load a function if the window is larger than 940px and completely remove it if the window is smaller than 940?
Any help would be much appreciated.
Do what you need in the first branch where you have return.
http://jsfiddle.net/KQSNE/
Take a look at Managing JavaScript on Responsive Websites.

Fittext will only work when window is resized?

I am using the fittext JS plugin to resize my headings on a page I am working on. For some reason it only kicks in if/once you adjust your window size, I cant seem to figure out why it is doing this.
Anyone have any ideas? Here is a link:
http://voltagenewmedia.ca/testserver/dry/#/homepage
Thanks!
For those who are still having the issue, this fix works for me
Replace this code inside jquery.fittext.js
// Call once to set.
resizer();
With this code,
$(window).load(function(){
resizer();
});
Your link is down so I can't actually see what the problem is. Fittext should resize immediately and then update on resize:
// Resizer() resizes items based on the object width divided by the compressor * 10
var resizer = function () {
$this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
};
// Call once to set.
resizer();
// Call on resize. Opera debounces their resize by default.
$(window).on('resize', resizer);
Are you waiting until the DOM is loaded before you use the plug-in?
I just ran into a similar problem that was driving me nuts. The element holding my text could not shrink within it's container because the max font size was too large, so I start it off with the width of the parent container. Then I just use the fittext algorithm once after initializing to get it loading properly and it seems to solve the issue.
$("#hero").find('h1').fitText(.65, { maxFontSize: '142px' });
$("#hero").find('h1').each(function(){
startSize = Math.max(Math.min($('#hero').width() / (compressor.*10)));
$(this).css({'font-size':startSize});
});

Categories

Resources