Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Swipe
#1
Vorab: Ich nutze Bootstrap und jQuery.

Ich versuche ein <div> Feld zu erstellen, gefüllt mit Bilder und Text, welches bei einem swipe komplett verschwindet und dafür an gleicher Stelle ein anderes div Feld mit zumindest Text  eingeblendet wird.

Hinzu kommt, dass ich das ganze gerne für mobile und Desktop programmieren würde. In der Desktopversion soll anstelle des swipe ein Button für links und rechts erscheinen.
Regeln würde ich das ganze über Media queries, weswegen zwei getrennte Codes mir schon helfen würden.

Gefunden habe ich dazu verschiedenes, mein aktueller Ansatz ließ zumindest Hintergrundfarben swipen bevor ich ihn abgeändert habe.
Zuvor habe ich noch src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" eingebunden.

div.box{

}
div.swipeleft {
  display: none;
}
</style>
</head>
<body>

<div class="box">hallo</div>
<div class="swipeleft">tschüss</div>

<script>
$(function(){
$( "div.box" ).on( "swipeleft", swipeleftHandler );
function swipeleftHandler( event ){
  getElementsByClassName("box").style.display="none";
  getElementsByClassName("swipeleft").style.display="block";


}
});
</script>
Zitieren
#2
Erklär mir mal genau was swipe genau macht und was das tut. Bei den ganzen verschiedenen Angaben im Netz weiß ich jetzt nicht genau was du meinst
Zitieren
#3
Ja du guckst ich gleich mal. Muss erstmal zum Arzt und dann schauen wa mal was mir da so einfällt.
Du willst auf jeden Fall div Container swipen wo durch einen wisch, ein neues div erscheint an gleicher stelle?
Das sollte aber eigentlich kein Problem sein
Zitieren
#4
Meinst du sowas in der Art


DEMO

[Bild: soforthilfeforum-94.png]
Zitieren
#5
Ja genau sowas =) Ich versuche heute Nachmittag/abends, sobald ich zurück bin, das anzuwenden Smile
Vielen Dank!
Zitieren
#6
Muss ich auch diesmal noch etwas einbinden außer jQuery mobile?
Zitieren
#7
Ja
https://cdnjs.cloudflare.com/ajax/libs/j...ery.min.js
https://cdnjs.cloudflare.com/ajax/libs/t...rap.min.js
https://cdnjs.cloudflare.com/ajax/libs/j...ipe.min.js

https://cdnjs.cloudflare.com/ajax/libs/t...ap.min.css

Den Bootstrap scheiß brauchst du ja nur fürs Layout. Wenn du da selbst was baust, kannst du das natürlich weglassen
Zitieren
#8
Bleibt leider dabei. Bei mir trotz Code eins zu eins kopieren weder auf Handy noch auf Desktop swipebar
Zitieren
#9
Ja dann zeig mal deinen Code ,weil du siehst ja das es in Codepen geht. Hast d u deinen Code da mal reinkopiert, ob es da läuft ?? Falls nicht, muss ja irgendwo ein Fehler sein
Zitieren
#10
So habe das eben in codepen kopiert, da geht es ganz normal. Der Code ist wirklich komplett identisch. Habe überlegt, ob sich meine eingebundenen Bibliotheken überschneiden, aber auch das nicht. Ich vermute, es liegt an dem link in der CSS Datei im Body.
Zitieren


[-]
Schnellantwort
Nachricht
Geben Sie hier Ihre Antwort zum Beitrag ein.

 

Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste