0

I am experimenting with a map interface where the entire window is filled with the (Google) map, and my app chrome (don't know what else to call it -- the menues, controls, etc.) are floating or fade away when not required. I have put up an experimental interface.

When the entire page has loaded, the top menu fades out, but dissolves back into view if the mouse cursor moves to the top edge of the window. the legend tabs widget is collapsible and movable.

Now, here is the problem -- for a horizontal swath of the window approximately aligned with the tabs widget, the map is unclickable. You can witness the cursor over the map change from a hand where the map is accessible to an arrow where the map is not accessible. In that band, none of the markers are clickable, nor is the map draggable.

In the web page, the hierarchy is like so 

<div id="map">map</div>
<header></header>
<div id="tabs"></div>
<footer></footer>

I have the #map z-index set to -1. If I don't do that, then the header starts fading out and fading in on mouseover erratically. The header behaves fine with map z-index set to -1.

If I move the map div after header, then it obscures the header. In other words, the following doesn't work

<header></header>
<div id="map">map</div>
<div id="tabs"></div>
<footer></footer>

As is, why am I not able to click on a portion of the map? It is as if #tabs is obscuring #map, however, #tabs is only about 300px wide, so it shouldn't affect the rest of the map.

kojiro
  • 74,557
  • 19
  • 143
  • 201
punkish
  • 13,598
  • 26
  • 66
  • 101
  • One way you can fix that problem is by changing the `tabs` div to be `position: absolute`. Is there any particular reason why you have it as `position: relative`? – sarcastyx Jun 20 '11 at 01:38
  • something inside the #tabs is not correct. try reviewing the css for it. when i deacrease the height of #tabs the map was clickable – Ibu Jun 20 '11 at 01:43
  • sarcastyx, I haven't made the position relative at all (unless, by not explicitly setting a position, the widget gets positioned relative). lbu, yes, on collapsing #tabs, *most* of the map becomes clickable. However, there is a small band of the map that still remains unclickable. Obviously, it is the #tabs that is coming in the way of the maps, but I can't figure out why, as #tabs is only 300px wide. – punkish Jun 20 '11 at 02:55
  • @punkish, I don't see a downside to adding the position absolute to the `tabs` div. That still leaves the `tabs` div draggable over the map. BTW are you using any javascript framework to make the `tabs` div? – sarcastyx Jun 20 '11 at 03:47
  • @sarcastyx, I added `position: absolute;` to `#tabs` and it seems to work now. Many thanks. If you get a chance, could you explain why this works, and why it wasn't working without `position: absolute;`? – punkish Jun 21 '11 at 03:33
  • @punkish, `position: relative` positions the element relative to the parent element. So in your case it was laying on top of the map layer which meant that you could not click it. On the other hand `position: absolute` positions your element on the exact pixel value that you give for the x and y co-ordinates and sits separately from the parent. I will post this as an answer for others who run into similar problems. – sarcastyx Jun 21 '11 at 09:17

1 Answers1

1

The reason why this is not working is because on your current design the tabs div is positioned relative to the map. This means that the tabs div is overlapping the map area and you can't click it.

If you change the position of the tabs div from relative to absolute then it should work. With absolute positioning you can place the tabs div anywhere on the page based on the x and y coordinates.

You can find out more about CSS positioning here.

sarcastyx
  • 2,219
  • 17
  • 16