Resize Width/Height of Slider as Window is Resized

I'm creating a website that dynamically resizes as you resize the browser window. This is achieved using percentages in CSS. However I also n开发者_Go百科eed my accordion slider to resize as the browser window is resized, which I don't think can be done using CSS. I assume the best way of solving this is to use jQuery, but I can't figure out how to go about doing it. How can I change the height and width of the slider as the window is resized. Any help would be appreciated.

The page is located at: [link removed]

The exact approach will depend on what plug-in you're using for the slider, but you'll want to start by attaching a function to the resize event. Here's some documentation on that: http://api.jquery.com/resize/

And an example:

$(function() {
    $(window).resize(function() {
        //do your resizing stuff here
        alert('You resized me!');
    });
});

the following code will accomodate for the resizing

(function ($){
  $(window).resize(function(){
     var w = $('#kwicks').width();
     var eachw = (w/5.0);
console.log(w,eachw);
     $('.kwick').css('width',eachw+'px').css('left',function(idx){return idx*eachw});
  });
})(jQuery);

but you need to also tell the plugin to use the new values when animating, and i do not know if they support this.

Without seeing your Kwicks jquery code it is tough to give a good answer, but from what I can tell, your best bet is to calculate the current window size with JS and then set the "min" size of your Kwicks accordian and then refresh it accordingly.

edit: for more information ghostpool, something along these lines

//after acknowledging window size change
var minsize = applicableAccordianWidth / numberOfElements;
$('.kwicks').kwicks({  
    min: minsize,  
    spacing:  5  
});

You should be able to reinitialize the kwicks container, and send the option for a min size based on the size of the element divided by the number of elements in the accordian.