T. RUIZ


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>




Re: [CSS BUG] Trouble with a map loaded in a hidden div

Derek Chan


Copy and pasting your code (both good and bad versions) is resulting in object expected javascript error





Re: [CSS BUG] Trouble with a map loaded in a hidden div

T. RUIZ

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.






Re: [CSS BUG] Trouble with a map loaded in a hidden div

Derek Chan

Please post a link to your archive thanks




Re: [CSS BUG] Trouble with a map loaded in a hidden div

T. RUIZ

You can download the archives right here :

http://xwebstudio.free.fr/vmap_bad.rar

http://xwebstudio.free.fr/vmap_good.rar





Re: [CSS BUG] Trouble with a map loaded in a hidden div

Derek Chan

I'm not sure if I understand what the problem is here:

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




Re: [CSS BUG] Trouble with a map loaded in a hidden div

T. RUIZ

ok, so... if you download & test the good and bad archive....

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




Re: [CSS BUG] Trouble with a map loaded in a hidden div

Derek Chan

Okay I'm not sure if its actually a bug but I think the reason this occurs is because LoadMap() is being fired on a div tag thats hidden so the VE API can't find the tag (or at least parts of it can't). Anyhow to fix this attach the Getmap() function to your onclick event so it looks like this:

<a class="tab_unselected" id="btn_tab_2" href=void(0)" onclick="showTab('tab_2'); GetMap();" />Information</a>

Hope that helps,




Re: [CSS BUG] Trouble with a map loaded in a hidden div

T. RUIZ

Wonderful, it work !

thanks a lot...