I have created the application where All divs are Flip Vertically on hover. I wanted to make it random without hover. How should I do that?
.vertical.flip-container {
position: relative;
float: left;
margin-left: 50px;
}
.vertical .back {
transform: rotateX(180deg);
}
.vertical.flip-container .flipper {
transform-origin: 100% 50px;
}
.vertical.flip-container:hover .flipper {
transform: rotateX(-180deg);
}
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper,
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 100px;
height: 100px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: red">
Rushikesh
</div>
<div class="back" style="background:green">
Jogle
</div>
</div>
</div>
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: red">
Rushikesh
</div>
<div class="back" style="background:green">
Jogle
</div>
</div>
</div>
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: red">
Rushikesh
</div>
<div class="back" style="background:green">
Jogle
</div>
</div>
</div>
Any suggestions would be thankful.
I simplified your markup and CSS quite a bit. Also gave it a more 3D look.
You can use setInterval to flip them hover:
http://jsfiddle.net/7x75466y/5/
var $flippers = $(".flip-container"),
qtFlippers = $flippers.length;
setInterval(function () {
$flippers.eq(Math.floor(Math.random()*qtFlippers)).toggleClass('hover');
}, 1000);
Here is a JSfiddle that selects a random tile, and applies an action to it at every second (using setTimeout). You can perform whatever action you like on the tile. Using jQuery
http://jsfiddle.net/7x75466y/2/
var containers = $(".flip-container")
setInterval(function() {
var target = containers.eq(Math.floor(Math.random() * containers.size()))
target.fadeToggle() //DO WHAT YOU WANT TO THE TARGET
}, 1000)
Related
I want to display the overlay for different links. 1st overlay has an image and text whereas if we click link2 it must display overlay2 having same structure but diff content. Please help me get the desired output.
function on() {
document.getElementById("overlay").style.display = "block";
}
function on1() {
document.getElementById("overlay1").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
.img {
transition: transform 5s ease-in-out;
transform: scale(1);
transform-origin: 0 0;
}
.img:hover {
transform: scale(1.25)
}
#overlay,
#overlay1 {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
z-index: 77777772;
cursor: pointer;
}
#text,
#text1 {
position: fixed;
top: 20%;
left: 5%;
//font-size: 50px;
color: black;
// transform: translate(-50%,-50%);
// -ms-transform: translate(-50%,-50%);
}
<div id="overlay" onclick="off()">
<div id="text">
<div style="width: 48%; float:left">
<h2>XXX</h2>
<h4>ZZZ</h4>
<p style="font-size:14px;">
Help bring forth the immense talent that resides amongst the valley’s citizens. </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
">
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/boydB3_6881-683x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="on()"></a>
</div>
<div id="overlay1" onclick="on1()">
<div id="text1">
<div style="width: 48%; float:left">
<h2>AAA</h2>
<h4>MMM</h4>
<p style="font-size:14px;">Help bring forth the immense talent that resides amongst the valley’s citizens. </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
">
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/002boydB37683-703x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="on1()"></a>
</div>
</div>
</div>
<a onclick="on(id)"style="font-size: 11pt;">Read More -></a>
<a onclick="on(id)"style="font-size: 11pt;">Read More -></a>
1. List item
There are better ways to achieve this, however as per your requirement you may pass different ids &actions as params to same function like so
function on() {
document.getElementById("overlay").style.display = "block";
}
function on1() {
document.getElementById("overlay1").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
function toggle(id, value) {
document.getElementById(id).style.display = value;
}
.img {
transition: transform 5s ease-in-out;
transform: scale(1);
transform-origin: 0 0;
}
.img:hover {
transform: scale(1.25)
}
#overlay,
#overlay1 {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
z-index: 77777772;
cursor: pointer;
}
#text,
#text1 {
position: fixed;
top: 20%;
left: 5%;
font-size: 50px;
color: black;
transform: translate(-50% -50%);
-ms-transform: translate(-50% -50%);
}
<div id="overlay" onclick="toggle('overlay', 'none')">
<div id="text">
<div style="width: 48%; float:left">
<h2>XXX</h2>
<h4>ZZZ</h4>
<p style="font-size:14px;">
Help bring forth the immense talent that resides amongst the valley’s citizens. </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
">
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/boydB3_6881-683x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="toggle('overlay', 'block')"></a>
</div>
<div id="overlay1" onclick="toggle('overlay1', 'block')">
<div id="text1">
<div style="width: 48%; float:left">
<h2>AAA</h2>
<h4>MMM</h4>
<p style="font-size:14px;">Help bring forth the immense talent that resides amongst the valley’s citizens. </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
">
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/002boydB37683-703x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="toggle('overlay1', 'block')"></a>
</div>
</div>
</div>
<a onclick="toggle('overlay', 'block')" style="font-size: 11pt;">Read More -></a>
<a onclick="toggle('overlay', 'block')" style="font-size: 11pt;">Read More -></a> 1. List item
I have a card that can both hover and click; however, there is a minor glitch.
When the card is clicked and then hovered out from the front, the hover does not work as expected. It is flipping right back to the front. The hover is only properly implement from the back when hovered out.
what am I missing from the code to properly implement without the hover glitch?
Please help with this issue.
document.querySelector(".card-flip").classList.toggle("flip");
$('.card-flip').bind({
click: function() {
$('.card-flip .card').toggleClass('flip');
}
});
.card-flip {
-webkit-perspective: 1000px;
perspective: 1000px;
}
.card-flip:hover .flip, .card-flip.hover .flip {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card-flip,
.front,
.back {
width: 100%;
height: 480px;
-webkit-transform-style: preserve-3d;
}
.flip {
transition: 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css'>
<section style="height:40px;"> </section>
</head>
<body>
<section>
<div class="container">
<div class="row">
<div class="col-sm-6 col-lg-4">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="100%x180" style="height: 180px; width: 100%; display: block;" data-holder-rendered="true">
<div class="card-block">
<h4 class="card-title">Front Card</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<h4 class="card-title">Back Card</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
</div>
<img data-src="holder.js/100px180/?text=Image" alt="Image [100%x180]" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
<div class="card-block">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
</div>
</section>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js'></script>
</body>
You will have to use mouse event.
Option 1:
Add mouseenter and mouseleave event. (Don't rely on CSS, add/remove flip class on mouse events)
document.querySelector(".card-flip").classList.toggle("flip");
$('.card-flip').bind({
click: function() {
$('.card-flip .flip').toggleClass('flip-hover');
},
mouseenter: function() {
$('.card-flip .flip').addClass('flip-hover');
},
mouseleave: function() {
$('.card-flip .flip').removeClass('flip-hover');
}
});
.card-flip {
-webkit-perspective: 1000px;
perspective: 1000px;
}
.card-flip .flip-hover {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card-flip,
.front,
.back {
width: 100%;
height: 480px;
-webkit-transform-style: preserve-3d;
}
.flip {
transition: 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css'>
<section style="height:40px;"> </section>
</head>
<body>
<section>
<div class="container">
<div class="row">
<div class="col-sm-6 col-lg-4">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="100%x180" style="height: 180px; width: 100%; display: block;" data-holder-rendered="true">
<div class="card-block">
<h4 class="card-title">Front Card</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<h4 class="card-title">Back Card</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
</div>
<img data-src="holder.js/100px180/?text=Image" alt="Image [100%x180]" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
<div class="card-block">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
</div>
</section>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js'></script>
</body>
Here is a fiddle. https://jsfiddle.net/nimittshah/gjhcwvk8/
Option 2:
If you want to keep hover in CSS, you will still need mouseenter event. (add flip class on mouseenter)
//document.querySelector(".card-flip").classList.toggle("flip");
$('.card-flip').bind({
click: function() {
$('.card-flip .flip-me').removeClass('flip');
},
mouseenter: function(){
$('.card-flip .flip-me').addClass('flip');
}
});
.card-flip {
-webkit-perspective: 1000px;
perspective: 1000px;
transform: rotateY(0deg);
}
.card-flip:hover .flip, .card-flip.hover .flip {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card-flip,
.front,
.back {
width: 100%;
height: 480px;
-webkit-transform-style: preserve-3d;
}
.flip-me {
transition: 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css'>
<section style="height:40px;"> </section>
</head>
<body>
<section>
<div class="container">
<div class="row">
<div class="col-sm-6 col-lg-4">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip-me flip">
<div class="front">
<!-- front content -->
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="100%x180" style="height: 180px; width: 100%; display: block;" data-holder-rendered="true">
<div class="card-block">
<h4 class="card-title">Front Card</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<h4 class="card-title">Back Card</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
</div>
<img data-src="holder.js/100px180/?text=Image" alt="Image [100%x180]" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
<div class="card-block">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
</div>
</section>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js'></script>
</body>
Check fiddle. https://jsfiddle.net/nimittshah/gjhcwvk8/1/
FYI, I have added new class flip-me on flip class.
:)
I have code below for a content slider using HTML, CSS and JQuery. Is it possible to get exactly what I have now but using pure CSS only? If its not possible with pure CSS is it possible to do with Vanilla JavaScript with no JQuery? Anything helps, cheers.
$(function(){
var scroller = $('#scroller div.innerScrollArea');
var scrollerContent = scroller.children('ul');
scrollerContent.children().clone().appendTo(scrollerContent);
var curX = 0;
scrollerContent.children().each(function(){
var $this = $(this);
$this.css('left', curX);
curX += $this.outerWidth(true);
});
var fullW = curX / 2;
var viewportW = scroller.width();
// Scrolling speed management
var controller = {curSpeed:0, fullSpeed:2};
var $controller = $(controller);
var tweenToNewSpeed = function(newSpeed, duration)
{
if (duration === undefined)
duration = 600;
$controller.stop(true).animate({curSpeed:newSpeed}, duration);
};
// Pause on hover
scroller.hover(function(){
tweenToNewSpeed(0);
}, function(){
tweenToNewSpeed(controller.fullSpeed);
});
// Scrolling management; start the automatical scrolling
var doScroll = function()
{
var curX = scroller.scrollLeft();
var newX = curX + controller.curSpeed;
if (newX > fullW*2 - viewportW)
newX -= fullW;
scroller.scrollLeft(newX);
};
setInterval(doScroll, 40);
tweenToNewSpeed(controller.fullSpeed);
});
#scroller {
position: absolute;
}
#scroller .innerScrollArea {
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#scroller ul {
padding: 0;
position: relative;
}
#scroller li {
padding: 0;
list-style-type: none;
position: absolute;
}
.circle {
width: 250px;
height: 250px;
position: relative;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
background-color:transparent;
border-style:solid;
border-width:9px;
border-color:#006850;
}
.circle-text {
color: #1f497d;
font-family:Verdana;
font-size: 20.5px;
text-align: center;
width: 200px;
top: 90px;
left: 10%;
bottom: 0;
position: absolute;
z-index: 99;
}
.arrow {
width:300px;
height:80px;
}
.flipimage {
width:300px;
height:80px;
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: fliph; /*IE*/
filter: fliph; /*IE*/
}
.everything {
/*transform: scale(0.6);
}
<div class="everything">
<div id="scroller" style="width: 900px; height: 470px; margin: 0 auto;">
<div class="innerScrollArea">
<ul>
<li>
<br style="line-height:89px;"/>
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:89px;"/>
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div>
You may use animation , but to keep the whole thing sliding for ever, you will need to clone (or make a redundant copy in HTML) at least of the elements that you see at first in the slider . Else, it would behave as a marquee , living a blank space untill everything slides off the box.
Example below:
/* all position:absolute removed */
#scroller {
overflow:hidden;
}
#scroller .innerScrollArea {
}
#scroller ul {
padding: 0;
position: relative;
display:flex;/* UPDATE */
}
#scroller li {
padding: 0;
list-style-type: none;
}
.circle {
width: 250px;
height: 250px;
position: relative;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
background-color:transparent;
border-style:solid;
border-width:9px;
border-color:#006850;
}
.circle-text {
color: #1f497d;
font-family:Verdana;
font-size: 20.5px;
text-align: center;
width: 200px;
top: 90px;
left: 10%;
bottom: 0;
position: absolute;
z-index: 99;
}
.arrow {
width:300px;
height:80px;
}
.flipimage {
width:300px;
height:80px;
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: fliph; /*IE*/
filter: fliph; /*IE*/
}
/* UPDATE for animation */
ul {
animation: slidli 9s infinite linear;
}
ul:hover {
animation-play-state:paused;
}
#keyframes slidli {
100% {
transform:translatex(-133.5%);/* this is to be update to the content with to see every element slide once untill copies/clone comes back at same spot */
}
}
<div class="everything">
<div id="scroller" style="width: 900px; height: 470px; margin: 0 auto;">
<div class="innerScrollArea">
<ul>
<li>
<br style="line-height:89px;" />
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:89px;" />
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
<!-- from here it is a copy of the previous elements . 3 of them might have been enough -->
<li>
<br style="line-height:89px;" />
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:89px;" />
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div>
Notice: I used the flex model and droppped the absolute positionning. Main parent can be in absolute if you do need it, children do not.
I am trying to make a drop down menu using jQuery.
This is my HTML:
<div class="overlaydiv">This is my menu!</div>
<div class="row one">
<div class="large-12 columns">
</div>
</div>
<div class="row two">
<div class="large-12 columns">
<button id="b1">Drop down the menu!</button>
</div>
</div>
CSS for overlay:
.overlaydiv { height: 100vh; width: 100vw; background-color: aquamarine; position: absolute; top: -100%; z-index: 1; }
This is jQuery that drops down the menu on click:
$("#b1").on("click", function() {
$(".overlaydiv").animate({top: "0%"}, 200, 'swing');
});
What would be the easiest way to reverse animation on second click?
The best way I can think of is using CSS transition.
So, here's the CSS:
.overlaydiv{
height: 100vh;
width: 100vw;
background-color: aquamarine;
position: absolute;
top: -100%;
z-index: 1;
transition: all 0.2s;
}
.overlaydiv.active{
top: 0%;
}
And the JS
$("#b1, .overlaydiv").on("click", function() {
$(".overlaydiv").toggleClass("active");
});
You can check that to assign class active on your button and make action on it.
$("#b1").on("click", function() {
if($(this).hasClass("active")){
$(this).removeClass("active");
$(".overlaydiv").animate({top: "-100%"}, 200, 'swing');
}else{
$(this).addClass("active");
$(".overlaydiv").animate({top: "0%"}, 200, 'swing');
}
});
.overlaydiv { height: 100vh; width: 100vw; background-color: aquamarine; position: absolute; top: -100%; z-index: 1; }
#b1 {position:relative;z-index:2}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlaydiv">This is my menu!</div>
<div class="row one">
<div class="large-12 columns">
</div>
</div>
<div class="row two">
<div class="large-12 columns">
<button id="b1">Drop down the menu!</button>
</div>
</div>
I'm creating something like this. When I hover the buttons upper content will change but each buttons have different content.
But I cannot see the content when hovering it :(
Does anybody know how to fix it? or is there any jquery fix?
Thanks in advance
#service-content {
display: none;
opacity: 1;
height: 200px;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
#-webkit-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
#keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
#home-button-1:hover~#service-content .construction-neuve,
#home-button-2:hover~#service-content .renovation-residentiel,
#home-button-3:hover~#service-content .service-de-plan-et-design,
#home-button-4:hover~#service-content .entrepreneur-commercial,
#home-button-5:hover~#service-content .apres-sinistre,
#home-button-6:hover~#service-content .decontamination-d-amiante
{
display: block;
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
#slider-buttons .span4 {
width: 383px;
float:left;
height:50px;
}
#slider-buttons .image-content {
position: relative;
}
#slider-buttons .image-caption {
background: #000000 none repeat scroll 0 0;
bottom: 0;
color: #6e6e6e;
padding: 10px 0;
position: absolute;
text-align: center;
text-transform: uppercase;
width: 383px;
font-weight: 600;
}
#slider-buttons .image-caption:hover {
background: #ba9444 none repeat scroll 0 0;
bottom: 0;
color: #000000;
padding: 10px 0;
position: absolute;
text-align: center;
text-transform: uppercase;
width: 383px;
font-weight: 600;
cursor: pointer;
}
<div id="service-content">
<div class="construction-neuve">
content
</div>
<div class="renovation-residentiel">
content
</div>
<div class="service-de-plan-et-design">
content
</div>
<div class="entrepreneur-commercial">
content
</div>
<div class="apres-sinistre">
content
</div>
<div class="decontamination-d-amiante">
content
</div>
</div>
<div id="slider-buttons" class="span12">
<div id="construction-neuve" class="span4 m-l00">
<div class="image-content">
<img src="images/home-buttons/home-button-1.jpg">
<div id="home-button-1" class="image-caption">Construction Neuve</div>
</div>
</div>
<div id="renovation-residentiel" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-2.jpg">
<div id="home-button-2" class="image-caption">Rénovation Résidentiel</div>
</div>
</div>
<div id="service-de-plan-et-design" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-3.jpg">
<div id="home-button-3" class="image-caption">Service de plan et design</div>
</div>
</div>
<div id="entrepreneur-commercial" class="span4 m-l00">
<div class="image-content">
<img src="images/home-buttons/home-button-4.jpg">
<div id="home-button-4" class="image-caption">Entrepreneur Commercial</div>
</div>
</div>
<div id="apres-sinistre" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-5.jpg">
<div id="home-button-5" class="image-caption">Aprés-Sinistre</div>
</div>
</div>
<div id="decontamination-d-amiante" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-6.jpg">
<div id="home-button-6" class="image-caption">Décontamination d'amiante</div>
</div>
</div>
</div>
It can be done using JQuery.
First, each part that should be hovered must have an onmouseover attribute that the first parameter of that should be a unique number. like this:
<div onmouseover="run_hover(1);"></div>
<div onmouseover="run_hover(2);"></div>
<div onmouseover="run_hover(3);"></div>
and each big part that will be shown should have a unique ID with a number that is the same with the parameter you entered for the div that should be hovered. Like this:
<div id="box_for_show">
<div id="div_1">Content 1</div>
<div id="div_2">Content 2</div>
<div id="div_3">Content 3</div>
</div>
and this is the JQuery code of that:
function run_hover(id) {
$("#box_for_show div").fadeOut(function(){
$("#div_"+id).fadeIn();
});
}
Point: #box_for_show div {display: none;}
Here is the fiddle that will work for you:
http://jsfiddle.net/h0puq1Ld/4/
It is not the best example but i hope it helps. You could also use list
$('div.image-caption').hover(function(){
var nums = $(this).attr('id');
$('#cont-'+nums).css('display','block');
}, function() {
$('.cont').hide();
});