Develop Reference

Next page slide animation in CSS and JavaScript

I am trying to achieve a "next page" slide animation in CSS and Javascript. If user clicks a div page, the current page move left and fade out and next page will replace the current container.
This is what I tried, but I don't know how to change container to have dimensions based on current page.
(function () {
document.querySelectorAll(".page").forEach((item, idx) => {
if (idx !== 0) {
item.classList.add("hidden");
item.style.maxHeight = 0;
} else {
}
});
document.querySelectorAll(".page").forEach((item) => {
item.addEventListener("click", (event) => {
const currentPage = event.target.closest(".page");
const nextPage = currentPage.nextElementSibling;
nextPage.style.maxHeight = "1000px";
nextPage.classList.add("show-page");
currentPage.classList.add("hide-page");
});
});
})();
.container {
font-family: inherit;
position: fixed;
bottom: 40px;
right: 40px;
background-color: #eb6383;
width: 300px;
padding: 10px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.page {
display: flex;
flex-direction: column;
transition: 1s;
left: 0%;
opacity: 1;
position: relative;
background-color: yellow;
}
.hidden {
position: relative;
overflow: hidden;
left: 100%;
transition: 1s;
}
.show-page {
position: relative;
left: 0%;
transition: 1s;
}
.hide-page {
opacity: 0;
left: -100%;
transition: 1s;
}
<div class="container">
<div class="page">
<div class="Header">page 1</div>
<div class="Content">
content page 1
</div>
</div>
<div class="page">
<div class="Header">page 2</div>
<div class="Content">
content page 2
</div>
</div>
<div class="page">
<div class="Header">page 3</div>
<div class="Content">
content page 3
</div>
</div>
</div>

Instead of moving each slide on it's own, we can animate a parent element holding all the slides
Here's a simplified version.
(function() {
let slides = document.querySelectorAll('.page');
let slidesCount = slides.length
let index = 0; // index
slides.forEach(slide => {
slide.onclick = (e) => {
/* Logic */
let nextIndex = (++index % slidesCount);
/* End Logic */
/* Management for the CSS */
// By how much we want to move, In Percents.
// A negative value because we're moving left
let ditance = -100;
// If nextIndex = 2, Then rawCssValue = -200
let styleValue = nextIndex * ditance;
/* Applying the CSS */
let style = `translateX(${styleValue}%)`;
e.target.parentElement.style.transform = style;
}
});
})()
.container {
font-family: inherit;
position: fixed;
bottom: 40px;
right: 40px;
width: 300px;
background: #eb6383;
overflow: hidden;
}
.page {
display: flex;
transition: 1s;
left: 0%;
opacity: 1;
position: relative;
background-color: yellow;
}
/* New */
.page {
flex: 0 0 auto;
height: 100%;
width: 100%;
}
.page + .page {
margin-left: 20px;
}
.slide {
padding: 10px;
box-sizing: border-box;
height: 100%;
display: flex;
flex-wrap: nowrap;
background: #eb6383;
transition: all .5s linear;
transform: translateX(0);
}
<div class="container">
<div class="slide">
<div class="page">
<div class="Header">page 1</div>
<div class="Content">
content page 1
</div>
</div>
<div class="page">
<div class="Header">page 2</div>
<div class="Content">
content page 2
</div>
</div>
<div class="page">
<div class="Header">page 3</div>
<div class="Content">
content page 3
</div>
</div>
<div class="page">
<div class="Header">page 4</div>
<div class="Content">
content page 4
</div>
</div>
</div>
</div>
I recommend using buttons for navigating through the slider, clicking the page to the move will become problematic very quick Because the children consume the event.

Is it possible to reserve the direction of the card-reveal on Materializecss?

I'm looking at the card-reveal component of the materializecss framework shown here: https://codepen.io/JP_juniordeveloperaki/pen/YXRyvZ the official doc is here: http://next.materializecss.com/cards.html
For my application, I have moved the <div class="card-content"> to the top to look like this: https://codepen.io/anon/pen/YaqYOj
So I was wondering whether or not it was possible to make the card-reveal animation go from top to bottom, like the top card-content is a curtain that pulls down to reveal more information.
Thanks

You can achieve this by changing transform property of this element .card .card-reveal {}.
And i add extra class to change the transform property make the top card-content is a curtain that pulls down to reveal more information*
Here is the working code
Note: Also add display: block to .card .card-image img fix the bottom gap in your demo.
$('.card-content').click(()=>{
$('.card-reveal').addClass('card-closing');
});
$('.card-reveal .card-title-custom').click(()=>{
$('.card-reveal').removeClass('card-closing');
});
.main {
width: 450px;
margin: 30px;
}
.card .card-image img {
border-radius: 2px 2px 0 0;
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
display: block;
}
.card .card-reveal {
padding: 20px;
position: absolute;
background-color: #fff;
width: 100%;
overflow-y: auto;
top: 100%;
height: 100%;
z-index: 1;
display: block !important;
transform: translateY(-200%) !important;
transition: transform .6s;
will-change: opacity, transform;
}
.card .card-reveal.card-closing {
transform: translateY(-100%) !important;
display: block !important;
}
.grey-text.text-darken-4 {
display: block;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="main">
<div class="card">
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
<p>This is a link</p>
</div>
<div class="card-image waves-effect waves-block waves-light">
<img class="activator-custom" src="http://materializecss.com/images/office.jpg">
</div>
<div class="card-reveal">
<span class="card-title-custom grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
Here is the working codepen

Javascript Jquery show/hide div better solution

I have two buttons here, and when I hover one of the button, it'll show a div with information(left to right). If the cursor is not on the buttons nor the div, it'll hide.
Here is my code, it works for me , but I want to know better solutions than mine. :D Thank you!
HTML:
<button id="Btn_Nav_Equipment" onmouseover="Nav_Over(this.id),Set_Btn_Nav()" onmouseout="Nav_Out(this.id)" ><span></span></button>
<button id="Btn_Nav_Report" onmouseover="Nav_Over(this.id),Set_Btn_Nav()" onmouseout="Nav_Out(this.id)"><span></span></button>
<div id='Panel_Equipment' style="display:none;" onmouseover="Set_Panel_Nav()"onmouseout='Leave_Panel_Nav(),Nav_Panel_Out(this.id)'></div>
<div id='Panel_Report' style="display:none;" onmouseover="Set_Panel_Nav()" onmouseout='Leave_Panel_Nav(),Nav_Panel_Out(this.id)'></div>
Javascript:
var Btn_Nav=false;
var Panel_Nav=false;
function Nav_Over(id){
var str=id.split('_');
var Panel_id='Panel_'+str[2];
$('#'+Panel_id).animate({width:'show'},300);
}
function Nav_Out(id){
var str=id.split('_');
var Panel_id='Panel_'+str[2];
if(( Btn_Nav==false)&&(Panel_Nav==false)){
$('#'+Panel_id).animate({width:'hide'},300);
}
}
function Nav_Panel_Out(id){
$('#'+id).animate({width:'hide'},300);
}
function Set_Btn_Nav(){
Btn_Nav=true;
}
function Set_Panel_Nav(){
Panel_Nav=true;
}
function Leave_Btn_Nav(){
Btn_Nav=false;
}
function Leave_Panel_Nav(){
Panel_Nav=false;
}

I would prefer doing such things by using HTML and CSS3 only.
button {
width: 40px;
height: 40px;
position: relative;
}
button > div.panel {
position: absolute;
z-index: 1;
top: 20px;
left: 40px;
transition: all .3s;
visibility: hidden;
opacity: 0;
width: 200px;
height: 80px;
background: white;
border: 2px solid;
}
button:hover > div.panel {
visibility: visible;
opacity: 1;
}
<button>
B1
<div class="panel" id="Panel_Equipment">Panel_Equipment</div>
</button>
<button>
B2
<div class="panel" id="Panel_Report">Panel_Report</div>
</button>

Trying to answer the question without being able to run your code so it would work, so I'm answering the text itself - the approach I'd take on this would be without javascript. It's rather simple, take a look!
.info-button {
padding: 5px 10px;
background: #afa;
display: inline-block;
position: relative;
}
.info-box {
display:none;
}
.info-button:hover .info-box {
display: block;
position: absolute;
top: 100%;
left: 0;
width: 300px;
padding: 0 20px 10px;
background: #faa;
}
<div class="info-button">
<button>Hover me</button>
<div class="info-box">
<h1>More info</h1>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="info-button">
<button>Hover me</button>
<div class="info-box">
<h1>More info</h1>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>

$('.btn').hover(function(){
$('#'+$(this).data('open')).animate({width:'200px'},300);
},function() {
$('#'+$(this).data('open')).animate({width:'0px'},300);
});
div {
width:0;
overflow:hidden;
background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn" data-open="Panel_Equipment" ><span>asdada</span></button>
<button class="btn" data-open="Panel_Report"><span>sdasda</span></button>
<div id='Panel_Equipment'>text 1</div>
<div id='Panel_Report'> text 2</div>

Try with hover() function of jquery.And remove the inline mouseover
$('button').hover(function(){
$('#'+$(this).attr('data-target')).animate({width:'show'},300);
},function(){
$('.panel').animate({width:'hide'},300);
})
.panel{
width:100px;
height:50px;
border:1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="Btn_Nav_Equipment" data-target="Panel_Equipment">one<span></span></button>
<button id="Btn_Nav_Report" data-target="Panel_Report">two<span></span></button>
<div id='Panel_Equipment' class="panel" style="display:none;">Panel_Equipment</div>
<div id='Panel_Report' class="panel" style="display:none;">Panel_Report</div>

Here's a simple CSS3 solution, toggling a class on hover with jQuery :
let $info = $(".info")
$("button").hover( () => {
$info.addClass("onscreen")
}, () => {
$info.removeClass("onscreen")
})
button {
margin: 20px;
}
div.info {
position: absolute;
top: 50px;
width: 200px;
height: 200px;
background: #90ee90;
display: flex;
justify-content: center;
align-items: center;
transform : translateX(-100%);
opacity : 0;
transition: all 0.3s ease-in-out;
}
div.info.onscreen {
transform: translateX(0);
opacity : 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Hover me</button>
<div class="info">
<span>Div content</span>
</div>

Try using the below solution.
$(document).on("mouseover",".btn,.panel",function(){
if($(this).hasClass("panel")){
$(this).removeClass("collapsed");
}
else{
var panel = $(this).attr("data-panel");
$("."+panel).removeClass("collapsed");
}
});
$(document).on("mouseout",".btn,.panel",function(){
$(".panel").addClass("collapsed");
});
.collapsed{
display:none;
}
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<button class="btn_Equipment btn" data-panel="Panel_Equipment"><span>Equipment</span></button>
<button class="btn_Report btn" data-panel="Panel_Report"><span>Report</span></button>
<div class='Panel_Equipment collapsed panel'>Equipment Div </div>
<div class='Panel_Report collapsed panel'>Report Div</div>

slidetoggle in pure Javascript

As you might see I have fixed a kind of text box that will pop up when someone is hovering over that image, but honestly I want a slide-up effect that gone up slowly. Must be completely in pure JavaScript (no jQuery please!). Anyone knows how I can do that.
function show(myText) {
var elements = document.getElementsByClassName(myText)
for(var i = 0; i < elements.length; i++){
elements[i].style.visibility = "visible";
}
}
function hide(myText) {
var elements = document.getElementsByClassName(myText)
for(var i = 0; i < elements.length; i++){
elements[i].style.visibility = "hidden";
}
}
.text1 {
position: relative;
bottom: 28px;
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
visibility: hidden;
}
.text2 {
position: relative;
bottom: 28px;
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
visibility: hidden;
}
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.bbc.com" target="_blank" class="image" onmouseover="show('text1')" onmouseout="hide('text1')">
<img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
<div class="text1">AAA</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.cnn.com" target="_blank" class="image" onmouseover="show('text2')" onmouseout="hide('text2')">
<img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
<div class="text2">BBB</div>
</a>
</div>
</div>
</div>

Here is a version of it that's totally javascript free, just using CSS. I'm going to edit this soon with a slight javascript addition (this current version requires you to have a fixed size).
.caption {
height: 250px;
width: 355px;
overflow: hidden;
}
.caption-image {
height: 100%;
}
.caption-text {
color: white;
padding: 10px;
background: rgba(0, 0, 0, 0.4);
transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
transform: translateY(-100%);
}
<div class="caption">
<img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
<div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>
<div class="caption">
<img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
<div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>
Version with JS sizing:
Basically the same idea, but when the page is loading it sets certain styles so the images can be what ever size you like.
var captionSel = document.querySelectorAll('.caption');
for (let i = 0; i < captionSel.length; i++) {
let image = captionSel[i].querySelector(":scope > .caption-image");
let text = captionSel[i].querySelector(":scope > .caption-text");
text.style.width = image.clientWidth - 20 + "px";
captionSel[i].style.height = image.clientHeight + "px";
}
.caption {
overflow: hidden;
}
.caption-text {
color: white;
padding: 10px;
background: rgba(0, 0, 0, 0.4);
transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
transform: translateY(-100%);
}
<div class="caption">
<img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
<div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>
<div class="caption">
<img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
<div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>

I'll give it to you even better: No javascript at all!
This is possible with pure CSS:
.tumb-wrapper {
position: relative;
overflow: hidden;
}
.text {
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
position: absolute;
bottom: -30px;
transition: 300ms;
left: 0;
}
.tumb-wrapper:hover .text {
bottom: 28px;
}
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.bbc.com" target="_blank" class="image">
<img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
<div class="text">AAA</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.cnn.com" target="_blank" class="image">
<img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
<div class="text">BBB</div>
</a>
</div>
</div>
</div>
The transition css property animates whatever change you make. This way, when you hover over the .tumb-wrapper div, the .text div will slide up.
You should note however, that ancient IE versions won't be able to use this

I usually do this with only CSS.
Just save the first and second image right next to each other on one file... then you use css to change the position of the background image. To make things nicer i add a css-animation to the movement of the background image.
Example of my code:
<div id="thumb_Wrapper">
<div class="_Thumb">
<img src="images/Thumb.jpg" class="Animate_left">
</div>
</div>
The CSS
#_Container{position:absolute; bottom -60px; right:2px; width:626px; height:100px;}
._Thumb{position:relative; margin-right:4px; width:100px; height:80px; display:block; float:left; background:#EFEFEF; overflow:hidden;}
._Thumb > img{position:absolute; left:0; height:100%; background-size:cover; background-position:center;}
._Thumb > img:hover{left:-18px; cursor:pointer;}
CSS Animation
.Animate_left{transition:left .3s;}
Now all you have to do is swap out the image.
onHover - the image in the thumbnail will smoothly slide to the left; revealing the rest of the image/ showing the other image.
You can set how far to the left(or right) you want the thumb-image to first appear by adjusting the value of 'left' in the ._Thumb class.
You can set how far the image slides on hover by adjusting the img:hover{left:-18px} to what ever you like; instead of 18px.

Hide() with fadeIn()/fadeOut()

I'm trying to do a fade in and fade out jquery. However, I'm having some issues.
I hide the div when the page loads, but when I hover over it to fade it in, it fades in for a second then disappears. I then have to hover out then hover back in.
My Jquery:
$(document).ready(function(){
$('#hidedsl6').hide();
$('#showdsl6').hover(function(){
$('#hidedsl6').fadeIn();
}, function(){
$('#hidedsl6').fadeOut();
});
$('#showfttn10').hover(function(){
});
$('#showfttn15').hover(function(){
});
$('#showfttn25').hover(function(){
});
$('#showfttn50').hover(function(){
});
});
My HTML:
<h3 class="DSLLocation" id="showdsl6">DSL 6</h3>
<button class="btn btnblue" id="hidedsl6" type="button">Order Now!</button>

Just add preventDefault to stop the back and forth fade
$(document).ready(function(){
$('#hidedsl6').hide();
$('#showdsl6').hover(function(){
$('#hidedsl6').fadeIn();
}, function(e){
e.preventDefault();
$('#hidedsl6').fadeOut();
});
$('#showfttn10').hover(function(){
});
$('#showfttn15').hover(function(){
});
$('#showfttn25').hover(function(){
});
$('#showfttn50').hover(function(){
});
});

Why use jQuery when it can be done with CSS
.products{
display:table;
table-layout:fixed;
width: 100%;
}
.option{
display: table-cell;
position: relative;
text-align: center;
padding: 24px;
background: #C0FFEE;
}
.option button{
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border: 0;
cursor: pointer;
background: #1CEA6E;
transition: 0.3s; -webkit-transition: 0.3s;
opacity: 0;
visibility: hidden;
}
.option:hover button{
opacity: 1;
visibility: visible;
}
<div class="products">
<div class="option">
<h3>DSL 6</h3>
<button>ORDER NOW!</button>
</div>
<div class="option">
<h3>DSL 30</h3>
<button>ORDER NOW!</button>
</div>
<div class="option">
<h3>SUPER DSL 50</h3>
<button>ORDER NOW!</button>
</div>
</div>

$(document).ready(function(){
$('#hidedsl6').hide();
$('#showdsl6').hover(function(){
$('#hidedsl6').fadeIn();});
});