/    Sign up×
Community /Pin to ProfileBookmark

Table cells do not fill completely

Copy linkTweet thisAlerts:
Aug 28.2014

JavaScript people suggested this is more of a CSS problem

The HTML below almost works. But in order to see the status div I had to use height=95% which
produced the pink at the top and really does not make sense

Also, the container panes do not fill to the bottom of the cell. In order to see their bottom
I added the 70% but that’s not the right way to do it either

This is demo was made from an HTML file that normally displays in vs2013 with a webBrowser
control but it shows the same if the file is simply open with vs2013

Also,I have to click TRAVEL DIRECTIONS and then Show Driving Route.

[code=html]
 <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title>Bing Map</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0″></script>
<script type=”text/javascript”>
var map = null;
var directionsManager;
var panes = new Array();
function Initialize() {
var mapOptions = {
credentials: “key here “,
center: new Microsoft.Maps.Location(43.101329, -75.230907),
mapTypeId: Microsoft.Maps.MapTypeId.road
};
map = new Microsoft.Maps.Map(document.getElementById(“divMap”), mapOptions);
Microsoft.Maps.loadModule(‘Microsoft.Maps.Directions’);
setupPanes(“container1”, “tab1”);
}
function setupPanes(containerId, defaultTabId) {
panes[containerId] = new Array();
var maxHeight = 0;
var maxWidth = 0;
var container = document.getElementById(containerId);
var paneContainer = container.getElementsByTagName(“div”)[0];
var paneList = paneContainer.childNodes;
for (var i = 0; i < paneList.length; i++) {
var pane = paneList[i];
if (pane.nodeType != 1) continue;
panes[containerId][pane.id] = pane;
pane.style.display = “none”;
}
document.getElementById(defaultTabId).onclick();
}
function showPane(paneId, activeTab) {
for (var con in panes) {
activeTab.blur();
activeTab.className = “tab-active”;
if (panes[con][paneId] != null) {
var pane = document.getElementById(paneId);
pane.style.display = “block”;
var container = document.getElementById(con);
var tabs = container.getElementsByTagName(“ul”)[0];
var tabList = tabs.getElementsByTagName(“a”)
for (var i = 0; i < tabList.length; i++) {
var tab = tabList[i];
if (tab != activeTab) tab.className = “tab-disabled”;
}
for (var i in panes[con]) {
var pane = panes[con][i];
if (pane == undefined) continue;
if (pane.id == paneId) continue;
pane.style.display = “none”
}
}
}
return false;
}
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
//
function ShowDrivingRouteFromTxt() {
document.getElementById(“status”).innerHTML = “Display driving route”
createDrivingRoute(Microsoft.Maps.Directions.RouteMode.driving);
}
function AddWayPoint(add) {
if (document.getElementById(add).value) {
var text = document.getElementById(add).value;
var waypoint = new Microsoft.Maps.Directions.Waypoint({
address: text
});
directionsManager.addWaypoint(waypoint);
}
}
function createDrivingRoute(mode) {
if (!directionsManager) {
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
}
directionsManager.resetDirections();
directionsManager.clearDisplay();
AddWayPoint(“txtTravelDirections0”);
AddWayPoint(“txtTravelDirections1″);
directionsManager.setRequestOptions({
avoidTraffic: true,
routeMode: mode,
routeOptimization: Microsoft.Maps.Directions.RouteOptimization.shortestDistance
});
directionsManager.setRenderOptions({
itineraryContainer: document.getElementById(‘directionsItinerary’)
});
directionsManager.calculateDirections();
}
</script>
<style type=”text/css”>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

.tabs {
width: 300px;
margin: 0px;
padding: 0px;
}

.tabs li {
margin: 0px;
padding: 0px;
}

.tabs a:hover {
margin: 0px;
text-decoration: none;
}

.tabs a.tab-active {
margin: 0px;
padding: 0px;
background-color: White;
}

.tabs a {
font-weight: bold;
margin: 0px;
padding: 0px;
color: Black;
}

.tab-container {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
border: blue solid 2px;
background-color: lightcyan;
}

.tab-panes {
margin: 0px;
padding: 0px;
height: 70%;
width: 322px;
position: relative;
background-color: lightcyan;
overflow: auto;
}

td.container > div {
width: 100%;
height: 100%;
overflow: hidden;
}

td.container {
height: 20px;
}
</style>
</head>
<body style=”background-color:red;” onload=”Initialize();”>
<table style=”margin:0; padding:0; height:100%; width:100%; “>
<tr style=”margin:0; padding:0; height:100%; width:100% “>
<td id=”Explorer” style=”background-color:yellow;margin:0; padding:0; height:100%;width:330px; “>
<div class=”tab-container” id=”container1″>
<ul class=”tabs”>
<li><a href=”#” onclick=”return showPane(‘pane1’, this)” id=”tab1″>Tab 1</a></li>
<li><a href=”#” onclick=”return showPane(‘pane2’, this)”>Tab 2</a></li>
<li><a href=”#” onclick=”return showPane(‘pane3’, this)”>Tab 3</a></li>
<li><a href=”#” onclick=”return showPane(‘pane4’, this)”>Tab 4</a></li>
<li><a href=”#” onclick=”return showPane(‘pane5’, this)”>TRAVEL DIRECTIONS</a></li>
<li><a href=”#” onclick=”return showPane(‘pane6’, this)”>Tab 6</a></li>
<li><a href=”#” onclick=”return showPane(‘pane7′, this)”>Tab 7</a></li>
</ul>
<br />
<div class=”tab-panes”>
<div id=”pane1″>
PANE 1
</div>
<div id=”pane2″>
PANE 2
</div>
<div id=”pane3″>
PANE 3
</div>
<div id=”pane4″>
PANE 4
</div>
<div id=”pane5″>
<div style=”height: 25px; “>
TRAVEL DIRECTIONS
</div>
<div style=”height: 100%; “>
<input id=”txtTravelDirections0″ style=”width: 298px” type=”text” value=”1 main st, Chicago,ill” />
<br />
<input id=”txtTravelDirections1″ style=”width: 298px” type=”text” value=”1 e erie st, Chicago,ill” />
<br />
<input class=”ButtonAction” type=”button” value=”Show Driving Route” style=”width: 300px” onclick=”ShowDrivingRouteFromTxt();” />
<br />
<div id=’directionsItinerary’ style=”background-color:lightcyan;position: relative; “>
</div>
</div>
</div>
<div id=”pane6″>
PANE 6
</div>
<div id=”pane7”>
PANE 7
</div>
</div>
</div>
</td>
<td style=”background-color:pink; height:100%; “>
<div id=’divOutterMap’ style=”background-color:green; top:0px; height:95%; width:100%; “>
<div id=’divMap’ style=” height: 100%; width:100%; position: relative;”>
</div>
<div id=”status” style=” background-color:gray; height: 25px; width:100%”>
status
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
[/code]

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@Kevin2Aug 28.2014 — It ain't perfect by any stretch, but it's 40% less code (there may be another kb or 2 of cruft...), it doesn't use tables for layout, it does what you want (I think), and it validates -- unlike your original code.

[code=html]<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Bing Map</title>
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script>
var map = null;
var directionsManager;
var panes = new Array();
function Initialize() {
var mapOptions = {
credentials: "key here ",
center: new Microsoft.Maps.Location(43.101329, -75.230907),
mapTypeId: Microsoft.Maps.MapTypeId.road
};
map = new Microsoft.Maps.Map(document.getElementById("divMap"), mapOptions);
Microsoft.Maps.loadModule('Microsoft.Maps.Directions');
setupPanes("container1", "tab1");
}
function setupPanes(containerId, defaultTabId) {
panes[containerId] = new Array();
var maxHeight = 0,
maxWidth = 0,
container = document.getElementById(containerId),
paneContainer = container.getElementsByTagName("div")[0],
paneList = paneContainer.childNodes;
for (var i = 0; i < paneList.length; i++) {
var pane = paneList[i];
if (pane.nodeType != 1) continue;
panes[containerId][pane.id] = pane;
pane.style.display = "none";
}
document.getElementById(defaultTabId).onclick();
}
function showPane(paneId, activeTab) {
for (var con in panes) {
activeTab.blur();
activeTab.className = "tab-active";
if (panes[con][paneId] != null) {
var pane = document.getElementById(paneId);
pane.style.display = "block";
var container = document.getElementById(con),
tabs = container.getElementsByTagName("ul")[0],
tabList = tabs.getElementsByTagName("a");
for (var i = 0; i < tabList.length; i++) {
var tab = tabList[i];
if (tab != activeTab) tab.className = "tab-disabled";
}
for (var i in panes[con]) {
var pane = panes[con][i];
if (pane == undefined) continue;
if (pane.id == paneId) continue;
pane.style.display = "none";
}
}
}
return false;
}
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
function ShowDrivingRouteFromTxt() {
document.getElementById("status").innerHTML = "Display driving route";
createDrivingRoute(Microsoft.Maps.Directions.RouteMode.driving);
}
function AddWayPoint(add) {
if (document.getElementById(add).value) {
var text = document.getElementById(add).value;
var waypoint = new Microsoft.Maps.Directions.Waypoint({
address: text
});
directionsManager.addWaypoint(waypoint);
}
}
function createDrivingRoute(mode) {
if (!directionsManager) {
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
}
directionsManager.resetDirections();
directionsManager.clearDisplay();
AddWayPoint("txtTravelDirections0");
AddWayPoint("txtTravelDirections1");
directionsManager.setRequestOptions({
avoidTraffic: true,
routeMode: mode,
routeOptimization: Microsoft.Maps.Directions.RouteOptimization.shortestDistance
});
directionsManager.setRenderOptions({
itineraryContainer: document.getElementById('directionsItinerary')
});
directionsManager.calculateDirections();
}
</script>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

.tabs {
margin: 0px;
padding: 0px;
}

.tabs li {
margin: 0px;
padding: 0px;
}

.tabs a:hover {
text-decoration: none;
}

.tabs a.tab-active {
background-color: white;
}

.tabs a {
font-weight: bold;
color: black;
}

.tab-container {
height: 100%;
}

.tab-panes {
position: relative;
background-color: lightcyan;
overflow: auto;
}

.container {
height: 2em;
}

.ButtonAction {
width: 155px;
}

#Explorer {
background-color: yellow;
height: 100%;
width: 30%;
float: left;
}

#directionsItinerary {
background-color: lightcyan;
position: relative;
}

#divOutterMap {
height: 100%;
width: 70%;
float: right;
}

#divMap {
height: 95%;
position: relative;
}

#status {
background-color: gray;
height: 5%;
}
</style>
</head>
<body onload="Initialize()">
<div id="Explorer">
<div id="container1">
<ul class="tabs">
<li><a href="#" onclick="return showPane('pane1', this)" id="tab1">Tab 1</a></li>
<li><a href="#" onclick="return showPane('pane2', this)">Tab 2</a></li>
<li><a href="#" onclick="return showPane('pane3', this)">Tab 3</a></li>
<li><a href="#" onclick="return showPane('pane4', this)">Tab 4</a></li>
<li><a href="#" onclick="return showPane('pane5', this)">TRAVEL DIRECTIONS</a></li>
<li><a href="#" onclick="return showPane('pane6', this)">Tab 6</a></li>
<li><a href="#" onclick="return showPane('pane7', this)">Tab 7</a></li>
</ul>
<br>
<div class="tab-panes">
<div id="pane1">
PANE 1
</div>
<div id="pane2">
PANE 2
</div>
<div id="pane3">
PANE 3
</div>
<div id="pane4">
PANE 4
</div>
<div id="pane5">
TRAVEL DIRECTIONS
<div>
<input id="txtTravelDirections0" type="text" value="1 main st, Chicago,ill">
<br>
<input id="txtTravelDirections1" type="text" value="1 e erie st, Chicago,ill">
<br>
<input class="ButtonAction" type="button" value="Show Driving Route" onclick="ShowDrivingRouteFromTxt();">
<br>
<div id="directionsItinerary">
</div>
</div>
</div>
<div id="pane6">
PANE 6
</div>
<div id="pane7">
PANE 7
</div>
</div>
</div>
</div>

<div id="divOutterMap">
<div id="divMap">
</div>
<div id="status">
status
</div>
</div>
</body>
</html>[/code]
This at least gives you (or another poster) a start. I highly recommend putting the CSS and JavaScript into separate files, but that's your call.
Copy linkTweet thisAlerts:
@ScholarauthorAug 29.2014 — Can't believe you did all that. Thanks!

Looked good when first I opened it in IE11. Map fit great.

But when I asked for driving directions it grew to twice the height with a scroll bar at the right for the increased size, instead of a scroll bar for the newly displayed directions. So when you scroll to read the directions the map moves off the screen.

Is html better to use than xhtml? I noticed you changed my xhtml to html.

Thanks for all the work
Copy linkTweet thisAlerts:
@Kevin2Aug 29.2014 — Sorry for a late reply. And I'll be out of town all weekend so probably won't see any reply to this until at least late Sunday if not Monday.

Don't have a clue about the map and the "Driving directions" stuff. A very rough guess is to add [B]overflow:auto[/B] to the [B]status[/B] styles. Maybe not... As I stated, that was just a start for either you or another poster to work with.

As far as the DOCTYPE goes, you had XHTML1.0 transitional and it was configured wrong (part of why your original code didn't validate). XHTML1.0 transitional might as well be HTML4.01, and since that's the case I decided to update to the HTML 5 DOCTYPE.

See this (about 2/3-3/4 down the page) for a better explanation:

http://diveintohtml5.info/past.html

To be honest, there's nothing in the code that I posted that's HTML5-specific, so if you decide to go with HTML4.01 or XHTML1.0, either should work.
Copy linkTweet thisAlerts:
@ScholarauthorAug 30.2014 — Thanks for your continuing interest.

What I did do to your code is add class="tab-container" to the explorer div and add overflow:auto to tab-container.

That helped a lot but the scrollbar is not on the container as it should be. And I have no idea why not.

I changed the original code (not the short one I posted) to match what you did (got rid of the table and copied your styles)

Also added the class as mentioned above. It shows the scrollbar with the tab containers but it is not active.

I'll keep trying but will probably continue to look forward to Monday :-)

PS

If I don't use HTML5 does it make sense to use XHTML1.1

That's what I was trying to use and had copied DOCTYPE statement from the standard's site.
Copy linkTweet thisAlerts:
@Kevin2Sep 02.2014 — I guess part of the issue for me is that I don't have the "key" to put in the code so that driving directions work. Also it's apparent you have more code than what you posted.

Anyway. HTML5/XHTML1.0/HTML4.01 probably doesn't matter. I'd leave XHTML1.1 out of the mix though. Remember that if you use XHTML you must close all tags, and there's a lot of other stuff in the HEAD that has to be there:

[code=html]<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>page title</title>
</head>[/code]

All of that basically says, "I'm really using HTML 4.01, but I promise to write it in the style of XML." But when all is said and done, it shouldn't really matter what you use for a DOCTYPE as long as it validates.

Be that as it may, here's 2 versions to try. First is XHTML1.0 Strict, second is my above code slightly modified for HTML5 form attributes and another "trick" or 2. Both have been added to for WCAG and validate at W3C for their respective DOCTYPES and pass WCAG2.0 accessibility standards (with one warning about no H1 heading).
[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bing Map</title>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
<!--
var map = null;
var directionsManager;
var panes = new Array();
function Initialize() {
var mapOptions = {
credentials: "key here ",
center: new Microsoft.Maps.Location(43.101329, -75.230907),
mapTypeId: Microsoft.Maps.MapTypeId.road
};
map = new Microsoft.Maps.Map(document.getElementById("divMap"), mapOptions);
Microsoft.Maps.loadModule('Microsoft.Maps.Directions');
setupPanes("container1", "tab1");
}
function setupPanes(containerId, defaultTabId) {
panes[containerId] = new Array();
var maxHeight = 0,
maxWidth = 0,
container = document.getElementById(containerId),
paneContainer = container.getElementsByTagName("div")[0],
paneList = paneContainer.childNodes;
for (var i = 0; i < paneList.length; i++) {
var pane = paneList[i];
if (pane.nodeType != 1) continue;
panes[containerId][pane.id] = pane;
pane.style.display = "none";
}
document.getElementById(defaultTabId).onclick();
}
function showPane(paneId, activeTab) {
for (var con in panes) {
activeTab.blur();
activeTab.className = "tab-active";
if (panes[con][paneId] != null) {
var pane = document.getElementById(paneId);
pane.style.display = "block";
var container = document.getElementById(con),
tabs = container.getElementsByTagName("ul")[0],
tabList = tabs.getElementsByTagName("a");
for (var i = 0; i < tabList.length; i++) {
var tab = tabList[i];
if (tab != activeTab) tab.className = "tab-disabled";
}
for (var i in panes[con]) {
var pane = panes[con][i];
if (pane == undefined) continue;
if (pane.id == paneId) continue;
pane.style.display = "none";
}
}
}
return false;
}
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
function ShowDrivingRouteFromTxt() {
document.getElementById("status").innerHTML = "Display driving route";
createDrivingRoute(Microsoft.Maps.Directions.RouteMode.driving);
}
function AddWayPoint(add) {
if (document.getElementById(add).value) {
var text = document.getElementById(add).value;
var waypoint = new Microsoft.Maps.Directions.Waypoint({
address: text
});
directionsManager.addWaypoint(waypoint);
}
}
function createDrivingRoute(mode) {
if (!directionsManager) {
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
}
directionsManager.resetDirections();
directionsManager.clearDisplay();
AddWayPoint("txtTravelDirections0");
AddWayPoint("txtTravelDirections1");
directionsManager.setRequestOptions({
avoidTraffic: true,
routeMode: mode,
routeOptimization: Microsoft.Maps.Directions.RouteOptimization.shortestDistance
});
directionsManager.setRenderOptions({
itineraryContainer: document.getElementById('directionsItinerary')
});
directionsManager.calculateDirections();
}
//-->
</script>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

.tabs {
margin: 0px;
padding: 0px;
}

.tabs li {
margin: 0px;
padding: 0px;
}

.tabs a:hover {
text-decoration: none;
}

.tabs a.tab-active {
background-color: white;
}

.tabs a {
font-weight: bold;
color: black;
}

.tab-container {
height: 100%;
}

.tab-panes {
position: relative;
background-color: lightcyan;
overflow: auto;
}

.container {
height: 2em;
}

.ButtonAction {
width: 155px;
}

#Explorer {
background-color: yellow;
height: 100%;
width: 30%;
float: left;
}

#directionsItinerary {
background-color: lightcyan;
position: relative;
}

#divOutterMap {
height: 100%;
width: 70%;
float: right;
}

#divMap {
height: 95%;
position: relative;
}

#status {
background-color: gray;
height: 5%;
}
</style>
</head>
<body onload="Initialize()">
<div id="Explorer">
<div id="container1">
<ul class="tabs">
<li><a href="#" onclick="return showPane('pane1', this)" id="tab1">Tab 1</a></li>
<li><a href="#" onclick="return showPane('pane2', this)">Tab 2</a></li>
<li><a href="#" onclick="return showPane('pane3', this)">Tab 3</a></li>
<li><a href="#" onclick="return showPane('pane4', this)">Tab 4</a></li>
<li><a href="#" onclick="return showPane('pane5', this)">TRAVEL DIRECTIONS</a></li>
<li><a href="#" onclick="return showPane('pane6', this)">Tab 6</a></li>
<li><a href="#" onclick="return showPane('pane7', this)">Tab 7</a></li>
</ul>
<br/>
<div class="tab-panes">
<div id="pane1">
PANE 1
</div>
<div id="pane2">
PANE 2
</div>
<div id="pane3">
PANE 3
</div>
<div id="pane4">
PANE 4
</div>
<div id="pane5">
TRAVEL DIRECTIONS
<div>
<label for="txtTravelDirections0">From:</label><br/>
<input id="txtTravelDirections0" type="text" value="1 main st, Chicago,ill"/>
<br/>
<label for="txtTravelDirections1">To:</label><br/>
<input id="txtTravelDirections1" type="text" value="1 e erie st, Chicago,ill"/>
<br/>
<input class="ButtonAction" type="button" value="Show Driving Route" onclick="ShowDrivingRouteFromTxt()"/>
<br/>
<div id="directionsItinerary">
</div>
</div>
</div>
<div id="pane6">
PANE 6
</div>
<div id="pane7">
PANE 7
</div>
</div>
</div>
</div>

<div id="divOutterMap">
<div id="divMap">
</div>
<div id="status">
status
</div>
</div>
</body>
</html>[/code]

Here's the deal with this. You can stick the XHTML Transitional DOCTYPE on it and it will validate. It's just maybe slightly possible that something Bing uses needs an XHTML DOCTYPE.

Gack, post size limit hit. HTML5 version in next post...
Copy linkTweet thisAlerts:
@Kevin2Sep 02.2014 — And the HTML5 updated version:

[code=html]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bing Map</title>
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script>
var map = null;
var directionsManager;
var panes = new Array();
onload=function() {
var mapOptions = {
credentials: "key here ",
center: new Microsoft.Maps.Location(43.101329, -75.230907),
mapTypeId: Microsoft.Maps.MapTypeId.road
};
map = new Microsoft.Maps.Map(document.getElementById("divMap"), mapOptions);
Microsoft.Maps.loadModule('Microsoft.Maps.Directions');
setupPanes("container1", "tab1");
}
function setupPanes(containerId, defaultTabId) {
panes[containerId] = new Array();
var maxHeight = 0,
maxWidth = 0,
container = document.getElementById(containerId),
paneContainer = container.getElementsByTagName("div")[0],
paneList = paneContainer.childNodes;
for (var i = 0; i < paneList.length; i++) {
var pane = paneList[i];
if (pane.nodeType != 1) continue;
panes[containerId][pane.id] = pane;
pane.style.display = "none";
}
document.getElementById(defaultTabId).onclick();
}
function showPane(paneId, activeTab) {
for (var con in panes) {
activeTab.blur();
activeTab.className = "tab-active";
if (panes[con][paneId] != null) {
var pane = document.getElementById(paneId);
pane.style.display = "block";
var container = document.getElementById(con),
tabs = container.getElementsByTagName("ul")[0],
tabList = tabs.getElementsByTagName("a");
for (var i = 0; i < tabList.length; i++) {
var tab = tabList[i];
if (tab != activeTab) tab.className = "tab-disabled";
}
for (var i in panes[con]) {
var pane = panes[con][i];
if (pane == undefined) continue;
if (pane.id == paneId) continue;
pane.style.display = "none";
}
}
}
return false;
}
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
function ShowDrivingRouteFromTxt() {
document.getElementById("status").innerHTML = "Display driving route";
createDrivingRoute(Microsoft.Maps.Directions.RouteMode.driving);
}
function AddWayPoint(add) {
if (document.getElementById(add).value) {
var text = document.getElementById(add).value;
var waypoint = new Microsoft.Maps.Directions.Waypoint({
address: text
});
directionsManager.addWaypoint(waypoint);
}
}
function createDrivingRoute(mode) {
if (!directionsManager) {
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
}
directionsManager.resetDirections();
directionsManager.clearDisplay();
AddWayPoint("txtTravelDirections0");
AddWayPoint("txtTravelDirections1");
directionsManager.setRequestOptions({
avoidTraffic: true,
routeMode: mode,
routeOptimization: Microsoft.Maps.Directions.RouteOptimization.shortestDistance
});
directionsManager.setRenderOptions({
itineraryContainer: document.getElementById('directionsItinerary')
});
directionsManager.calculateDirections();
}
</script>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

.tabs {
margin: 0px;
padding: 0px;
}

.tabs li {
margin: 0px;
padding: 0px;
}

.tabs a:hover {
text-decoration: none;
}

.tabs a.tab-active {
background-color: white;
}

.tabs a {
font-weight: bold;
color: black;
}

.tab-container {
height: 100%;
}

.tab-panes {
position: relative;
background-color: lightcyan;
overflow: auto;
}

.container {
height: 2em;
}

button {
width: 155px;
}

#Explorer {
background-color:yellow;
height: 100%;
width: 30%;
float: left;
}

#directionsItinerary {
background-color: lightcyan;
position: relative;
}

#divOutterMap {
height: 100%;
width: 70%;
float: right;
}

#divMap {
height: 95%;
position: relative;
}

#status {
background-color: gray;
height: 5%;
overflow: auto;
}
</style>
</head>
<body>
<div id="Explorer">
<div id="container1">
<ul class="tabs">
<li><a href="#" onclick="return showPane('pane1', this)" id="tab1">Tab 1</a></li>
<li><a href="#" onclick="return showPane('pane2', this)">Tab 2</a></li>
<li><a href="#" onclick="return showPane('pane3', this)">Tab 3</a></li>
<li><a href="#" onclick="return showPane('pane4', this)">Tab 4</a></li>
<li><a href="#" onclick="return showPane('pane5', this)">TRAVEL DIRECTIONS</a></li>
<li><a href="#" onclick="return showPane('pane6', this)">Tab 6</a></li>
<li><a href="#" onclick="return showPane('pane7', this)">Tab 7</a></li>
</ul>
<br>
<div class="tab-panes">
<div id="pane1">
PANE 1
</div>
<div id="pane2">
PANE 2
</div>
<div id="pane3">
PANE 3
</div>
<div id="pane4">
PANE 4
</div>
<div id="pane5">
TRAVEL DIRECTIONS
<div>
<label for="txtTravelDirections0">From:</label><br>
<input id="txtTravelDirections0" type="text" placeholder="1 Main St, Chicago, Ill">
<br>
<label for="txtTravelDirections1">To:</label><br>
<input id="txtTravelDirections1" type="text" placeholder="1 E Erie St, Chicago, Ill">
<br>
<button onclick="ShowDrivingRouteFromTxt()">Show Driving Route</button>
<br>
<div id="directionsItinerary">
</div>
</div>
</div>
<div id="pane6">
PANE 6
</div>
<div id="pane7">
PANE 7
</div>
</div>
</div>
</div>

<div id="divOutterMap">
<div id="divMap">
</div>
<div id="status">
status
</div>
</div>
</body>
</html>[/code]

Beyond this I have no clue.
Copy linkTweet thisAlerts:
@ScholarauthorSep 02.2014 — Thanks,

I'll study both of these tomorrow to see what I can learn.

Playing around I did learn one thing: I developed a short code the worked - sometimes.

Turns out that the vs webBrowser is IE7 and the scrolling it does makes no sense to me.

Thanks again - too bad this forum does not enable the OP to mark replies a "An Answer"
×

Success!

Help @Scholar spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...