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%')
- });
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!