Thank you once again Imar for responding to my post.
As you advised, I managed to get the menu control work as i wanted and i also implemented the 'selected' class on the server using the Page_Load event.
Now my question has to do with with wiring events to controls.
For example, I have a server-side textbox control with class name 'directions'.
<asp:TextBox class="directions" ID="TextBox1" runat="server" ReadOnly="True" TextMode="MultiLine"></asp:TextBox>
I tried to access it from jQuery with the following code:
$('.directions').innerHTML = someValue;
It worked in IE, FireFox and Opera, but did not work in Safari and Chrome.
In another instance; this time with an html element.
I have the following code that is supposed to display the bing map and print out the directions for my location in the div element and then display the div element.
var map = null;
map = new VEMap('myMap');
map.LoadMap(new VELatLong(39.9627544730902, -75.2523048967123), 16, VEMapStyle.Road, false);
//get the center of the map
var pinpoint = map.GetCenter();
//declare shape of map in order to locate the center of the map
shape = new VEShape(VEShapeType.Pushpin, pinpoint);
shape.SetTitle("Ruby's Beauty Salon");
shape.SetDescription("We are located here. To get directions to come here, " +
"simply enter your current address in the textbox below " +
"and hit 'Get Directions'. If you have any questions, please " +
"call us on 610-446-2662.");
var what = document.getElementById('DirectionTextBox').value;
var options = new VERouteOptions();
options.DrawRoute = true;
options.SetBestMapView = false;
options.RouteCallback = onGotRoute;
map.GetDirections([what, map.GetCenter()], options);
var legs = route.RouteLegs;
var turns = "<h1>Total distance: " + route.Distance.toFixed(1) + " mi</h1><br />";
var numTurns = 0;
var leg = null;
for (var i = 0; i < legs.length; i++)
leg = legs[i];
var turn = null;
for (var j = 0; j < leg.Itinerary.Items.length; j++)
turn = leg.Itinerary.Items[j];
turns += "<ul><li>" + numTurns + ". " + turn.Text + " (" + turn.Distance.toFixed(1) + " mi)</li></ul>";
document.getElementById("DirectionResults").innerHTML = turns;
Note that I already have all the references to those libraries, in the master page.
Then in my html, I have the following code:
<!--This is the div where the map is displayed-->
<div id="myMap" style="width:770px; height:534px">
<!--This is the textbox where a user enter her current location address-->
<input id="DirectionTextBox" type="text" name="DirectionTextBox" />
<!--When the user clicks this button, the direction to my location is supposed to be populated in the DirectionResults div below and then the div is supposed to slide down-->
<input id="DirectionButton" type="button" onclick=" name="DirectionButton" value="Get Directions" /><br />
<div id="DirectionResults" class="directions"></div>
The map potion works fine in all browsers. It is displayed well in the map div. The problem is with the event wiring for the DirectionButton. When I test the app, the button click event works for all browsers besides Opera. Is there a way to get the code to work in all browsers?
Is there any explanation for the way the browsers differentiate server controls from html elements?
I know this is a lot, but I hope I have given enough information.
Thank you once again...