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>
Related
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>
i am trying to create a web presentation and wanted to a add a little Animation of 2 Halfes which moves up and down on a Click (which works so far) but i also want them to stay there after the click.
standard looking version http://img5.fotos-hochladen.net/uploads/3ozt9kfyr08.jpg
0.75 seconds after the click on the logo in the middle http://img5.fotos-hochladen.net/uploads/2lpdyoktws6.jpg
after the animation http://img5.fotos-hochladen.net/uploads/18cd9xfjg21.jpg
This is my Code for that: HTML
<body>
<a href="#" id="btn_logo" onclick="return false"> <div id="animation">
<div id="logo"> </div>
<div id="up"> </div>
<div id="down"> </div>
</div></a>
and then made the animation with:
#btn_logo:active #up
and
#btn_logo:active #down
How could i make the animation toggled after it ended?
What you should do is have it animate on a CSS class, and then simply add or remove a CSS class on click.
Like so: https://jsfiddle.net/8troo8bw/1/
(or so with your exact html): https://jsfiddle.net/8troo8bw/2/
The key here being the animation:
#up, #down {
background: #000;
position:absolute;
right:0;
left:0;
width:100%;
height:25px;
transition: top 0.25s;
}
#up.moveUp {
top: 25px;
}
#down.moveDown {
top: 100px;
}
And the relevent JS to add the class:
$('#click').on('click', function(){
$('#up').addClass('moveUp');
$('#down').addClass('moveDown');
});
Do something like this:
$(document).ready(function(){
$('#animation').on('click', function() {
$('.up,.down').addClass('animated');
});
});
#animation {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: yellow;
}
.logo {
position: relative;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 50px;
background: red;
border-radius: 50%;
margin: 0 auto;
}
.up {
position: absolute;
top: 0;
right: 0;
bottom: 50%;
left: 0;
background: green;
}
.down {
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 0;
background: blue;
}
.up.animated {
bottom: 100%;
top: -50%;
transition: all 1s linear;
}
.down.animated {
top: 100%;
bottom: -50%;
transition: all 1s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="animation">
<div class="up"> </div>
<div class="down"> </div>
<div class="logo"> </div>
</div>
I want to be able to display an overly of the player name and have the entire box linked to his profile. I am trying to achieve this in jQuery but haven't had much luck. The a tag has styling on it so it extends to 100% of the width and height of the div.
It doesn't seem to be working - I need a second pair of eyes on as I'm probably missing something obvious.
I have this HTML structure
<div class="player">
<a href="/player?PlayGuid=123">
<div class="player__name">
<h4>Player Name</h4>
</div>
</a>
<div class="player__thumbnail">
<img src="player.jpg" alt="player desc" />
</div>
</div>
and this CSS
.player {
position: relative;
z-index: 1;
max-width: 250px;
width: 250px;
height: 250px;
max-height: 250px;
text-align: center;
cursor: pointer;
}
.player a {
display: none;
height: 100%;
max-width: 100%;
z-index: 12;
}
.player__name {
position: absolute;
top: 0;
left: 0;
background-color: rgba(44, 42, 102, 0.6);
color: #FFFFFF;
width: 100%;
height: 100%;
z-index: 10;
}
.player__thumbnail {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
}
.player__thumbnail img {
width: 100%;
max-width: 100%;
height: auto;
}
and the jQuery
$(document).ready(function(){
$('.player').hover(
function () {
$(this).closest('a').show();
},
function () {
$(this).closest('a').hide();
}
);
});
You don't need javascript to do that...just adjust the positioning.
.player {
position: relative;
z-index: 1;
max-width: 250px;
width: 250px;
height: 250px;
max-height: 250px;
text-align: center;
cursor: pointer;
}
.player a {
display: none;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(44, 42, 102, 0.6);
color: #FFFFFF;
}
.player:hover a {
display: block;
}
<div class="player">
<a href="/player?PlayGuid=123">
<div class="player__name">
<h4>Player Name</h4>
</div>
</a>
<div class="player__thumbnail">
<img src="http://www.fillmurray.com/250/250" alt="player desc" />
</div>
</div>
$.closest() searches through an element's parents, not its children. You should probably use $('a', this) to select the child <a> element.
Change html to
<div class="player">
<a id="name" href="/player?PlayGuid=123">
<div class="player__name">
<h4>Player Name</h4>
</div>
</a>
<div class="player__thumbnail">
<img src="player.jpg" alt="player desc" />
</div>
</div>
And Javascript to
$(document).ready(function() {
$('.player').hover(function() {
$('#name').toggle('display');
});
});
See if this helps you have tried to use your code to make it work.(For some reason this works for the first time. U got to re run this)
$(document).ready(function(){
$('.player').hover(
function () {
$(this).append($("a").html());
},
function () {
var ss = $(".player__name");
ss.remove();
}
);
});
.player {
position: relative;
z-index: 1;
max-width: 250px;
width: 250px;
height: 250px;
max-height: 250px;
text-align: center;
cursor: pointer;
}
.player a {
display: none;
height: 100%;
max-width: 100%;
z-index: 12;
}
.player__name {
position: absolute;
top: 0;
left: 0;
background-color: rgba(44, 42, 102, 0.6);
color: #FFFFFF;
width: 100%;
height: 100%;
z-index: 10;
}
.player__thumbnail {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
}
.player__thumbnail img {
width: 100%;
max-width: 100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="player">
<a href="/player?PlayGuid=123" id="play1">
<div class="player__name">
<h4>Player Name</h4>
</div>
</a>
<div class="player__thumbnail">
<img src="player.jpg" alt="player desc" />
</div>
</div>
I'm using ng-repeat to display some messages, and I'm trying to make the "message_area" scrollable as the messages naturally cause overflow over time, but my code doesn't work as expected.
<div class="main_area">
<div id = "message_area" ng-repeat = "message in selected_conversation_object.messages.slice().reverse()">
<div class="message_container" ng-if = "message.sender != me._id">
<div class="message_received">{{message.message}}</div>
</div>
<div class="message_container" ng-if = "message.sender == me._id">
<div class="message_sent_by_me">{{message.message}}</div>
</div>
</div>
</div>
.main_area {
position: absolute;
top: 0;
bottom: 0;
left: 325px;
right: 0;
height: 100%;
background: white;
}
#message_area {
position: relative;
overflow-y: scroll;
}
.message_container {
position: relative;
width: 100%;
height: 30px;
}
.message_received {
}
.message_sent_by_me {
position: relative;
background-color: #0084FF;
border-radius: 5px;
width: 100px;
color: white;
float: right;
}
I've not been able to understand why my code does not work.
Any suggestions would be appreciated.
You need to set min-height for the #message_area selector.
#message_area {
position: relative;
min-height: 50px; // Add This.
overflow-y: scroll;
}
Use scroll to your .main_area. When the ever the data gets more than the given height it manages it with scroll bar on y-axis.
.main_area {
position: absolute;
top: 0;
bottom: 0;
left: 325px;
right: 0;
height: 100%;
background: white;
**overflow-y: scroll;**
}
Working Plunker.
I have a couple of images, and when I hover over one of them, I want all the images to change position. There should also be an animation when the images change place so they slide to their new position. I am using jQuery. I have been trying different solutions but nothing works, so I don't post any javascript.
HTML:
<div class="container">
<div class="picture one"></div>
<div class="picture two"></div>
<div class="picture three"></div>
</div>
CSS
.container {
position: relative;
}
.picture {
width: 100px;
height: 150px;
background-color: green;
border: 1px solid #ccc;
position: absolute;
}
.two {
left: 60px;
top: 10px;
z-index: 2;
}
.three {
left: 35px;
top: 50px;
z-index: 1;
}
.three:hover {
top: 0;
left: 100px;
}
.two:hover {
left: 0;
top:0;
}
.one:hover {
left: 200px;
}
Link to jFiddle: http://jsfiddle.net/LJ9wL/2/
This will give you a start. http://jsfiddle.net/LJ9wL/3/
$('.picture').on('mouseenter', function() {
$('.picture').css({top: '0', left: '200px'});
$(this).css({top: '60px', left: '20px'});
});
$('.picture').on('mouseleave', function() {
$('.picture').css({top: '0', left: '200px'});
$(this).css({top: '0', left: '200px'});
});