Antworten auf deine Fragen:
Neues Thema erstellen

Split Layout mit vier Slides

Ich versuche, eine Navigation mit vier Slides zu generieren.

Hier geht es zu meiner Testseite (inklusive Code): http://jsfiddle.net/n9z2nppr/4/

Basiert habe ich mein Testcase auf dieser Vorlage.
Während die erste (linke) Slide und die letzte (rechte) Slide funktionieren, funktioniert das Schliessen der Slides bei den inneren Slides nicht wie gewünscht: Die Klassen .open-innerleft und .open-innerright werde nicht zurückgesetzt, wenn die Slides geschlossen werden.

Dies scheint mit diesme Codeschnipsel zu tun zu haben, das für genau zwei Slides gecodet ist:
Javascript:
// back to intro
        // after transition ends:
        var onEndTransFn = function () {
            this.removeEventListener(transEndEventName, onEndTransFn);
            classie.add(splitlayout, 'reset-layout');
            document.body.scrollTop = document.documentElement.scrollTop = 0;
        },
        backToIntro = function (ev) {
            ev.preventDefault();
            ev.stopPropagation();
            var dir = classie.has(ev.target, 'back-left') ? 'left' : 'right',
                page = dir === 'right' ? pageRight : pageLeft;
            classie.remove(splitlayout, 'open-' + dir);
            classie.add(splitlayout, 'close-' + dir);
            page.addEventListener(transEndEventName, onEndTransFn);
        };

Wie muss ich das Script anpassen, dass die inneren Slides auch funktionieren?
Herzlichen Dank im Voraus
 

Duddle

Posting-Frequenz: 14µHz

Die ursprüngliche Logik prüft ob das <div> zum schließen eine bestimmte Klasse hat. Es gibt aber nur Pfeile für links und rechts, also kann das Script dort nur zwischen zwei Alternativen unterscheiden - du brauchst vier. Ich habe mal die Funktion angepasst, dass sie woanders schaut:
Javascript:
backToIntro = function (ev) {
  ev.preventDefault();
  ev.stopPropagation();
  if(classie.has(splitlayout, 'open-innerleft')){
  var dir = 'innerleft';
  var page = pageinnerLeft;
  }
  if(classie.has(splitlayout, 'open-innerright')){
  var dir = 'innerright';
  var page = pageinnerRight;
  }
  if(classie.has(splitlayout, 'open-left')){
  var dir = 'left';
  var page = pageLeft;
  }
  if(classie.has(splitlayout, 'open-right')){
  var dir = 'right';
  var page = pageRight;
  }
  classie.remove(splitlayout, 'open-' + dir);
  classie.add(splitlayout, 'close-' + dir);
  page.addEventListener(transEndEventName, onEndTransFn);
  };
Das funktioniert auch im JSFiddle im Firefox. Ich musste auch das CSS anpassen:
CSS:
.open-right .back-right, .open-left .back-left, .open-inner-right .back-right, .open-inner-left .back-left {
    visibility: visible;
    opacity: 1;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
    pointer-events: auto;
}
Hier muss "open-inner-right" "open-innerright" heißen, respektive für "left", sonst wird der zurück-Pfeil nicht sichtbar. Auch muss er wohl noch irgendwo verschoben werden, da er sonst überdeckt wird. Anklickbar ist er aber.


Duddle
 
Wunderbar. Herzlichen Dank. Überdeckt war der Pfeil nicht, jedoch war die Farbe unvorteilhaft, weshalb ich die CSS nochmals erweitern musste:
CSS:
.open-innerright .back-right {
    right: 12.5%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    color: #fff;
}

.open-innerleft .back-left {
    left: 12.5%;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    color: #191919;
}

Hast Du noch eine Idee, weshalb bei geöffneter Slide «Contact» am linken Rand noch irgendwas hervorschaut?
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.616
Beiträge
1.538.358
Mitglieder
67.536
Neuestes Mitglied
QuestionMark
Oben