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

  • Hey!

    Ich arbeite mit jQuery Splitter und Masonry. Hier mein Code:



    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!

  • 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

  • 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

  • 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 ?

  • 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.

  • 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.

  • 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

    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

  • 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

  • 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.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!