Replace a href text

http://cms-1.doublespark.eu/how-to-find-us.html

I am trying to change the word "Routing" to "Directions".

I have tried:

$jQ(document).ready(function() {
 
  $jQ("div.routinglink a").text('Directions');

});

But this is not working for me.

Any ideas?
Luv2MuffAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

vdelauCommented:
The drawing of the map (and thus the routinglink) might not occur until after the document is ready.

You should look for another trigger for this event, or do a custom pop-up somehow.
Luv2MuffAuthor Commented:
Thanks for trying to help.

Can you suggest another trigger?
DesignbyonyxCommented:
If you view source on that url, you can see the HTML that is used to render the "popup" bubble.  In there, you have the text "Routing" around line 146.  Can you just change it there?

I don't know how your CMS works, but something is setting that text and you should be able to change it through your CMS (through the google maps module).
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Luv2MuffAuthor Commented:
If only it was so easy, there is no way to change the text in the CMS :-(
DesignbyonyxCommented:
Haha, of course.  So here's what happens (basically):

Page starts loading
DOM "ready" event fires
Google starts loading it's maps
Map "loaded" event fires
A custom script creates the custom popup

Since there is no way to determine how long it will take for the maps to load, you must use an interval function to repeatedly run until the maps are loaded and the overlay is created.  Here is how would write the code:
$jQ(function($) {
  var linkInterval = setInterval(checkOverlay, 50);

  function checkOverlay() {
    var $rountingLink = $("div.routinglink a");\
    if($rountingLink.length) {
      $rountingLink.text('Directions');
      clearInterval(linkInterval);
    }
  }
});

Open in new window

DesignbyonyxCommented:
Excuse the typos... and I have not tested this.  It should give you the idea of what you have to do.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Dushyant SharmaCommented:
<script type="text/javascript">
         setTimeout(changethis,3000);

 function changethis(){
        $$("div.routinglink a").set('text',"Directions");
 }
</script>
DesignbyonyxCommented:
What happens if the maps take longer than 3 seconds (3000 ms) to load?  What if the maps load in .2 seconds?   Then the user sees "Routing for 2.8 seconds, and then it changes to "Directions".  An interval function is by far a much better approach ;)
ProculopsisCommented:

Ideally you would want to attach to the tilesloaded event but if this code is inaccessible then here is a nasty alternative:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26706889.html</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-2" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?language=&amp;sensor=false"></script>

<script type="text/javascript"> 
//<![CDATA[
 
function gmap1_initialize() {
	var gmap1_Options = {
		zoom: 6		, center: new google.maps.LatLng(52.5630,0.09394)
 
		, mapTypeId: google.maps.MapTypeId.ROADMAP
		, draggable: true		, disableDoubleClickZoom: false		, scrollwheel: true		, streetViewControl: true
				, mapTypeControl: true
		, mapTypeControlOptions: {
			style: google.maps.MapTypeControlStyle.DEFAULT			, position: google.maps.ControlPosition.TOP_RIGHT						, mapTypeIds: [
									google.maps.MapTypeId.HYBRID									,google.maps.MapTypeId.ROADMAP									,google.maps.MapTypeId.SATELLITE									,google.maps.MapTypeId.TERRAIN								]
					}
		
				, navigationControl: true
		, navigationControlOptions: {
			style: google.maps.NavigationControlStyle.DEFAULT,
			position: google.maps.ControlPosition.TOP_LEFT		}
		
				, scaleControl: true
		, scaleControlOptions: {
			position: google.maps.ControlPosition.LEFT_BOTTOM		}
		
    }
    var gmap1 = new google.maps.Map(document.getElementById("dlh_googlemap_1"), gmap1_Options);
 
					var gmap1_0_marker = new google.maps.Marker({
			position: new google.maps.LatLng(52.5630,0.09394)
			, map: gmap1														});
								var gmap1_0_infowindow = new google.maps.InfoWindow({
				position: new google.maps.LatLng(52.5630,0.09394),
								content: '<p>Hello</p><div class="routinglink"><a href="http://maps.google.com/maps?saddr=&daddr=PE15+8LF&ie=UTF8&hl=en" onclick="window.open(this.href); return false;">Routing</a> from your address:<br /><form action="http://maps.google.com/maps" method="get" target="_new"><input type="hidden" name="daddr" value="PE15 8LF" /><input type="hidden" name="ie" value="UTF8" /><input type="hidden" name="hl" value="en" /><input type="text" class="text" name="saddr" /><input type="submit" class="submit" value="ok" /></form></div>'
				});
			google.maps.event.addListener(gmap1_0_marker, 'click', function() {
				gmap1_0_infowindow.open(gmap1);
				});
							gmap1_0_infowindow.open(gmap1);
											
	if(window.gmap1_dynmap){
		gmap1_dynmap(gmap1);
	}
 
}
 
window.setTimeout("gmap1_initialize()", 500);
 
function kludge() {
  var anchor = $( "#dlh_googlemap_1 div.routinglink a" );
  if ( anchor.length != 0 ) {
    anchor.text("Directions");
  } else {
    setTimeout( kludge, 555 );
  }
}

$(document).ready( function() {

  kludge();

});

//]]>
</script>

</head>
<body bgcolor="beige">

<div class="dlh_googlemap block" id="dlh_googlemap_1" style="width:460px;height:500px;"></div>

</body>
</html>

Open in new window

Luv2MuffAuthor Commented:
Thanks for every ones help! This is the answer that I found worked for me.
Dushyant SharmaCommented:
you have selected the wrong one. it should be #34446817 .
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.