I have a a list of image swatches when on mouseover a div popup should appear above all content. However I am finding that in IE6 that the div popup is sitting behind the elements that are generated after the popup. It is sitting correctly ontop of elements rendered before the popup.
A rough idea of what I have:
<ul>
<li>
<img src="image path to swatch">
<div class="tooltip">TOOLTIP POPUP</div>
</li>
<li>
<img src="image path to swatch">
<div class="tooltip">TOOLTIP POPUP</div>
</li>
</ul>
I have quite a few of these ULs stacked on the page.
Rough idea of the CSS
ul li {
width: 150px;
height: 20px;
position: relative;
}
div.tooltip {
width: 300px;
height: 300px;
position: absolute;
top: -20px;
left: -20px;
z-index: 1000;
display: none;
}
I have tried making the parent li have a z-index of -1 and position relative, but this also hides the swatch. The swatches are generated dynamically and I need the individual tooltips to be positioned near the swatch itself, which is why I structured it inside a list.
I have also tried to increase the z-index using javascript when the swatch is hovered over so that it is the highest above all else, but this hasn't worked either. Eg:
$('ul li').hoverIntent(
function(){
$('div.tooltip', this).css('z-index', '9000');
$('div.tooltip', this).stop(true,true).show();
},
function() {
$('div.tooltip', this).hide();
$('div.tooltip', this).css('z-index', '1000');
});
Running out of ideas, so if anyone could help please? Thanks.
The code can be seen on JS Fiddle at: http://jsfiddle.net/melon/nUTgB/13/
To fix a lot of IE z-index bugs, keep this rule in mind:
If something has a position attribute, it always needs a z-index
That has helped me a lot with browser testing. That means that the LI tags need a z-index: 1 set, because they have the position:relative attribute
ie6 work on position relative more than absolute
https://stackoverflow.com/a/10280332/1312610
Related
The title may be a little bit unclear, but I have an <img> tag generated by the WordPress shortcode: the_post_thumbnail('thumbnail'); and I placed this inside a parent div, to give it the right place in the website.
single.php has this inside:
<div class="newsidebar">
<?php the_post_thumbnail('thumbnail'); ?>
</div>
HTML output:
css styling for .newsidebar
.newsidebar {
width: 30%;
position: relative;
left: 100%;
transform: translateX(-100%);
height: 500px;
margin: 4em 0;
}
expected output is just this image sitting inside my .newsidebar div, but actually it's stuck at the bottom of the page for no reason. There is no padding/margin pushing the img down, no position absolute with top/bottom styling.
Is there another css reason that I overlook why it wishes to sit ~1000px lower in the site then expected?
actual output on site:
What did I try to fix this?
giving the img:
positions,
margin,
top,
bottom,
but the only thing that actually got it to stay inside the parent was
.newsidebar > img {
position: absolute;
top:0;
left:0;
}
downside of this code, I don't want to use position absolute, as there are widgets/ other elements being added inside newsidebar. which will then hover above or below this image.
any CSS/JavaScript/jQuery solutions are helpful.
edit I fixed my issue using another WordPress function named get_the_post_thumbnail_url() and adding that url to the background of a div inside my .newsidebar div. but I am still curious to find out why this <img> was taking a trip down my website.
tldr; I want to have a button's event captured (click) even though it's under a DOM layer.
Here's my problem, I have a DOM layer that's relatively positioned and has a z-index set higher than 1, let's just say 2. That DOM layer is above the button (Button A) I'd like to have triggered when clicked. The reason that DOM layer is above the button (Button A) in question, is that the button (ShoreMore) across from it has another event that when clicked, opens a drawer of other little links.
Here's what I've tried:
I tried adding pointer-events: none; to the DOM layer above my button. problem is that while it now allows the button to be pressed, the DOM layer with the button that opens the drawer of other link no longer works. Suggested by this SO question.
I also came across this little trick found on this website. It essentially, hides the mask and rechecks the user's click coordinates and fires the event that is found within the coordinate. However, I found myself unsatisfied with the results, as I'm often given DOM that's unhelpful too specific or too broad based on the user's click. (e.g. getting the icon, text next to the icon, etc. of the Button).
For illustration purposes, here's what I have:
Here's my code:
HTML
<div id="drawer" class="drawer">
<div id="shield" class="shield"></div>
<div id="expander" class="expander">
<div class="inner">
<ul>
<li>links</li>
<li>links</li>
<li>links</li>
<li>links</li>
<li>links</li>
</ul>
<div id="tab" class="tab" >
<i class="icon"></i> Show More
</div>
</div>
</div>
</div>
<span id="btnA" class="btn">
<i class="icon"></i>
<span>Button A</span>
</span>
CSS
.drawer {
position: relative;
height: 0;
z-index: 2;
margin-bottom: .5em;
}
.expander {
position: relative;
height: 28px;
transition: height .2s ease;
overflow: hidden;
}
.inner {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin-bottom: 28px;
}
I didn't include the javascript, but "Button A" and "Show More" have a click listener. They both work, but Button A is confirmed to work if pointer-events: none; is added to the CSS of the class "expander."
EDIT: spelling
One possible solution is to use more absolute positioning.
The problem you're running into is that HTML elements, no matter their shape, end up as rectangles when rendered. Your blue outlined layer has a complex shape that's not strictly rectangular, but HTML doesn't care - it expands the layer's shape into a big rectangle to cover the parent element and all of its children elements, as you've correctly drawn in your diagram.
Absolute positioning helps prevent that from happening. Instead of leaving space for an element in the document flow, absolute positioning sort of pops the element out and positions it relative to its parent. The result is an element that doesn't expand the borders of its parent element, because it essentially takes up zero space in the normal document flow.
Consider the following example:
$(function(){
function slideDown(){
this.innerHTML = "Close";
$("#tray").animate({top: "50px"});
$("#higher-button").off("click").on("click", slideUp);
}
function slideUp(){
this.innerHTML = "Show More";
$("#tray").animate({top: "0px"});
$("#higher-button").off("click").on("click", slideDown);
}
$("#higher-button").on("click", slideDown);
$("#lower-button").on("click", function(){
alert("Lower button clicked.");
});
});
* {
margin: 0;
padding: 0;
text-align: center;
line-height: 50px;
}
#box {
position: absolute;
top: 20px;
left: 20px;
}
#lower-button {
width: 200px;
height: 50px;
background-color: #cccccc;
position: absolute;
top: 50px;
}
#higher-button {
width: 200px;
height: 50px;
background-color: #888888;
position: absolute;
top: 50px;
left: 200px;
}
#tray {
width: 400px;
height: 50px;
background-color: #aaaaaa;
position: absolute;
}
#mask {
position: absolute;
width: 400px;
height: 50px;
background-color: #dddddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
<div id="lower-button">Button A</div>
<div id="tray">
<div id="higher-button">Show More</div>
</div>
<div id="mask">Mask</div>
</div>
Absolute positioning lets you easily layer and position elements in a way that avoids them taking up excess space.
The caveat to all this is that absolute positioning can be pretty messy. Since it removes elements from the normal document flow, they don't take up any space, and it can wreak havok with your layouts. So use absolute positioning sparingly, for cases like this where you're building a UI element that you probably don't need taking up space in the layout anyway.
As always there are dozens of ways to solve this problem and this is only one possibility, but I hope it helps you figure out your own solution. Good luck!
Edit: Note you don't necessarily need to make all of the UI elements absolutely positioned, only the ones you need in order to manage the document flow. For example, the parent UI element could still be relatively positioned, and you just "pop out" the individual UI components. You still need to manually manage the size of the parent UI container, because absolutely positioned elements take up zero space in the flow. jsfiddle.net/v2646v41
One easy solution would be to change the z-index of Button A. When the drawer is closed, set it higher than the drawer's div, and when Show More is clicked, set the z-index underneath, then back above after the drawer has slid back under the mask.
I was trying to make a slider, all good, i finished it, but i saw that the links aren't active, when i hover on them, the cursor is not pointer, if i click on them nothing happens,except the last one.
I remove the css and i saw that the links is ok. So i've tried to find the problem in css.
first:
.caption-wrapper{
position: absolute;
text-align: center;
width: 100%;
}
if i remove position: absolute the links are active, but the jquery movment animating doesn't work anymore.
second:
ul.slides li{
position: relative;
width: 100%;
float: left;
margin-right: -100%;
height: 500px;
}
This time, if i remove float:left the links are active again, but the rest is going crazy.
Here http://screencast.com/t/KLpp6DysMZ8l is a part of the html code. there are 5 li's , and only the last li links works. I have no idea why.
I don't know what to do. I worked a lot at this slider. Anybody has this problem? Thank you!
I suspect they're layering on top of each other because of they're positioned absolute, try using z-index to order them. Use a higher z-index on the active link.
I am trying to make a selectable list in Google Closure . I got almost everything , but when i added the scroll functionality to the container. i realized that something is wrong with my style if the outline element
<div class="Selectable"
style="height: 400px; overflow-y: scroll" id ="list2">
<div class="selectable-item">0 </div>
<div class="selectable-item">1</div>
.....
.....
.....
<div class="selectable-outline" style="left: 88px; top: 97px; width: 76px; height: 725px; "></div></div>
</div>
here is the fiddle.
http://jsfiddle.net/dekajp/uC5jm/4/
i want div ( outline ) to be contained within scrollable parent. the scroll height of parent is around 2000. could not figure this out !!
Thanks for you help !!!
The outline element is positioned absolute, therefore you'll need the parent of that element to be position relative so that the outline element won't break containment.
/* you need to also capitalize selectable */
.Selectable {
position: relative;
/* more styling */
}
JSFIDDLE
I am working on this site http://www.group---me.my/national/
Please remove --- in the url.
For certain deals, there is options, and when you click on the BuyNow button, a popup comes up. I would like to dim (darken) the background, while the popup is shown.
To do this, on my local test site, I added the following div class:
.overlay{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 333%;
background-color: black;
z-index: 20;
opacity: 0.8;
filter: alpha(opacity=80);
}
Then on the Buy Now button, I added
onclick="javascript:document.getElementById('fade').style.display='block';"
I also have this in the site
<div id="fade" class="overlay"></div>
But the problem is, the overlay always hides all the layers, including the popup, regardless how high I set the popup div's z-index.
Any help is much appreciated. Thanks.
Which browser? Which version. I am getting it right here. It should hide right?
And it is prominent. What is that you wanna do here?
If you doesn't specify some parent element to be relative positioned, your overlay div will be positioned relative to body so it can be above all other content.