automatically adjusting coda-slider's fixed width on a fluid layout

I have been looking into using coda-slider in a webpage with a fluid layout. The challenge is that coda-slider seems to want a fixed width. Trying to use percentages results in copy disappearing behind the edge of the panel.

I found a sample javascript that was written to choose a jpg based on the actual width of the container and tried to modify it to change the css width values for the slider panel, but without success. .... ok I got it to work now for width.

The part of the coda-slider css that controls panel width:

.coda-slider, .coda-slider .panel { width: 650px; }

The script I found and modified:

 $(document).ready(function() { 

 function imageresize() {  
   var availwidth = $("#leftside").width(); 
   var codawidth = availwidth - 50; 
      $(".coda-slider .panel").css({"width": codawidth + "px"});
      $(".coda-slider").css({"width":codawidth + "px"});
}    

imageresize(); //Triggers when document first loads      

$(window).bind("resize", function(){ //Adjusts image when browser resized
    imageresize();  
 });  
 }); 

I got the sizing issue remedied, by using the container size, rather than the page size ... BUT ... coda-slider is using the original fixed width for the slide distance, so once you start sliding every panel ends up offset, which increases with each slide.

Any suggestions for getting the slide distance to change with the width ?

OK getting it sorted ....

Had to modify the coda-slider js file, replacing:

var panelWidth = slider.find(".panel").width();

With the same formula for the css panel width:

var panelWidth = $("#leftside").width() - 50;

That took care of the slide distance.

Now I just have to figure out how to get coda-slider to reset when the browser window is resized. It resizes the css window, but doesn't reset the slide value. In the long run, resizing the browser window is not a big requirement, bu开发者_如何学运维t it would come in handy with folks changing the orientation of their tablet while viewing the website.

This is old but, I was having the same problem and turns out that the developer make a new coda-slider that can adjust dynamically to the width.

its here: LiquidSlider

I've run into a similar issue while trying to configure a coda slideshow using the Flowplayer Tools 'scrollable' - a pixel based slider - into my fluid layout site.

I've gotten around this issue by changing the coda slider values to %, and then using an extra line of jQuery to force the slider's item panels to stay the same width as the slider container.

Here's the setup I'm using - % instead of pixels for the widths. I'm not setting any width on the slider panels; instead they're being assigned values via the jQuery:

<style type="text/css">

    .slider  { width:100%; height:200px; overflow:hidden; position:relative }
    .items   { width:2000em; position:absolute }
    .item    { /* do not set any width */ height:200px; overflow:hidden;
             float:left; display:inline-block }

</style>


<div class="slider equal">
    <div class="items">

        <div class="item equal"></div>
        <div class="item equal"></div>
        <div class="item equal"></div>

    </div>
</div>

The CSS class 'equal' is targeted by this jQuery:

// Set slider children to width of parent

if($("div.equal").length){
    $.fn.setAllToMaxWidth = function(){
        return this.width( Math.min.apply(this, $.map( this , function(e){ return $(e).width() }) ) );
    };

    $("div.equal").setAllToMaxWidth();
};

This jQuery workaround is an adaptation of the jQuery Equal Column Heights by Jaina Ewen.

This means the slider layout is rendered exactly as I want it on pageload and keeps with my grid layout, regardless of the browser width.

There is a slight catch though - if you resize your browser window after it loads, you're layout can be stretched beyond the width of the slider items and looks a little odd.