Google Maps, Z Index and Drop Down Javascript menus - javascript

I've run on a little problem today: I have a JS drop down menu and when I inserted a GoogleMap... the Menu is rendered behind the Google Map... Any ideas on how to chance the z Index of the Google Map?
Thanks!

If your problem happens in Internet Explorer, but it renders the way you'd expect in FireFox or Safari, this link was extraordinarily helpful for me with a similar problem.
It appears to boil down to the idea that marking an element as "position:relative;" in CSS causes IE6&7 to mess with it's z-index relative to other elements that come before it in the HTML document, in unintuitive and anti-spec ways. Supposedly IE8 behaves "correctly" but I haven't tested it myself.
Anutron's advice is going to be really helpful if your problem is with a <SELECT> form element, but if you're using JavaScript to manipulate divs or uls to act like a drop down I don't think it's going to help.

Note that dropdown menus in some browsers (ahemIE*ahem) cannot be zPositioned at all. You'll need to use an "iframe shim" to obscure it or hide the dropdown entirely if you want to position something above it. See: http://clientside.cnet.com/wiki/cnet-libraries/02-browser/02-iframeshim

The map is already wrapped inside a div. Give it a negative z-index and it works - with one caveat: the gmaps controls aren't clickable.

If your menu is wrapped in a div container e.g. #menuWrap then assign it position relative and give it a high z-index.... e.g.
#menuWrap {
position: relative;
z-index: 9999999
}
Make sure your map is inside a div

Try setting your menu z-index insanely high. Apparently Google Maps uses a range from -9000000 to 9000000.

Wrap the map in a DIV, give that DIV a z-index of 1. Wrap your drop-down in a DIV and give it a higher value.

IE gives the problem
every div that is wrapped in a relative positioned div will start a new z-index in IE. The way IE interprets the outer relative divs, is in order of html. Last defined is on top. No matter what the z-indexes of the divs inside the relative positioned divs are.
Solution for IE: define the div that should be on top at last in html.
(So z-index does work in IE, but only per holder div, every holder div is independent of other holder divs)

z-index (especially in Internet Explorer 7) really didn't work for me. I tried many different combination's of high vs. low map z-indices but had no joy.
By far the simplest/quickest answer for me was to re-arrange my mark-up/css to have my flyouts/rollovers listed in the mark-up above/before my map (literally, before the <div id="map">), this way I could let the z-index remain default (auto) and move on to more important aspects of my webapp ;)
Hope this helps!
<ul id="rollover">
<li>There</li>
</ul>
<div id="map">...</div>

I created a google style drop-down and had the same issue...using the V3 api for google maps, you just create a control and place it on the map using:
map.controls[google.map.ControlPosition.TOP].push(control);
Since it is a drop-down, just make sure the z-index of the containing div is highest (z=3) then the drop-down part containing the menu items is lower that the containing div (z=0).
Here's an example.
From my experience, the only time you need to use shims is for plug-ins (like with Google Earth).

No need to set the z-index for both the map and the menu. If you simply set the z-index of the menu higher than the map, it won't necessarily work.
Set the z-index of the map div to -1. Now the menu will drop down and display over the map.........but if you're using a wrapper then the map will no longer be interactive as it is now behind the wrapper.
To work around this, use onmouseover and onmouseout functions in your wrapper div. Make sure those are in your wrapper div and not your map div.
onmouseover="getElementById('map').style.zIndex = '10000';"
onmouseout="getElementById('map').style.zIndex = '-1';"

I've found that sometimes inadvertently neglecting to declare the !doctype will cause this kind of hiccup in IE, when other browsers seem to be able to negotiate the page fine.

Related

unable to click - div overlays another div

I have two maps which are loaded via javascript into DOM (ngOnInit, I am using Angular 10).
The problem is that div of sk-map is overlaying on cz-map and if I want to hover/click on some region on the bottom right side of cz-map it is not possible, because sk-map div overlays on cz-map.
I can fix it - make cz-map with higher z-index, but there will the same issue, but in the sk-map (I am not able to select left top side of sk-map).
You can't really use divs in this situation.
Alternatives would be to use an svg which is fully vector.
Another suggestion is instead of being able to click the whole div, maybe use a good old fashioned image hotspot :)

Javascript / JQuery - Dynamically generated divs (wrap) on my page I can't change or apply style

I have this page where I tried to create a on page pop-up for an image using JS/JQuery, following this example (http://www.jqueryscript.net/lightbox/Simple-jQuery-Plugin-For-Opening-A-Popup-Window-On-Page-load.html).
Although I succeeded on it, when I try to implement it on my customer page, some divs are on front of my pop-up, no matter how high I configure the "z-index" for it. Also, these divs seem to be dinamically generated, as they have the "wrap" id div around that I can't find on my .php file for this page.
So, no matter what I do, these images are on front of my pop-up (except if I remove them using the "Inspect element" tool or change the z-index on them with Inspect Element, changing the inline style for this automatically generated "wrap" div).
This is the page without any changes on "Inspect Element", the white image boxes with the red arrows are the problem here (they belong to the page under the pop-up and I need them to be under the pop-up): http://imgur.com/waB1igo
This is what happens if I change the z-index of the automatically generated div "wrap" that I can find searching the code with "Inspect element" for one of the boxes (the first one): imgur.com/lDk1eRA
So, any of you guys have a tip for me on how to solve this problem?
I've already tried to create new css rules for this div or the img's tags, using the "!important" and these kind of things, without result.
Thanks very much in advance and sorry for english errors,
Matheus Barreto.
You might want to try setting the position property of the overlay to absolute. Images that have their positions set to absolute will get on top of everything that is not set to position absolute or fixed which can be very annoying. You might need to work around a bit with centering it or other issues that come from setting its position to absolute but this should work.
Try to make sure your overlay DIVs are outside wrappers, inside the </body> tag, before closing scripts... If the DIV is inside another that has a lower z-index, it won't "pop out" of it.
Also, you may try really high z-index, such as 8000 or higher. You should be able to use up to 65535 (higher depending on the browser's implementation).
It's worth noting that you should have a plan for z indexes of fixed/absolutely positioned items.

Constraints and draggable item not appearing on top - Version II

OK, so here's the situation:
I'm experimenting with a fixed-width (resizeable) left sidebar
The sidebar contains draggable elements
If one of the elements is dragged to the right, then the draggable element (the helper actually) seems to be disappearing behind the main content.
Why is that happening? Any ideas on how this could be resolved?
Demo: http://83.212.101.132/angjs/ang4.html
This one is almost an exact duplicate of a similar question I had posted earlier, although the solution to this one seems to me rather far from obvious.
.slimScrollDiv SET overflow: visible;
.hbox, #content, .vbox AND following (if there are some) - remove z-index tag!
this was your mistake. Hope it works now, the adding on a Pane seem not to be implemented.
Because the JavaScript is modifying it I can't know for sure. However, my initial thoughts are it has to do with the z-index. The z-index for the center section is 99, and the lis are 0-10. Try making it update the z-index of the lis to 100+ on move.
I seems this remove position in left menu side and white drop box and set droppable menu z-index and position absolute may it works for you

Wordpress template div not expanding

I have a wordpress theme that i'm building but i've hit a snag with some code and can't seem to get my div to expand correctly. I've tried clearing the floats at different positions, i've tried overflow: hidden, but nothing seems to work.
What i'm trying to do is have the content slide in from either side based on what header you click. The content is based on a wordpress post for each link. So the client can easilly edit it to any size.
Because of this it isn't viable to use pixels in the sizing of it. And i know that absolute positioning means that pixels are very nearly the only option.
I've messed with everything i can think of in firebug and just cannot get it to expand.
You'll find the site here: http://tinyurl.com/okd5wnf
However i couldn't get this to work either. Maybe that'll give you a clue as to what might be wrong.
I know it's a long winded post, and i apologise. If i have time later, i should be able to make a jsfiddle. However time is short at the moment.
Any help would be appreciated. Thank you very much.
Your problems stems from setting the <div class="box"></div>'s position property to absolute. Give the parent element(<div id="body-wrapper"></div>) overflow-x:hidden; to hide children that are not being displayed, and then use negative margins to position child elements within the viewport (the parent element). This is basically how most sliders work.
Remove position absolute from box class. please also mention what desired layout you need for content. we will suggest you classes for that.
Romove position:absolute from div.box
I guess that's all.

How to display the latest called object on top?

I'm creating a custom select plugin. Everything is going great, but the dropdowns (<ul>-objects) are overlapping on each other :(
I understand, that the overlapping order is set after the elements order on page or when they are created. So my question is: What is the method to make the latest opened/shown object (<ul>) on top of the hierarchy?
I just need the correct method. I'm not going to copy the full code, but a little example:
$('#trigger').click(function () {
new_dropdown.slideDown();
});
(A picture is worth of 1000 words)
So lets say, that I open the green select the last.. How can I make it on top of the yellow one?
EDIT
For easier testing I created jsfiddle. For future references I'll post the link: http://jsfiddle.net/hobobne/uZV5p/1/ This is the live demo of the problem at hand.
What you're looking for is the CSS z-index property (higher values put elements at the front).
You could probably just set them in ascending order (e.g. set green one to 1000, yellow to 1001), but if you really need to bring it to the front when clicked, you can change the z-index with javascript
var zindex=100;
$("#trigger").click( function() {
newdropdown.css('z-index', ++zindex);
});
Here's a demo: http://jsfiddle.net/waitinforatrain/Vf7Hu/ (click the red and blue divs to bring to front).
Edit: gilly3's approach is better, and as was mentioned there may be some issues with older versions of IE.
Two ways:
Set a z-index
Setting a z-index will change the default stacking order. You can have a counter that increments and use that to set the z-index of newly stacked items. You may have issues with IE 7 or earlier, though, and those can be fixed by setting the z-index of other items. https://developer.mozilla.org/en/Understanding_CSS_z-index/Adding_z-index
Use absolute positioning, and append the div to the body
If you use absolute positioning, you can append the div to the body and still have it appear below the element. If you append the div to the body, the one last added should be on top, because of the default stacking order.
Give it a class when it is opened, and remove that class from the previously opened ones:
$(".slidedown_active").removeClass("slidedown_active");
$(this).addClass(".slidedown_active");
Then your users can use z-index in their style definition for that class to ensure the active list is always visible.
The reason I don't recommend setting the z-index directly is because you can mess up your users' layout unnecessarily. These kind of overlap issues can be a real headache for a web developer. For a plugin to try to guess at how to resolve overlap issues, without any knowledge of the code or design, would be virtually impossible. Instead, give your users the tools they need to fix the overlap issues themselves. It may be that your users would never encounter overlap issues, so setting the z-index for them would be pointless at best, and potentially harmful.

Categories