[Feature request] Adding categories slug in table row for hover effect

[arthos]

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.

[Perry]

Hey 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
– Perry

[arthos]

Hey 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. 🙂

[Perry]

Hi 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
– Perry

[arthos]

Hey 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.
L

[Perry]

This reply has been marked as private.

[arthos]

Well, 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

[Perry]

Hi 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
– Perry

[arthos]

This reply has been marked as private.

[Perry]

Hi 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
– Perry

[arthos]

Done !

[Perry]

Hi 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
– Perry

[arthos]

Perfect, thank you very much, I’ll manage from here !

[Perry]

You’re most welcome!

If you do need anything else please don’t hesitate to get in touch 🙂

Kind regards
– Perry

[Author]

Posts