JavaScript not working in Safari 9

JavaScript
1

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.

2

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

3

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!

1 Like
4

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).

1 Like
5

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.

6

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.

1 Like
7

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.

8

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;
}
Edit:

I like to use the CSS Color Names page as the color groupings at the top of the page become very useful indeed.

1 Like
9

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!)

1 Like
10

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.

1 Like
11

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.

2 Likes
12

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

1 Like
13

Thanks @Paul_Wilkins and @chrisofarabia. At least I know where to look.

14

Hi there gandalf458,

as a matter of interest, does the code that I gave you here…

…work in your Safari 9 ?

coothead

1 Like
15

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 :slight_smile:

16

@coothead I’m delighted to say your script works on Safari 8 mobile. Yay!

1 Like
17

 
 
   Stone me gandalf458, that is the first one of
   my motley efforts that has worked this year. :wonky:

   I can now, contently, shake off this mortal coil. :winky:

   coothead

2 Likes
18

I don’t believe that for a moment! :slight_smile:

1 Like
19

You caught me out then . :eek:

I must admit that I am a congenital fibber. :shifty:

coothead

2 Likes
20

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.