crazycatpot
KPCKevin Powell - Community
•Created by crazycatpot on 1/4/2024 in #front-end
iPads/iPhones: problem with my Homepage
Ok, so if anyone sees this, I think I've solved the problem with my homepage hero horizontal image carousel scroller not allowing vertical scroll action on iPads and iPhones and Firefox on Android: I have 2 event listeners in my image slider script, one for touchstart and the other for touchmove events and the 3rd parameter was set simply to "false". It should have been set to {passive: true}. That seems to have done the trick! Safari defaults that parameter to false while the others default to true...so, yeah, a bit of a headbanger that was! 👍
17 replies
KPCKevin Powell - Community
•Created by ASTRICK on 1/4/2024 in #front-end
<hr/> turned to dot when render on website. How to fix it?.
Use your dev tools to check its width. You have one above that and they look centered; maybe check the difference between the 2.
4 replies
KPCKevin Powell - Community
•Created by Splexh on 1/7/2024 in #front-end
Creating a Language Selector with Image Display Issue in HTML - Seeking JavaScript or CSS Solution
I think a drop-down with the language names would be clearer for everyone. Using flags is kind of...meh..., like it's not 100% clear for everyone. Just say Deutsch, Español, English, etc and that makes it clear and simple. Lots of sites do that. A language picker is not a main feature of a website, you use it once and it's good to have, but that's it.
26 replies
KPCKevin Powell - Community
•Created by crazycatpot on 1/4/2024 in #front-end
iPads/iPhones: problem with my Homepage
Ah, thanks! LOL! I saw that there are librairies that take care of all the heavy lifting, but I thought "Nah, I don't want to go there with my little ol' site"! Makes for a good learning experience though! The only problem here is that I don't have an iPad to test with, but at least this quirky behaviour is not really a deal breaker, the site works for the most part and " I'm " the customer so...lol!
17 replies
KPCKevin Powell - Community
•Created by crazycatpot on 1/4/2024 in #front-end
iPads/iPhones: problem with my Homepage
Thank you for the suggestions! I will let that sink in a bit since I'm quite the beginner in JS! 🙂
17 replies
KPCKevin Powell - Community
•Created by crazycatpot on 1/4/2024 in #front-end
iPads/iPhones: problem with my Homepage
I use touchstart and touchmove.
17 replies
KPCKevin Powell - Community
•Created by crazycatpot on 1/4/2024 in #front-end
iPads/iPhones: problem with my Homepage
Yes I animate the left property of each slide every 10 seconds. I noticed some strange things going on (like slides moving rapidly one after another every once in a while), but don't have enough js experience to make the experience smoother. It's a work in progress! 🙂
17 replies
KPCKevin Powell - Community
•Created by crazycatpot on 1/4/2024 in #front-end
iPads/iPhones: problem with my Homepage
Ha! That's interesting! Thanks for the detailed feedback! 👍
The hero slider animation is controlled via a script which automatically moves each slide to the left after 10 seconds (minus 1 sec for the actual animation). The script checks if the screen has been touched and that might be where the problem lies. I use the following to evaluate that part: ( 'ontouchstart' in window ) ( navigator.maxTouchPoints > 0 ) ( navigator.msMaxTouchPoints > 0 ). From there I check the difference in X and Y (event.touches[0].clientX and event.touches[0].clientY) to see if there has been a left or right swipe and then call event.preventDefault() before exiting.
I also set a height of 93vh and 93svh on my hero section and I think that causes a problem in seeing the "dots" underneath the slider (I don't know if that has anything to do with the problem though). I also haven't put any "webkit-" prefixes anywhere in my css although my css doesn't use anything that has not been supported by webkit for at least several years.
I also set a height of 93vh and 93svh on my hero section and I think that causes a problem in seeing the "dots" underneath the slider (I don't know if that has anything to do with the problem though). I also haven't put any "webkit-" prefixes anywhere in my css although my css doesn't use anything that has not been supported by webkit for at least several years.
17 replies