CODEWITHSUNDEEP
htmlcss
brio
brio

Reputation: 175

Scrolling menu on a page with fixed content without using frames

I have Google Maps included on a page. The left side is meant to be the menu and right side as content.

I want the left side (menu) to scroll, but the right side, (content, map in this case) to not scroll. I don't want to use frames or Javascript.

I want do this with this code:

<div  id="map" style="width:100%; height:100%; position:fixed;" ></div>

demo: demo

Upvotes: 0

Views: 1167

Answers (2)

user1636130
user1636130

Reputation: 1683

Okay this is what you want:

<div id="Content" style="position:absolute; top:0px; right:0px; bottom:0px; left:0px; ">
    <div id="map" style="width:100%; height:100%;" ></div>
</div>

Upvotes: 0

Hawken
Hawken

Reputation: 2119

I went through and tried to reformat and fix some element overlap so that it would be more readable, I hope this helps.

Also, I replaced PHP code with the text: PHP_INSERT_LOCATION_# so that I could run it through the validator and make sure I wasn't making any mistakes.

You said the map was not appearing, this is because the map height is 100% which results in 0 since the only other element of body, <div id="Menu">, is position:absolute;. Since nothing is setting the height of body, body remains at a height of 0.

To fix the above problem I have added styles of height:100%; to html, body, and div.Content to make the above mentioned elements the width of the window, since otherwise the will try to occupy the least possible vertical space.

Also, the Google Maps scripts seem to add position:relative; to <div id="map"> so you will have to add position:fixed to the Content div instead, see below:

view here: http://jsbin.com/ulalac/

<!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">
<!--
**** PHP_INSERT_LOCATION_1 *****
<?php echo session_id(); ?>
**** PHP_INSERT_LOCATION_2 *****
<?
$ray=mysql_query("select * from rayon");
while($r=mysql_fetch_object($ray)) {
    echo '<option value="'.$r->rayon.'">'.$r->rayon.'</option>
';
}
?>
-->
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>NN MAP</title>
    <link rel="stylesheet" type="text/css" media="all" href="http://nn-gis.com/mp/css/form.css" />
    <style type="text/css">
    /*<![CDATA[*/
    html,body,div#Content,div#map{height:100%;}
    div#Content{width:100%;position:fixed;}
    /*]]>*/
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
    <script type="text/javascript" src="http://nn-gis.com/mp/js/main.js"></script>
    <script type="text/javascript" src="http://nn-gis.com/mp/js/line.js"></script>
    <script type="text/javascript" src="http://nn-gis.com/mp/js/zoom.js"></script>
</head>
<body onload="load()">
<div id="Content">
    <div id="map"></div>
</div>
<div id="Menu">  
    <fieldset>
        <legend>Control Panel</legend> - <a href="logout.php">Logout</a>
        <br/>- <a href="javascript:void(0);" onclick="window.open('change.php?sid=PHP_INSERT_LOCATION_1','Reservoirs','height=300, width=460,scrollbars=no');">Change Password</a>
    </fieldset> 
    <fieldset>
        <legend>Active Layers</legend>
        <div class="glossymenu">
            <a class="menuitem submenuheader" href="#" >Points</a>
            <div class="submenu">
                <input type="checkbox" id="intake" onclick="boxclick(this,'intake')" checked="checked"/> <label>Intake</label>
                <br/>
                <input type="checkbox" id="reservoir" onclick="boxclick(this,'reservoir')" checked="checked"/> <label>Reservoirs</label>
                <br/>
                <input type="checkbox" id="wps" onclick="boxclick(this,'wps')" checked="checked"/> <label>WPS</label>
                <br/>
                <input type="checkbox" id="wtp" onclick="boxclick(this,'wtp')" checked="checked"/> <label> WTP</label>
                <br/>
                <input type="checkbox" id="wwps" onclick="boxclick(this,'wwps')" checked="checked"/> <label>WWPS</label>
                <br/>
                <input type="checkbox" id="wwtp" onclick="boxclick(this,'wwtp')" checked="checked"/> <label>WWTP</label>
                <br/>
            </div>
        </div>
    </fieldset>
    <fieldset>
        <legend>Active Lines</legend>
        <form action="">
            <select id="rayon" onchange="line();">
                <option value="rayon">Select Rayon</option>
                <option value="rayon">Qebele</option>
            </select>
        </form>
    </fieldset>
    <fieldset>
        <legend>Projects</legend>
        <form action="">
            <select id="countyLocation" onchange="zoom();search();">
                <option value="center">Select Title</option>
                <!--
                PHP_INSERT_LOCATION_2
                -->
            </select>
        </form>
    </fieldset>
    <fieldset>
        <legend>Tables</legend>
            - <a href="javascript:void(0)" onclick="window.open('data/show.php?page=Reservoirs','Reservoirs','height=600, width=660,scrollbars=no')">Reservoirs</a>
            <br/>
            - <a href="javascript:void(0)" onclick="window.open('data/show.php?page=TBL_MAIN_INV','TBL_MAIN_ING','height=600, width=1024,scrollbars=no')">Main investment</a>
            <br/>
            - <a href="javascript:void(0)" onclick="window.open('data/show.php?page=TBL_MAIN_INV_BID','linkname','height=600, width=960,scrollbars=no')">Bidding Procedures</a>
            <br/>
    </fieldset>
    <fieldset>
        <legend>Analysis</legend>
        - <a href="javascript:void(0)" onclick="window.open('backup.php','backup','height=600, width=660,scrollbars=no')">Backup Data</a>
        <br/>
        <br/>  
        <br/>
    </fieldset>              
</div>
</body>
</html>

Upvotes: 2

Related Questions