Could anybody, please, explain how to change the transition-property of the collapsing element in a standard bootstrap-3 navbar? I want the transition to be something like this, but with the 'top' property when clicked on the hamburger menu: http://jsfiddle.net/2vLjU/1/
<div class="wrapper">
<img id="slide" src="http://lorempixel.com/output/cats-q-c-100-100-4.jpg" />
</div>
.wrapper {
position: relative;
overflow: hidden;
width: 100px;
height: 100px;
border: 1px solid black;
}
#slide {
position: absolute;
left: -100px;
width: 100px;
height: 100px;
background: blue;
transition: 1s;
}
.wrapper:hover #slide {
transition: 1s;
left: 0;
}
Please see this following example i made here:
http://jsfiddle.net/f5jzo25t/
I used css3 ':target' that worked well with 'a' elements.
img:target {
left: 0;
transition: 1s;
}
You can read more about it:
https://www.w3schools.com/cssref/sel_target.asp
Hope that will help you
Related
I want to create a L shape with lines (div element). I also want to animate it. The problem is that when I try to rotate it (using transform rotate), the whole line gets rotated. How do I get it done? Can anyone help? Below is the code snippet. How do I make it a L.
.line {
width: 100px;
background: #ff0000;
animation: animate-line 2s;
height: 2px;
}
#keyframes animate-line {
0% {
width: 50px;
}
100% {
width: 300px;
}
}
<div class="line"></div>
Simply without using JS or an SVG image you can animate the elements width and height and use borders
.line {
position: absolute;
width: 0px;
height: 0px;
background: transprent;
border-top: 2px solid red;
border-right: 2px solid red;
animation: animate-line 2s linear forwards;
}
#keyframes animate-line {
0% {
width: 50px;
height: 0px;
}
50% {
width: 300px;
height: 0px;
}
100% {
width: 300px;
height: 300px;
}
}
<div class="line"></div>
If that isn't what you wanted please provide an image with an example.
I want a css option for this
currently i am using this css classes
.a{
top:-102px;
height: 140px !important;
}
.b{
top:0px;
height: 240px !important;
}
but this is opening the div from top to bottom and i want it to open from bottom to top
can Anyone please help its very important
thanks in advance
You need to wrap your div in another div
Give the parent div position:relative
Give the child div position:absolute
Anchor the child div using bottom:0
Demo 1 uses minimal JavaScript:
classList.toggle()
Demo 2 uses only CSS:
<label> and <input type='checkbox'> needed for "trigger"
Demo 1 (Plain JavaScript)
var x = document.querySelector('.x');
x.addEventListener('click', function(e) {
this.classList.toggle('b');
});
.y {
position: relative;
height: 240px;
width: 50px;
background: brown;
}
.x {
position: absolute;
height: 140px;
width: 50px;
background: red;
bottom: 0;
transition: height .5s ease;
}
.b {
height: 240px;
transition: height .5s ease;
}
<div class='y'>
<div class='x'>Click the Red</div>
</div>
Demo 2 (Pure CSS)
.y {
position: relative;
height: 240px;
width: 50px;
background: brown;
}
.x {
position: absolute;
height: 140px;
width: 50px;
background: red;
bottom: 0;
transition: height .5s ease;
}
#chx {
display: none
}
#chx:checked+.y .x {
height: 240px;
transition: height .5s ease;
}
<input id='chx' type='checkbox'>
<div class='y'>
<label for='chx'>
<div class='x'>Click on the Red</div>
</label>
</div>
why don't you try something like this?
.b{
top:0px;
height: 240px !important;
display:hidden;
}
and with jquery
$('.a').click(function(){
$('.b').show('fast');
})
You can put one div inside the main div. And give it overflow: hidden;
HTML
<div class='main_div'>
<div class='overlay_div'>
</div>
</div>
CSS
.main_div{
height: 240px;
}
.overlay_div{
height: 140px;
overflow: hidden;
}
Javascript
$('.overlay_div').click(function(){
$('.overlay_div').css({'overflow': 'visible'});
});
Please check below solution. I hope this will help you.
$('.a').click(function(){
$(this).toggleClass('b');
})
.a{
position:absolute;
top:100px;
height: 50px !important;
border:1px solid red;
transition-property: all;
transition-duration: .5s;
}
.b{
top:0px;
height: 150px !important;
border:1px solid red;
transition-property: all;
transition-duration: .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">Hello World!</div>
You can't handle click with CSS. you must add JavaScript for this.
I have made a sample code for hover
Here it's
<div class="wrapper">
<div class="face">Face</div>
<div class="back">Back</div>
</div>
And styling
.wrapper {
border: 1px solid red;
height: 100px;
width: 100px;
overflow: hidden;
}
.wrapper:hover .face {
margin-top: -100%;
}
.face, .back {
height: 100%;
transition: margin ease 0.2s;
}
.face {
background-color: yellow;
}
.back {
background-color: orange;
}
Here's the a CodePen for you:
https://codepen.io/AbuMuslim/pen/GvEwYz
You can use JS as following:
document
.querySelector('.wrapper')
.addEventListener('click', function() {
this.classList.toggle('active');
});
And instead of using hover selector, we change to .active, as following:
.wrapper.active .face {
margin-top: -100%;
}
Here's a CodePen for that: https://codepen.io/AbuMuslim/pen/QMgJVw
I am working with a navigation bar that has slides a menu from right to left.
With my code, when the user picture is being clicked, it will show the menu.
So when it is loaded, menu is hidden and when it is clicked will be showed. I used to add class hidden and show to toggle to menu.
$(document).ready(function(){
$(".img-profile").click(function(){
$(".menu-wrapper").addClass("show");
});
$(".menu-bg").click(function(){
$(".menu-wrapper").removeClass("show");
});
});
CSS
.show{
display: inline-block !important;
}
.hidden{
display: none;
}
The problem is it's not animating even if I added the transition: all 0.2s linear 0s and the transform from 250px to 0
.menu-wrapper > .login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
right: 0;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
transform: translateX(0px);
}
.menu-wrapper .show > .login-menu{
transform: translateX(250px);
}
Also, I want to animate it on menu-close from right to left.
My full code is at JSFIDDLE
Changing the display CSS attribute does not trigger animations. Use the visibility attribute instead. This one triggers animations.
If you have good reason to use display (which is completely possible), you'll need to set the display attribute first to show the element, but keep the visibility on hidden. Set the visibility: visible attribute right after and the animation will be triggered.
Edit: I had a look at your fiddle. Don't use the .hidden class, because bootstrap sets display:none on .hidden elements. Just use the .show class alone, putting visibility:visible in the show class, and setting visibility:hidden on the .menu-wrapper element. Remove all the display:none lines in your CSS and you'll be fine.
Try to do it with this trick.
<header class="header">
<div class="container">
<a class="logo" href="/"></a>
<div class="login">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<div class="login-menu">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<p>Mark Zuckerberg</p>
<button type="button" class="btn btn-danger btn-block">Logout</button>
</div>
<div class="menu-bg"></div>
</div>
</div>
.header{
width: 100%;
height: 50px;
background: #fff;
border-bottom: 2px solid #ececec;
}
.header > .container{
height: 100%;
position: relative;
}
.logo {
background: url("http://d12xrwn9fycdsl.cloudfront.net/static/images/sv_logo.png") no-repeat scroll center center / contain ;
display: inline-block;
width: 23rem;
height: 100%;
}
.select-lang {
display: inline-block;
position: absolute;
top: 15px;
}
.login{
position: absolute;
right: 0;
top: 0;
}
.img-profile{
background: no-repeat scroll center center / contain;
position: relative;
top: 3px;
border-radius: 40px;
width: 40px;
height: 40px;
display: block;
margin: auto;
}
.login > .menu-wrapper{
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 5;
height: 100%;
width: 100%;
}
.login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
top: 40px;
right: -250px;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
}
.show{
right: 0;
}
.hidden{
right: -250px;
}
.login-menu > .img-profile {
border-radius: 70px;
height: 70px;
width: 70px;
}
.login-menu > p {
font-weight: bold;
margin: 10px 0 20px;
}
.menu-wrapper > .menu-bg{
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
$(document).ready(function(){
$(".img-profile").click(function(){
$(".login-menu").addClass("show");
});
$(".img-profile").click(function(){
$("body").removeClass("show");
});
});
Take a look here https://jsfiddle.net/SkiWether/KFmLv/
this is working for me
$(".myButton").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: $('.mySelect').val() };
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('#myDiv').toggle(effect, options, duration);
});
I have a question on how to go about making a div that when you hover it, an image on the inside will move up into the div.
This is my code so far:
<div id="div1">
<div id="div2">
<img src="http://dummyimage.com/300x300/000/fff" width="300px" height="300px">
</div>
</div>
css
#div1 {
width: 300px;
height: 300px;
border: 2px black solid;
position: absolute;
top: 100px;
left: 500px;
overflow: hidden;
}
#div2 img {
position: absolute;
top:200px;
}
This image that sits in the div1 sits at the bottom of the div, the rest of the overflow is hidden. I want it to move up when the div is hovered.
Any idea on how to go about this? I was going to use the transform css and translateY it but I'm not sure if there is a better way that this can be done through JQuery.
Let me know what you think
Here is pure css approach with transition on hover
#div1 {
width: 300px;
height: 300px;
border: 2px black solid;
position: relative;
overflow: hidden;
}
#div2 img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease-in;
}
#div1:hover img {
top: 30%;
}
<div id="div1">
<div id="div2">
<img src="http://placehold.it/350x150">
</div>
</div>
#div1:hover #div2 img{
top: 100px; //change this number to get correct placement
}
Use :hover on your CSS and specify a new location for the image when you hover. You can even animate it so it "glides" into position.
You have the image unnecessarily wrapped in a div. just assign the id to the image itself
<div id="div1">
<img id="div2" src="http://www.maceire.com/wp-content/uploads/2015/01/grey- bac kground-1-wide-hd-background-and-wallpaper.jpg" width="300px" height="300px">
</div>
Then you can manipulate to top css value
var q = document.getElementById('div2');
q.style.top = '0px';
and
q.style.top = '200px';
to move up and down
For performance and simplicity, use CSS if possible and resort to javascript when you need to support legacy browsers. Your needs here could easily be solved using just CSS:
#div1 { width: 300px;
height: 300px;
border: 2px black solid;
position: absolute;
top: 100px;
left: 500px;
overflow: hidden;
}
#div2 img {
position: absolute;
top: 80%;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
#div1:hover #div2 img {
top: 0%;
}
This approach does not require you to know the dimensions of the image.
I want to display an input field .search when clicking on .icon class. I have managed to do that with following code. However instead of show/hide, I want to display the input field by smoothly expanding its width.
How that can be done?
JSFiddle Demo:
http://jsfiddle.net/9nPW9/
HTML:
<div class="box">
<input class="search" type="search" placeholder="Search" />
<div class="icon"></div>
</div>
CSS:
.box{
position: relative;
width: 220px;
}
.search {
width: 200px;
padding: 5px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
float: left;
}
.icon{
width: 20px;
height: 20px;
background: red;
position: absolute;
right: 0;
}
JS:
$('.icon').click(function() {
$('.search').toggle();
});
Why not change your code to toggle a class, thus keeping a clear separation between functionality (JS) and style (CSS)
Below is some sample code, you will likely want to edit for your precise needs.
Demo Fiddle
JS
$('.icon').click(function() {
$('.search').toggleClass('expanded');
});
CSS
.box {
position: relative;
width: 220px;
}
.search {
width: 200px;
max-width:0;
padding: 5px;
transition: all .5s ease;
position:absolute;
right:20px;
box-sizing:border-box;
opacity:0;
}
.search.expanded {
max-width:200px;
opacity:1;
}
.icon {
width: 20px;
height: 20px;
background: red;
position: absolute;
right: 0;
}
You should use .slideToggle() or fadeToggle()
$('.icon').click(function() {
$('.search').slideToggle(500);
});