I have been doing research but I just cant find working solution. I am working on one website where I have slide carousel with 3 slides in home page. 2 of slides linking to same activity.html just pointing to different 'tabs'/'cards'. One slide from home page opens activity 'tab'/'card' on activities.html page, another opens consultation 'tab'/'card' using localStorage. On PC works just fine, but the problem is:
This does not work on my iPhone. After my research I found out that is the private.. whatever thing.. problem on safari. I have tried to use store.js, memorystorage.js, Coockies.js and few other. Non of them helped. Tried using querystring and hash but problem is these strings remains in url. I desperate need to find a solution for this annoying problem.
Logic I using is simple: On slide button press I set item into localStorage on main js file. In the activities.html I have small script where I get item from localStorage and then check which of two item is in localstorage. If its travel, so open travel 'tab'/'card' if its consultation, etc, you get the idea... This script sits in the main js file:
(function() {
const travelSlideBtn = $("a#slide2-btn");
const consultationSlide = $("a#slide3-btn");
function setTravelSlide() {
localStorage.setItem("travelSlide", "travelSlide");
}
function setConsultationSlide() {
localStorage.setItem("consultationSlide", "consultationSlide");
}
//Events
travelSlideBtn.on('click', setTravelSlide);
consultationSlide.on('click', setConsultationSlide)
}());
And that script sits in activities.html page:
let travelSlide = localStorage.getItem("travelSlide");
let consultationSlide = localStorage.getItem("consultationSlide");
const thumbnail = $(".thumbnail");
const travelThumbnail = $(".travel-thumbnail");
const consultationThumbnail = $(".consultation-thumbnail");
let thumbnailOffsetTop = thumbnail.offset().top - $("#main-header").height();
if ('localStorage' in window && window.localStorage !== null) {
if (travelSlide == "travelSlide") {
TweenMax.to(window, 1, {scrollTo:{y:thumbnailOffsetTop, ease: Power4.easeOut}, onComplete:function(){
travelThumbnail.click();
localStorage.removeItem("travelSlide");
}});
}
if (consultationSlide == "consultationSlide") {
TweenMax.to(window, 1, {scrollTo:{y:thumbnailOffsetTop, ease: Power4.easeOut}, onComplete:function(){
localStorage.removeItem("consultationSlide");
consultationThumbnail.click();
}});
}
}else{
console.log('cannot use');
}
Well I found the problem. I was looking wrong things. The problem was not with localStorage. GSAP was causing problem here:
TweenMax.to(window, 1, {scrollTo:{y:thumbnailOffsetTop, ease: Power4.easeOut, autoKill:false}, onComplete:function(){
localStorage.removeItem("consultationSlide");
consultationThumbnail.click();
}});
When I set autoKill to false, everything started to work. Heh, wasted so much time looking for wrong things :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.