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);
});
Related
I am trying to create a transition effect using css and the JavaScript classList.add function. My expected behaviour is that when the button is clicked, a grey background appears and on top of that another element slides in from the right. At the moment everything appears as expected, but for some reason the slide transition doesn't happen. Any ideas? I have created a basic version of my code below:
html:
<button id="product-form__book-product">Add</button>
<div class="product-form-slider" id="product-form-slider">
<div class="product-form-slider__inner" id="product-form-slider__inner">
<span class="close" id="product-form-slider__close-button">×</span>
<p>TEST</p>
</div>
</div>
scss:
.product-form-slider {
position: fixed;
display: none;
top: 0;
z-index: 11;
right: -65%;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
align-items: center;
justify-content: center;
right: 0;
&.active {
display: flex;
}
}
.product-form-slider__inner {
right: -65%;
height: 100%;
width: 65%;
background-color: #fefefe;
padding: 20px;
box-shadow: 5px 5px 10px #545151;
position: absolute;
&.slide-in {
right: 0;
transition: right 1s linear;
}
}
JavaScript:
var productFormBookButton = document.getElementById('product-form__book-product');
var productFormSlider = document.getElementById('product-form-slider');
var productFormSliderInner = document.getElementById('product-form-slider__inner');
var productFormSliderCloseButton = document.getElementById('product-form-slider__close-button');
productFormBookButton && productFormBookButton.addEventListener('click', showFormSlider);
function showFormSlider() {
productFormSlider.classList.add('active');
productFormSliderInner.classList.add('slide-in');
}
// Close slider on click of close button
productFormSliderCloseButton && (productFormSliderCloseButton.onclick = function() {
productFormSliderInner.classList.remove('slide-in');
productFormSlider.classList.remove('active');
})
Move transition property to main classes.
.product-form-slider {
position: fixed;
display: none;
top: 0;
z-index: 11;
right: -65%;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
align-items: center;
justify-content: center;
right: 0;
&.active {
display: flex;
}
}
.product-form-slider__inner {
right: -65%;
height: 100%;
width: 65%;
background-color: #fefefe;
padding: 20px;
box-shadow: 5px 5px 10px #545151;
position: absolute;
transition: right 1s linear;
&.slide-in {
right: 0;
}
}
Also if you want animate properties like display not working very well. If you want to show and hide elements with the transition, you should use opacity
I managed to solve this by setting a 2 millisecond timeout function on my transition. This way I forced the transition to happen after the show of the background.
function showFormSlider() {
productFormSlider.classList.add('active');
setTimeout(function(){ productFormSliderInner.classList.add('slide-in') }, 2);
}
Hello people from StackOverflow.
I'm trying to do something exactly like in this website: http://anayafilms.com/ (work section).
It's basically an image but on mouse over, it gets darken, a text at the bottom and two "buttons" (just some font awesome icons in a circle), along with some basic animation.
So far I only have the image in a div and no idea on how to do that, so if anyone can help me out that'd be amazing.
Before and after, just to illustrate it in case you don't wanna go on the website
Depending on what you really need it to do, you might be able to do this without javascript. Here is an example that makes use of the css pseudo class :hover and some absolute positioning. I'm darkening the background, which you can set as an image, by using a layer above it with a opacity: .5 black background created using background: rgba(0,0,0,.5).
.css-rollover {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.css-rollover:hover .overlay {
opacity: 1;
pointer-events: all;
}
.bg {
width: 100%;
height: 100%;
background: red;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
text-align: center;
color: #fff;
opacity: 0;
pointer-events: 0;
transition: opacity .2s;
}
.overlay p {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX( -50% );
}
.overlay .fa-links {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.overlay .fa-links a {
display: inline-block;
width: 20px;
height: 20px;
line-height:20px;
border-radius: 50%;
margin: 5px;
padding: 5px;
background: blue;
text-decoration: none;
color: #fff;
}
<div class="css-rollover">
<div class="bg" ></div>
<div class="overlay">
<div class="fa-links">
A
B
</div>
<p>You're hovering...</p></div>
</div>
I want the contents of a div to slide down from the top. All of the methods I have tried seem to 'reveal' the contents which is almost static. I want to slide down from off the edge of the screen and push the content too. How would I do this? Jsfiddle here
html
<div id="dolphin">
<div id="lizard"><img src="http://www.beardeddragon.co/image/cache/data/blackhat-500x500.jpg"></div>
</div>
<div id="content"></div>
css
#lizard {
padding:50px;
display:none;
}
#dolphin {
position: fixed;
width: 100%;
background-color: green;
}
#content {
height: 2000px;
}
js
$(document).ready(function(){
$("#dolphin").click(function(){
$("#lizard").stop().slideToggle("fast");
});
});
You can move things with negative margins to create a slide effect instead of a reveal effect.
This is a very rough example but you can see how it's originally hidden with margin-top: -100%; and revealed by setting margin-top to 0;
$(".slide-button").click(function(){
$(".lizard").toggleClass('slideit');
});
html, body {margin: 0; padding: 0;}
div {
text-align: center;
}
.slide-button {
position: fixed;
top: 0; right: 0; left: 0;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
height: 20px;
background-color: green;
cursor: pointer;
}
.lizard {
width: 100%;
padding-top: 20px;
overflow: hidden;
background-color: green;
transition: all 0.5s ease;
}
.lizard img {
margin-top: -100%;
transition: all 0.5s ease;
opacity: 0;
}
.lizard.slideit img {
margin-top: 10px;
opacity: 1;
}
.content {
height: 1000px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide-button">slide it</div>
<div class="lizard">
<img src="http://www.beardeddragon.co/image/cache/data/blackhat-500x500.jpg">
</div>
<div class="content"></div>
fiddle
https://jsfiddle.net/Hastig/qjfgsrL0/1/
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 the following code:
HTML CODE:
<table border=0 cellpadding=0 cellspacing=0 width=250px bgcolor=#FF0000>
<tr>
<td align=right><span id=spnMain></span>
</td>
</tr>
</table>
CSS CODE:
#spnMain {
background: url("theImages/searchButton.png") no-repeat;
background-position: 0px 0px;
width: 28px;
display: block;
height: 28px;
cursor: pointer;
}
#spnMain span {
background: url("theImages/searchButton.png");
display: block;
height: 50px;
background-position: 0px -56px;
}
JS CODE:
$(document).ready(function () {
$("#spnMain").wrapInner("<span></span>");
$("#spnMain span").css({
"opacity": 0
});
$("#spnMain").hover(function () {
$(this).children("span").animate({
"opacity": 1
}, 400);
}, function () {
$(this).children("span").animate({
"opacity": 0
}, 400);
});
});
Produces the following (the top is onload and the bottom when mouse is hovered:
How can I make the green button fade in on top of the purple button so it hides it?
I know you ask for a javascript solution but you can do the same thing with css only (if you want to)
Way 1, sprites, no animation though: http://jsfiddle.net/NicoO/WBjS5/
Way 2, two images, css transition (a bit hacky): http://jsfiddle.net/NicoO/WBjS5/6/
#spnMain
{
display: block;
height: 28px;
width: 28px;
background-image: url(**url to green button image**);
background-position: 0% 0%;
position: relative;
}
#spnMain:after
{
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
content:"";
transition-duration: 0.4s;
visibility: hidden;
opacity: 0;
background-image: url(**url to red button image**);
}
#spnMain:hover:after
{
visibility: visible;
opacity: 1;
}
Update the visibility property helps for IE8 support- no transition will occur, but the image will be swapped on mouse over. What should be good enough of a fallback for old "browsers".
#spnMain {
position: relative;
/* ... same as before ... */
}
#spnMain span {
position: absolute;
top: 0;
right: 0;
/* ... same as before */
}
And your answer is:
Fiddle link: http://jsfiddle.net/LNQq3/4/
CSS Code:
#spnMain {
background: url("http://s18.postimg.org/balg05zj9/gogo.gif?noCache=1393616120") no-repeat;
background-position: 0px -5px;
width: 28px;
display: block;
height: 28px;
cursor: pointer;
}
#spnMain:hover {
background-position: -37px -5px;
}
Have you tried using an absolute positioned element within a relative positioned element (http://css-tricks.com/absolute-positioning-inside-relative-positioning/)?
I have put together a quick jsfiddle demonstrating this: http://jsfiddle.net/9xENQ/
I just grabbed a quick GO/STOP image sprite and didn't take the time to really look into the necessary background-position to make it line up perfectly. Just wanted to convey the concept.
The HTML:
<div class="button-container">
Hi here is a bunch of text with a padding right to keep it from bleeding into the image.
<span id="spnMain"></span>
</div>
The CSS:
.button-container {
position: relative;
padding-right: 160px;
width: 158px;
height: 163px;
border: 1px solid black;
}
#spnMain {
background: url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ2m3WvngUNXOeQ4oItfopBO5VSA3OP7hhaHsjMrwHLlzYR4KeZPA") no-repeat;
background-position: 0px 0px;
width: 158px;
display: block;
height: 163px;
cursor: pointer;
position: absolute;
top: 0;
left: 100%;
margin-left: -158px;
}
#spnMain span {
background: url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ2m3WvngUNXOeQ4oItfopBO5VSA3OP7hhaHsjMrwHLlzYR4KeZPA");
display: block;
width: 158px;
height: 163px;
background-position: -158px 0px;
position: absolute;
left: 100%;
top: 0;
margin-left: -158px;
}
Your JavaScript (as is):
$(document).ready(function() {
$("#spnMain").wrapInner("<span></span>");
$("#spnMain span").css({"opacity" : 0});
$("#spnMain").hover(function(){
$(this).children("span").animate({"opacity" : 1}, 400);
}, function(){
$(this).children("span").animate({"opacity" : 0}, 400);
});
});