Hello,
I am very fan of your VirtualEarth service but unfortunaly, i am confronted with a bug than is cause by the way you use CSS (I think)
I know that all of your teams are celebrating the Vista worldwide availability… but I expect that the VE team will take a look on this bug.
I attach to this mail two examples showing and reproducing this bug (vmap_good.rar et vmap_bad.rar)
All the problem is the way that the map is loaded/matched in a div with CSS property “diplay:none;”
Hope you will resolve it.
Thanks
Th.
/* GOOD SOURCE CODE */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<header><title>NAVB (C) 2006 - EDE-STUDIO</title></header>
<script src="http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js"></script>
<script>
var map = null;
function GetMap() {
map = new VEMap('myMap');
map.LoadMap();
map.AttachEvent('onclick', onMapClick);
}
function onMapClick(e) {
map.SetCenter(e.view.LatLong);
}
</script>
<!-- IMPORTATION DU MOTEUR CSS ET JAVASCRIPT -->
<script src="navb.js" language="javascript" type="text/javascript"></script>
<link href="navb.css" rel="stylesheet" type="text/css" />
<!-- onLoad => CHARGEMENT D'UN ONGLET AU DEMARRAGE DE LA PAGE -->
<body onLoad="showTab('tab_1'); GetMap()" >
<br />
<!-- DEBUT SCRIPT HTML POUR TABNAV -->
<div id="tabNav" style="width: 100%;" >
<!-- LISTE DES ONGLETS -->
<input id="tab_num" type="hidden" value="3" />
<div id="tabNav_tabs">
<a class="tab_selected" id="btn_tab_1" href=void(0)" onclick="showTab('tab_1');" />VirtualEarth</a>
<a class="tab_unselected" id="btn_tab_2" href=void(0)" onclick="showTab('tab_2');" />Information</a>
<a class="tab_unselected" id="btn_tab_3" href=void(0)" onclick="showTab('tab_3');" />Live</a>
<!-- CONTENU DES ONGLETS -->
</div>
<div id="tabNav_main">
<div id="tab_1">
<h2>VirtualEarth</h2>
<div id='myMap' style="position:relative; width:800px; height:400px;"></div>
</div>
<div id="tab_2" style="display: none; ">
<h2>Informations</h2>
<p>When a Virtual Map is loaded in a visible div, it run. :)</p>
</div>
<div id="tab_3" style="display: none; ">
<h2>Windows Live</h2>
<iframe src="http://www.live.com" width="800" height="400" frameborder="0"></iframe>
</div>
</div>
</div>
</body>
</html>
/* BAD SOURCE CODE */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<header><title>NAVB (C) 2006 - EDE-STUDIO</title></header>
<script src="http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js"></script>
<script>
var map = null;
function GetMap() {
map = new VEMap('myMap');
map.LoadMap();
map.AttachEvent('onclick', onMapClick);
}
function onMapClick(e) {
map.SetCenter(e.view.LatLong);
}
</script>
<!-- IMPORTATION DU MOTEUR CSS ET JAVASCRIPT -->
<script src="navb.js" language="javascript" type="text/javascript"></script>
<link href="navb.css" rel="stylesheet" type="text/css" />
<!-- onLoad => CHARGEMENT D'UN ONGLET AU DEMARRAGE DE LA PAGE -->
<body onLoad="showTab('tab_1'); GetMap()" >
<br />
<!-- DEBUT SCRIPT HTML POUR TABNAV -->
<div id="tabNav" style="width: 100%;" >
<!-- LISTE DES ONGLETS -->
<input id="tab_num" type="hidden" value="3" />
<div id="tabNav_tabs">
<a class="tab_selected" id="btn_tab_1" href=void(0)" onclick="showTab('tab_1');" />Information</a>
<a class="tab_unselected" id="btn_tab_2" href=void(0)" onclick="showTab('tab_2');" />VirtualEarth</a>
<a class="tab_unselected" id="btn_tab_3" href=void(0)" onclick="showTab('tab_3');" />Live</a>
<!-- CONTENU DES ONGLETS -->
</div>
<div id="tabNav_main">
<div id="tab_1">
<h2>Informations</h2>
<p>When a Virtual Map is loaded in a hiddend div, it bug. :(</p>
</div>
<div id="tab_2" style="display: none; ">
<h2>VirtualEarth</h2>
<div id='myMap' style="position:relative; width:800px; height:400px;"></div>
</div>
<div id="tab_3" style="display: none; ">
<h2>Windows Live</h2>
<iframe src="http://www.live.com" width="800" height="400" frameborder="0"></iframe>
</div>
</div>
</div>
</body>
</html>
[CSS BUG] Trouble with a map loaded in a hidden div
Vamshi Raghu
In the good one, the Vmap works good because it is loaded in a div who doesn't have the display: CSS attribute set
In the bad one, the Vmap is loaded in a div who is hidden by the display:noe CSS attribute. That's what i want.... BUT... when you switch from the Tab1 to Tab2 to show the map up, the Vmap doen't work well.... it's loaded... but bugged :
->Not all the map is loaded
->All the pushpin are located at top right
->The mouse navigation is broken
-> The panel is broken too
do you understand
hiner129
CodeScribler
You can download the archives right here :
http://xwebstudio.free.fr/vmap_bad.rar
http://xwebstudio.free.fr/vmap_good.rar
Sam Vella
<a class="tab_unselected" id="btn_tab_2" href=void(0)" onclick="showTab('tab_2'); GetMap();" />Information</a>
Hope that helps,
GKW82
I don't understand what you mean with "is reulting in object expected javascript error"
There is no javascript script error in my code. And Unfortunaly, the WYSIWIG editor of the Forum doen't have any option ou tag to encasulate my code in a convinient format.
If you want, i can upload a archives of these files and give the address to download it.
cplusplus1
when the "display:none" style is applied to a div tag, it is suppose to hide everything inside the element. Since you've put the map inside the div tag, I would expect the VE map to be hidden as well. Can you be a bit more specific as to what you are looking for instead
Ultrawhack
thanks a lot...
Bazzer