I am stuck on a HTML overlay issue. My page have a overlay container. It blocks the clicking of the dropdown behind it. I tried to set a very high z-index for the dropdown, but it doesn't work.
Fiddle for my issue:
> https://jsfiddle.net/ao4dLp3g/2/
Can I get some help? I want to have the original click behavior of dropdown. Is there a way to exclude the dropdown element from the overlay.
It may not be a good idea to create separate overlay containers to cover the rest of area since I may have many elements to exclude.
Thanks!
If you change the position property of the button to relative, you can set its z-index to be higher than the z-index of your overlay.
#dropdownMenuButton{
z-index:1001;
position:relative;
}
https://jsfiddle.net/u0p5fv8t/
Related
I'm wondering how I could expand a 'div' without affecting the layout of the other elements in the page. Specifically, I'd like to achieve an effect similar to this - http://www.ikea.com/us/en/catalog/categories/departments/kitchen/kitchen_int_lighting/. If you hover your mouse over any product, you'll see that the box expands showing more information; however, other elements such as the product image below is not affected by the expansion.
use absolute position.
rather you can also achive the same effect by writing onhover event on the div with adding an additional div at that position with higher z-index.
use absolute positioning, and then you can grow/shrink the div and it won't effect any other elements around it.
Add position:absolute; to style of your div. This way it won't interfere with other elements but still overlap them, and you can specify any width and height to them.
Absolutely position your div and make sure the z-index is at the top level. It CAN be done using just CSS, but it'll probably be easier with js as well.
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.
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!
I'd like to render a Google Maps canvas to a hidden div and then, when an event is triggered elsewhere on the page, make the div visible again.
Unfortunately, when I try styling the div with "display:none" and then later displaying it, I get just a gray box where the map would be. If I eliminate the display:none tag and the showing logic, the map works fine.
Anyone have any ideas?
You can toggle visibility: hidden on; that will make everything keep its dimensions (while still remaining invisible). This would help if Google is asking the page for how wide and tall it is. Keep in mind with visibility: hidden the map canvas will still take up space in the page; if this is not something you want then you can do something like position: absolute.
Set the div's opacity to 0.01 or some such - that makes it practically invisible.
Got this to work by setting the map's div to position:absolute and left:-10000px.
Then I just set the position to inherit when I want it to appear.
I have a scrolling pane div with overflow:hidden. Please check it here. There are products as images with captions shown in the scrolling pane. When I move mouse cursor over a product div, it gets light-yellow background and changes its height - I just add a class to the div using jQuery and it works fine. The problem I need to solve some way is to show the expanded div for the active product as a separate div that appears above the scrolling pane, though now it appears inside that pane and extends it in its height. I want to make it look in similar way to this one. Here you move mouse cursor over the product and get an extended div showing you details. Surely, my task is a little harder because of that scrolling pane.
Shouldn't be too difficult if you use the .offset() method on hover of a .product. What you can do is the following:
In your .product hover event handler, get the offset of the product. This will give you the position of your product in relation to the document.
Next create your overlay product information div and append it directly to the <body>.
Set the overlay div to position: absolute and use the values returned from the offset call to position it.
Lastly make sure your overlay has a higher z-index than the scrolling pane and you should be in business.