-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Allow widget dimensions to be resized. #77
Conversation
FYI this isn't working for me when I start with a fullscreen window on 1600+ screen and then get smaller. It cuts off a part of the grid. This is on chrome. -tim |
Same here with 1680x resolution and chrome. |
I'm encountering the same propblem with 1680x1050. I also do have some huge problems moving some objects in a specific column. |
The above demo was just supposed to demonstrate the resizing capability. You are more than welcome to play around with the resize event handlers to get things to size correctly. That is all. |
There's a problem with this. If you add a background color to the placeholder, you'll see (after resizing) that while the widget looks bigger, gridster still uses its original size. I've fixed the placeholder issue by doing this inside the this.$widgets.each($.proxy(function(i, widget) {
this.resize_widget($(widget), 1, 1);
}, this)); Now the placeholder is the correct size, but the collisions are still done using the original size. So basically, dragging stuff around doesn't work properly. I've tried to debug this but I can't figure it out. EDITI think I got it. Here's the updated fn.resize_widget_dimensions = function(options) {
if (options.widget_margins) {
this.options.widget_margins = options.widget_margins;
}
if (options.widget_base_dimensions) {
this.options.widget_base_dimensions = options.widget_base_dimensions;
}
this.min_widget_width = (this.options.widget_margins[0] * 2)
+ this.options.widget_base_dimensions[0];
this.min_widget_height = (this.options.widget_margins[1] * 2)
+ this.options.widget_base_dimensions[1];
this.$widgets.each($.proxy(function(i, widget) {
var $widget = $(widget);
var data = $widget.data();
this.resize_widget($widget, data.sizex, data.sizey);
}, this));
this.generate_grid_and_stylesheet();
this.get_widgets_from_DOM();
this.set_dom_grid_height();
return false;
}; |
Something like: http://jqueryui.com/resizable/ would be awsome to use with this |
brantje, if you bind the stop call back in resizable to a function that passes the widget object on, you can manually resize there. you should check out this thread if that's what you wanna do: |
hey @surjikal, thanks for the awesome solution for resizing these backdrops! I ran into some issues with the resize method. Essentially $widget.data() returns an older version of these widget coordinates than gridster.serialize() does. Took me some fiddling and an extra set of eyes to finally figure this out. Anyway, I updated your code to use the .serialize() coordinates rather than the .data() coordinates and figured I'd paste it in here just in case anyone else runs into the same issue. fn.resize_widget_dimensions = function(options) {
if (options.widget_margins) {
this.options.widget_margins = options.widget_margins;
}
if (options.widget_base_dimensions) {
this.options.widget_base_dimensions = options.widget_base_dimensions;
}
this.min_widget_width = (this.options.widget_margins[0] * 2)
+ this.options.widget_base_dimensions[0];
this.min_widget_height = (this.options.widget_margins[1] * 2)
+ this.options.widget_base_dimensions[1];
var serializedGrid = this.serialize();
this.$widgets.each($.proxy(function(i, widget) {
var $widget = $(widget);
var data = serializedGrid[i];
this.resize_widget($widget, data.sizex, data.sizey);
}, this));
this.generate_grid_and_stylesheet();
this.get_widgets_from_DOM();
this.set_dom_grid_height();
return false;
}; |
@brainTrain Thank you for that piece of code. I am trying to use that in my project but there is still a one big problem. You can maximize/demaximize window exactly twice with desired effect (widgets resizing), but then it stops working (stylesheet doesn't update). The manual window resizing by dragging sides and corners still works like expected. Do you have any idea how to fix that? |
Hmm no, my app will continue to resize as much as I like, are you using any other plugins on the widgets? We used Jquery ui's resizable widget and I have to update its grid to match the new gridster size otherwise the whole thing goes a bit haywire. So I dunno, my suggestion would be to look at other js you're applying to your widgets or page and see if there is ever a conflict with dimensions. Other than that I would say your issue is one I haven't encountered yet |
@brainTrain I need to clarify. I am actually going for an automatic fluid layout. So on I think I figured out where the problem might be. Seems like Example of my project: http://jsfiddle.net/nxmRr/1/ Could |
ah I see! I haven't tested that interaction yet, I'll have to look into it once I get in the office. You should checkout underscorejs if you haven't already, they give some nice utility functions that you won't have to build yourself.. one that we've used for this is debounce, which will use set timeouts to determine whether or not it should start the resize... It might not solve your issue, but it should help things a bit, check out the function here: http://underscorejs.org/#debounce if you want to implement it with your gridster resize function you'll want to make it a named function then call it within the $(window).resize() function like this:
this will only call the window resize_widget_dimensions() function if the user hasn't resized the the window in 250ms, not sure if that's the magic number, haven't played around with it yet, but that should help. |
I guess that's very similar to what I have already in my code: ...
$(window).resize(function() {
window.clearTimeout(resizeTimer);
resizeTimer = window.setTimeout(function() {
resizeWidgetDimensions();
}, RESIZE_TIME); // 500ms
});
... So firing the resize callback too often is not the problem here as I am already controlling that. UPDATE: The problem is that You will be very kind, if you can look at that later. :) |
Yeah I see what you're saying... one possible hack would be to dig into the gridster code and add some unique attribute to these stylesheets so you can clean them up as you resize, which may be all that needs to be done here. I've got other stuff I need to try and finish today, but later tonight I'll probably take a look and see if that option fixes it, other than that I'm kind of at a loss, I'll have to start combing stack overflow or tracing gridster's code to try and find a solution. Another thing to note that a coworker discovered is that this line: was causing our widgets to stack (one would fall behind the other and stay there). Once we got rid of it, they started behaving in a more sane way. |
Ok, so I added a way to cleanup these style sheets... in gridster's source I added this line to the function add_style_tag() 2373 tag.setAttribute('generated-from', 'gridster'); and clean up at the top of this extras resize_widget_dimensions function like so: $('head [generated-from="gridster"]:not(:last)').remove(); What I noticed is that if you click to expand or shrink your window, the window resize function is called but gridster does not add a new stylesheet. If you can figure out why it's not doing that, I think you'll have your fix. Also please note that using my generated-from attribute seems to do the trick most of the time, but it does get into a state where there will be 2 css style blocks generated so it's not perfect. Ball's in your court now dude :p |
I found out, that the problem was in // don't duplicate stylesheets for the same configuration
var serialized_opts = $.param(opts);
if ($.inArray(serialized_opts, Gridster.generated_stylesheets) >= 0) {
return false; // comment this out, and updating dimensions will work as expected
} It's strange, but after 1-2 resizing with buttons this condition kicks in and breaks the style generating method so CSS don't update. I think it is safe to disable this check since we introduced your little hack for removing stylesheet duplicates and recalculating stylesheet for "the same configuration" isn't such an issue (it's not such a frequent task). :) |
interesting. I'd be careful with this one though, since I don't know what else in gridster changes the style sheet, my little cleanup only works when you call the resizing all widgets function. That's awesome though, when I get a chance I'll see if I can find any negative repercussions from commenting that line out. |
Just a thought: It would be nice to have the same ability for adjusting widget_margins after the initial configuration. I'm using gridster to display a column of items that are moved in and out of "draggable" mode, and I'd like to be able to break them out a bit vertically when in draggable mode, to emphasize that they're manipulable things. |
Thanks @brainTrain for your code, great work! Just one situation where it gets into trouble: When you set your own serialize_params function when initializing gridster it looks like gridster does not hand over the "wgd" parameter ( see http://gridster.net/#serialize_params_opt ) correctly when calling this.serialize() in your code. It's simply undefined in that case and therefor my serialize_params function fails resulting in error on console. When thinking about this I think it would be best to avoid calling the this.serialize() method at all as this method also triggers the serialize_params function (once again: the mentioned error only happens if you set a custom serialize_params function when initializing gridster). So I looked at your code and tried to find a solution for this. Here is your code once again: var serializedGrid = this.serialize(); this.$widgets.each($.proxy(function(i, widget) { var $widget = $(widget); var data = serializedGrid[i]; this.resize_widget($widget, data.sizex, data.sizey); }, this)); Looking at this the serializedGrid variable is only used to hand over data.sizex and data.sizey. Looking further at the implementation of resize_widget(...) one can see that the second and third parameters are optional. If not set, gridster will get these values itsself. So I patched your code shown above as follows: this.$widgets.each($.proxy(function(i, widget) { var $widget = $(widget); this.resize_widget($widget); }, this)); Now this.serialize() will not be called anymore, thus no error in my case. Just thought I share this in case someone else runs into this problem when setting a custom "serialize_params" function on gridster initialization. Glad to here your feedback on this :-) |
@brainTrain and @fredpe , Hats Off to both of you!.. really helped me out to resize grids while window resizing. |
@surjikal @brainTrain @fredpe Thank you all ! |
@smajl I used your jsfiddle code and tried placing three large widgets spanning full width, in the top most row. But when I resized the browser window, the right most widgets jumps into the row below (http://jsfiddle.net/nxmRr/30/). Any idea why this happens? I noticed this doesn't occur when there's another row above this (http://jsfiddle.net/nxmRr/29/) |
I had the same issue, I was using the gridster.js provided by On Monday, June 3, 2013, Praveena Sarathchandra wrote:
559-906-5052 | brio50@gmail.com |
I'm using gridster-with-extra and still having the issue. :( On Mon, Jun 3, 2013 at 8:19 PM, brio50 notifications@github.com wrote:
|
Guys, I am having an issue that seems to be related to I am not sure what is causing this; If anyone care to take a look, that would be great; To run the project, clone or fork it and run Thanks UpdateLine 2556 of jquery.gridster.js (in dist folder) calculate this.container_width properly; Turns out that (for me at least), this.options.container_width is always set to Any ideas on that? Thanks again - Hoping someone will read that at least |
Hi Oclement, Change: to: ''' var container_width = this.$container.width(); ''' This improves the situation for me. I have my gridster container set to 80% width and I can now resize the browser window and the gridster area will resize accordingly. If I make it bigger I can drag widgets into the extra space created. For my my mind the only thing left is to reposition all of the widgets after resize as at the moment if I make the browser window smaller and widgets that are now outside the grid area are not moved. Once I got to drag them again the are moved to within the grid area. Looking into that part now. Cheers |
Hi there. I use gridster with extra and came across the problem of resizing the grid. I came up using an external override of gridster instead of directly modifying the vendor library : https://gist.github.com/OwlyCode/6421823 Just include this file in your page and start using it : var gridster = $(".gridster ul").gridster().data('gridster');
// [...]
$(window).resize(function() {
$('head [generated-from="gridster"]:not(:last)').remove();
var widgetLength = $(window).width() / 12; // 12 columns.
gridster.resize_widget_dimensions({widget_base_dimensions: [widgetLength, 25]});
}); It works for me, even with the maximize/demaximize window button. |
@OwlyCode I was going to look into your code but it's not there anymore. |
Is @joannecheng 's solution going to be included? Cause it looks like a nice solution... |
@epetre Hi ! Sorry I updated the link so you can now see it. I recently renamed my account and it broke some links. |
@surjikal @brainTrain @fredpe I am implementing gridster within an area of the page that resizes and I just wanted to thank you for all your efforts with this. Your code has saved me countless hours. Thank you all. |
I had a small problem with this. Steps to reproduce the problem:
I believe the problem is related to #147 I think I've solved it by simplifying the
Basically I commented out the following function calls:
and replaced them with:
In my case all I need to do is generate the new stylesheet. I don't care about the rest. Your requirements may be different |
I was trying to use @OwlyCode's external script, but apparently the dimensions are off just on the first load (it's just a 2 column layout, some rows are 50/50, others are full width, and almost every row just loads the wrong widths). Are any of these solutions meant to work on 0.5.0? Edit: It looks like the sizex styles aren't generating when enabling the plugin. |
I have it working in 5.0 using brainTrain's last posted solutions. Though, I did need to slightly modify the gridster source code with smalj's suggestion: // don't duplicate stylesheets for the same configuration I did need to comment out that return false because it prevented any new stylesheets from being generated using the newly calculated dimensions. I also manually clear out the generated stylesheets on every resize: this.gridster.generated_stylesheets = []. I do this since commenting out the return false now allows for a lot of stylesheets to be created. |
Apparently I needed to define the max_size_x first, that's what the sizex uses in it's for loop, so I guess it makes sense. |
This seems like a great addition. Any chance of it being merged? |
@SMJ93 Dashing or Gridster? |
Based on @OwlyCode's example I was able to get this working for me. Here is my example with bootstrap panels and some extra features |
I noticed that the responsive.js file doesn't change the limits for dragging widgets. I had to add: available_width = $('.gridster').width(); to allow me to drag widgets around the entire area correctly. |
@DrieStone I've been messing with this for quite sometime, your fix was exactly what I needed! |
@smajl |
After defining the gridster, you can update the widget_base_dimensions and/or widget_margins using resize_widget_dimensions.
Example:
We needed the ability to resize the dimensions and margins on window resize for a work project, so I modified jquery.gridster.with-extras.js and added a function to do so.
I have an example of it in action here: http://jc-2.github.com/gridster-test/