www.webdeveloper.com
Results 1 to 8 of 8

Thread: Table cells do not fill completely

  1. #1
    Join Date
    Aug 2014
    Posts
    9

    Table cells do not fill completely

    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.

    HTML Code:
     <!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>
    Last edited by jedaisoul; 08-28-2014 at 03:23 PM. Reason: code tags added

  2. #2
    Join Date
    Oct 2013
    Posts
    512
    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.

    HTML Code:
    <!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>
    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.

  3. #3
    Join Date
    Aug 2014
    Posts
    9
    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

  4. #4
    Join Date
    Oct 2013
    Posts
    512
    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 overflow:auto to the status 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.

  5. #5
    Join Date
    Aug 2014
    Posts
    9
    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.

  6. #6
    Join Date
    Oct 2013
    Posts
    512
    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:

    HTML 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" lang="en">
        <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    	<title>page title</title>
        </head>
    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).
    HTML Code:
    <!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>
    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...

  7. #7
    Join Date
    Oct 2013
    Posts
    512
    And the HTML5 updated version:

    HTML Code:
    <!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>
    Beyond this I have no clue.

  8. #8
    Join Date
    Aug 2014
    Posts
    9
    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"

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles