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!