I have an HTML page containing a table, in which i have three columns with display:none and visibility:hidden. When clicking a cell in the adjacent column, the attributes change to table-cell and visible respectively, showing the three columns. Another click at the cell of said adjacent column resets the values to none and hidden.
The only problem is that, of course, it's not pleasant to see. I would like to include an animation so that i can see the other columns shrink in order to let the hidden columns slide in the middle and an animation when i can do the opposite thing.
What should I use? I'm asking for help because I'm relatively new to web designing and I have no idea about where to look for guidance.
The tables themselves are not animated. Perhaps this option may suit you. (Google translate.)
$('.show').on('click', function(){
$('.table').find('.td').each(function(){
if($(this).css('display') === 'none'){
$(this).show().addClass('animate');
}
});
});
.table{
display: flex;
flex-direction: column;
}
.td{
border: 1px solid #999;
border-collapse: collapse;
}
.tr{
display: flex;
}
.td{
padding: 10px;
}
.td:nth-of-type(2){
display: none;
}
*{
transition: all 0.3s ease;
}
button{
margin-top: 20px;
}
.animate{
animation: show 1s ease forwards;
}
#keyframes show{
from{
transform: translateX(-100%);
display: block;
}
to{
transform: translateX(0%);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table">
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
</div>
</div>
<button class="show">Show</button>
Just as I finished posting the question, a friend of mine introduced me to the fadeToggle function available using JQuery. This is precisely what I was looking for.
Related
I am creating an infinite sliding carousel. when I add the below, after the animation there is a little glitch with the carousel jumping and returning to the start.
If I remove the Javascript and manual add another "box-container prim" the carousel works perfectly. I dont want to editing 2 divs, so I want to clone the div. Why is the behavior different when you clone the div? when you inspect the code the divs are exactly the same?
let x = document.querySelector('.box-container')
let clone = x.cloneNode(true);
x.after(clone)
* {
padding: 0;
margin: 0;
}
.wrapper {
width: 100vw;
height: 100px;
display: flex;
overflow: hidden;
}
.box-container {
display: flex;
width: 100%;
height: 100%;
}
.box {
width: 200px;
border: 1px solid black;
}
.prim {
animation: scroll 10s linear infinite;
}
<div class="wrapper">
<div class="box-container prim">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
</div>
Adding manual html, and cloning with js
I'm trying to achieve 3 clickable <div> that expand and hide/overlap others on click, while showing what's inside each clicked <div>. I only have JQuery as of right now.
My initial question is, what should I use? (Flexbox? CSS animation? React?)
Is it possible in vanilla html+css+js stack without having a bonky transition ?
I made an image to illustrate what I'm trying to say:
It is possible just by using pure Javascript, all you need to do is add a click event to each div, and when one is clicked you issue yourDivName.setAttribute("style", "display: block"); and issue yourDivName.setAttribute("style", "display: none"); to the other two. Then just repeat this process for each one. Obviously enclosing each one in a function yourFunctionName(){
//Enter logic here
}
Your process should be first getting each div and putting it in a variable, then doing the above code according to what you wish to do to the div. I hope this helps let me know if you'd like me to do the Javascript for you :)
First of all, you should write your script in the question when asking questions on stackoverflow. Because we must see what code do you have.
About your question, there are so many options. If you want to use jQuery:
HTML:
<div class="group"></div>
<div class="group"></div>
<div class="group"></div>
JavaScript:
$('.group').on('click', function(){
$('.group').hide();
$(this).show();
});
If you want to make it with CSS, you can do something like:
HTML:
<div class="group"></div>
<div class="group"></div>
<div class="group"></div>
CSS:
.group{
display: none;
}
.group:active{
display: block;
}
If you want to make some animation you can use CSS transition
I am answering my own question to show you the progress I made.
This is greatly starting to get form following both your advices. (Jsfiddle at the end).
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StackCode</title>
<link rel="stylesheet" href="dummy.css" />
</head>
<body>
<header>
</header>
<section class="section">
<div class="service-box">
<div class="service-story">
<div> <h1> Title </h1> </div>
<img class="img-left" src="https://via.placeholder.com/250x700">
<div class="service-story-expand">
<h1>TITLE</h1>
<p>Sample text</p>
<img src="https://via.placeholder.com/100">
</div>
</div>
<div class="service-art">
<div> <h2> Title2 </h2></div>
<img class="img-middle" src="https://via.placeholder.com/250x700">
<div class="service-art-expand">
<h1>TITLE</h1>
<p>Sammple text</p>
</div>
</div>
<div class="service-motion">
<div> <h2> Title3 </h2></div>
<img class="img-right" src="https://via.placeholder.com/250x700">
<div class="service-motion-expand">
<h1>TITLE</h1>
<p>Sammple text</p>
</div>
</div>
</div>
</section>
<script src="jquery-3.4.1.min.js"></script>
<script src="dummy.js"></script>
</body>
</html>
CSS
*
{
margin:0px;
padding:0px;
}
html {
overflow-x :hidden;
background: black;
}
header
{
height:20px;
overflow: hidden;
background-color: black;
padding: 45 0 0 0;
z-index: 0;
width: 100%;
}
.section{
width: 100%;
background:grey;
margin: auto;
}
.service-box{
overflow: hidden;
width: 90%;
height: auto;
margin:auto;
display: flex;
justify-content: space-evenly;
}
.service-story{
height: auto;
overflow: hidden;
flex:1;
order: 1;
transition: flex .3s ease-out;
}
.service-story.clicked{
background:white;
height: auto;
flex:6;
transition: flex .3s ease-out;
}
.service-story-expand{
display: none;
}
.service-art{
overflow: hidden;
flex:1;
transition: flex .3s ease-out;
order: 2;
}
.service-art.clicked{
background:white;
flex:6;
transition: flex .3s ease-out;
}
.service-art-expand{
display: none;
}
.service-motion{
overflow: hidden;
flex:1;
transition: flex .3s ease-out;
order: 3;
}
.service-motion.clicked{
background:white;
flex:6;
transition: flex .3s ease-out;
}
.service-motion.clicked img{
float: left;
}
.service-motion-expand{
display: none;
}
.service-story.clicked img{
width:auto;
height:auto;
}
Js + Jquery
$('.service-story').on('click', function(){
$(this).toggleClass('clicked');
$(this).show();
$('.service-story-expand').show();
});
$('.service-art').on('click', function(){
$(this).toggleClass('clicked');
$(this).show();
$('.service-story-expand').show();
});
$('.service-motion').on('click', function(){
$(this).toggleClass('clicked');
$(this).show();
$('.service-motion-expand').show();
});
I chose the solution of flexbox. This is not exactly what I was looking for, but it does the trick.
Now the problem I encounter are the following.
How to put content which is firstly hidden next to my images and not under ?
How to close other divs when one is open ?
How to hide content once a <div> is clicked again ? (If I understand correctly, is a "If/Then/Else" situation)
I think the last two questions are frequently asked, so I'll start searching by myself, just showing my progress.
Thank you once again for your time, and I hope I did better on formating.
Here is a jsfiddle.
https://jsfiddle.net/7oa28cg4/
Ps: Also working on responsiveness, i'm learning it.
This is my data and now I want to fadein elements of class data one by one
.data
{
width: 74%;
background: red;
height: 20px;
position: absolute;
right: 13%;
display: flex;
text-align: center;
}
<div class="data">data A1
</div>
<div class="data"> data B1
</div>
<div class="data"> data C1
</div>
<div class="data"> data D1
</div>
I tried $(".data")[0].fadeIn(2000) as well as $(".data")[0].delay(200).fadeIn(2000)
both gives error when I use index but works fine when removed index but then all child fadeIn at same time.
You're dereferencing the array you get when you do $(".data")[0] and end up with the underlying DOM node which you can't use a jQuery method on. Instead of using $(".data")[0], use $(".data:first"), $(".data:eq(0)"), $(".data").eq(0), or $(".data").first()
What your doing gets the single DOM element, rather than getting a jquery representation of that element, in your case you could do soemthing like:
var ele = $(".data")[0]
$(ele).fadeIn(2000)
I think this is what you need.
(is not the best code but should work)
var a=0;
$(".data").each(function(){
a++;
$(this).fadeIn(1000*a);
});
.data
{
width: 100%;
background: red;
height: 20px;
display: none;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">data A1
</div>
<div class="data"> data B1
</div>
<div class="data"> data C1
</div>
<div class="data"> data D1
</div>
You can target certain elements of the same class in jQuery using .eq()
$(".data").eq(2).fadeIn(1000);
You could create a for loop to iterate through each element with the class name and use a setTimeout to give a delay before fading in.
More examples at:
https://api.jquery.com/eq/
If you don't need to use JS then a CSS approach is using #keyframes you just need to delay the start time of the element using animate-delay and adding the required classes to the elements. Fiddle Hope this helps.
.fadeIn{
animation-name: fadeIn;
}
.animated1{
animation-duration: 2s;
animation-fill-mode: both;
}
.animated2{
animation-duration: 2s;
animation-fill-mode: both;
animation-delay: 2s;
}
.animated3{
animation-duration: 2s;
animation-fill-mode: both;
animation-delay: 4s;
}
.animated4{
animation-duration: 2s;
animation-fill-mode: both;
animation-delay: 6s;
}
#keyframes fadeIn
{
0%
{
opacity:0;
}
to{
opacity:1;
}
}
.fadeIn{
animation-name:fadeIn;
}
<div class="data fadeIn animated1">data A1
</div>
<div class="data fadeIn animated2"> data B1
</div>
<div class="data fadeIn animated3"> data C1
</div>
<div class="data fadeIn animated4"> data D1
</div>
You can use a recursion to animate the 1st element of the collection. Whenever the current .fadeIn() animation ends, call the function with the collection, but with the 1st item removed by .slice():
function fadeIn($els) {
$els.eq(0).fadeIn(1000, function() {
fadeIn($els.slice(1));
});
}
fadeIn($('.data'))
.data {
background: red;
height: 20px;
text-align: center;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">data A1
</div>
<div class="data"> data B1
</div>
<div class="data"> data C1
</div>
<div class="data"> data D1
</div>
You can use .each() and setTimeout()
$('.data').each(function(i){
var ThisIt = $(this);
setTimeout(function(){
$('.data').fadeOut(200);
ThisIt.fadeIn(200);
} , 3000 * i);
});
.data
{
width: 74%;
background: red;
height: 20px;
position: absolute;
right: 13%;
display : flex;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">data A1
</div>
<div class="data"> data B1
</div>
<div class="data"> data C1
</div>
<div class="data"> data D1
</div>
OR : You can use something like delay() , .queue() and addClass()
$('.data').each(function(i){
var ThisIt = $(this);
ThisIt.delay(2000 * i).queue(function(){
$(this).addClass('visible');
});
});
.data
{
width: 74%;
background: red;
height: 20px;
position: absolute;
right: 13%;
display : flex;
text-align: center;
visibility : hidden;
opacity : 0;
}
.visible{
visibility : visible;
opacity : 1;
transition-duration : 2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">data A1
</div>
<div class="data"> data B1
</div>
<div class="data"> data C1
</div>
<div class="data"> data D1
</div>
Note: this code just to start with .. you can play around to make it
infinite loop
Unlike the other answers, this answer guarantees that each will follow the previous. The other answers cannot guarantee that using timeouts.
This is a function that correctly uses the callback to recurse through each <div> to display them one after another as the question requests.
I've made two modifications to your base CSS. I set the background-color to white (for easier reading) and the set the display to none so the animation will be visible.
let collection = $('.data');
(function doIt(index) {
$(collection[index])
.fadeIn(2000, () => {
if (index++ < collection.length) doIt(index);
});
})(0);
.data {
width: 74%;
background: white;
height: 20px;
position: absolute;
right: 13%;
display: flex;
text-align: center;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">data A1
</div>
<div class="data"> data B1
</div>
<div class="data"> data C1
</div>
<div class="data"> data D1
</div>
I have a div with other 3 divs inside.
<div id="buttons">
<div id="button1"></div>
<div id="button2"></div>
<div id="button3"></div>
</div>
The width of the main div (buttons) is 100%. If my 3 buttons are visible the width of each button will be 33%, if 2 are visible will be 50% and if only one so 100% the same of the parent...
I know how to modify this values with javascript... but its possible modify only with javascript the display and css modify the width
SORRY BY MY ENGLISH
You can achieve that layout using table & table-cell props, OR via flexbox (or maybe some other methods, but these ones come in mind atm).
Both these methods have pros & cons, but depending on what you're going with you're layout, these should help you out.
According to http://caniuse.com/, flexbox doesnt go to well with older browsers, mainly IE9 and bellow that, check it out: http://caniuse.com/#search=flex
As for the table trick, it has a much better support with older browsers, http://caniuse.com/#search=table, but it has its own little quirks depending on what you want to accomplish using this.
Option 1 - Table Trick:
set the container to display: table & width: yourwidth;
set the children of the container to display: table-cell, this rule will make sure theyll stretch evenly across their parent
done.
View demo here or snippet bellow:
/*option 1*/
.buttons {
display: table;
width: 100%;
}
.buttons > div {
display: table-cell;
}
/*styling purposes*/
.buttons{
margin: 10px 0;
text-align: center;
}
#button1{
background: red;
}
#button2{
background: green;
}
#button3{
background: cyan;
}
<h1>Table trick</h1>
<div class="buttons">
<div id="button1">1</div>
<div id="button2">2</div>
<div id="button3">3</div>
</div>
<div class="buttons">
<div id="button1">1</div>
<div id="button2">2</div>
</div>
<div class="buttons">
<div id="button3">3</div>
</div>
Option 2 - Flexbox:
set the container to display: flex
set the childrent to flex: 1 100% so that theyll stretch evenly across their parent
View demo here or snippet bellow:
.buttons-flex {
display: flex;
}
.buttons-flex > div {
flex: 1 100%;
}
/*styling purposes*/
.buttons-flex {
margin: 10px 0;
text-align: center;
}
#button4 {
background: red;
}
#button5 {
background: green;
}
#button6 {
background: cyan;
}
<h1>Flexbox trick</h1>
<div class="buttons-flex">
<div id="button4">1</div>
<div id="button5">2</div>
<div id="button6">3</div>
</div>
<div class="buttons-flex">
<div id="button4">1</div>
<div id="button5">2</div>
</div>
<div class="buttons-flex">
<div id="button6">3</div>
</div>
Hope this help you out!
Try using the following CSS...
<style type="text/css">
#buttons
{
width:100%;
display:table;
}
#button1
{
background:red;
width:34%;
display:table-cell;
}
#button2
{
background:green;
width:34%;
display:table-cell;
}
#button3
{
background:blue;
width:34%;
display:table-cell;
}
</style>
As the buttons are hidden, the remaining buttons take up the remaining space of the #buttons container.
Think of this as displaying a set of tds in a table
Since a week I try to open a box with html5 css3 and some javascript.
The final result should be in the first step (button1) "open the box" (like a package) the second should be the "unfolding effect".
It work almost close in this example:
http://jsfiddle.net/Rases/wprt40nr/
<div id="cube">
<figure class="front">Cover</figure>
<figure class="top">TOP!</figure>
<figure class="back">Back</figure>
<figure class="right">R1</figure>
<figure class="right2">R2</figure>
<figure class="left">Left1</figure>
<figure class="left2">Left2</figure>
<figure class="bottom">Bottom</figure>
</div>
but as i learned some parts are not really connected. That's the reason why it's overlap to the step3
So I connected the parts in each other and replace the figure with div tags as you see here.: http://jsfiddle.net/Rases/71gy2qu9/
<div id="cube">
<div class="top">TOP! <div class="front">Cover</div></div>
<div class="back">back </div>
<div class="right">Right1 <div class="right2">Right2</div></div>
<div class="left">left1 <div class="left2">Left2</div></div>
<div class="bottom">bottom </div>
</div>
But this one didn't worked very well and I googled about the diffrent between div and figure and find out the coordinate System woks diffrent
My next idea was to replace the div-tags with the span-tag, because i saw it in section 6: http://rupl.github.io/unfold/
<div class="sandbox">
<div class="cube rotate labels">
<span class="top side"></span>
<span class="left side"></span>
<span class="right side"></span>
<span class="bottom side"><span class="back side flat"></span></span>
</div>
</div>
Here you can see the folding effect in the second part of section 6
so I try this version: http://jsfiddle.net/Rases/1b6a87t0/
<div class="box" >
<div id="cube">
<span class="top">TOP!<span class="front">Front</span></span>
<span class="back">BACK</span>
<span class="right">Right1<span class="right2">Right2</span></span>
<span class="left">Left1<span class="left2">L2</span></span>
<span class="bottom">Bottom</span>
</div>
</div>
In the last version of the box is connected but the unfolding effect from step1 to step2 looks wacky. I can't find the mistake and the css have diffrent coordinates the rest ( box and cube is the same )
here is the CSS - Code from my last example
/******* cube-Style *******/
.box {
width: 248px;
height: 234px;
position: relative;
margin: 0 auto 40px;
border: 1px solid #000;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
}
#cube {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(0deg) translateZ(-116px);
-moz-transform: rotateX(0deg) translateZ(-116px);
-o-transform: rotateX(0deg) translateZ(-116px);
transform: rotateX(0deg) translateZ(-116px);
-webkit-transition: -webkit-transform 3s;
-moz-transition: -moz-transform 3s;
-o-transition: -o-transform 3s;
transition: transform 3s;
}
#cube span {
display: block;
position: absolute;
font-size: 15px;
margin: 0px;
font-weight: bold;
color: white;
text-align: center;
}
Update: today I tryed http://matthewlein.com/ceaser/ on the first example but it don't work because the one end move in a circle and the other hand move in a line
The problem on the first example is still, that the Layers are not connected very well:
So I have to work with the other examples but in this case there is a error for the first open effect. (open the box)
Just Remember: Step one open the box, Step two flat the box.
I can't find the bug... thanks for your support.
I looked at your second example from http://rupl.github.io/unfold/ and added more sides + 2 buttons to control the single steps:
http://jsfiddle.net/uu98t6en/
All you have to do now is to adjust the flat classes to the point where you want to start and do an animation by defining "step"-Classes or just one-by-one.
$(".buttton1").click(function()
{
$(".step1").addClass("flat");
});
$(".buttton2").click(function()
{
$(".step2").addClass("flat");
});
$(".reset").click(function()
{
$(".step1, .step2").removeClass("flat");
});
Example:
http://jsfiddle.net/uu98t6en/2/
I hope this was helpful.
-moritz