My code below:
function dropright() {
var pos = 0;
var menu = document.getElementById("menuBar");
var t = setInterval(move, 10);
function move() {
if (pos >= 75) {
clearInterval(t);
} else {
pos += 1;
menu.style.left = pos + "px";
}
}
};
* {
margin: 0px;
}
#container {
width: 150px;
height: 600px;
left: -75px;
position: relative;
}
#menuBar {
width: 150px;
height: 100%;
position: absolute;
float: left;
background-color: red;
}
<body>
<div id="container" onclick="dropright()">
<div id="menuBar"></div>
</div>
</body>
I would like to make my menubar appear from left on container click. Also I would like to make it disappear the same way. But this does nothing. Should I use JS for this or keyframes?
I would do this way:
Add a class to open.
Use transitions, not keyframes.
Snippet
$(function() {
$(".dropRight").click(function(e) {
e.preventDefault();
$("#menuBar").toggleClass("open");
});
});
* {
margin: 0;
padding: 0;
list-style: none;
line-height: 1;
text-decoration: none;
font-family: 'Segoe UI';
}
.dropRight {
display: inline-block;
padding: 5px 8px;
border: 1px solid #ccc;
color: #333;
border-radius: 5px;
padding-bottom: 7px;
float: right;
margin-right: 25px;
margin-top: 25px;
}
#menuBar {
position: fixed;
top: 25px;
left: -200px;
width: 200px;
bottom: 0;
background-color: #ccf;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
#menuBar.open {
left: 0;
}
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="container">
Open
<div id="menuBar"></div>
</div>
I have added a Open which can be used to Open or Close. :)
I would suggest you to add a click listener to the element and by clicking it, adding a class. The animation can be made with CSS.
document.getElementById('container').addEventListener('click', function() {
if(this.className === 'shown') {
this.className = '';
} else {
this.className = 'shown';
}
});
* {
margin: 0px;
}
#container {
width: 150px;
height: 300px;
left: -75px;
position: relative;
background: red;
transition: 0.3s ease left;
cursor: pointer;
}
#container.shown {
left: 0;
}
<div id="container"></div>
Related
I've used getElementsByClassName to change the button text when people click on it, but with the JavaScript String Rule, it will not change the original text but return a new string instead.
The original text of the button is in the span tag, and I use CSS to make it visible by color and z-index. The problem is when the new string replace the original one, it will not be in the span tag which causes it to be hidden under the animation div.
If you don't understand what I mean, please check the code below:
function myFunction() {
document.getElementsByClassName("demo")[0].innerHTML = "Copied";
setTimeout(function(){ document.getElementsByClassName("demo")[0].innerHTML = "Changing Back"; }, 1000);
}
.Big {
width: 257px;
padding: 33px 0 30px 0;
font-size: 21px;
}
button {
font-family: 'Montserrat';
font-weight: 500;
border-radius: 6px;
}
.ButtonMain {
background-color: #e6e6e6;
position: relative;
overflow: hidden;
border: none;
}
.ButtonMain::before,
.ButtonMain::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ButtonMain span {
position: relative;
color: #fff;
}
.ButtonMain:hover span {
color: #000;
transition: color 0.3s ease 0s;
}
.BlueRevealEffect::before {
content: '';
background: #3a86ff;
width: 120%;
left: -10%;
transform: skew(30deg);
transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}
.BlueRevealEffect:hover::before {
transform: translate3d(100%,0,0);
}
<button
class="demo ButtonMain BlueRevealEffect Big"
onclick="myFunction()">
<span>Find Out More</span>
</button>
Use a querySelector to get the desired <span>
document.querySelector(".demo span").innerHTML
function myFunction() {
document.querySelector(".demo span").innerHTML = "Copied";
setTimeout(function(){ document.querySelector(".demo span").innerHTML = "Changing Back"; }, 1000);
}
.Big {
width: 257px;
padding: 33px 0 30px 0;
font-size: 21px;
}
button {
font-family: 'Montserrat';
font-weight: 500;
border-radius: 6px;
}
.ButtonMain {
background-color: #e6e6e6;
position: relative;
overflow: hidden;
border: none;
}
.ButtonMain::before,
.ButtonMain::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ButtonMain span {
position: relative;
color: #fff;
}
.ButtonMain:hover span {
color: #000;
transition: color 0.3s ease 0s;
}
.BlueRevealEffect::before {
content: '';
background: #3a86ff;
width: 120%;
left: -10%;
transform: skew(30deg);
transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}
.BlueRevealEffect:hover::before {
transform: translate3d(100%,0,0);
}
<button
class="demo ButtonMain BlueRevealEffect Big"
onclick="myFunction()">
<span>Find Out More</span>
</button>
You have span inside of button, so you need to add it when you're changing html:
function myFunction() {
document.getElementsByClassName("demo")[0].innerHTML = "<span>Copied</span>";
setTimeout(function(){ document.getElementsByClassName("demo")[0].innerHTML = "<span>Changing Back</span>"; }, 1000);
}
.Big {
width: 257px;
padding: 33px 0 30px 0;
font-size: 21px;
}
button {
font-family: 'Montserrat';
font-weight: 500;
border-radius: 6px;
}
.ButtonMain {
background-color: #e6e6e6;
position: relative;
overflow: hidden;
border: none;
}
.ButtonMain::before,
.ButtonMain::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ButtonMain span {
position: relative;
color: #fff;
}
.ButtonMain:hover span {
color: #000;
transition: color 0.3s ease 0s;
}
.BlueRevealEffect::before {
content: '';
background: #3a86ff;
width: 120%;
left: -10%;
transform: skew(30deg);
transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}
.BlueRevealEffect:hover::before {
transform: translate3d(100%,0,0);
}
<button
class="demo ButtonMain BlueRevealEffect Big"
onclick="myFunction()">
<span>Find Out More</span>
</button>
I've a form I'm creating, and I'll have some sections that will apear from right to left, on top of that and fixed is a bar, that should increase in width each time I click on continue to go to the next question. that way user will know he's progressing. I can't make work my progress bar, can you help me figure out why?
HTML
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
<div class="questionsContainer">
<div class="section one">
<p class="sectionTitle">This is the First Question?</p>
<div class="buttonContinue" id="section2">CONTINUE</div>
</div>
<div class="section two">
<p class="sectionTitle">Aja! time for the Second one!!</p>
<div class="buttonContinue" id="section3">CONTINUE</div>
</div>
<div class="section three">
<p class="sectionTitle">Another Question? 3 so far?</p>
<div class="buttonContinue" id="section4">CONTINUE</div>
</div>
</div>
CSS
body {
margin: 0 auto;
transition: all 0.2s ease;
}
.progress-container {
width: 100%;
height: 4px;
background: transparent!important;
position: fixed;
top: 0;
z-index: 99;
}
.progress-bar {
height: 4px;
background: #4ce4ff;
width: 10%;
}
header {
width: 100%;
height: 150px;
position: relative;
background-color: fuchsia;
}
.questionsContainer {
width: 100%;
height: calc(100% - 200px);
position: absolute;
background-color: lime;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
footer {
width: 100%;
height: 50px;
position: fixed;
bottom: 0;
background-color: black;
}
.section {
background-color: purple;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.one {
position: absolute;
right: auto;
transition: all 0.2s ease;
}
.two {
position: absolute;
right: -100%;
transition: all 0.2s ease;
}
.three {
position: absolute;
right: -100%;
transition: all 0.2s ease;
}
.sectionTitle {
font-family: 'Montserrat', sans-serif;
color: white;
font-size: 30px;
margin: 0 auto;
}
.buttonContinue {
font-family: 'Montserrat', sans-serif;
color: white;
font-size: 16px;
padding: 10px 20px;
background-color: red;
border-radius: 5px;
margin: 20px 0px;
text-align: center;
cursor: pointer;
width: 100px;
}
JAVASCRIPT
<script type="text/javascript">
document.getElementById('section2').onclick = function(){
$('.one').css('right','100%');
$('.two').css('right','auto');
}
document.getElementById('section3').onclick = function(){
$('.two').css('right','100%');
$('.three').css('right','auto');
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#section2").click(addVisit);
$("#section3").click(addVisit);
$("#section4").click(addVisit);
});
function addVisit(){
var progressTag = $('#myBar');
count ++;
progressTag.css('width', count * 10 + "%");
});
</script>
Your main issue is that the count variable has not been created and given a value initially.
I have optimized your code a bit and this is how I did it:
var count = 1;
$(document).ready(function() {
$("#section2, #section3, #section4").click(function() {
$('#myBar').css('width', ++count * 10 + "%");
});
});
I also added transition: all 1s; for animated CSS transition.
Here is your updated code in JSFiddle
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I'm trying to make a sidebar smooth transition when click so the content wrapper also makes a transiction to the left.
I simply cant do it.
var rightSidebarOpen = false;
$('#toggle-right-sidebar').click(function () {
if(rightSidebarOpen) {
$('#sidebar-right').hide()
$('.content-wrapper').css('margin-right', "0");
}
else {
$('#sidebar-right').show();
$('.content-wrapper').css('margin-right', "205px");
}
rightSidebarOpen = !rightSidebarOpen;
});
.content-wrapper {
background: #fff;
margin-left: 205px;
min-height: 100vh;
padding: 1rem 1.5rem;
transition: all .7s ease;
margin-bottom: 50px;
background: green;
}
#sidebar-right {
background: #fafafa;
border-right: 2px solid #e5e5e5;
width: 200px;
height: 100%;
position: absolute;
top: 0;
right: 0;
overflow-x: hidden;
transition: left 1s ease;
display: none;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle-right-sidebar">BUTTON</button>
<div class="content-wrapper"></div>
<div id="sidebar-right"></div>
Maybe something you looking for:
I set position: relative to #sidebar-right and just use right with the same pixel to make this move with .content-wrapper
var rightSidebarOpen = false;
$('#toggle-right-sidebar').click(function () {
if(rightSidebarOpen) {
$('#sidebar-right').css('right', "-205px");
$('.content-wrapper').css('margin-right', "0");
}
else {
$('#sidebar-right').css('right', "0");
$('.content-wrapper').css('margin-right', "205px");
}
rightSidebarOpen = !rightSidebarOpen;
});
.content-wrapper {
background: #fff;
margin-left: 205px;
min-height: 100vh;
padding: 1rem 1.5rem;
transition: all .7s ease;
margin-bottom: 50px;
background: green;
position: relative;
}
#sidebar-right {
background: #fafafa;
border-right: 2px solid #e5e5e5;
width: 200px;
height: 100%;
position: absolute;
top: 0;
right: 0;
overflow-x: hidden;
transition: all .7s ease;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle-right-sidebar">BUTTON</button>
<div class="content-wrapper"></div>
<div id="sidebar-right"></div>
If I were you, I'd just do the transition of the right property:
var rightSidebarOpen;
$('#toggle-right-sidebar').click(function () {
if (rightSidebarOpen) {
//$('#sidebar-right').hide();
$('#sidebar-right').css('right', "-200px");
$('.content-wrapper').css('margin-right', "0");
}
else {
//$('#sidebar-right').show();
$('#sidebar-right').css('right', "0");
$('.content-wrapper').css('margin-right', "205px");
}
rightSidebarOpen = !rightSidebarOpen;
});
/* added */
* {box-sizing: border-box}
body {margin: 0; overflow: hidden}
.content-wrapper {
background: #fff;
margin-left: 205px;
min-height: 100vh;
padding: 1rem 1.5rem;
transition: margin-right 1s; /* modified */
margin-bottom: 50px;
background: green;
}
#sidebar-right {
background: #fafafa;
border-right: 2px solid #e5e5e5;
width: 200px;
height: 100%;
position: absolute;
top: 0;
right: -200px; /* modified */
overflow-x: hidden;
transition: right 1s; /* modified */
/*display: none; better to put it off screen with the "right" property*/
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle-right-sidebar">BUTTON</button>
<div class="content-wrapper"></div>
<div id="sidebar-right"></div>
show(), hide() functions only work as display:block; and display:none; and hence you cant animate them.
HTML
<button id="toggle-right-sidebar">BUTTON</button>
<div class="content-wrapper"></div>
<div id="sidebar-right"></div>
CSS
.content-wrapper {
background: #fff;
margin-left: 205px;
min-height: 100vh;
padding: 1rem 1.5rem;
transition: all .7s ease;
margin-bottom: 50px;
background: green;
}
#sidebar-right {
background: #fafafa;
border-right: 2px solid #e5e5e5;
width: 200px;
height: 100%;
position: absolute;
top: 0;
right: 0;
overflow-x: hidden;
transition: all 1s ease;
transform: translateX(200px);
background: blue;
}
JS
var rightSidebarOpen = false;
$('#toggle-right-sidebar').click(function () {
if(rightSidebarOpen) {
$('#sidebar-right').css('transform', 'translateX(200px)')
$('.content-wrapper').css('margin-right', "0");
}
else {
$('#sidebar-right').css('transform', 'translateX(0)');
$('.content-wrapper').css('margin-right', "205px");
}
rightSidebarOpen = !rightSidebarOpen;
});
You can try out this pen
I've run into a problem with my code to where I have an accordion and when it's clicked on, won't take up the height of my chart that I did in Chart JS. However, when I toggle it again. It takes up the height as necessary. What I'm trying to figure out is when I click on the accordion I want the chart to be loaded right after with it's animation.
I want the chart to drop down and load. It's doing what I want but I cannot figure out why the accordion won't take up the height on the first click and does when I toggle it again?
Here is my code.
HTML:
<div class="fast-factsv2">
<div class="fastfactssubContainer">
<h1><i class="fa fa-info-circle" aria-hidden="true" alt="Fast Facts"></i><span id="subheaderspan">Simple Heading</span></h1>
<div class="accordionContainer">
<h2>Simple Heading</h2>
<button class="accordion" id="chart1">
<span>1. Simple Heading</span>
</button>
<div class="panel">
<canvas id="container1" width="400" height="150"></canvas>
</div>
</div>
</div>
JavaScript:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
//Doughnut Chart
$("#chart1").one("click", function(){
var popChart = new Chart(container1, {
responsive: true,
type: 'doughnut',
data: {
datasets:[{
data: [38],
backgroundColor:['#ea7738']
}],
labels:['Median Age'],
},
options: {
cutoutPercentage: 95
}
});
});
CSS:
.fastfactssubContainer h1 {
font-size: 40px; }
.fastfactssubContainer {
background: #fff;
opacity: .9;
display: inline-block;
margin-top: 100px;
width: 50%; }
.fastfactssubContainer .accordionContainer h2 {
display: inline-block;
margin: 0;
padding-bottom: 15px;
float: left;
color: #000;
font-size: 1.6em;
padding-top: 10px; }
.fastfactssubContainer h1 {
padding: 30px 30px 0 30px; }
.fastfactssubContainer .fa {
color: #000;
padding-right: 33px; }
.fastfactssubContainer #subheaderspan {
color: #57bcf2; }
.accordionContainer {
margin: 0 100px 100px 100px; }
.accordionContainer i.fa.fa-heart-o, .accordionContainer i.fa.fa-share-alt {
float: left;
font-size: 1.2em;
padding-right: 10px;
padding-top: 16px;
color: #b6b6b6; }
.accordionContainer h2 {
padding-right: 10px; }
.accordionContainer span {
font-size: 1.2em;
padding-left: 20px;
float: left;
padding: 10px; }
.accordionContainer button.accordion {
background: transparent;
color: #444;
cursor: pointer;
padding: 4px;
width: 100%;
text-align: left;
border: none;
border-top: 1px solid #6f6f6f;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
outline: none; }
.accordionContainer button.accordion button.accordion.active, .accordionContainer button.accordion:hover {
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
background-color: #ddd; }
/* Style the accordion panel. Note: hidden by default */
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.2s ease-out;
-o-transition: max-height 0.2s ease-out;
transition: max-height 0.2s ease-out; }
button.accordion:after {
content: '\02795';
/* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px; }
button.accordion.active:after {
content: "\2796";
/* Unicode character for "minus" sign (-) */ }
#container1 {
margin: 20px auto;
width: 30%;
height: auto;
position: relative; }
I added width: 100% in your CSS:
#container1 {
margin: 20px auto;
width: 100%;
height: auto;
position: relative;
}
Works for me
I need help to edit this search box model:
#import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
color: #C0C0C0;
}
* {
margin: 0px;
padding: 0px;
border: 0px;
outline: 0px;
box-shadow: 0px;
}
body {
background-color: pink;
}
#container {
height: 300px;
margin-top: 10%;
}
.entypo-search:before {
position: absolute;
top: 0.4em;
left: 0px;
}
#form {
background-color: white;
border-radius: 30px;
padding: 10px 20px;
width: 13px;
overflow: hidden;
position: absolute;
height: 30px;
right: 50%;
-webkit-transition: width .55s ease;
-moz-transition: width .55s ease;
-ms-transition: width .55s ease;
-o-transition: width .55s ease;
transition: width .55s ease;
}
form {
position: relative;
}
input {
width: 0px;
height: 25px;
font-size: 15px;
margin-left: 30px;
/* margin-top: 3px; */
line-height: 30px;
}
.entypo-search {
position: absolute;
top: 20%;
}
#form:hover {
width: 200px;
}
#form:hover form input {
width: 200px;
}
#form form input:focus,
#form form input:active{
outline:none;
width: 300px;
}
<div id="container">
<div id="form">
<form action="#" class="entypo-search">
<fieldset><input id="search" placeholder="Search" /></fieldset>
</form>
</div>
</div>
The search box expands and collapses on hover, but there is a problem if the user, for example, clicking on the suggestion dropdown, then the search box does not hover anymore and the search box collapse.
I want to change its behavior, so it will close/collapse only when clicking with the mouse outside the box.
Thanks.
I implemented some javascript which looks at when you hover the #form and then when you click on the .container. I also removed the :hover css and made that the class which I toggle on and off in the event listeners.
// closes the form when clicking its container.
document.getElementById('container').addEventListener("click", function() {
document.getElementById("form").classList.remove("active");
});
// This stops the closing of the form when clicked
document.getElementById('form').addEventListener("click", function(event) {
event.stopPropagation();
});
// open the form on mouseover
document.getElementById('form').addEventListener("mouseover", function() {
document.getElementById("form").classList.add("active");
});
#import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
color: #C0C0C0;
}
* {
margin: 0px;
padding: 0px;
border: 0px;
outline: 0px;
box-shadow: 0px;
}
body {
background-color: pink;
}
#container {
height: 300px;
margin-top: 10%;
}
.entypo-search:before {
position: absolute;
top: 0.4em;
left: 0px;
}
#form {
background-color: white;
border-radius: 30px;
padding: 10px 20px;
width: 13px;
overflow: hidden;
position: absolute;
height: 30px;
right: 50%;
-webkit-transition: width .55s ease;
-moz-transition: width .55s ease;
-ms-transition: width .55s ease;
-o-transition: width .55s ease;
transition: width .55s ease;
}
form {
position: relative;
}
input {
width: 0px;
height: 25px;
font-size: 15px;
margin-left: 30px;
/* margin-top: 3px; */
line-height: 30px;
}
.entypo-search {
position: absolute;
top: 20%;
}
#form.active {
width: 200px;
}
#form.active form input {
width: 200px;
}
#form form input:focus,
#form form input:active {
outline: none;
width: 300px;
}
<div id="container">
<div id="form">
<form action="#" class="entypo-search active">
<fieldset>
<input id="search" placeholder="Search" />
</fieldset>
</form>
</div>
</div>