What I have is grid of divs to whom I attach click handlers by using jQuery .on() function. When one of elements is clicked on, partly transparent DIV is faded in as overlay over this grid to prevent another element being clicked while dialog box is open.
The problem is that for some strange reason .on('click') events still bleed through overlay layer, as if it wasn't there - I suspect that .on() function is to blame, because when I simply use .click() handler, this overlay works fine.
I've tried suggestions to use event.stopPropagation on overlay div to keep this from happening, but I've so far had no luck.
Simplified example:
HTML:
<div class="grid-cointainer">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
<div class="overlay"></div>
CSS:
.grid-container {
position: absolute;
top: 0px;
left: 0px;
width: 400px;
height: 100px;
}
.grid-item {
float: left;
display: inline-block;
width: 100px;
height: 100px;
background-color: #666;
}
.overlay {
position: absolute;
top: 0px;
left: 0px;
width: 400px;
height: 100px;
background-color: #fff;
display: none;
opacity: 0.5;
z-index: 999
}
JS:
$('.grid-item').on( "click", function() {
showAwesomeDialog(this);
$('.overlay').css("display","block");
});
Related
So not sure if this one is possible but from my understanding of the spec the parent of a position fixed element should be the viewport not a parent element with position relative.
That obviously all works when it comes to positioning but not with z-index.
If you take a look at this example,
.parent {
height: 1000px;
}
.el-one {
position: relative;
z-index: 2;
height: 100px;
width: 100%;
color: red;
}
.el-two {
position: relative;
z-index: 2;
background-color: black;
height: 500px;
width: 100%;
}
.im-fixed {
position: fixed;
top: 0;
left: 0;
}
<div class="parent">
<div class="el-one">
<div class="im-fixed">Hello</div>
</div>
<div class="el-two"></div>
</div>
https://codepen.io/anon/pen/mmvXaE
The fixed element goes behind the black section if you scroll down, what I need is a way to get the red element to the front without moving it out of el-one.
I have a project where some embed code needs to become fixed when you scroll past it, this is a better example of the actual code. The example above just highlights the issue in a simple way:
<div class="parent">
<div class="el-one">
<div id="my-wrapper">
<iframe class="im-fixed"></iframe>
</div>
</div>
<div class="el-two"></div>
</div>
,
I found this online talking about what I believe has caused the issue: https://developers.google.com/web/updates/2012/09/Stacking-Changes-Coming-to-position-fixed-elements but no luck finding a workaround.
All I can think of is using JS to move the element from where an editor puts the embed code and prepending it to the body when the user scrolls past the element.
Anyone else come across this or have any ideas?
You want something like this? Increase the z-index of .el-one higher than the one you want to overlap
.parent {
height: 1000px;
}
.el-one {
position: relative;
z-index: 99;
height: 100px;
width: 100%;
color: red;
}
.el-two {
position: relative;
z-index: 2;
background-color: black;
height: 500px;
width: 100%;
}
.im-fixed {
position: fixed;
top: 0;
left: 0;
}
<div class="parent">
<div class="el-one">
<div class="im-fixed">Hello</div>
</div>
<div class="el-two"></div>
</div>
Use the following:
.el-two {
position: relative;
z-index: -1;
background-color: black;
height: 500px;
width: 100%;
}
There are several ways to solve this issue. Increasing Z-Index, cleaning up the div and etc.
I think you are sort of trying sticky header functionality. There is a new value for position CSS attribute.
position: sticky
I have cleaned up the code and removed all Z-Index. Please check the attached code snippet.
Note: Supported only in Chrome, Firefox
Not supported in IE.
.parent {
background-color: green;
position: relative;
width: 100%;
height: 5000px;
}
.header {
position: sticky;
top: 0px;
left: 0px;
height: 50px;
background-color: yellow;
}
.el-one {
background-color: blue;
color: white;
height: 100px;
width: 100%;
}
.el-two {
background-color: orange;
height: 500px;
width: 100%;
}
<div class="parent">
<div class="header">I am a header</div>
<div class="container">
<div class="el-one">
I am el-one
</div>
<div class="el-two">
I am el-two
</div>
</div>
</div>
I did a div with a big width (i.e.3000px) and I hide it with a parent div with overflow:scroll, beacuse with a overflow:hidden I can't scroll to right/left.
So the best answer need to do a div that I can scroll to left/right (preferably with a draggable method) not having the scrollbar.
My code below:
HTML
<div class="contents-home-container">
<div class="contents-home-container-inner">
<div class="contents-home">
<!-- X7 <contents-home divs> -->
</div>
</div>
</div>
CSS
.content-home-conteiner {
overflow: hidden;
cursor: -webkit-grab;
padding-left: 15px;
width: 100%;
margin-top: 20px;
height: 75vh;
}
.contents-home-container-inner {
width: 2600px;
margin-left: 250px;
display: block;
height: 100%;
}
.contents-home {
float: left;
margin-right: 15px;
margin-left: 15px;
width: 13%;
height: 100%;
}
jQuery
I tried with the .draggable method but the console output an error that display ".draggable is not a function" (something like this, but I copy/paste the basically function from the jQuery documentation..). I'm using WordPress.
.draggable is not a function
means the draggable js is not called before the code.
include jquery and jqueryUI in your code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
http://codepen.io/anon/pen/KwOyQo
Friends, is there any way to make this div scroll even being with the mouse over the boxes??
Html:
<div class="container">
<div class="container-scroll">
<ul class="list">
<li class="list-item one"></li>
<li class="list-item two"></li>
</ul>
</div>
</div>
Css:
.container {
width: 100%;
height: 400px;
border: 1px solid black;
overflow: scroll;
color: white;
}
.container-scroll {
width: 100%;
height: 4000px;
}
.list {
list-style: none;
position: fixed;
}
.list-item {
display: inline-block;
width: 150px;
height: 150px;
}
.list-item.one {
background: pink;
}
.list-item.two{
background: black;
float: right;
}
I was trying to make something with overflow but anything worked..
You've set those elements to position: fixed. This positions the elements relative to the browser, which means they're completely taken out of the flow of their parent. So of course, when you hover over them, the container won't scroll.
You could use pointer-events: none on those boxes, but this isn't supported well across all browsers. Also, it's unclear whether you might actually need pointer events inside those elements in the future.
My advice would be to remove the scrollable div. Ensure that the body/document is the only element that scrolls. That way the content will scroll no matter what element you're currently mousing over.
.list-item {
display: inline-block;
width: 150px;
height: 150px;
pointer-events:none;
}
This will do the trick
EXAMPLE: http://codepen.io/anon/pen/OPKOog
This is a very simple example of sticking an element at the top of another element's visible area. When .container is scrolled, .fixed stays at the top.
<div class="container">
<div class="fixed">fixed content</div>
<div class="content">regular content<br/>regular content<br/>regular content<br/>regular content<br/>regular content</div>
</div>
<style type="text/css">
.container {
position: relative;
border: 1px solid blue;
overflow: auto;
width: 250px;
height: 250px;
}
.content {
height: 500px;
width: 500px;
}
.fixed {
position: absolute;
width: 500px;
margin-top: 2rem;
border 1px solid red;
}
</style>
<script type="text/javascript">
$('.container').scroll(function () {
var top = $('.container').prop('scrollTop');
console.log(top);
$('.fixed').css('top', top);
});
</script>
The problem with this is that if the browser is not fast enough, the .fixed element flickers when I scroll. It lags behind the scroll (compare the position of the text in .fixed to the text in .content as you're scrolling). On my desktop it works flawlessly, but when I try running this in Chromium in a virtual machine, I can see the flicker.
Is there any other way to catch the scroll event and set the position of my .fixed element before the browser renders the page?
edit Updated example to include horizontal scrolling. The fixed element should only be fixed vertically.
Use a double container:
<div class="container-wrapper">
<div class="fixed">fixed content</div>
<div class="container">
<div class="content">regular content<br/>regular content<br/>regular content<br/>regular content<br/>regular content</div>
</div>
</div>
With the CSS:
.container-wrapper {
position: relative;
border: 1px solid blue;
overflow: hidden;
width: 250px;
height: 250px;
}
.container {
overflow: auto;
width: 100%;
height: 100%;
}
.content {
height: 500px;
}
.fixed {
position: absolute;
top: 0px;
left: 0px;
width: 245px;
border 1px solid red;
z-index: 10;
}
This way you won't need jQuery to reposition the .fixed div when you scroll, and it won't flicker.
EDIT To address the horizontal scrolling...
$('.container').on('scroll', function() {
var left = this.scrollLeft;
$('.fixed').css('left', -left + 'px');
});
This should move the .fixed div without flickering. In your solution, the flickering was caused because the browser moved your div while scrolling, and the event handler then moved it again. Now it will only move once.
I have a base html element and I have an overlay element that contains some buttons.
I want the mouse to be able to interact both with the base element as well as with the buttons in the overlay.
The problem is that the overlay captures the mouse events of the base element.
Is there a way that I can disable the mouse interactions for the transparent background of the overlay (like IE seems to do), while keeping the mouse interactions for the buttons inside the overlay ? Or do I need to change the structure of my code ?
Fiddle
Here's one approach.
With an overlay element:
http://jsfiddle.net/XC95u/11/
Without an overlay element:
http://jsfiddle.net/XC95u/3/
I modified the html structure and use z-index to control the positions of the divs.
HTML:
<div class="main">
<div class="base"></div>
<div class="overlay">
</div>
<div class="button left"></div>
<div class="button right"></div>
</div>
CSS：
.main {
width: 350px;
height: 150px;
position: relative;
}
.base {
background-color: #c0c0c0;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.button {
background-color: #707070;
width: 30px;
height: 30px;
position: absolute;
top: 60px;
z-index: 99;
}
.right {
right: 0;
}