emilban
Registered User |
Quote
|
| 2025-07-28 20:09:01 |
|
Is there a RocketCake script for left-right page swiping on a smartphone?
|
niko
Moderator |
Quote
|
| 2025-07-29 07:46:09 |
|
There is none I would know of, but it should be possible to create one. What exactly would you want to swipe - the image slide show or the carousel?
|
emilban
Registered User |
Quote
|
| 2025-07-29 10:09:18 |
|
I have about more than 40 pages on a websites (as a book) for smartphone. So, it will be easier for the user to swipe the page, as to click a button...What do you mean?
|
niko
Moderator |
Quote
|
| 2025-07-29 15:31:03 |
|
Ah, I see. I'll take a look if I can create a script for something like this in the next few days.
|
emilban
Registered User |
Quote
|
| 2025-07-29 16:01:23 |
|
Thanks Niko. I think it could be interesting also for other user...
|
niko
Moderator |
Quote
|
| 2025-07-30 13:30:45 |
|
You could try to do it this way - place this code onto the page using a JavaScript code element and replace the example.com url with the website you want to go to:
(function () {
// Set the target URL for redirection on right swipe
const swipeRightRedirectURL = "https://example.com"; // Change this to your target URL
let touchStartX = 0;
let touchEndX = 0;
const swipeThreshold = 50; // Minimum distance (px) for swipe detection
document.addEventListener("touchstart", function (e) {
touchStartX = e.changedTouches[0].screenX;
});
document.addEventListener("touchend", function (e) {
touchEndX = e.changedTouches[0].screenX;
handleGesture();
});
function handleGesture() {
if (touchEndX - touchStartX > swipeThreshold) {
window.location.href = swipeRightRedirectURL;
}
}
})();
|
emilban
Registered User |
Quote
|
| 2025-07-31 15:16:54 |
|
Hi Niko, is this script only for right swipe?
And... that's not exactly what I wish...because I want to place the script on a master page, something like next-prev button.
You know, that url: javascript:gotoNext(1);
Thanks.
|
niko
Moderator |
Quote
|
| 2025-08-01 09:16:25 |
|
Ah, I see - that's easily possible, too. On your master page, insert this code:
(function () {
const pages = ['index.html', 'about.html', 'contact.html', 'something.html'];
var url = window.location.pathname;
var idxPos = url.lastIndexOf('/');
var filename = url.substring(idxPos+1);
if (filename == '') filename = 'index.html';
var urlStart = url.substring(0, idxPos+1);
var indexMe = pages.indexOf(filename);
if (indexMe == -1)
return;
var indexPrev = (indexMe - 1) % pages.length;
if (indexPrev < 0) indexPrev = pages.length - 1;
var indexNext = (indexMe + 1) % pages.length;
let touchStartX = 0;
let touchEndX = 0;
document.addEventListener("touchstart", function (e)
{
touchStartX = e.changedTouches[0].screenX;
});
document.addEventListener("touchend", function (e)
{
touchEndX = e.changedTouches[0].screenX;
const swipeThreshold = 50;
if (touchEndX - touchStartX > swipeThreshold)
window.location.href = urlStart + pages[indexPrev];
else
if (touchEndX - touchStartX < swipeThreshold * -1)
window.location.href = urlStart + pages[indexNext];
});
})();
You only need to adjust the first line with the list of pages in the order your want them to appear.
|
emilban
Registered User |
Quote
|
| 2025-08-01 20:13:20 |
|
Great! It works. Thanks a lot Niko!!!
|
){kind=link}