We Keep Coding

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.

How do I create a div in html which is absolutely positioned, which will push other elements to the side like in Apple's Pages?

How do I create a div which will act like a relatively positioned div (as in it cannot allow elements behind it) and still will also act like an absolutely positioned div (as in it can freely be positioned)? I am willing to use javascript and jQuery if needed.
Example: or a similar effect

I don't think you can do what you're asking for in the way you're asking for it. You should be able to fake it adequately though.
Say you wanted to "insert" a sidebar that pushes all the main content on a page over by 200 pixels (the width of the sidebar). You could increase the left margin of the page/container by 200px (animate it if you wanna be flashy) and then absolutely position your div where you want it (you could animate it sliding in from off screen if you want it to appear as if it is "pushing" the other content over). If I understood the question correctly, then this should accomplish the visual effect you're going for.

I think you mean Draggable elements, you can use jQuery User Interface:
http://jqueryui.com/demos/draggable/

Multiple captions for an image - click on links to see one at a time

What I'm trying to do is something like you see at http://www.nejm.org/doi/full/10.1056/NEJMimc1109704. (Click Play and go to page 5 - the interactive physical exam.) I think they are doing this with Flash, but I'd like to use javascript/jQuery.
Basically there's an image that has multiple captions. The captions have arrows that point to different parts of the image, but that's not essential for me. When you click on different links, different captions appear.
Would I tackle this as an image map? I.e. create a map, and use jQuery to toggle different parts of the map? Is there a plug-in that does that? Google searches aren't helping me - but maybe I don't know what to look for. Any help will be appreciated.

I'm having the same problem and I found imageMapster. Check out
http://www.outsharked.com/imagemapster/default.aspx?demos.html#beatles
I think this is what you want to do. Just this solution today, haven't figured it out yet. Looks promising though. Otherwise check out qTip2
http://craigsworks.com/projects/qtip2/demos/
Maybe some adaptions let you/us do what we wanna do
Good luck! Keep u updated if I figured it out

Why would you need jQuery?
Anyway, put your main image down, and set its position to be fixed where you want it. You could even put it in a nice container div, just make sure all your caption divs are relative to the same parent. Then put fixed position divs of your caption images over it with a higher z-index in your css. Then place your caption images at the appropriate top and left positions until they are correct. Of course, use transparent PNGs.
All you need to do to toggle them is set the element's style.display to "none" or "inherit"

fitting absolute div popup in screen

Sorry maybe I was not clear in my original question below...
What I am looking for is a way to get a popup to move inside the windows viewable area (not actually create the popup itself). As seen in Google image's when you mouseover a image at the edge of the screen, somehow (which is what I want to know), the script detects that there is not enough space for the popup to appear in the window, so it pushes it inside the viewable range.
So I want to know how this is determined and calculated.
How can I use javascript to make sure
a popup div fits inside the window
when it appears?
A good example is google's image
search. When a image does not fit in
the window (either it is the far right
most or bottom most image), somehow it
is pushed inside when the popup is
opened with the mouseover event. How
is this calculated and how can I
create a script to calculate this.

you can use already build pop-up box/overlay window js library. Use jQuery js framework and go for any plug-in that provide you the same feature. I recommend you to use facybox http://fancybox.net/ with jQuery which makes this very easy.

There's no "use this code in your JS file" fix for this but the general idea is to reposition and override the offsets of the element in question, taking into account the viewport's bounds (to state the obvious).
For example, a couple of good tooltip plugins for jQuery support this behaviour, such as bassistance's jQuery Tooltip Plugin and also qTip. It might be worth digging into their source and seeing how they handle this.

This is one of the best i've come across http://gettopup.com/

Google Maps, Z Index and Drop Down Javascript menus

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.