- This topic is empty.
March 20, 2019 at 3:24 pm #285152
The idea is that the resort has cabins numbered 1-4 and each cabin can be reserved from Saturday afternoon one week and checkout Saturday morning the following week. I want the default setting to be unavailable with the table row background being a light shade of red. I’m trying to figure out how to set up the code to have a clicked/active “Cabin 1” button show all of the table rows in which Cabin 1 was available. Then the same with the other Cabins.
Code here –
https://codepen.io/ryan-agrimson/pen/JzZYNeMarch 20, 2019 at 4:38 pm #285156March 20, 2019 at 4:50 pm #285158
Thank you! For some reason Codepen is freaking out on Safari 12.0.3, but looks great on firefox and chrome. Is this not-compatible for safari?March 20, 2019 at 5:05 pm #285163
The JS is quite basic so I wouldn’t know what would trigger it. Only thing I can think of is that Safari doesn’t like the button being an
alink (it would be preferable to use a more semantically correct tag)…
Does the tweak of adding
e.preventDefault()as I have now done in the example fix anything?
I can’t actually check that browser myself.
Edit – you can also try adding an empty
href="", omitting it altogether isn’t valid markup I think.March 20, 2019 at 5:28 pm #285164
I tested it it within the website and it works great on safari if I use it as an inline script. Thank you this works fantastic when adding the other cabin classes!March 20, 2019 at 5:55 pm #285166
Cheers, I did indeed make sure that it loops through all the buttons (regardless the amount) and finds the matching classes – in the order in which they appear on the page markup (I reckon that was only the requirement here).