Hello
I'm writing a program that uses the Virtual Earth Map to show certain items on the map with information about them.
I would like to insert tabs into the pin's information window, so when I have a couple of items in the same place, I could nevigate between the details of every one of them (and not see the details of all the items altogether).
Is there a way to do something like that
Thanks
Can I use tabs in the pin's information?
Bryce Beagley
The most simplist form of tabs is a set of links across the top that simple perform a display:none / block on a set of divs below.
HTML:
<div class="PopupTabButton" onclick=PopupSwitchTab(0);">Tab 1</div>
<div class="PopupTabButton" onclick=PopupSwitchTab(1);">Tab 2</div>
<div class="PopupTabButton" onclick=PopupSwitchTab(2);">Tab 3</div>
<div class="PopupTabButton" onclick=PopupSwitchTab(3);">Tab 4</div>
<br /><br />
<div id="PopupTab0" class="PopupTab" style="display:block;">
11111 The quick brown fox jumped over the lazy dog.
</div>
<div id="PopupTab1" class="PopupTab" style="display:none;">
22222 The quick brown fox jumped over the lazy dog.
</div>
<div id="PopupTab2" class="PopupTab" style="display:none;">
33333 The quick brown fox jumped over the lazy dog.
</div>
<div id="PopupTab3" class="PopupTab" style="display:none;">
44444 The quick brown fox jumped over the lazy dog.
</div>
Javascript (put on the page itself):
function PopupSwitchTab(index)
{
for (var x=0;x<4;x++)
{
if (x==index)
{
document.getElementById("PopupTab" + x).style.display = "block";
}else
{
document.getElementById("PopupTab" + x).style.display = "none";
}
}
}
CSS:
.PopupTabButton {min-height:20px; position:relative; float:left; cursor:pointer; padding:2px; border:solid 1px black;}
.PopupTab {min-height:200px;}
Feel free to then add some graphics in css to make them look like tabs. To make it more generic you could pass the total number of tabs and the ID prefix to the popupswitchtab function.
John
anvaka
Hi, I still have problems adding the tabs,
I couldn't find html code for tabs, that dosn't consist on java script, (I should mention I don't have a lot of experience with both html and js), and I couldn't pass the code with the JS as an argument to the fuction that creates the pin.
is there a way to pass JS code to it (or a way to add tabs with no js)
Peter paterson
G maps enables tabbed popups OFF the API out fo the box. For MS VE you have to insert some special html that provides tabbing. Again, I would suggest that MS hires those SoulSolutions guys or someone else and expand the API as, as much as I think poorly of G, I am getting irritated but MS being outmanouvered by G.
MS should rock! GO MS!
Sen_p_kumar
Vasic
As for inserting tabs into the pin's information window, you can put html into the pin "details" parameter when isnerting pins so you should be able to throw whatever effects you need there.
Alex21
thanks for the answer,
my program shows the places to which your computer is connected. for every connection you have, it shows a pin in the map, and present some relevant details.
quite often, there are several connections to the same place (city), and in that case, all the connections are related to the same pin. I wanted the window to have tabs, so you can browse between the different connections, and view (the details of) each of them separately.
I assume inserting code to the "details" paremeter will show an inner box with tabs inside the window, and I was looking for something that will add tabs to the whole window (and not just the details area), so moving to another tab will change the title as well. but on second thought it will also look good like that (with inner box). the title is the place (which is the same) and I can also add the number of the connections to it.
of course, If anyone knows a way to add them to the whole window, I would still like to know...