Grow your CSS skills. Land your dream job.

JS Media Query

  • # April 22, 2013 at 8:18 am

    Although my CSS is getting better I just simply do not understand javascript yet.

    I am using a slider on a simple (one break point) responsive micro site.

    All I want to do is add a variable on the js running the slider so

    Desktop

    $(function () {

    $(“.rslides”).responsiveSlides({
    auto: true,
    pager: true,
    nav: false,
    speed: 1000,

    });

    });

    And then at the first breakpoint I just want to swap the pager and nav round:

    $(function () {

    $(“.rslides”).responsiveSlides({
    auto: true,
    pager: false,
    nav: true,
    speed: 1000,

    });

    });

    So how do add a media query to this script so that I can swap between these two options?

    Thanks

    # April 22, 2013 at 8:29 am

    You can use something like this:

    $(function () {
    var isDesktop = $(window).width() > 1024;

    $(“.rslides”).responsiveSlides({
    auto: true,
    pager: isDesktop,
    nav: !isDesktop,
    speed: 1000,
    });

    });

    But to make it support resizing depends on the plugin options (easiest would be to re-run the initialization, you could try if that works).

    # April 22, 2013 at 10:09 am

    thanks, this was a perfect solution for this particular site. A real help, thank you!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".