18.04.2022, 16:09
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.
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>