The JS in this pen appears not to work in Safari 9 and below - it doesn’t allow cards to be selected. I realise Safari 9 is now quite old but can it be made to work? I can’t see that there’s much for older browsers t object to.
What’s it supposed to be doing? At the moment, if I click on three cards, then the button, it all seems to reset with no other signs of anything having happened - that’s in Chrome 64
Thanks Chris. That’s all that’s supposed to happen in this snippet. What happens when it doesn’t work is that when you click on a card it doesn’t change to the grey image. If that makes any sense!
It’s doing that OK. If no one else pops up in the meantime, then I’ll take a bit more of a look, but I have a few things to do before then (mostly involving builders).
The following image is what that code uses:
So if the background isn’t changing, and the browser console doesn’t show any problem, it might be a CSS sliding doors compatibility issue.
You can figure out what’s causing the problem by checking to see if the card gains the selected
classname in Safari 9. If it does, then the JavaScript is working properly and there’s some CSS issue occurring instead.
Ah, I hadn’t thought about it being a CSS issue. There’s only one CSS rule. Trouble is I don’t have a Mac to try it on. It doesn’t work on Safari 8 mobile on my iPhone 4s but I can’t do any debugging on that.
Add a selected CSS rule to give it a border, and you’ll have some visual feedback to help you figure out what’s going on.
#card-layout li.selected {
border: 1px solid chartreuse; /* added for debugging */
background-position: -132px 0;
}
I like to use the CSS Color Names page as the color groupings at the top of the page become very useful indeed.
Nah! No border, no change of image.
I’ve just realised why I thought it’s a JS problem - if you click on (select) 3 cards then the submit button is un-disabled. That’s not happening, so it seems more than a display issue.
(I thought chartreuse was going to be a magenta-ish colour. How wrong can a wizard be!)
I’ve had a good look around caniuse, but can’t see anything Safari 9 shouldn’t be able to handle. Unfortunately, I’ve got Safari 11 here, and it doesn’t look like you can cripple it back to 9 to see what’s going on - that was at least one thing you could do with IE when you needed to, came in very handy at times.
The fanciest technique that I see that the code uses, is the links.forEach
That’s not the array forEach that’s being used, but is instead the nodeList forEach instead, which is a possible cause of the problem.
Someone with access to Safari 9 though will be able to help more, by debugging the code from within the browser.
You might be right. This page is a bit vague on whether anything before 10 supports it - https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach
Thanks @Paul_Wilkins and @chrisofarabia. At least I know where to look.
Hi there gandalf458,
as a matter of interest, does the code that I gave you here…
…work in your Safari 9 ?
coothead
Hi @coothead
I’ve been working my way through your changes (rather than just using it “as is”). I will try your “as is” version in the morning…
Cheers
@coothead I’m delighted to say your script works on Safari 8 mobile. Yay!
Stone me gandalf458, that is the first one of
my motley efforts that has worked this year.
I can now, contently, shake off this mortal coil.
coothead
I don’t believe that for a moment!
You caught me out then .
I must admit that I am a congenital fibber.
coothead
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.