Coda Slider and dynamic CSS

My shiny new website uses an awesome jquery tool called Coda Slider. It’s really good, but I kind of left the old fashioned people with a 1024×768 resolution behind, as my sites default width (and my slider image widths) are  1200px!

Anyway, I couldn’t have cared less, everyone uses a laptop or widescreen monitor anyway! Until that is the feedback started coming back. Looks like I need to fix this then :-s

First up, here’s the way the coda slider works:

<script src="/js/coda/jquery.coda-slider-3.0.min.js" type="text/javascript"></script>
 <link href="/js/coda/coda-slider.css" rel="stylesheet" />

..in the head, obviously. In your body, you set it out like this:

<div class="coda-slider-wrapper">
 <div class="coda-slider preload" id="coda-slider-1">
   <div class="panel">
     <div class="panel-wrapper">
       <img src="/img/coda/banner1.png" />
     </div>
   </div>
   <div class="panel imagepanel">
     <div class="panel-wrapper" style="text-align: center;">
       <img src="/img/coda/ddale.jpg" />
     </div>
     <div class="panel-wrapper" style="text-align: center;">
       <img src="/img/coda/let-your-property.png" />
     </div>
     <div class="panel-wrapper" style="text-align: center;">
       <img src="/img/coda/mobile.jpg" />
     </div>
   </div>
  </div>
 </div>

And in your <script> :

var slide = $('#coda-slider-1').codaSlider({
 autoHeight : false,
 autoSlide : true,
 dynamicArrows : false
 });

Now we have an awesome slider!

However, the guys with the 1024x768px monitors are crying in pain! So we can hack a quick fix for them:

if (screenwidth <= 1024) 
{
    $('div.panel-wrapper img').css('width','1000');
    $('.coda-slider-wrapper .coda-slider').css('width','1000');
    $('.coda-slider-wrapper .coda-slider').css('height','291');
    $('.coda-slider-wrapper .coda-slider .panel').css('width','1000');
}

That shrinks the image width and panel containers to fit 🙂 A bit hacky, but I still like it. Next time though, I’ll do my CSS in em’s and %ages!