Dynamic width

[musicjunk]

Hi.

to call the incredible work of MovingBoxes I use:

var winwidth = $(window).width() - 160;
$('#webkat').movingBoxes({width:winwidth,panelWidth:0.6,reducedSize:0.2,wrap:false});

inside the &(document) ready function.

This works fine to get the size of the browsers window dynamically and fit the MovingBoxes into it.
I tried a long time to resize the width of the MovingBoxes dynamically with the jquery resize function if the browser window is resized after first loading. So far it is beyond my skills.

My question: is there a workaround to do this anywere. How could I get help for doing this?

Thanks.

[Mottie]

Did you try updating the plugin after the resize is done? This is a basic example, it might be better to add some throttling.

$(window).resize(function(){
    $('#webkat').movingBoxes();
});

[musicjunk]

Yes I did but it's not working. The variable is maybe updated on browser resize but it's not updatet in the call of MovingBoxes.

I tried:

function resizeWkat() {
var winwidth = $(window).width() - 160;
$('#webkat').movingBoxes({width:winwidth,panelWidth:0.6,reducedSize:0.2,wrap:false});
}
resizeWkat();
$(window).resize(function(){
resizeWkat();
});

Only works on first load, but not on resize.
Maybe the variable has to be stored in an object or something like that.

[Mottie]

Hmmm, ok I guess I should have tested this before telling you how to do it...

For now, try something like this (demo - click the update button):

var slider = $('#slider'),
    api = slider.data('movingBoxes'),
    newWidth = 500;
api.options.width = newWidth;
api.$wrap.width(newWidth);
slider.movingBoxes();

I'll make this work better in the next update.

[dubdesign]

my javascript skills aren't great so i'm trying to learn as i go along. I've managed to get the $wrap.width to update using

var slider = $('#slider'),
api = slider.data('movingBoxes');
newWidth = elem.width();
api.options.width = newWidth;
api.$wrap.width(newWidth);
s.movingBoxes();

which fires when the browser resizes but the li width is staying at 150px (300 which is the width in the settings x 0.5 panelWidth setting), what would i need to add to the code above to get the li to resize to 0.5 of newWidth?

[Mottie]

Are you sure elem is defined? Also the last line, s should be slider.

[dubdesign]

yeah elem is defined, the wrap width is working fine, its the li that is not changing.
the slider bit isn't an issue either, i'm using s rather than slider in my code, i just changed it to slider for the example so it mached the code above and missed the last one

[Mottie]

Hmm, ok... I've been working (on and off) on updating the script to allow you to set the panel dimensions in the css instead of in the code. I think that might be the easiest solution and possibly fix the issues you're having with adjusting panel sizes.

Please be patient a bit longer ;)

[dubdesign]

ok thanks

[Mottie]

Ok, this should be fixed in v2.2.2. Thanks for being patient!

Here is a demo of how you can resize the MovingBoxes dynamically

[dubdesign]

Hi Rob, I've been playing with this for a little while and it works fine withthe button click and the defined values but i cant get it to work with window resize.
The function i use to set and display the browser size is this (taken from here http://benalman.com/projects/jquery-resize-plugin/ if that helps in any way)

$(function(){
  // Bind the resize event. When the window size changes, update its corresponding
  // info div.
  $(window).resize(function(){
  elem = $(this);

  // Update the info div width and height - replace this with your own code
  $('#window-info').text( 'window width: ' + elem.width() + ', height: ' + elem.height() );

  });

  // Updates the info div immediately.
  $(window).resize();
});

I've tried lots of different things to get it to work, such as this

$(function(){
  // Bind the resize event. When the window size changes, update its corresponding
  // info div.
  $(window).resize(function(){
  elem = $(this);

  // Update the info div width and height - replace this with your own code
  $('#window-info').text( 'window width: ' + elem.width() + ', height: ' + elem.height() );
  var slider = $('#slider').data('movingBoxes');
  slider.options.width = slider.options.width === elem.width();
  slider.options.panelWidth = slider.options.panelWidth === elem.width();
  slider.update();
  });

  // Updates the info div immediately.
  $(window).resize();
});

with that code the width is set to the browser width but does not change on resize unless you refresh. The panelWidth i set to the same just to test it but thats defaulting to 720px permanently which while i was writing this i realise is the width of the 1st image.

As you can probably tell at this point, i'm struggling with javascript. Please could you help me with getting this to work?
With regards to panelWidth i would most likely set that to say 70% for now but as said in the other issue ideally i'd like the panelWidth to be fluid, at the moment though i'd just be happy if i could get this to resize as the browser resizes

[Mottie]

Ok, in the latest version you should be able to resize MovingBoxes dynamically. Before calling the update function, make sure to set the width and panelWidth options. These options were deprecated, but I think using them before calling the update is the easiest method to change the size.

Note: The panelWidth option will now accept two different values:

• Any fraction <= 2, so setting panelWidth: 0.5 will make the panels 50% of the overall width (or width option setting, if set).
• Any value > 2 will be evaluated as a pixel width of the panel, so panelWidth: 300 will set the panel width to 300px.

Here is a demo of making MovingBoxes work with a percentage width, the resize is automatically throttled, so no need to use the resize plugin shown above:

// This resize demo only works properly with MovingBoxes v2.2.3+
var timer;
$(window).resize(function(){
    clearTimeout(timer);
    var slider = $('#slider').data('movingBoxes');
    slider.options.width = $(window).width() * 0.5; // make 50% browser width
    slider.options.panelWidth = 0.7; // make 70% of wrapper width
    // prevent updating continuously, aka throttle resize
    timer = setTimeout(function(){
        slider.update(false);
    }, 100);
});

[dubdesign]

just had a quick play with this and it looks like it works great. If you do manage to get the widths to be fluid even better but it looks like i'll be happy with this.Thank you!