CODEWITHSUNDEEP
jqueryhtmlcss
Ben Racicot
Ben Racicot

Reputation: 5980

.slideUp on mobile only

I've created a Flexslider with a carousel navigation. The navigation is styled to become a vertical list for mobile screen sizes.

On mobile: I want to hide the list (except the clicked slide title) so the user can see the chosen slide.

On larger screens: I just want the simple carousel nav to work as usual but of course my slideUp is applied.

How do I apply jquery functionality on mobile only? And,
What are best practices for mobile/desktop jquery sharing markup like this?

The jquery:

$('a.current').bind('tapone',function(e){
  if($(this).hasClass('active')){
    $(this).removeClass('active');
    $('#carousel ul.slides').slideUp({duration: 300, easing: "easeOutQuad"});
    } else {
  $(this).addClass('active');
  $('#carousel ul.slides').slideDown({duration: 300, easing: "easeOutQuad"});
}
});

The markup:

  <div class="controls-container">
  <div class="row">
    <div id="carousel" class="flexslider large-12">
      <a class="current show-for-small"><h3>1994</h3></a>
      <ul class="slides">
        <li>1995</li>
        <li>1996</li>
        <li>1997</li>
      </ul>

UPDATE:

I ended up utilizing Modernizer and adding a class to the html tag.

if (Modernizr.mq('only all and (max-width: 768px)')) {
   $('html').addClass('sm-med');
}

And conditionally fired some JS with:

if($(window).width() < 768) { ... }

Upvotes: 0

Views: 940

Answers (2)

Nick M
Nick M

Reputation: 1665

Do not use $.browser. You should be using screen width, just as you do with media queries for CSS. Use the same break points in your JS that you do with your media queries (if you have them) and that way you will have a fluid experience for all users no matter the device.

If you are worried about whether devices/browsers have certain capabilities you should use a detection library like Modernizer.

if($(window).width() < 768) {
    // code for things smaller than ipads
}

Upvotes: 2

CharlieM
CharlieM

Reputation: 658

If you use an older version of jQuery, you can use $.browser. (However, this was deprecated as of jQuery 1.9).

So what you'll need to do is add a class to your page for feature detection. Then use that to activate your script.

The 3rd option is to use good 'ol screen widths. Get the $(window).width() and set cases for each size where you want the animation to happen. 

$(window).resize(function() {
  var ww = $(window).width();
  if(ww <960) { 
      //do something
  }
});

Upvotes: 0

Related Questions