/ / data-equalizer auf gross nur mit Zurb Foundation 5? - zurb-foundation, zurb-foundation-5

Daten-Equalizer auf Groß nur mit Zurb Foundation 5? - zurb-foundation, zurb-foundation-5

Weiß jemand wie und ob es möglich ist den Daten-Equalizer auf groß und höher zu begrenzen? Ich habe 3 Spalten, die es in großen Ansichten verwenden, aber nicht wirklich auf mittleren und unteren Ansichten.

Antworten:

1 für die Antwort № 1

füge das hinzu data-equalizer-mq="large-up" in deinem equlizer div. um mehr zu wissen, lies das einfach Verknüpfung RESPONSIVE EQUALIZER Thema


0 für die Antwort № 2

Demzufolge Problemes ist noch nicht so einfach möglich.

Das Folgende kann jedoch für Sie arbeiten. In diesem Beispiel wird davon ausgegangen, dass Sie die standardmäßigen Medienabfrage-Haltepunkte verwenden, die mit Foundation 5 ausgeliefert werden. In diesem Beispiel wird im Wesentlichen die Fenstergröße betrachtet und die Datenentzerrerattribute abhängig von der Größe festgelegt.

<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();

Ich konnte dies nicht mit einem Fenster-Größenanpassungs-Detektor machen, aber es funktioniert, wenn die Seite geladen wird. Versuchen Sie, das Ausgabefenster in dieser Geige zu ändern und es erneut auszuführen.

Beispiel

Hoffe, das hilft Ihnen, mit einer besseren Lösung zu beginnen.


0 für die Antwort № 3

danke @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>