Ihr habt es sicher auch schon erlebt, da baut ihr in eure DIVI Webseite euer Blog Modul ein und dann sieht das komisch aus, weil jede Vorschau eine andere Höhe hat. Mal hats nur 2 Zeilen Text drin und mal ist das Bild in einem falschen Format und zack sieht alles sehr unruhig aus.
Im heutigen Video zeige ich euch wie ihr so einen Ausgleich für alle Vorschau einrichten könnt, so dass alles die gleiche Höhe hat, egal wie gross das Bild ist oder lang der Text ist.
Ist es eine perfekte Lösung für alles? Nein aber für 95% der Fälle ist es eine gute Lösung.
Video
CSS Klasse
1 | cb_diviblog_hoehe |
Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 | <script>
(function ($) {
var pa_equalize_button_height = "true";
if (pa_equalize_button_height == "false") {
function cb_blog_hoehe_ausgleichen(blog) {
var articles = blog.find('article');
var heights = [];
articles.each(function () {
var height = 0;
height += ($(this).find('.et_pb_image_container, .et_main_video_container').length != 0) ? $(this).find('.et_pb_image_container, .et_main_video_container').outerHeight(true) : 0;
height += $(this).find('.entry-title').outerHeight(true);
height += ($(this).find('.post-meta').length != 0) ? $(this).find('.post-meta').outerHeight(true) : 0;
height += ($(this).find('.post-content').length != 0) ? $(this).find('.post-content').outerHeight(true) : 0;
heights.push(height);
});
var max_height = Math.max.apply(Math, heights);
articles.each(function () {
$(this).height(max_height);
});
}
} else {
function cb_blog_hoehe_ausgleichen(blog) {
var articles = blog.find('article');
var heights = [];
var btnheights = [];
articles.each(function () {
var height = 0;
var btnheight = 0;
var basebtnmargin = 20;
height += ($(this).find('.et_pb_image_container, .et_main_video_container').length != 0) ? $(this).find('.et_pb_image_container, .et_main_video_container').outerHeight(true) : 0;
height += $(this).find('.entry-title').outerHeight(true);
height += $(this).find('.post-meta').outerHeight(true);
height += $(this).find('.post-content').outerHeight(true);
btnheight += ($(this).find('.et_pb_image_container, .et_main_video_container').length != 0) ? $(this).find('.et_pb_image_container, .et_main_video_container').outerHeight(true) : 0;
btnheight += $(this).find('.entry-title').outerHeight(true);
btnheight += $(this).find('.post-meta').outerHeight(true);
btnheight += $(this).find(".post-content p").outerHeight(true);
btnheight += basebtnmargin;
heights.push(height);
btnheights.push(btnheight);
});
var max_height = Math.max.apply(Math, heights);
var max_btn_height = Math.max.apply(Math, btnheights);
articles.each(function () {
$(this).height(max_height);
var eachheight = 0;
var eachbasebtnmargin = 20;
eachheight += ($(this).find('.et_pb_image_container, .et_main_video_container').length != 0) ? $(this).find('.et_pb_image_container, .et_main_video_container').outerHeight(true) : 0;
eachheight += $(this).find('.entry-title').outerHeight(true);
eachheight += $(this).find('.post-meta').outerHeight(true);
eachheight += $(this).find(".post-content p").outerHeight(true);
eachheight += eachbasebtnmargin;
var requiredbtnmargin = (max_btn_height - eachheight) + eachbasebtnmargin;
$(this).find(".more-link").css("margin-top", requiredbtnmargin + "px");
});
}
}
$(document).ready(function () {
$(window).resize(function () {
if ($(this).width() >= 768) {
$(".cb_diviblog_hoehe article").each(function () {
$(this).removeClass("cb-auto-height");
$(this).find(".more-link").removeClass("cb-auto-margin");
})
$('.cb_diviblog_hoehe').each(function () {
cb_blog_hoehe_ausgleichen($(this));
});
$('.cb_diviblog_hoehe').each(function () {
var pa_blog = $(this);
cb_blog_hoehe_ausgleichen(pa_blog);
var observer = new MutationObserver(function (mutations) {
cb_blog_hoehe_ausgleichen(pa_blog);
});
var config = {
subtree: true,
childList: true
};
observer.observe(pa_blog[0], config);
});
$(document).ajaxComplete(function () {
$('.cb_diviblog_hoehe').imagesLoaded().then(function () {
$('.cb_diviblog_hoehe').each(function () {
cb_blog_hoehe_ausgleichen($(this));
});
});
});
$.fn.imagesLoaded = function () {
var $imgs = this.find('img[src!=""]');
var dfds = [];
if (!$imgs.length) {
return $.Deferred().resolve().promise();
}
$imgs.each(function () {
var dfd = $.Deferred();
dfds.push(dfd);
var img = new Image();
img.onload = function () {
dfd.resolve();
};
img.onerror = function () {
dfd.resolve();
};
img.src = this.src;
});
return $.when.apply($, dfds);
}
} else {
$(".cb_diviblog_hoehe article").each(function () {
$(this).addClass("cb-auto-height");
$(this).find(".more-link").addClass("cb-auto-margin");
})
}
});
});
})(jQuery);
</script> |
0 Kommentare