On my webpage, I have integrated Google Maps. The layout is divided into a menu on the left and content on the right.
I am looking to make the left side (menu) scrollable, while the right side (content, which includes the map) remains static without scrolling. I prefer not to utilize frames or Javascript for this task.
The desired approach involves using the following code:
<div id="map" style="width:100%; height:100%; position:fixed;" ></div>
Check out the demo here: demo
After reformatting and adjusting some elements to prevent overlap, the content should now be easier to read.
To ensure accuracy, I replaced PHP code with the placeholder text: PHP_INSERT_LOCATION_# before validation.
If you're experiencing issues with the map not displaying, it's likely due to the height being set as 100%, resulting in a height of 0 since other elements are also positioned absolutely. To resolve this, I added styles setting heights to 100% for html, body, and div.Content to fill the window width.
The Google Maps script adds position:relative; to <div id="map">, which means you need to apply position:fixed to the Content div instead.
For reference, 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&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>
Here is the desired code snippet:
<section id="Wrapper" style="position:absolute; top:0px; right:0px; bottom:0px; left:0px;">
<div id="mapContainer" style="width:100%; height:100%;" class="map-element"></div>
</section>
$(document).ready(function () { $("#2").click(function () { $("#content").load("{% url 'about' %}"); }); $("#3").click(function () { $("#content").load("{% url ...
Having trouble calling a function with data from a foreach loop while generating HTML cards and buttons from an array. The issue seems to be in the renderProducts() method. /// <reference path="coin.ts" /> /// <reference path="prod ...
Imagine a scenario where you have the following code snippet: <div id="editing" contenteditable onclick="document.execCommand('selectAll',false,null)">Put text here...</div> In this situation, let's say you want to impose a r ...
I'm currently working on styling a cart in Angular and facing an issue with aligning the price all the way to the right of the cart. I attempted using `space-between` within the outer div, which worked fine, but when applied to the inner div, it doesn ...
When you resize the browser window, you will notice a different layout for iPhone. I am seeing an additional black line below the slider and I'm unsure how to remove it. I have already tried removing the border property but the black line remains. Bel ...
I have integrated the Google API for charts into my application and am using multiple charts on the same page. However, I am facing an issue with setting padding for the charts. When I include more data points, the chart area occupies more space in the div ...
Is there a way to eliminate the space above and below the mandatory span, specifically when using << within it? The height of the field row is determined by the default line-height for the text size, but the mandatory field is taller due to its larg ...
update1: Unfortunately, even after testing in the sandbox, the result is still returning empty :( https://codesandbox.io/s/happy-https-u8lu2 After filtering my starsValues based on height and weight, I am able to get some results. However, I also n ...
I am facing challenges trying to dynamically display MySQL/PHP query data in a jQuery dialog. Essentially, I have an HTML table with MySQL results. Each table row has an icon next to its result inside an anchor tag with the corresponding MySQL ID. echo &a ...
Having an issue with the responsiveness of a website layout that includes three columns (let's say 'A', 'B', and 'C') each 96% high, along with a footer. Columns A and C have a width of 35%, while column B is set to be 30 ...
I am attempting to verify the URL of an image within a div element's background property in the CSS for the webpage. However, when I retrieve the CssValue and display it, it appears to be blank. The HTML structure for the div is as follows: <div ...
I am in the process of creating a gallery that will display a div with images when a button is clicked. The issue I am facing is that when I have two buttons, only the last images are clickable. It's a bit difficult to explain, but you can see it in ...
Can I link the data in my second dropdown to the selection made in the first dropdown? I tried a similar solution from stackoverflow without success. You can find the reference here. The code works when directly copied and pasted but not within my system. ...
import { TextField } from "@mui/material"; import { FunctionComponent } from "react"; interface IProps { type: string; label: string; color: | "error" | "primary" | "secondary" | &quo ...
<a> hyperlink for radio button is not functioning correctly in Chrome. Here is the code segment in question: <td width='7%' bgcolor='#E8E8E8'> <a href='issue.php?admin=Yes&&user=$user'> <inp ...
I am struggling to figure out why I cannot highlight the current menu page on a navigation bar (aside from the fact that I am a complete beginner :-) I have tried using a JQuery function that I found online, but none of them seem to work. Here is the funct ...
When creating buttons in HTML to control video speed, I encountered a strange issue. After successfully implementing the buttons for one video, they only worked on a second video and had no impact on the first one. Deleting the second video seemed to resol ...
If the "4 stars" option is selected at the top, I want all corresponding "4 stars" options in the form to be automatically selected. Similarly, if "3 stars" is chosen, I need all the "3 stars" options to be selected. I attempted to achieve this functionali ...
I am attempting to create a clickable URL that opens in a new window. The URL is being displayed and updated on my HTML page in the following manner: Python Code: def data_cb(): return jsonify(waiting=await_take_pic()) Javascript Code: jQuery(d ...
On my .aspx page, I have the code snippet below: .cDiv { background-color: gray; } .tColor { background-color:yellow; } .tColor2 { background-color:blue; } <div class="container"> <div class="row"> <div class="col-sm-9 tColor" ...