Einige Elemente sollen bei großen Auflösungen an Positionen erscheinen, die einer anderen Position im DOM entsprechen.
responsive layout enhancer
Jede Technologie für Ihren
predestinierten Einsatzzweck einsetzten:
Text
source:
<div class="js-RLE"
data-rle-target="individualName">
content to clone ...
</div>
targets:
<div data-rle-placeholder="individualName"
data-rle-breakpoint="mqMedium"></div>
Text
// mobile first dom element
[data-rle-target] {
@include aux-breakpoint($mq-medium) {
display: none;
}
}
// all other elements
[data-rle-breakpoint] {
display: none;
}
// show element on medium breakpoint
[data-rle-breakpoint="mqMedium"] {
@include aux-breakpoint($mq-medium) {
display: block;
}
}
Text
$.fn.responsiveLayoutEnhancer = function () {
var init = function ($obj) {
var placeholder = $obj.data("rle-target"), breakpoint = "", clone = "";
$('[data-rle-placeholder="' + placeholder + '"]').each(function () {
// get breakpoint from target
breakpoint = $(this).data("rle-breakpoint");
// clone of source including data and events,
// but without unused source parameter
clone = $obj.clone(true, true)
.removeClass('js-RLE').removeAttr('data-rle-target');
// security check, if clone contains an id
// ...
// replace placeholder with clone and add data attribute
// to set visibillity for specific breakpoint
$(this).replaceWith(clone.attr("data-rle-breakpoint", breakpoint));
});
};
// iterate over all occurences
return this.each(function () {
init($(this));
});
};
$(function() {
$('.js-RLE').responsiveLayoutEnhancer();
});