Swipe - Druckversion

Swipe - Druckversion

+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: Swipe (/showthread.php?tid=476)

Seiten: Seiten: 1 2

Swipe - admin - 18.04.2022

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.

Code:
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>

RE: Swipe - admin - 18.04.2022

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

RE: Swipe - admin - 18.04.2022

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

RE: Swipe - admin - 18.04.2022

Meinst du sowas in der Art

DEMO

RE: Swipe - admin - 18.04.2022

Ja genau sowas =) Ich versuche heute Nachmittag/abends, sobald ich zurück bin, das anzuwenden Smile

Vielen Dank!

RE: Swipe - admin - 18.04.2022

Muss ich auch diesmal noch etwas einbinden außer jQuery mobile?

RE: Swipe - admin - 18.04.2022

Ja
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.18/jquery.touchSwipe.min.js

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

Den Bootstrap scheiß brauchst du ja nur fürs Layout. Wenn du da selbst was baust, kannst du das natürlich weglassen

RE: Swipe - admin - 18.04.2022

Bleibt leider dabei. Bei mir trotz Code eins zu eins kopieren weder auf Handy noch auf Desktop swipebar

RE: Swipe - admin - 18.04.2022

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

RE: Swipe - admin - 18.04.2022

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.