I've got a simple toggle plus sign that should trigger a div to appear and rotate into an X which can then be clicked to close the div.
Everything works as planned except there is no smooth transition in the rotation of the plus, it just appears already rotated.
If I remove the display:none from the #showbox div and remove $("#showbox").show(), the animation/transition works. It's only if the div is hidden and then shown with .show() that it just rotates without animating.
I'm sure I can think of a workaround, I'm just wondering if anyone can explain why this might be happening
$("#togglebox").click(function() {
$("#showbox").show();
$("#showbox .toggleplus").toggleClass("togglex");
});
#showbox {
background: #000;
width: 500px;
height: 200px;
display: none;
}
.toggleplus {
width: 30px;
height: 30px;
transition: all .5s;
color:#111;
}
#showbox .toggleplus {
color:#FFF;
}
.togglex {
transform: rotate(-46deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="togglebox">
<p>LEARN MORE</p>
<div class="toggleplus">+</div>
</div>
<div id="showbox">
<div class="toggleplus">+</div>
<p>Blah Blah Blah</p>
</div>
The issue is that the UI updates in a different thread than the JavaScript executes in and that UI thread executes faster than the JS.
You can fix this by adding a short delay, which forces the UI not to update until the function is complete.
$("#togglebox").click(function(){
$("#showbox").show();
setTimeout(function(){
$("#showbox .toggleplus").toggleClass("togglex");
},20);
});
#showbox {
background:#fff;
width:500px;
height:200px;
display:none;
}
.toggleplus {
float:right;
width:30px;
height:30px;
transition:all .5s;
}
.togglex {
transform: rotate(-46deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="togglebox">
<p>LEARN MORE</p>
<div class="toggleplus"></div>
</div>
<div id="showbox">
<div class="toggleplus">+</div>
<p>Blah Blah Blah</p>
</div>
Another way to accomplish this with JQuery is to have the addition of the rotation class code added as a callback to the show() method:
$("#togglebox").click(function(){
// Passing a function to the show method sets it up as a callback to
// be executed after the show() animation is complete.
$("#showbox").show(function(){
$("#showbox .toggleplus").toggleClass("togglex");
});
});
#showbox {
background:#fff;
width:500px;
height:200px;
display:none;
}
.toggleplus {
float:right;
width:30px;
height:30px;
transition:all .5s;
}
.togglex {
transform: rotate(-46deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="togglebox">
<p>LEARN MORE</p>
<div class="toggleplus"></div>
</div>
<div id="showbox">
<div class="toggleplus">+</div>
<p>Blah Blah Blah</p>
</div>
Related
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.
I'm trying to create the same effect as found on this site here https://glenner.org/ in the header when you click either the phone or email icon it toggles hidden text to slide. So when you click on the phone icon the text slides between the phone and the email icon.
I have this so far:
<div id="clickable" style="float:left; cursor:pointer; color: red"><i class="fa fa-phone"></i></div>
<div id="hidden" style="display:none; white-space:nowrap;">Phone Number</div>
<div id="clickable2" style="float:left; cursor:pointer; color: red"><i class="fa fa-envelope"></i></div>
<div id="hidden2" style="display:none; white-space:nowrap;">Email Here</div>
//
$('#clickable').click(function() {
$('#hidden').animate({width:'toggle'},350);
});
$('#clickable2').click(function() {
$('#hidden2').animate({width:'toggle'},350);
});
As of now when I click on one of the links it goes down to the next line, I'm sure I'm missing some css styling to fix this?
Here is my JsFiddle set up for it: http://jsfiddle.net/804jeg82/412/
I would clean up your code a little, put the hidden div inside the clickable div. Use CSS to control the animation and use classes rather than id's.
But that's just personal preference.
$(document).ready(function(){
$('.clickable').on('click' , function() {
$(this).find('.hid').toggleClass('showme');
});
});
.clickable .fa {
cursor: pointer;
color: red
}
.clickable .fa,
.hid {
float: left;
}
.hid {
width: 0;
overflow: hidden;
white-space: nowrap;
transition: all ease .35s;
-webkit-transition: all ease .35s;
-moz-transition: all ease .35s;
}
.showme {
width: 180px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="clickable"><i class="fa fa-phone"></i>
<div class="hid">Phone Number</div>
</div>
<div class="clickable"><i class="fa fa-envelope"></i>
<div class="hid">Email Here</div>
</div>
You need to add float:left to your hidden div
Specifically:
<div id="hidden" style="display:none; white-space:nowrap; float:left">Phone Number</div>
You may also wish to consider separating your HTML and CSS, for example if you used the ID, you could do something like:
HTML
<div id="hidden">Phone Number</div>
CSS
#hidden {
display:none;
white-space:nowrap;
float:left;
}
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>
I am having trouble figuring this out. I have come up with jQuery that I can use multiple buttons to open a corresponding div using css transitions. I don't want to use text but the + and - to illustrate that the item is open and closed.
I want the + to change to - when you click on other + items. I also want the + on the current item to toggleClass or change from + to - and back to +
I am hoping that a fresh set of eyes with more JS skill can set me straight.
So here is my code...
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<style>
.btn {display:inline-block; text-decoration:none; width:20px; margin:1%; padding:.3em .8em; border-radius:20px; color:#fff; text-align:center; background-color:#FFB50B;}
.btn:hover {cursor:pointer; opacity:.7; color:#000;}
.btn-pnl:before {content:"+"; font-weight:600px;}
.btn-pnl-viz:before {content:"-";}
.hidden {visibility:hidden;}
.panels-wrap {width:870px; height:auto; margin:0 auto; padding:0;}
.panel {width:98%; height:0px; float:left; margin:0 1%; padding:0; opacity:0; visibility:hidden; background:#f60; color:rgba(0,0,0,0);
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.panel-trn {width:100%; height:100px; visibility:visible; opacity:1; color:rgba(0,0,0,1); background:#0F0}
</style>
</head>
<body>
<script>
$(document).ready(function() {
$("a[data-toggle]").on("click", function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding selector from data-toggle
$(selector).toggleClass('panel-trn').siblings().removeClass("panel-trn");
});
$('a').click(function() {
$("a").removeClass("btn-pnl-viz");
//Tried this and no luck > $(this).toggleClass('btn-pnl-viz');
if ($(this).hasClass("btn-pnl-viz")){
$(this).removeClass("btn-pnl-viz");
}else{
$(this).toggleClass("btn-pnl-viz");
};
});
});
</script>
<div>
<div>
</div>
<div>
</div>
<div>
</div>
<div id="div1" class="panel">div 1</div>
<div id="div2" class="panel">div 2</div>
<div id="div3" class="panel">div 3</div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div id="div4" class="panel">div 1</div>
<div id="div5" class="panel">div 2</div>
<div id="div6" class="panel">div 3</div>
I can get everything to work except I cant get the button to toggle the + and - if I click the same button twice. I also cannot get the existing active to close when clicking on another button out side of the container div.
Total Newb question I know but, if someone could help I would greatly appreciate it... many hours on this!
Thanks!
Replace the code of $("a").click();
with following i testesed its working fine
$('a').click(function() {
($("a").not($(this))).removeClass("btn-pnl-viz");
$(this).toggleClass("btn-pnl-viz");
});
Reply if any problem with the code
Thanks
I'm trying to create an efect that's change de background color from left to right.
I have created this: http://jsfiddle.net/kT95d/58/
<style>
#div1{
height:200px;
width:200px;
background-color:green;
float:left;
}
#back {
width:0px;
height:200px;
background-color:Gray;
display: block;
}
<script>
$('#div1').mouseover(function (){
$('#back').animate({width: '200px'}, 1000);
});
</script>
<div id="div1">
<div id="back">
That was amazing!
</div>
</div>
But, i want the text in horizontal and how you can see, this is vertical and after the effect go to horizontal.
I don't know if this is the best way to do this. Can help me?
Thanks!!
Here you go. I believe this is what you want:
http://jsfiddle.net/WVWKE/
Change is here:
<div id="div1">
<div style="position:absolute">That was amazing!</div>
<div id="back">
</div>
</div>
The problem before was that the text was inside your zero width div, so it was breaking onto multiple lines to try to fit. Then when you animated the width back to 200, the text had room to expand again.
Here we move the text out of the animated background div and into the parent div, then we give it a position:absolute to take it out of the flow so it doesn't take up space. You can of course move that inline style to your CSS, and probably should.
<style>
#div1{
margin-top: -200px;
height:200px;
width:200px;
background-color:green;
}
#back {
width:0px;
height:200px;
background-color:Gray;
display: block;
}
</style>
<script>
$('#div1').mouseover(function (){
$('#back').animate({width: '200px'}, 1000);
});
</script>
<div id="text">
That was amazing!
</div>
<div id="div1">
<div id="back">
</div>
</div>