Hey!
Ich arbeite mit jQuery Splitter und Masonry. Hier mein Code:
Code
$(window).on('load', function(){
$('.grid').masonry({
isAnimated: true,
itemSelector: '.grid-item',
percentPosition: true,
horizontalOrder: false
});
})
var splitter = $('#content').split({
orientation: 'vertical',
position: '50%',
limit: 400,
onDrag: function(event) {
Splitter();
$('.grid').masonry({
itemSelector: '.grid-item',
percentPosition: true,
horizontalOrder: false
});
}
});
Splitter();
function Splitter(){
if ($('#right').width() < 600) {
$('.grid-item').css("width", "100%")
}
else if ($('#right').width() < 800) {
$('.grid-item').css("width", "50%")
}
else {
$('.grid-item').css("width", "33.3333%")
}
}
$( window ).resize(function() {
$('#main').css('min-height', '100%');
Splitter();
splitter.position('50%')
});
Alles anzeigen
Nach langem hin und her habe ich es mit »splitter.position('50%')« geschafft, dass beim Verändern der Fenstergröße die Splitter-Position bei 50% ist.
Allerdings gibt es einen Sonderfall, bei dem dies nicht funktioniert. Dieser tritt ein, wenn man den Splitter bis zum Limit-Punkt auf 400px nach rechts zieht und dann das Browserfenster so klein wie möglich zieht. Dann dominiert der »limit: 400«-Befehl und die Splitter-Position liegt bei ungefähr 80%.
Wie lässt es sich machen, dass der »splitter.position('50%')«-Befehl dominiert?
Danke!