cowboy / jquery-resize Goto Github PK
View Code? Open in Web Editor NEWA resize event for ALL your jQueries!
Home Page: http://benalman.com/projects/jquery-resize-plugin/
License: GNU General Public License v2.0
A resize event for ALL your jQueries!
Home Page: http://benalman.com/projects/jquery-resize-plugin/
License: GNU General Public License v2.0
When I use $(window).resize
with this plugin the resize call works fine when expanding but when collapsing the moment the page starts scrolling the resize callback stops firing. Disabling this plugin fixes it. Changing throttleWindow
to false
fixes it as well.
Hi Ben,
I am using your great solution but i have small problem. Somehow the resize event is fired only once when i set the container size. if i don't set the container size its working fine but i need to change it :).
here is the code i am using, very simple. rootContainer is a div that holds mapContainer. i am using the resize event to make the map container 100%. when i set the size on the mapContianer the event is not fired any more if there is a change is the size.
$(function () {
$("#rootContainer").resize(function () {
applyMapResize();
});
applyMapResize();
});
function applyMapResize() {
$("#mapContainer").height($("#rootContainer").height());
}
Great plugin but it conflicts with highcharts and flot. Perhaps its an easy namespace issue?
Thanks
Works well even though window resize is called when it really has not changed.
I noticed the CPUs running up over 80% with less than 10 elements registered and
very little re-sizing activity (really sluggish performance). The main elements, jQGrids
embedded inside jQuery-UI tabs and accordions within a jQuery-Layout.
Code below helps for my situation.
Thanks.
function loopy() {
// Start the polling loop, asynchronously.
timeout_id = window[ str_setTimeout ](function(){
// Iterate over all elements to which the 'resize' event is bound.
var pixelTolerance = jq_resize[ str_pixelTolerance ];
elems.each(function() {
//
// Modified to reduce the CPU load when there are numerous
// elements registered. Tested with five+ re-sizable jQGrids
// embedded into various tabs and accordion elements all inside
// of a jQuery layout.
// With the default delay of 250 the CPU usage is reduced and
// re-sizing snappy.
//
var isVisible = false;
var hasResized = false;
var elem = $(this);
try {
if ($(elem).is(':visible') ) {
isVisible = true;
}
} catch (eThrow) {
//alert(eThrow.message);
}
// No reason to resize hidden elements
if (isVisible) {
try {
// For pixels round down to nearest integer
var width = Math.floor(elem.width());
var height = Math.floor(elem.height());
var data = $.data( this, str_data );
data.w = Math.floor(data.w);
data.h = Math.floor(data.h);
// Reduce number of resizes, default 10 pixels
if ( (Math.abs(width - data.w) > pixelTolerance)
|| (Math.abs(height - data.h) > pixelTolerance)) {
hasResized = true;
}
// If element size has changed
// trigger the 'resize' event and
// update the data store
if (hasResized) {
elem.trigger( str_resize, [ width, height ] );
// Some elements will not re-size exactly
// so try to get the latest size available
// before storing
data.w = Math.floor(elem.width());
data.h = Math.floor(elem.height());
}
} catch (eThrow) {
//alert(eThrow.message);
}
}
});
// Loop.
loopy();
}, jq_resize[ str_delay ] );
This may be the same, related, or different error than #5.
At least in IE8 using Jquery 1.10.2 and BA-Resize 1.1:
If you bind a resize event to an child iframe's body (dynamically created iframe in my case, haven't tested others), everything works great until you navigate to another page in the iframe. Once the iframe page loads a second time (and any subsequent time), IE8 throws a "Permission denied" error and the resize event doesn't work after that.
I should disclose than I am also using Ben's EasyXDM, but the child iframe I am talking about is the one created by the producer, not the iframe communicating over EasyXDM. So although I haven't tested it, this point should be moot.
Surya Kumar posted a comment on the BA-Resize site at: http://benalman.com/projects/jquery-resize-plugin/#comment-1062838526
He references some code here as a proposed fix
http://pastebin.com/dTSeLVfj
I've forked and committed it here:
e6b718a
We're using this for a project, and have run into some wierd cases where zooming the safari IOS browser causes a crash.
Has anyone else seen this?
Reproducible on Ipod 4th Generation (6.1.3), Ipad Mini (7.0.4), Ipad 4 (7.0.2)
Not Reproducible on Iphone 5 (7.0.4), Iphone 5C (7.0.4)
Any ideas?
Great plugin. I've used it a bunch. I found a bug though that will completely disable the plugin.
The gist is that within a resize trigger, when you unbind a resize event for a later bound resize event, loopy still try's to check the unbound one and it no longer has the needed data.
I've fixed the code (just check that data exists before accessing it) on my machine and have included it here:
function loopy() {
// Start the polling loop, asynchronously.
timeout_id = window[ str_setTimeout ](function(){
// Iterate over all elements to which the 'resize' event is bound.
elems.each(function(){
var elem = $(this),
width = elem.width(),
height = elem.height(),
data = $.data( this, str_data );
// If element size has changed since the last time, update the element
// data store and trigger the 'resize' event.
if (data && ( width !== data.w || height !== data.h ) ) {
elem.trigger( str_resize, [ data.w = width, data.h = height ] );
}
});
// Loop.
loopy();
}, jq_resize[ str_delay ] );
};
IE <= 8 raises the resize event natively on resized elements, jquery-resize shouldn't use the polling mechanism in these browsers.
Throttling window.resize would still be useful in these browsers.
Due to a questionable feature in jQuery, the resize code causes a memory leak where it will hold on to every DOM node it has ever tracked. In a single-page application this can be a serious issue if you're creating and destroying things around the place.
jQuery has a strange feature where it keeps references to every state in a series of jQuery method calls, in a property called prevObject
. If you keep jQuery references around for a while and do lots of stuff, they can amass a huge chain of prevObject
references, preventing anything from being garbage collected. More information: http://blog.cowchimp.com/jquery-prevobject-memory-leak/
This resize library stores its tracked elements in a jQuery array (var elems = $([])
), which is never disposed. It then uses mutating functions to add and remove elements. Unfortunately, due to the above jQuery feature, this means that any element that ever enters that elems
collection will be retained indefinitely.
The solution is to replace the elems
jQuery array with a normal Javascript array.
This issue is similar to #13 . Since I'm not always resizing the window, but often just changing the font size, I put the .resize() event function on a div. In IE only, this doesn't work then the font size is reduced, without first having been increased.
I have put debug alerts in the function, and they're not coming up, which suggests that the event is not being triggered.
We at VersionEye are working hard to keep up the quality of the bower's registry.
We just finished our initial analysis of the quality of the Bower.io registry:
7530 - registered packages, 224 of them doesnt exists anymore;
We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).
Sadly, your library cowboy/jquery-resize
is one of them.
Can you spare 15 minutes to help us to make Bower better?
Just add a new file bower.json
and change attributes.
{
"name": "cowboy/jquery-resize",
"version": "1.0.0",
"main": "path/to/main.css",
"description": "please add it",
"license": "Eclipse",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<dependency_name>": "<semantic_version>",
"<dependency_name>": "<Local_folder>",
"<dependency_name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.
NB! Please validate your bower.json with jsonlint before commiting your updates.
Thank you!
Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!
i get the following error in chrome/firefoxIE8
jquery.ba-resize.js:198 Uncaught TypeError: Cannot set property 'w' of undefined
Uncaught TypeError: Cannot set property 'w' of undefined
new_handlerjquery.ba-resize.js:198
jQuery.event.handlejquery.js:2260
jQuery.event.add.elemData.handle.eventHandlejquery.js:1891
jQuery.each.jQuery.fnjquery.js:7151
new_handlerjquery.ba-resize.js:198
jQuery.event.handlejquery.js:2260
jQuery.event.add.elemData.handle.eventHandlejquery.js:1891
my implementation:
$(".container").resize(function(e){
setTimeout(function() { console.log('resize') }, 10);
});
I have the following code:
$(window).resize(function(e) {
console.log(e);
}
$("#test").resize(function() {
console.log("resize element");
});
The window resize callback is executed even though the window dimensions did not change.
JQuery 1.7.2
Plugin produces the following error when resize event is delegated:
Uncaught TypeError: Cannot set property 'w' of undefined
This error is documented here #1, but the any suggested solutions don't allow event delegation to work.
Here is a fiddle that reproduces the issue. http://jsfiddle.net/e3apze3a/2/
Environment Info
jQuery 3.1.0
Chrome 52.0.2743.116 m (64-bit), Firefox 43.0.1
Is there anyway to bind to elements added after the handler is called?
Using $('body').on('resize', '#selector', myFunction)
doesn't seem to work at all.
Using $('#selector').resize(myFunction)
works, but it doesn't bind to elements that are added by ajax.
Nice lib, would be great if this had a bower.json and it was added to the Bower registry.
Hi, I believe a check for data being null/undefined would improve on your code.
I would like to change line 258 [ if (width !== data.w || height !== data.h) ]
to [ if (data && (width !== data.w || height !== data.h)) ] in the source.
Yours truly
@cowboy Would you consider assigning a caretaker for this repository? There are valid issues and pull requests. Many would like to see this plugin improved upon.
I've noticed jquery ui tabs triggers the resize event when you switch to a tab.
Simple example:
http://jsfiddle.net/KF6Ka/1/
Is this a bug related to the plugin somehow?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.