Menu icon Foundation
Hide Joyride for Small Screens

I'd like to hide our Joyride implementation on small screens, but adding a class of "show-for-medium-up" or "hide-for-small-only" on the .joyride-list OL just breaks things. So I tried wrapping the OL in a div with "show-for-medium-up" but that didn't work, either.

Short of using jQuery to completely remove the Joyride OL on small screens, what can I do to make this work?

Thanks,
Bob

joyridesmall screenshide that muthah

I'd like to hide our Joyride implementation on small screens, but adding a class of "show-for-medium-up" or "hide-for-small-only" on the .joyride-list OL just breaks things. So I tried wrapping the OL in a div with "show-for-medium-up" but that didn't work, either.

Short of using jQuery to completely remove the Joyride OL on small screens, what can I do to make this work?

Thanks,
Bob

This post has been closed. No new replies can be added.

Jeanie Chung almost 5 years ago

Hey Bob-

Try putting the "hide-for-small-only" class on the tooltips themselves instead of the OL. Let me know if that works for you!

Jeanie

Bob Sawyer almost 5 years ago

Well, it was a good idea, as it hid the tool tips on mobile, but Joyride is still firing, because the dark translucent overlay appears. Also, that fouls things up on the desktop version, because now all the tool tips appear and stay on the page when advancing to the next.

Bob Sawyer almost 5 years ago

So I'm trying this now, but it doesn't work, either.

if (matchMedia(Foundation.utils.is_medium_up).matches){
  foundation('joyride', 'start');
};

If I use Foundation.utils.is_medium_up() (with the parentheses), Firefox returns

 Error: TypeError: Foundation.utils.is_medium_up is not a function

Bob Sawyer almost 5 years ago

To continue this thread, it appears that my version of foundation.js does not contain the default media queries as outlined in the "Javascript Utilities" portion of the Foundation docs ().

So, I tried adding it using the register_media() function:

Foundation.utils.register_media('is_medium_up', 'is_medium_up');

if (matchMedia(Foundation.media_queries['is_medium_up']).matches){
  foundation('joyride', 'start');
};

With no success.

What am I missing here?

Thanks,
Bob

Bob Sawyer almost 5 years ago

Nevermind, I got it to work:

$(document).ready(function(){
  enquire.register("screen and (max-width:40.063em)", {
    match : function() {
      $('.joyride-list').remove();
    }
  });
});