Internet solutions team

What to use with Jquery for Div html , innerHtml Or text?

I was working on project which uses Google maps. We allow users to create polygon on the Google map and when user starts drawing polygon we were to show tool tips, you can read how we are showing tooltips using Jquery on teh googel maps here [http://www.isolutionteam.co.uk/show-tooltip-on-google-map-polygon-drag-handle-using-jquery/].

Tool tip were worked great in all three browsers IE 7, Firefox 3.6.4 and Chrome 4.1.249.  Then there was a requirement to change tool tip text on every click of mouse on the map.  This process invoice to count vertices of polygon on the map.

I E was going  mad on second click when I was using $(“#maptooltipcontainer”).html(toolTipText). but it worked fine with Firefox and chrome versions mentioned above.
Then i changed $(“#maptooltipcontainer”).text(toolTipText). and it started working on all three browsers.

How to show tool tip on Google map polygon drag handle when user hovers mouse over the drag handle?

When user draws polygon on Google map, Google injects number of Div on to the map to  show the polygon drawn. Small squares on the polygon give the facility to drag and re-size the polygon. Those small squares are Div. J Query makes it very easy to implement events to those Div (drag handles). All drag handles has  id which starts with cp_n (underscore) n=number (0, 1, 2, 3….). J Query Selectors make it extremely easy to find all those Div which start with cp_ .  Following piece of code is doing the job for us.

$(“div[id^='cp_']“).mousemove(function(e)
{
showToolTip(“Drag to move a point”);
$(“#maptooltipcontainer”).css(“top”, (e.pageY – 190) + “px”).css(“left”, (e.pageX + 30) + “px”);
});

showToolTip is a method used to pass the tool tip text. You can create your own method or write your own logic.

This code is for illustration purpose only. Feel free to use according to your own needs.

$(“div[id^='cp_'] = J Query  Selector to get all Div where Div Id start with “cp_”.