jQuery Splitter / Splitter-Position, wenn Fenstergröße verändert wird

fei12A · 27. Juni 2019

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!

basti1012 · 28. Juni 2019

kannst du mal dein html code auch dazu posten? Hat wahrscheinlich keiner lust das alles nachzubauen .

Oder hast du es schon online ? , das wäre noch besser

fei12A · 28. Juni 2019

Hallo basti1012 ,

ich hab die Dateien hier hochgeladen:
https://drive.google.com/file/…f--678hx/view?usp=sharing

Ein Video, das das Problem zeigt, ist auch dabei.

basti1012 · 28. Juni 2019

So ganz verstehe ich es nicht.

Wenn ich den mittleren ( nenne das mal Splitter ) nach rechts schiebe, bis zur 400 marke ist ja alles gut.

Bei dir im Video sieht es dann so aus das der Splitter bei ca 80% hängen bleibt.

Bei mir im Browser aber springt der Splitter wieder in der Mitte ( 50% , 50% ) wenn ich versuche den Browser kleiner zu ziehen.

Das kann jetzt ein Browser problem sein, oder ich verstehe es falsch.

Oder du hast beim einbinden was anders gemacht als ich ( das schliesse ich mal jetzt aus ).

Ich gebe hier mal mein Link damit du , und andere es mal testen können wie es bei ihnen ist.

( LINK GELÖSCHT VON BASTI1012 )

und hier das Video von dir

( LINK GELÖSCHT VON BASTI1012 )

Sobald dein problem behoben ist nimm ich die Links hier wieder raus

fei12A · 28. Juni 2019

Hey,

danke fürs Nachschauen!

Ja, bei mir bleibt er dann ungefähr bei 80 Prozent hängen. Das liegt an dem »limit: 400«-Befehl, der hier dominiert ...
Kann man in JavaScript »!important« angeben?

Grüße

fei12A · 28. Juni 2019

Ah und ich habe noch eine Frage:

Wie deaktiviert man die »jquery.splitter.js« für eine Window Size unter 500px?

basti1012 · 28. Juni 2019

fei12A schrieb:

Wie deaktiviert man die »jquery.splitter.js« für eine Window Size unter 500px?

Hast du schon mal in der Beschreibung von den Script geschaut ?

Viele solcher Einstellungen bauen Script Hersteller schon im Script ein die man dann ganz leicht einstellen , und aktivieren kann.

Ansonsten muß man die Fensterbreite auslesen und über 500 Pixel das aktivieren. Ich kucke gleichmal ob der Hersteller da schon was eingebaut hat.Ansonsten muss man mal kucken wo man die Fensterbreiten Abfrage am sinnvollsten reinmacht.

Soll den unter 500 Pixel die Splitter Funktion gar nicht mehr laufen oder nur bestimmte Teile anders laufen ?

fei12A · 28. Juni 2019

basti1012 Unter 500px würde ich das Script gerne komplett deaktivieren. Und im Code konnte ich nichts dafür finden.

Versucht habe ich es damit:

Code

if ($(window).width() < 500) { alert('Less than 500');
}
else { alert('ok'); $.getScript( 'js/jquery.splitter.js' );
}

Aber es klappt so leider nicht.

fei12A · 28. Juni 2019

Code

if (window.innerWidth > 800) {
var head = document.getElementsByTagName('head')[0];
var s1 = document.createElement("script");
s1.type = "text/javascript";
s1.src = "js/jquery.splitter.js";
head.appendChild(s1);
}

Damit funktioniert es, wenn die Seite in der jeweiligen Bildschirmbreite geladen wird. Allerdings updated es nicht, wenn die Fenstergröße verändert wird.

fei12A · 29. Juni 2019

Lösung:

Code

$(window).resize(function(){ if( $(this).width() <= 960 ) { $("#script").html().remove(); } });

@basti1012 Kannst du dann die Sachen bitte wieder löschen?

basti1012 · 29. Juni 2019

fei12A schrieb:

Allerdings updated es nicht, wenn die Fenstergröße verändert wird.

Dafür müstest du es mit ein resize event machen.

Aber damit hat sich das auch nicht erledigt. Wenn du es nicht richtig machst feuert er dir 100 te von Scripte im quelltext weil resize ja bei jeder Pixel bewegung Feuert. Dann müstest du du das Script unter 500 Pixel aus den Dom löschen.

Dein Vorhaben müsste ungefähr so aussehen

Code

ok=1;
$( window ).resize(function() {
wiwith=window.innerWidth;
if(wiwith>=500){
if(ok==1){
var head = document.getElementsByTagName('head')[0];
var s1 = document.createElement("script");
s1.id='scri';
s1.type = "text/javascript";
s1.src = "https://sebastian1012.bplaced.net/test/splitter-problem/js/index.js";
head.appendChild(s1);
ok=2;
}
}else{
if(ok==2){
$('#scri').remove();
ok=1;
}
}
}
});

Alles anzeigen

Du fragst dich jetzt was das ok da soll ?

Wenn dudas genau ankuckst , bzw testen tust siehst du das das Script nur einmal geladen wird,.unter 500 Pixel wird es wieder gelöscht und über 500 wieder einmal geladen. Ohne die ok würdest du mehrer 100 mal das Script laden.

Es gibt bessere Methoden aber die fiehl mir gerade am schnellsten ein.

ABER ich denke mal das es trotzdem nicht geht mit den Script, auch wenn er es richtig laden und löschen tut.

Deshalb fällt mir nur noch eins ein, das man nicht das Script laden tut sondern die funktionen im Script nur ab bestimmte größen zu erlauben.

Zb

Code

$( window ).resize(function() {
wiwith=window.innerWidth;
if(wiwith>=500){
// hier alle functionen rein die das Splitter Script brauch
}else{
// hier nix rein , bzw Anweisungen die unter 500 Pixel gemacht werden sol
}
});

Das ist jetzt mal so da hingeschrieben als mein gedanken weg, also kein Funktionierender Code

basti1012 · 29. Juni 2019

Mist zusammen geschrieben.

Hast du mal in deiner Console gekuckt wie oft er das Script jetzt laden tut mit deinen Code?

Du machst doch noch createElement('script') oder ? weil das sieht man ja jetzt nicht was duda jetzt machst bei den letzten Code den du gepostet hast

Funktioniert das den auch alles ? Weil habe das eben auf Codepen getestet aber da ging das nicht richtig.

Jo habe ich wieder weg gelöscht vom server

fei12A · 29. Juni 2019

basti1012 Es funktioniert mit meinem Code eigentlich sehr gut. Ich habe der Script-Verlinkung eine ID gegeben und dann entferne ich bei unter 960px das Script mithilfe der ID.

basti1012 · 29. Juni 2019

Habe, dass Splitter Script nochmal gefunden ist eigentlich das gleiche , doch da kann man den Splitter deaktivieren.

Ist besser als das erstellen und löschen des Skriptes.

Habe das jetzt nicht in dein Script eingebaut, sondern nur ein Beispiel herausgemacht.

https://basti1012.bplaced.net/…rdner=html-seminar&id=363

Wenn du das Fenster kleiner und größer ziehen tust siehst du das der Splitter deaktiviert ist oder wieder aktive.

Vielleicht solltest du mal gucken, ob du das Splitter Script nehmen tust, weil das wird bestimmter besser sein als das Script zu löschen und erstelle.