I'm pulling an event list calendar in to my site from a third party provider. It's pulled in using a simple javascript call, and has been placed inside a div on my site. When hovering over an event, you get a tooltip popup that shows more information about it (all driven by javascript). I'm using CSS to put an image as the background for the div, but the tooltip popups are appearing behind the CSS sourced image. I've attempted to set a z-index of 0 for the main div that pulls the background image, and then nest a second div for my javascript with a z-index of 1, but it's not doing anything.
I don't have access to edit any of the javascript for the third party calendar system, so the fix has to be accomplished with whatever I can do on my own site. Unfortunately I wouldn't consider myself a pro at web development, so there may well be a very simply answer I'm not finding, but right now I'm stumped.
Any suggestions? Thanks!
It looks like you're trying to set a z-index for an element whose parent element already has z-index. That's not possible. If you want to set a different z-index on the tooltip element it has to be outside of the first div.
It would be really helpful if you could show us some code.
The main reason why z-index doesn't work could be that you forgot to set position. Z-index only works on positioned elements (position: absolute, position: relative or position: fixed).
The second reason could be the one that #kremalicious mentioned. Setting higher z-index to the child element.
Related
I'm trying to display a background image for a map area when a user hovers over it. Currently I've specified a separate id for each area and I have written a javascript function that triggers when the area is hovered over. To this function I pass the element id and by looking at the console I know that the function is being called with the correct element yet the background is not being displayed! Currently I've only implemented the functionality in the products tag.
I also tried giving the area a z-index of 9999 and fixed width/min-width and height/min-height.
Here is the website https://dl.dropbox.com/u/14863356/OsmosysV3/index.html
NOTE: Just an fyi to others who are facing this problem, Chrome or safari require that you have name attribute declared for map even though it is deprecated.
Why do you even need javascript? In CSS could you not do:
#welcome{
height: 300px; // or whatever
&:hover{
background: url("welcome.jpg")
}
}
Then same for the other elements.
According to this Visible Area Tag image map areas are not visually represented and hence no css is reflected on them. If you want a hover over effect over your maps, then you can find a way to do so by following this link
It's probably not the neatest way to do it, but it works.
I have to create a banner that expands over content when moused over and then contracts on mouse out. I have managed to create the expand/contract animations and actions but I am having trouble positioning the that the flash file is in to ensure that it's flows over other elements on the page.
Can anyone give me a lesson on doing this. I imagine its a bit of CSS and a little bit of javascript.
Thanks!
Look at wmode=transparent for getting flash files to work nicely with other elements on the page.
If you can add the wmode to the flash object, you shouldn't have any problems.
Just wrap the flash file in a div wrapper and position the div or do whatever you need that way.
differences between using wmode="transparent", "opaque", or "window" for an embedded object on a webpage
Meant to add, if you change the wmode, and wrap it in a div, then you can assign the div a position of absolute and use z-index:99999 to have it above all other elements.
I have a jQuery conundrum that I'm not sure can be resolved. Inside a content slider I have absolutely positioned divs creating a tool-tip style pop-up on hover. Because the containing content slider overflow must be set to hidden, the tool-tip pop-up gets cut off where it overflows. I would like the pop-up to display in full when overlapping the slider it is contained within. If anyone has a workaround for this I'd be very appreciative!
Here's a link to my working file from which you can see the problem and the code.
Many thanks for any advice.
Your animation inside 'slidesContainer' relies on overflow:hidden so the large image doesn't stick out of the div and the only way for you to get the balloons pop out is to remove that overflow:hidden and make it visible
I don't think you can have the two at the same time
Right, so I don't think there was a straight forward solution so what I did was change the script to refer to div IDs instead of referring to the 'next' div. I moved the pop-up div's outside the slide element and absolutely positioned them relative to the page rather than the link. It's more long winded but works fine! Just means you need to refer individually to each pop-up div in the script. Thanks for you help anyway!
The effect I'm looking for is that I have a div that is floating right with a Google map inside it and when the user scrolls down, I want it to be fixed at top:0px. This is basically what Yelp has for the map on their search page. There's been a few questions that are similar that ask about using JQuery to change the class of a div to fixed once the user scrollsdown but with Google Maps, I can't seem to get the effect to work.
The main reason is that Google Maps is using some sort of javascript that is loading after my own javascript that override the position to absolute and I can't change it through Jquery's css method or anything. So I've added a wrapper that is floating but adds a fixed class upon scrolldown. It fixes to the top of 0px fine but because it was floating, once the position become's fixed it jumps to the left and clobbers my other content.
I found a tutorial online, but it might be deprecated now? It wasn't working.
I had the same problem. All you have to do is create a DIV inside another.
Like this:
<div id="outDIV" style="position:fixed; top:0">
<div id="inDIV" style="width:100%; height:100%">
[map content goes here]
</div>
</div>
I know this is way old, but maybe someone else coming along can get some info out of this one.
Yes, you can add another element encasing the map element, but if you want to get around that you can set a listener for a tilesloaded event and then undo what google's done.
In api v3, you can do it like so:
google.maps.event.addListener(myMap, 'tilesloaded', function(){
document.getElementById('map-id').style.position = 'absolute'/'fixed'/'potato'/'whatever';
});
I'm sure there are issues that go with setting a position to a map beyond what google likes, but if you want to keep the number of elements in your document to a minimum (you should really want to), this would be the way to do it.
(edit: adding quotes)
You just needed to pick apart the specifics of what Yelp was doing a little more, I think... their column is floated as well (examine their markup... it's #searchLayoutMapResults), but then inside that, the div #searchLayoutMapResults is the one that gets position: fixed added to it (via the className fixed), so it doesn't change the position of the floated column. So you probably just want an additional wrapper on the map, and add the fixed positioning to that instead of your floated container.
(the markup I found was based on this page)
A requirement for a current project of mine involves "highlighting" an HTML element in the context of a page. That is, I need to provide some sort of visual effect that decreases the brightness of the surrounding page while leaving the element at full brightness.
To achieve this, I'm trying the following approach:
Determining the highest z-index value of any element on the page (using JavaScript).
Creating an element to function as a "backdrop" on top of the page. This is just a <div> with a translucent gray background image, sized to 100% of the width and height of the <body> element, with position: fixed. I set its z-index to 1 greater than the highest z-index I've found on the page, with the intent that it will overlay every other element on the page.
Change the z-index of the "highlighted" element to 1 greater than the backdrop. The intent is to allow it to sit on top of the backdrop, which in turn sits on top of the rest of the page.
I got it working on a quick test page:
http://troy.onespot.com/static/stack_overflow/z_index_test.html
but when I tried to set it up on a few actual Web pages, it didn't work in all cases. For example:
http://troy.onespot.com/static/stack_overflow/z_index.html
Here, I've inserted two "dummy" elements on a copy of a Jacksonville.com article page, both with a class of test (if you're looking at the page source, they're at lines 169 & 859).
I also added some JavaScript (using jQuery) at the very end of the page that functions as I've described above.
The first <div class="test"> does function as I'd expect it to. However, the second one does not - it seems to still be stuck beneath the "backdrop" element, despite having a higher z-index.
I think this may have something to do with stacking contexts, but after reading through the relevant W3C docs (http://www.w3.org/TR/CSS21/visuren.html#z-index & http://www.w3.org/TR/CSS21/zindex.html), I still can't fathom why this is happening. I'd appreciate anyone more familiar with z-index and stacking order than I to take a look at my examples and let me know if anything looks suspicious.
Please note that I've only tested these examples in Firefox v3.6.
Thanks very much for any help!
The problem is that the second test div is inside a bunch of other HTML elements, one of which must be creating a new stacking context (it may be the #wl-wrapper-tier-1 div). Basically, a new stacking context is created whenever an element is positioned and has a z-index other than auto, see this MDC article for more info on stacking contexts.
Ultimately this means you can't achieve your desired effect reliably with this method. I think you're probably better off composing 4 divs to surround the target element.
If the element that you're highlighting is inside a different element (stacking context) with a z-index lower than the backdrop, it will not appear higher than the backdrop, since the element's z-index only controls stacking order within that parent.
The only good solution is to clone the highlighted element and add the clone to the <body> tag.
Beware of inherited CSS styles, which would be lost.