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.
Related
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.
Morning,
I'm trying to display a div onmouseover. I created a function but i don't know what is wrong. Could you help me please.
The HTML code:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title> PHOTOGALLERY</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link rel="stylesheet" href="css/smoothness/jquery-ui-
1.9.2.custom.css"/>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js">
</script>
<script>
function show_img_container() {
$("#image_container").css("display", "block");
}
</script>
</head>
<body>
<div id="div_container">
<div id="div_image" class="cycle-slideshow">
<img src="images/2.jpg" style="height:100%; width:100%">
<img src="images/3.jpg" style="height:100%; width:100%">
<img src="images/4.jpg" style="height:100%; width:100%">
<img src="images/5.jpg" style="height:100%; width:100%">
</div>
<div id="image_container" onmouseover="show_img_container()"></div>
</div>
</body>
</html>
In the css file i have a image_container id where the attribute display is set to 'none';
If you only want to show the <div> on hover you wouldn't need any JS you could try someting like this:
div {
display: none;
}
a:hover + div {
display: block;
}
<a>Hover over me!</a>
<div>Stuff shown on hover</div>
To explain further:
Since you're using display: none; on the container the mousehover won't take affect since the <div> can't be found by the event since it's not displaying in the first place.
Hope this helps!
I'll answer based on what OP has provided. wrap the #image_container with a div that contains the function, then it should work.
And since it's quite weird that something appeared when hovered but didn't disappear after hovering out, I added another function for onmouseout
function show_img_container() {
$("#image_container").css("display", "block");
}
function hide_img_container() {
$("#image_container").css("display", "none");
}
#image_container {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div onmouseover="show_img_container()" onmouseout="hide_img_container()">
HOVER ME!!
<div id="image_container">IM HIDDEN!!!</div>
</div>
In the css file i have a image_container id where the attribute display is set to 'none';
It is not possible to hover a none blocked element.
You can use the opacity attribute to hide your div.
div {
opacity: 0;
}
div:hover {
opacity: 1;
}
<div>Stuff shown on hover</div>
You cant hover on div if its display is sets to none.
Ok. I know the problem. In the css stylesheet i had this:
#image_container {
position: absolute;
height: 120px;
width: 100%;
bottom: 5%;
background-color: black;
opacity: 0;
**transition: all 0.3s ease-in-out 2s;**
z-index: 1;
}
#image_container:hover {
opacity: 1;
}
If i delete the transition attribute it works:`
Could you show me why?
I am teaching myself about animations using simple rectangles and I have so far managed a bit of progress with this simple project:
html:
<!DOCTYPE html>
<html>
<head>
<title>test slider</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<span class="rect">
<span class="otherrect"></span>
</span>
<p id="button"> click here </p>
</body>
</html>
css
.rect{
float: left;
height: 400px;
width: 550px;
background-color: blue;
transition-property: all;
transition-duration: 2s;
transition-timing-function: ease-in-out;
}
.otherrect {
float: left;
height: 200px;
width: 250px;
background-color: red;
}
.closed {
height: 0;
background-color: white;
}
#button {
float: right;
margin-top: 200px;
margin-right: 500px;
}
js
$(document).ready(function(){
$("#button").click(function(){
if ($( ".rect" ).hasClass( "closed" )){
$(".rect").removeClass("closed");
} else {
$(".rect").addClass("closed");
}
});
});
And it looks like this:
So, what I was aiming at, was that the red rectangle (class: otherrect) should also collapse and fade like its parent rectangle. How can I do this without using javascript and preferably not having to use the display property. Thanks for your time. P
---------------------------------EDIT AFTER RECEIVING ANSWERS-----------------------------------
Thank you all for your answers. These are all good in one way or another, but I guess I sould have mentioned that the red rectangle is going to be a video in the finished project so I need it to be a child of the other element because if the class that collapses it is applied to it directly, it affects the way it looks. Please refer to this other question to see a gif of what I mean:
slideDown() function behaving oddly
Change your span class or add one like this :
<span class="rect">
<span class="otherrect rect"></span>
</span>
Just add overflow:hidden; in the .rect { class and your good. :)
Move the animation settings into a 3rd class ("anim"), give both span elements that class as well and add the "closed" class to any element with the "anim" class in your onclick.
Note: This uses the same amount of JavaScript as your question, which I assume is ok (but technically doesn't meet the "without using javascript" requirement)
(thx to Mark B for the onclick)
EDIT: Added a video. The animation is a little hokey, sorry :(
$(function(){
$("#button").click(function() {
$('.anim').toggleClass('closed')
});
});
.rect{
float: left;
height: 400px;
width: 550px;
background-color: blue;
}
.anim {
transition-property: all;
transition-duration: 2s;
transition-timing-function: ease-in-out;
}
.otherrect {
float: left;
height: 200px;
width: 250px;
background-color: red;
}
.closed {
height: 0;
background-color: white;
}
video {all:inherit}
#button {
float: right;
margin-top: 200px;
margin-right: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<span class="rect anim">
<span class="otherrect anim"><video class="anim" controls>
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video></span>
</span>
<p id="button"> click here </p>
</body>
I want to expand and decrease height of header when I press click on div "arrow". I've tried to addClass with Jquery, but it doesn't really work
HTML:
<header>
<p>The title..</p>
<h1>Some text</h1>
<div class="arrow" id="arrow">
<img src="img/arrow.svg" />
</div>
</header>
CSS
header {
background: #2282A4;
color: #fff;
text-align: center;
width: 100%;
height: 450px;
transition: height 0.5 ease;
}
expandheight {
height: 850px;
}
JQuery:
$(document).ready(function() {
$(function() {
$('#arrow').click(function() {
$('header').addClass('expandheight');
});
});
});
I don't know how I can decrease height now with the same button, to remove "expandheight" class when it is active and add it when it is not... I've tried if/else, I failed.
You have multiple syntax errors:
expandheight should be styled using .expandheight
use cross browser animation properties
use toggleClass to add/remove class
$(document).ready(function() {
$(function() {
$('#arrow').click(function() {
$('header').toggleClass('expandheight');
});
});
});
header {
background: #2282A4;
color: #fff;
text-align: center;
width: 100%;
height: 450px;
-webkit-transition:height 0.5s ease;
-moz-transition:height 0.5s ease;
transition:height 0.5s ease;
}
.expandheight {
height: 850px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<header>
<p>The title..</p>
<h1>Some text</h1>
<div class="arrow" id="arrow">
<img src="img/arrow.svg" />
</div>
</header>
If you want to expand and decrease the height of the header, use toggleClass() rather than using addClass()
jQuery(document).ready(function() {
jQuery(function() {
jQuery('#arrow').click(function() {
jQuery('header').toggleClass('expandheight');
});
});
});
Also, you had a few errors in your code. I have created a jsfiddle to show you it working.
https://jsfiddle.net/7yodz723/
(I put a border around the arrow just so we can clearly see the example working)
Just use toggle class to switch classes.
$(document).ready(function() {
$(function() {
$('#arrow').click(function() {
$('header').toggleClass('expandheight');
});
});
});
header {
background: #2282A4;
color: #fff;
text-align: center;
width: 100%;
height: 450px;
transition: height 0.5 ease;
}
.expandheight {
height: 850px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<header>
<p>The title..</p>
<h1>Some text</h1>
<div class="arrow" id="arrow">
<img src="img/arrow.svg" />
</div>
</header>
I have a navigation bar and a sub-navigation bar in my app. In the sub bar it's possible to press on a button and I want this button to open a new sub bar which will hide the original bar.
The new sub bar should slide from behind the main bar and hide the second bar.
Problem is:
When the third bar appears it bounces instead of appear smoothly
When the third bar disappears it just disappears and doesn't slide back up as I would expect
I tried playing with the top property thinking it might solve the issue, but it hasn't.
I'm attaching here the snippet. Or you can view it in jsfiddle
angular.module('myapp.controllers', []);
var app = angular.module('myapp', ['myapp.controllers', 'ngAnimate', ]);
angular.module('myapp.controllers').controller("BarController", function ($scope) {
$scope.showActionsBar = false;
$scope.cancelAction = function () {
$scope.showActionsBar = false;
}
$scope.click = function () {
$scope.showActionsBar = true;
}
});
.navbar-deploy {
background-color: red;
border: solid transparent;
}
.third, .sub-navbar-fixed {
background-color: black;
width: 100%;
height:60px;
padding-top: 18px;
margin-bottom: 0px;
z-index: 1000;
color: white;
}
.actions-bar {
top: 40px;
background-color: yellow;
position: fixed;
padding-left: 0px;
z-index: 1001;
}
.sub-bar {
padding-top: 40px;
}
.third-in, .third-out {
-webkit-transition:all ease-out 0.3s;
-moz-transition:all ease-out 0.3s;
-ms-transition:all ease-out 0.3s;
-o-transition:all ease-out 0.3s;
transition:all ease-out 0.3s;
-webkit-backface-visibility: hidden;
}
.third-in.myhidden-remove, .third-out.myhidden-add.myhidden-add-active {
display: block !important;
top: -2000px;
z-index: 0;
}
.third-out.myhidden-add, .third-in.myhidden-remove.myhidden-remove-active {
display: block !important;
top: -80px;
z-index: 1001;
}
.myhidden {
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<div ng-app="myapp">
<div ng-controller="BarController">
<div class="navbar-deploy navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="col-lg-2">First Toolbar</div>
</div>
</div>
<div class="sub-bar">
<div class="sub-navbar-fixed" ng-cloak>
<div class="container-fluid">
<span>
<a ng-click="click()"><span> Second Toolbar</span>
</a>
<div class="actions-bar third third-in third-out" ng-cloak ng-class="{'myhidden': !showActionsBar}">
<div class="container-fluid form-group"> <span class="col-lg-10">
<div class="col-lg-2 col-lg-offset-1">
<a ng-click="cancelAction()">Back</a>
</div>
</span>
</div>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
Try this:
.myhidden{ top:-2000px; }
To be honest.. I know why the "bounce". Your yellow container is placed (with visibility:hidden) at the final position (when visible). When you start your animation the menu first go to top (origin of the animation) and then down.
To fix it you may probably position the yellow container when not visible under the black menu but... Imho your html is quite a mess (I don't mean any offense) as your container is place inside an span which contains the buttom and it's a children of the red menu... and that changing all that may mess up everything.
But your menu effect is easy to do it from scratch with nothing but very simple css, html and jquery. This is how I would do it in case it may help you if you are up to change your code.
With this html (the order of the elements are set to avoid the use of z-index)
<div class="header">
<div class="header-bot">
<span class="show">second toolbar</span>
</div>
<div class="header-extra">
<span class="hide">back</span>
</div>
<div class="header-top">
<span>first toolbar</span>
</div>
</div>
this css:
body {margin:0;padding:0;}
span {color:#fff;}
.header {
width:100%;
position:fixed;
top:0;
}
.header-top {
background-color:black;
height:50px;
position:absolute;
top:0px;
width:100%;
}
.header-bot {
background-color:red;
height:50px;
position:absolute;
top:50px;
width:100%;
}
.header-extra {
background-color:yellow;
height:50px;
position:absolute;
top:0;
width:100%;
transition: all 0.3s ease;
}
.down {
top:50px;
}
.hide {color:#000;}
and just this jquery (to add or remove a class when click on the buttoms):
$(document).ready(function () {
$('.show').click(function () {
$('.header-extra').addClass("down");
});
$('.hide').click(function () {
$('.header-extra').removeClass("down");
});
});
You may have something simillar to what you are looking for. Hope this can help anyway.
FIDDLE
Just remove class third-in and third-out from div element it will stop bouncing effect.
<div class="actions-bar third " ng-cloak ng-class="{'myhidden': !showActionsBar}">
<div class="container-fluid form-group"> <span class="col-lg-10">
<div class="col-lg-2 col-lg-offset-1">
<a ng-click="cancelAction()">Back</a>
</div>
</span>
</div>
</div>