Question

I’m trying to implement a responsive design on my website and I’m getting a little stuck on the featured content slider.

I’m using the Coda Slider for my featured content slides, and what I’d like to happen for small screen widths is to abort the jQuery function for the slider and remove the inline styles for the slide functions, so that it simply display’s block.

I was pretty sure I had seen examples like this before, but when I just went digging through my bookmarks for examples to post here, I couldn’t really find any that actually appear to work this way. Perhaps because limitations of JS would make this not feasible?

Here’s the jQuery I’m using to implement the slider. Is there anything I could simply add that would tell it to abort and return to normal for screen widths under a certain size?

   // Coda slider via http://www.ndoherty.biz/demos/coda-slider/2.0/

   $('#coda-slider-1').codaSlider({
        dynamicArrows: false,
        dynamicTabs: false,
        autoSlide: true,
        autoSlideInterval: 4000,
        slideEaseDuration: 500,
        autoSlideStopWhenClicked: true,
   });

For now I’m simply using two style sheets implemented with media queries as follows in the head:

<link rel="stylesheet" href="/css/2011/fullwidth-responsive.css" media="only screen and (min-width : 480px)" />
<link rel="stylesheet" href="/css/2011/mobile.css" media="only screen and (min-width : 320px) and (max-width : 480px)" />

So I’d like the JS abort to correspond with the mobile stylesheet kicking in, and essentially I will be presenting the content solely with CSS, and not using any JS presentational animations, etc., such as the slider does for the full site.

Answer 1

There are a couple ways you can do this, though there will always be some difference (unless you implemented a really advanced detection setup that responds to live window changes). Media queries will respond to any size changes (at any time), and our code here will only run once (right before we initialize the Coda slider):

1. Detect width with a small check of screen available width:

if ( screen.availWidth > 480 ) {
  // .. initialize Coda here ..
}

2. Detect a specific style you applied with your mobile stylesheet:

For instance, say #header gets a height of 50px in your mobile.css. You can detect if that sheet is active by checking for that height:

if ( $( "#header" ).width() != 50 ) {
  // .. initialize Coda here ..
}

There are other ways (Like creating a dummy media query, etc), but either of these should do what you want.

Note: You may also need to have an “else” statement that removes/adds classes you might need for your mobile layout.