CODEWITHSUNDEEP
zurb-foundationzurb-foundation-5
Severin
Severin

Reputation: 1075

data-equalizer on large only with Zurb Foundation 5?

Does anyone know how and if its possible to limit the data-equalizer to large and above? I have 3 columns that use it in large views but dont really need it on medium and lower views.

Upvotes: 1

Views: 1909

Answers (3)

Gaurish
Gaurish

Reputation: 121

thanks @chad,

$(window).on('load resize', function () {
    var minWidth = 640;
    var viewport = {
        width: $(window).width(),
        height: $(window).height()
    };

    if (viewport.width > minWidth && !$("#cre-ratesBox section").attr("data-equalizer")) {
        $("#cre-ratesBox section").attr("data-equalizer", "cre");
        $("#rateBox").attr("data-equalizer-watch", "cre");
        $("#cre-from").attr("data-equalizer-watch", "cre");
    } else if (viewport.width < minWidth && $("#cre-ratesBox section").attr("data-equalizer")) {
        $("#cre-ratesBox section").removeAttr("data-equalizer", "cre").height('auto');
        $("#rateBox").removeAttr("data-equalizer-watch", "cre").height('auto');
        $("#cre-from").removeAttr("data-equalizer-watch", "cre").height('auto');
    }
    $(document).foundation('equalizer', 'reflow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 0

TM Dinesh
TM Dinesh

Reputation: 210

add this data-equalizer-mq="large-up" in your equlizer div. to know more just read this link RESPONSIVE EQUALIZER topic

Upvotes: 2

Chad W
Chad W

Reputation: 420

According to this issue, it's not easily possible, yet.

However, the following MAY work for you. This example assumes you are using the default media query breakpoints that ships with Foundation 5. Basically what this example is doing is looking at the window size, and sets the data-equalizer attributes depending on the size.

<div class="row equal" data-equalizer>
    <div class="medium-6 columns panel equal-watch" data-equalizer-watch>
        <h1>hello</h1>    
        <p>(lots of text, presumably)</p>
        <p>(lots of text, presumably)</p>
    </div>
    <div class="medium-6 columns panel equal-watch" data-equalizer-watch>hi</div>
</div>

javascript: 

function setEqualizer() {
    // get the width in ems.
    var widthEms = $(window).width() / parseFloat($('html').css('font-size'));
    if (widthEms < 64.063) {
        $('.equal').removeAttr('data-equalizer');
        $('.equal-watch').removeAttr('data-equalizer-watch');
    } else {
        $('.equal').attr('data-equalizer', '');
        $('.equal-watch').attr('data-equalizer-watch', '');
    }
    $(document).foundation('equalizer', 'reflow');
}

// set Equalizer upon load
setEqualizer();

I wasn't able to make this work using a window resize detector, but it does work when the page loads. Try re-sizing the output pane in this fiddle and re-run it.

jsfiddle example

Hope this helps you get started with a better solution.

Upvotes: 0

Related Questions