Styling 'My Location' button

This support ticket is created 5 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will start replying to tickets in about 4.96 hours from now. Thank you for your understanding.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-
-	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-

Supporter timezone: Asia/Karachi (GMT+05:00)

Tagged: Toolset Maps, Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by serenus 5 years, 11 months ago.

Assisted by: Waqar.

Author

Posts

December 11, 2018 at 7:43 pm #1164046

serenus

I'd like to change the 'My Location' button with my own icon (same as the one used on the map for 'my location') and no text. However, I'd like to use the text 'Use my location' on hover.

December 13, 2018 at 5:54 am #1165332

Waqar

Hi there,

Thank you for contacting us and I apologize for the delay.

I noticed that the FontAwesome is already loaded on the website, but couldn't locate any "Use my location" button.

To update the icon and text, on regular and mouse hover states, you can include the following script in your view's "JS editor"
tab:


jQuery( document ).ready(function() {

	jQuery( ".js-toolset-maps-distance-current-location" )
 		.mouseover(function() {
			// value to show on mouse over state
			jQuery( this ).val(jQuery("<div>").html("&#xf002; Use my location").text());
		})
 		.mouseout(function() {
			// value to show on mouse out state
			jQuery( this ).val(jQuery("<div>").html("&#xf002;").text());
		});

	// value to show on page load
	jQuery(".js-toolset-maps-distance-current-location").val(jQuery("<div>").html("&#xf002;").text());
	  
});

Feel free to replace all instances of "" with an ASCII code of your desired font icon.
( ref: hidden link )

I hope this helps and please let me know how it goes.

regards,
Waqar

December 17, 2018 at 4:20 am #1167385

serenus

Thanks Waqar. That's perfect!