I am using the spectrum.js flat colorpicker in a page that has a position:fixed header. The picker choices overlap the header while scrolling the page.
I have found this issue, but it seems to me that it applies to a picker contained into a fixed container, and not the other way round.
Thank you for your help.
With the F12 tools, I see that the color picker container has the sp-container class. In spectrum.css, the style defined for that class shows the following z-index property:
.sp-container {
...
z-index: 9999994;
}
If you set z-index: 9999995 (or more) for the fixed header, the color picker box will not overlap it.
$("#inputColor").spectrum({
color: "#f00"
});
#divHeader
{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
color: #CCC;
background: #333;
padding: 8px;
z-index: 9999995;
}
#divContainer
{
margin-top: 40px;
width: 300px;
height: 1200px;
background-color: #E0E0E0;
border: solid 1px black;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
<div id="divHeader">Fixed header</div>
<div id="divContainer">
<input id="inputColor" type="text" />
</div>
Related
I have a custom dropdown list in the first el-collapse-item. When I expand the dropdown list, the list option is blocked by the second el-collapse-item.
<el-collapse v-if="currpage == 'edit'">
<!-- 1st tab -->
<el-collapse-item class="collapseheader" title="Contact" name="1">
<InputAutocomplete2
:items="positionlist"
:initval="cur_vendor.ContactPositionIDn2"
:placeholder="$t('Position')"
:key_field="'IDn'"
:value_field="'PositionName'"
#input="setinput_contactposition2" />
</el-collapse-item>
<!-- 2nd tab -->
<el-collapse-item class="collapseheader" title="Carrier" name="2">
<!-- Some stuff here... -->
</el-collapse-item>
</el-collapse>
<style>
.autocomplete2 {
position: relative;
}
.autocomplete2-results {
padding: 0;
margin: 5px 0;
border: 1px solid red;
border-radius: 4px;
height: 150px;
overflow: auto;
position: absolute;
background-color: white;
width: 100%;
z-index: 999;
}
.autocomplete2-result {
list-style: none;
text-align: left;
padding: 4px 2px;
cursor: pointer;
}
.autocomplete2-result:hover {
background-color: #4AAE9B;
color: white;
}
</style>
As shown in the picture above, the red border is my dropdown list options, and is being blocked by the 2nd tab. What I am trying to achieve is that the list would show on top of the 2nd tab.
I tried to play with CSS:property and CSS:z-index but no luck.
I also came across this post on StackOverflow element UI el-collapse in front if others components but there are some slight differences in our problem, hence the solution did not work for me.
Any suggestions? Thank you!
Update 1: 16-03-2022
As suggested, I have created the same problem in https://codesandbox.io/s/vue-template-forked-5oy4lw
I'm trying to use JQuery UI's slide animation to toggle a div.
When a link is clicked, the div slide in the page from the right (as seen in this fiddle).
$("#toggle").click(function(event) {
event.stopPropagation();
$("#slider").toggle("slide", {
direction: "right"
}, 300);
});
#toggle {
font-weight: bolder;
cursor: pointer;
}
#slider {
z-index: 100;
display: none;
position: absolute;
right: 0;
top: 50px;
width: 300px;
height: 200px;
padding: 20px;
background: #DDD;
border: 1px solid #000;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous">
</script>
</head>
<body>
<div id="toggle">
click me to slide
</div>
<div id="slider">
Slidin' in & Slidin' out
</div>
</body>
</html>
The problem I have is this scrollbar that appears during the animation, I don't want it to be displayed, like in JQuery UI's website, they don't have this scrollbar issue and I don't know how they did it.
I would like to avoid wrapping #slider into another container if possible, and I can't set his parent to overflow: hidden neither at the moment.
Is there a simple way to fix this ?
The easiest solution is to set overflow: hidden on the body element. However, since you said that you can't do that, an alternative solution would be to animate the width of the element in order to make it appear like it is sliding in. In reality the width of the element is just increasing/decreasing from 0 and it is animated to make it look like it is sliding.
In jQuery you would do this with the .animate() method and you would set the value of width property to 'toggle'.
$("#toggle").click(function(event){
event.stopPropagation();
$("#slider").animate({
width: 'toggle'
}, 200);
});
In addition, you can also prevent the text from wrapping with white-space: nowrap.
See the full example below:
$("#toggle").click(function(event){
event.stopPropagation();
$("#slider").animate({
width: 'toggle'
}, 200);
});
#toggle {
font-weight: bolder;
cursor: pointer;
}
#slider {
white-space: nowrap;
z-index: 100;
position: absolute;
right: 0;
top: 50px;
width: 300px;
height: 200px;
padding: 20px;
background: #DDD;
border: 1px solid #000;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="toggle">
click me to slide
</div>
<div id="slider">
Slidin' in & Slidin' out
</div>
</body>
</html>
I wish to achieve this effect:
where a draggable will disappear below the edges of the container div.
I am not sure in which direction to head. At first I thought I should use css z-index but so far unsuccessful.
Is there a simple way to achieve it ? I intend to use it with jsPlumb but I don't think my question is limited to this library.
Here is a snippet with the problem. The blue rectangle is draggable, the grey area is my container, and the orange is the full page.
jsPlumb.bind("ready", function() {
jsPlumb.setContainer("conteneur");
jsPlumb.draggable(document.getElementById("item1"),{
});
console.log(document.getElementById("item1"));
});
#master {
background: orange;
position: relative;
z-index: 21;
padding: 20px;
}
#conteneur {
padding: 20px;
width:80%;
height: 200px;
border: 1px solid gray;
position: relative;
background: grey;
z-index:21;
}
#item1 {
left: 100px;
z-index: 12;
}
.node{
background: blue;
position: absolute;
width:20px;
height:30px;
}
<script src="https://rawgit.com/sporritt/jsPlumb/master/dist/js/jsPlumb-2.0.4-min.js"></script>
<div id="master">
<div id="conteneur" class="cont">
<div id="item1" class="node"></div>
</div>
</div>
If I'm understanding your question:
#conteneur {
overflow: hidden;
}
should do the trick.
I'm trying to have my header change opacity when you scroll down say aproximatly 500px down. I'm making a single page with a header infront of a bxslider so when I scroll down the opacity should increase for the header because the text still needs to be readable.
http://ironsummitmedia.github.io/startbootstrap-scrolling-nav/
I'd like something like this but I find it very hard to edit
I already tried to look for answers here but only thing close to this is: Header changes as you scroll down (jQuery) or Fade opacity when scrolling but the one doesn't work for me and the other is to hard to understand and change
<header class="main-header">
<img src="images/logo.png"/>
<nav>
<a id="active" href="#Platenbeurs">Platenbeurs</a>
Voorstelling
Planning
Grondplan
Praktische Info
Bestel
</nav>
</header>
EDIT
Here is the css code to see that the header is actualy not opacity 1.
.main-header{ position: fixed; max-width: 1024px; width: 100%; height: 100px; padding: 1%; text-align: right; background: rgba(255,255,255,0.2); border-top: 5px solid black; border-bottom: 5px solid black; }
.main-header nav a{ color: white; text-decoration: none; opacity: 1; }
If fixed it myself...
HTML
<header class="main-header clearfix">
<img src="images/logo.svg"/>
<nav>
Platenbeurs
Voorstelling
Artiesten
Planning
Grondplan
Praktische Info
Bestel
</nav>
</header>
CSS
.main-header{
position: fixed;
width: 100%;
z-index: 101;
padding: 15px;
text-align: right;
background-color: rgba(0,0,0,0.2);
border-top: 5px solid black;
}
.main-header nav a{
color: white;
text-decoration: none;
opacity: 1;
}
Javascript
$(window).scroll(function(event){
if($(document).scrollTop() > 300){
if(header.data('opacity') == 'start'){
header.data('opacity','scrolled');
header.css("background", "rgba(0,0,0,1)");
}
}else{
if(header.data('opacity') == 'scrolled'){
header.data('opacity','start');
header.css("background", "rgba(0,0,0,0.2)");
}
}
});
The opacity off the header is already 1. You can't increase the opacity, instead you can set the background color for header on scroll. Please refer the following snippet: http://jsfiddle.net/uy25hw21/
This is my first question here and I've tried to search for quite some time now and I haven't found any question that is the same as mine or touches the same problem.
I want to do a CSS popup that has a background-div covering the whole website and a centered div showing actual content.
My problem is that only the centered div is showing up when I'm clicking the button that is supposed to show them both. Even when I comment out the display:none - attribute in my css-file, the background div simply doesn't have any color or style attached to it. If I fill it with text, the text shows up on the website where the div is "supposed" to be if there weren't any style sheet attached to it.
I've gotten the code from coders answer in this question.
Here it is:
Script:
$("#btn-update").click(function() {
document.getElementById("light").style.display="block";
document.getElementById("blackground").style.display="block";
});
html:
<button type="button" id="btn-update">Button!</button>
<div id="light" class="white_content">This is the lightbox content. Close</div>
<div id="blackground" class="black_overlay"></div>
CSS:
.black_overlay{
/*display: none;*/
position: absolute;
top: 10%;
left: 10%;
width: 100%;
height: 100%;
background-color: #000000;
z-index:1001;
/*-moz-opacity: 0.8;*/
/*opacity:.80;*/
/*filter: alpha(opacity=80);*/
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 15%;
height: 15%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
Here's the fiddle-demo so you can play around as well
I've tried changing the attributes, commenting them out, making the div visible from the get go but it always seems to not show properly (while the white_content always do).
Also: the JS-fiddle is having problems showing the white content, but the black overlay is showing just fine when you remove the display:none attribute.
Thank you so much in advance for any help. Been stuck for a while now
You need to attach the jquery plugin in jsfiddle http://jsfiddle.net/dhana36/K57DH/12/
After update http://jsfiddle.net/dhana36/K57DH/20/
UPDATE:
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<style>
.black_overlay{
/* display: none;*/
position: absolute;
top: 10%;
left: 10%;
width: 50%;
height: 50%;
background-color: #000000;
z-index:1001;
/* -moz-opacity: 0.8;*/
/* opacity:.80;*/
/* filter: alpha(opacity=80);*/
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 15%;
height: 15%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn-update").click(function() {
document.getElementById("light").style.display="block";
document.getElementById("blackground").style.display="none";
//document.getElementById("blackground").style.background-color="#555555";
});
});
</script>
</head>
<body>
<div id="light" class="white_content">
This is the lightbox content.
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('blackground').style.display='block'">
Close
</a>
</div>
<div id="blackground" class="black_overlay"></div>
<button type="button" id="btn-update">Button!</button>
</body>
</html>
Add the script before closing </body> not inside </head> Same code doesn't work when wrapped inside head
http://jsfiddle.net/K57DH/18/ edit in left panel