So basically we have a concept picture: http://imgur.com/a/Z38Fy
Each of these window's is a div element on the site that on click should get on top. Let's say we click on window #2, that means that window 2 is on top now and window 1 is behind it. This is literally how the Windows operating system individual windows work.
Is this possible using jQuery and javascript?
Is this what you are looking for?
Set the z-index when click on a div, and set the z-index of the others to something lower
$("div").click(function() {
$("div").not(this).css("z-index", "1")
$(this).css("z-index", "2")
})
div {
position: absolute;
height: 100px;
width: 100px;
border: 1px solid #000;
background-color:white;
}
.one {}
.two {
top: 40px;
left: 100px;
}
.three {
top: 70px;
left: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
A quick example
$(".window").on("click", function() {
$(".window").css("z-index", 0);
$(this).css("z-index", 1);
});
.window {
width: 250px;
height: 250px;
}
.window:nth-child(1) {
background-color: lightblue;
position: absolute;
left: 20px;
top: 20px;
}
.window:nth-child(2) {
background-color: purple;
position: absolute;
left: 100px;
top: 60px;
}
.window:nth-child(3) {
background-color: darkgreen;
position: absolute;
left: 180px;
top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="window">W1</div>
<div class="window">W2</div>
<div class="window">W3</div>
</div>
As Carsten Løvbo Andersen answered, yes! it is posible, and he gave us an example that works using jQuery and javascript.
I just want to point out that it can be done by using css and html only, what answer the title of this question "Making divs focus and change z-index".
See modified Carsten Løvbo Andersen example:
.container {
position: absolute;
height: 100px;
width: 100px;
border: 1px solid #000;
background-color: white;
z-index: 0;
}
.container:focus {
z-index: 1;
}
.one {}
.two {
top: 40px;
left: 100px;
}
.three {
top: 70px;
left: 40px;
}
<div class="container one" tabIndex="0">1</div>
<div class="container two" tabIndex="0">2</div>
<div class="container three" tabIndex="0">3</div>
Related
I'm trying to get the mouse offset inside a square, but when I click on its children, the offset changes, now returning the mouse offset inside the children, and not the parent.
What I would like to achieve is to get the mouse offset inside the parent, even if I click inside the children.
Thanks a lot!
Below is an example of the problem. (Look in the console)
$("#parent").click(function(e){
console.log(e.offsetX, e.offsetY)
});
.square{
position: relative;
height: 200px;
width: 200px;
background-color: red;
}
.small{
position: absolute;
top: 25px;
right: 25px;
height: 50px;
width: 50px;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="square" id="parent">
<div class="square small"></div>
</div>
You can use
e.target
to get the element clicked, as this is the parent element that the click has bubbled up to.
Then combine with .getBoundingClientRect() to get its position, gives:
$("#parent").click(function(e) {
var rect = e.target.getBoundingClientRect();
//console.log(e.offsetX, e.offsetY)
//console.log(rect.left, rect.top)
console.log(rect.left + e.offsetX, rect.top + e.offsetY)
});
.square {
position: relative;
height: 200px;
width: 200px;
background-color: red;
}
.small {
position: absolute;
top: 25px;
right: 25px;
height: 50px;
width: 50px;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="square" id="parent">
<div class="square small"></div>
</div>
Solution
Add a transparent background and full height and width child div to the parent (#parent-overlay) and check for its offset instead.
Why
The offsets are gotten from the click event and the click event was on the child. So while in the child, you can't get an offset from the parent (the event was registered on the child).
Adding a full width and height overlay, that matches the parent, and getting offset from there should give you what you want.
$("#parent-overlay").click(function(e) {
console.log(e.offsetX, e.offsetY);
});
.square{
position: relative;
height: 200px;
width: 200px;
background-color: red;
}
.small{
position: absolute;
top: 25px;
right: 25px;
height: 50px;
width: 50px;
background-color: blue;
z-index: 1;
}
#parent-overlay {
position: absolute;
z-index: 3;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="square" id="parent">
<div id="parent-overlay"></div>
<div class="square small"></div>
</div>
Adding pointer-events: none; to the css for the class "small" disables clicking on the element.
$("#parent").click(function(e){
console.log(e.offsetX, e.offsetY)
});
.square{
position: relative;
height: 200px;
width: 200px;
background-color: red;
}
.small{
position: absolute;
top: 25px;
right: 25px;
height: 50px;
width: 50px;
background-color: blue;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="square" id="parent">
<div class="square small"></div>
</div>
This question already has answers here:
Position absolute with Left:100% , Child element goes out of the parent continer
(4 answers)
Closed 2 years ago.
Let's say I have some code like this:
.a {
width: 400px;
height: 150px;
border: 1px solid #777;
position: relative;
}
.b {
position: absolute;
top: 30%;
right: -33px;
}
.c {
position: absolute;
top: 50%;
right: -88px;
}
<div class="a">
<div class="b">hello</div>
<div class="c">testing longer</div>
</div>
If you run the snippet you'll see the desired behavior, where both b and c are positioned on the right edge of the a element.
The only issue I'm having is that on my website b and c have dynamic contents (I don't know what they'll be ahead of time). Is it possible to somehow modify the right property of both b and c such that I don't have to hardcode the value in and they will still be positioned on the outer edge of a?
You can use:
left: 100% or
right: 0 and transform: translateX(100%)
Example:
.a {
width: 400px;
height: 150px;
border: 1px solid #777;
position: relative;
}
.b, .c {
position: absolute;
right: 0;
transform: translateX(100%);
}
.b {
top: 30%;
}
.c {
top: 50%;
}
<div class="a">
<div class="b">hello</div>
<div class="c">testing longer</div>
</div>
I'd probably go a step further and wrap .b and .c with another element so that you can get rid of hardcoding top too.
.a {
width: 400px;
height: 150px;
border: 1px solid #777;
position: relative;
}
.d {
position: absolute;
top: 50%;
right: 0;
transform: translate(100%, -50%);
}
.c {
margin-top: 1em;
}
<div class="a">
<div class="d">
<div class="b">hello</div>
<div class="c">testing longer</div>
</div>
</div>
I wanted to achieve animation as shown in this video link.
https://drive.google.com/open?id=1nI4csjzv-jlIWORlEkgN5hWM_7qCcZSH
I am new to web development. Can anyone give me some idea to achieve it?
Thanks
Just mouse hover on my example to have a snippet to start over, mate:
div {
display: inline-block;
}
div.line-container, div.circle {
float:left;
}
div.line-container {
height: 50px;
width: 50px;
position: relative;
}
div.circle {
background-color: green;
border-radius: 50%;
width: 50px;
height: 50px;
}
div.line {
background: #999;
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
}
div.line2 {
background: red;
position: absolute;
top: 50%;
left: 0;
right: 100%;
height: 1px;
transition: all 1s;
z-index: 5;
}
div.container:hover div.line2 {
right: 0;
}
<div class="container">
<div class="circle"></div>
<div class="line-container">
<div class="line"></div>
<div class="line2"></div>
</div>
<div class="circle" />
</div>
I want to change the display of the elements with the .slide-prev and .slide-next classes. As I'm using a slide plugin, it automatically creates the navigation elements outside the ul, so the only way the display change worked was with javascript. The problem is that it did not work as it should.
When I move the mouse over the div with the class .intro-noticias the elements appear, and when I leave they disappear, so far so good. The problem is when I hover over the elements .slide-prev and .slide-next, they are shaking, disappearing depending on where the arrow is and do not activate the hover.
It may be that I let something simple go by, but I really have not found it, if anyone knows what's causing it, I appreciate it.
Video demonstrating the problem
$(".intro-noticias").hover(function() {
$('.slide-prev,.slide-next').css("display", "block");
}, function() {
$('.slide-prev,.slide-next').css("display", "none");
});
.intro-noticias {
width: 100%;
height: 85vh;
margin-top: 70px;
}
.slide-prev {
z-index: 20;
position: absolute;
top: 70px;
left: 0;
text-indent: -9999px;
height: 40px;
width: 40px;
border: solid 1px #fff;
background: rgba(0,0,0,0.5);
display: none;
}
.slide-prev:after {
content:"icon";
width: 20px;
height: 20px;
position: absolute;
bottom: 9.5px;
left: 2px;
display: block;
background: url("img/icones/previous.png") left center no-repeat;
}
.slide-prev:hover {
background: red;
transition: all 0.2s ease-in;
}
.slide-next {
z-index: 20;
position: absolute;
top: 70px;
left: 40px;
text-indent: -9999px;
height: 40px;
width: 40px;
border: solid 1px #fff;
background: rgba(0,0,0,0.5);
display: none;
}
.slide-next:after {
content:"icon";
width: 20px;
height: 20px;
position: absolute;
bottom: 9.5px;
right: 2px;
display: block;
background: url("img/icones/next.png") right center no-repeat;
}
.slide-next:hover {
background: red;
transition: all 0.2s ease-in;
}
<ul>
<li>
<div class="intro-noticias">
<div>
<h2></h2>
</div>
</div>
</li>
</ul>
Previous
Next
You can wrap ul and anchors into the <div class="cont"> and bind events mouseenter and mouseleave to this div.
<div class="cont">
<ul>
<li>
<div class="intro-noticias">
<div>
<h2></h2>
</div>
</div>
</li>
</ul>
Previous
Next
</div>
$(".cont").mouseenter(function() {
$('.slide-prev,.slide-next').css("display", "block");
});
$(".cont").mouseleave(function() {
$('.slide-prev,.slide-next').css("display", "none");
});
I have a jsfiddle:
http://jsfiddle.net/aritro33/y6wBy/
And when you hit the compose button on this jsfiddle, a post drops down revealing an assortment of colors above it. Notice how when you click on a color in the middle, or any color for the matter, all the colors to the left of that color move up slightly giving a weird effect. How would it be possible to prevent all the colors on the left of the div selected from moving up and in fact keeping them where they are.
Thanks!
HTML:
<div id="red" class = "color"></div>
<div id="orange" class = "color"></div>
<div id="yellow" class = "color"></div>
<div id="green" class = "color"></div>
<div id="turquoise" class = "color"></div>
<div id="blue" class = "color"></div>
<div id="purple" class = "color"></div>
<div id="gray" class = "color"></div>
CSS:
#red {
background-color: #2ac0a3;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
position: relative;
bottom: 220px;
left: 365px;
}
#orange {
background-color: #25ac92;
position:relative;
bottom:236px;
left: 405px;
}
#yellow {
position: relative;
bottom: 252px;
left: 445px;
background-color:#219982;
}
#green {
position: relative;
left: 485px;
bottom: 268px;
background-color: #1d8672;
}
#turquoise {
position: relative;
left: 525px;
bottom: 284px;
background-color: #197361;
}
#blue {
position: relative;
left: 565px;
bottom: 300px;
background-color: #156051;
}
#purple {
position: relative;
left: 605px;
bottom: 316px;
background-color: #104c41;
}
#gray {
height: 16px;
width: 40px;
position: relative;
left: 645px;
bottom: 332px;
background-color: #0c3930;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.active{
height: 18px;
width: 45px;
z-index: 1;
border: 1px solid white;
}
JS:
$('.color').click(function(){ $('.active').removeClass('active'); $(this).addClass('active'); });
Your #active property changes the size of the colors:
.active{
height: 18px;
width: 45px;
z-index: 1;
border: 1px solid white;
}
If you change it to this:
.active{
height: 14px;
width: 45px;
z-index: 1;
border: 1px solid white;
}
the effect seems to go away.
It looks like the CSS for #gray has a few other properties, if you mimic the others, the slight movement seems to go away:
#gray {
position: relative;
left: 645px;
bottom: 332px;
background-color: #0c3930;}
Hopefully this helps!
For me, you may rewrite your CSS at all. To place every Element with position will let you run in to more problems at the end i think.