As I work with a basic U.S. map, I encounter the need for fixed positioning of both the map and state abbreviations on it. User input triggers database queries, and based on query results, I change the class of state abbreviations to format them like buttons. The main objective is to create a div below the button that holds information related to the specific state. However, an issue arises where this div appears after the container holding the map. CSS
<style>
#MapContainer {position:absolute; width:1760px; height:1099px; top:0; left:0; padding:0; z-index:1;}
.Abr {position:absolute; font-size:18px; font-weight:bold; color:#006393; z-index:100}
.Active {background:red; padding:6px; color:white; border:1px solid black; border-radius:50%;}
</style>
HTML with PHP (Demonstrated for one state)
<div id="MapContainer">
<img src="maps/TransUSA-All50-1760x1099.png" style="width:100%" />
<div class="Abr" id="WA" style="top:100px; left:238px;">WA</div>
// Database queries go here once all state names are defined
while($Info = i5_fetch_array($Result))
{
switch($Info[STATE])
{
case "WA":
echo('<script>$("#WA").addClass("Active"); var Rates = "'.$Info[Rates].'"; var Charges = "'.$Info[Charges].'";</script>');
break;
//etc.
}
</div>
The challenge lies in ensuring the data div appears directly under the state abbreviation button rather than at the end of the map container when clicked. jQuery
<script type="text/JavaScript">
$(".Active").on("click", function()
{
this.insertAdjacentHTML("afterend","<div>This is a data Div</div>");
});
</script>
Despite efforts, the appended div consistently displays at the bottom of the map container instead of right under the "WA" abbreviation button.
Check out the example:
<div id="MapContainer">
<div id="WA">WA</div>
// The data div should be located here
</div>
// Yet, it shows up here
___________________________________________________
| |
| <div>WA</div> |
| <div>Data div should appear here</div> |
| |
|_________________________________________________|
<div>Data div appears here instead</div>
I have prepared a fiddle Here. Unfortunately, even there, the data div ends up inside the map block instead of below it.
Final Outcome On reaching the final outcome, I realize certain limitations exist due to fixed positioning causing overlap issues between active buttons and info boxes for neighboring states.
https://i.sstatic.net/3OgOK.png
https://jsfiddle.net/RationalRabbit/rj8g2bqm/87/
A solution involved using a screenshot of the map background with the abbreviations included, removing abbreviations from span sections, and adding them back when a state becomes active. Some adjustment was also needed in the rendering order to prevent overlapping occurrences. This indicates that the initial problem might have been resolved by changing the order of abbreviation definitions in the first place. For instance, reordering "ID" before "OR" might have addressed the issue upfront.