dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: Table cells are not filled in correctly.

  1. #1
    Join Date
    Aug 2014
    Posts
    9

    Table cells are not filled in correctly.

    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.

    I'd sure like to know the correct way to fix this code!


    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 02:14 AM. Reason: code tags added

  2. #2
    Join Date
    Aug 2014
    Posts
    9
    I should have said that I normally display (a much bigger file) using vs2013 and a webBrowser control.

    But I get the same if I simply open the html file in vs2013.

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

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,502
    This is more of a CSS problem than a JavaScript problem, try asking in the CSS forums for help.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

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