New home › Forums › Gold Add-on › [Feature request] Adding categories slug in table row for hover effect
Tagged: category, hover effect, listing
- This topic has 13 replies, 2 voices, and was last updated 5 years, 7 months ago by Perry.
-
AuthorPosts
-
February 16, 2018 at 2:59 pm #34773arthosMember
Hey,
I’m a happy user of WP GMaps Gold, but my client is asking to differentiate the agencies present in the listing under the map, by, for example, creating a hover effect of different colors according to the different categories.
I’ve written the JS code that extracts the category, sanitizes the name and adds it as a class to the row and it works fine.
My problem is that it works well on the first page, but since the second page of listing is loaded without the DOM being changed, JS cannot detect the change and run the function to add the category to the row classes. So, on the first page, the rows change color on hover, but not on pages 2+, and that’s bugging my client.
Could it be possible to automatically add the category slug to the row classes, as soon as there is a category defined ? It’d be way much easier.
Thanks by advance.
Luc- This topic was modified 5 years, 7 months ago by arthos.
February 16, 2018 at 3:18 pm #34778PerryModeratorHey Luc
Thanks for getting in touch!
This sounds really good, well done on the code!
I would imagine what’s happening here is that you’ve set your code to run when the documents ready listener fires?
If that is the case, please note that you would need to run your code each time the dataTable is updated.
You can head on over to https://datatables.net/ for their documentation. You can access the data table through the marker listings container element,
You’ll want to bind to the draw event (https://datatables.net/reference/event/draw) and then run your JS code when that fires.
Does that help?
Kind regards
– PerryFebruary 16, 2018 at 4:52 pm #34787arthosMemberHey Perry,
Thanks for pointing me in the right direction.
I was obviously watching the document and missing the draw event. It works now. Way nicer! 🙂
Still, perhaps you could build that in. 🙂
February 19, 2018 at 9:17 am #34812PerryModeratorHi there
I’ve added a note on our repo and we’ll look into adding this in the near future – thanks for your suggestion!
Is there anything else I can help you with?
Kind regards
– PerryFebruary 19, 2018 at 10:41 am #34821arthosMemberHey Perry,
I could consider asking for an option to present categories as separate tabs, under the map, but I won’t push my luck.
I’m good for the moment, thank you.
(Didn’t find an option to mark the topic as resolved, I’ll let you do this.)
Best regards.
LFebruary 19, 2018 at 10:47 am #34823PerryModeratorThis reply has been marked as private.February 19, 2018 at 11:00 am #34827arthosMemberWell, then, could you tell me where I should head to transform the SELECT filter into a list of categories ?
That’s one more 5 star review for you on the WP repo.
Thanks!
L
February 19, 2018 at 12:04 pm #34830PerryModeratorHi Luc,
Thanks so much for the review! We really do appreciate it 🙂
If you want to change the dropdown into a list, you could use the checkbox list to achieve that. If you’re looking to make it so the user can only select one category at a time then you could use jQuery to turn all those checkboxes into radio buttons.
An alternative solution would be to use jQuery to turn the select options into radio buttons, then remove them from the select element.
If you need me to provide code, please link me to the page in question and I’d be happy to do so,
Kind regards
– PerryFebruary 19, 2018 at 1:12 pm #34835arthosMemberThis reply has been marked as private.February 19, 2018 at 2:09 pm #34839PerryModeratorHi Luc,
Yes I’d be happy to do that, can you first please change this to checkboxes in Maps -> Settings under “General Settings”, that will make the code considerably simpler.
Let me know when that has been done and I’ll get back to you with the code,
Kind regards
– PerryFebruary 19, 2018 at 2:13 pm #34841arthosMemberDone !
February 19, 2018 at 2:18 pm #34842PerryModeratorHi Luc,
Thanks for that!
You can use this Javascript to change them to radio buttons:
(function($) { $(document).ready(function() { $(".wpgmza_filter_container .wpgmza_checkbox").attr("type", "radio"); }); })(jQuery);
Does that achieve everything you wanted?
Kind regards
– PerryFebruary 19, 2018 at 2:21 pm #34843arthosMemberPerfect, thank you very much, I’ll manage from here !
February 19, 2018 at 2:44 pm #34846PerryModeratorYou’re most welcome!
If you do need anything else please don’t hesitate to get in touch 🙂
Kind regards
– Perry -
AuthorPosts
- You must be logged in to reply to this topic.