I'm building an app for Android in HTML. I made the NavigationDrawer in HTML, and with javascript I make it to show on button click, and dissapear on <p> click. I'm using keyframes for the animations. When I press the button, the animation works (I am using -webkit-transform: translateX), and when I click the button again, the animation works but the div doesn't hide. It remains on the screen, but I can click through it (like pointer-events: none;). What's the problem?
CSS:
#-webkit-keyframes sMenuClose {
from {
-webkit-transform: translateX(0%);
}
to {
-webkit-transform: translateX(-100%);
}
}
#-webkit-keyframes sMenuOpen {
from {
-webkit-transform: translateX(-100%);
}
to {
-webkit-transform: translateX(0%);
}
}
.slidemenu {
background: transparent;
height: 100%;
left: 0px;
pointer-events: none;
position: fixed;
top: 0px;
width: 100%;
z-index: 9991;
}
.slidemenu .menu {
background: #FFF;
border-right: 1px solid #000;
color: #333;
height: 100%;
overflow: visible;
pointer-events: visible;
position: absolute;
top: 0px;
-webkit-transform: translateX(-100%);
width: 80%;
}
.slidemenu .menu.hidden {
-webkit-animation-name: sMenuClose;
-webkit-animation-duration: 0.6s;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-fill-mode: forwards;
-webkit-animation-play-state: running;
}
.slidemenu .menu.visible {
-webkit-animation-name: sMenuOpen;
-webkit-animation-duration: 0.6s;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-fill-mode: forwards;
-webkit-animation-play-state: running;
}
HTML:
<html>
<head>
...
</head>
<body>
...
<div class="slidemenu">
<div class="menu">
<p>Some text</p>
</div>
</div>
</body>
</html>
JS:
window.onload = function() {
document.querySelector("body div#actionbar div.action ul li.menu a").addEventListener("click", function(e) {
e.preventDefault();
if(document.querySelector("body div.slidemenu div.menu").classList.contains("hidden"))
{
document.querySelector("body div.slidemenu div.menu").classList.remove("hidden");
}
document.querySelector("body div.slidemenu div.menu").classList.add("visible");
});
document.querySelector("p").addEventListener("click", function(e) {
e.preventDefault();
document.querySelector("body div.slidemenu div.menu").classList.remove("visible");
document.querySelector("body div.slidemenu div.menu").classList.add("hidden");
});
};
Can you help me?
I think you can get the effect you are after with a slightly simpler setup. This example is modified slightly to show a demo here but I think you should be able to convert this button back into your li menu item with ease. I made the slideout a light blue just so it is easier to see here as well.
function slideMenu_Toggle(){
var _selector = "body div.slidemenu div.menu";
document.querySelector(_selector).classList.toggle("visible");
}
window.onload = function() {
var _selector = ".slidemenu .menu";
document.querySelector(_selector).addEventListener("click", function(){
if( this.classList.contains("visible") ) { slideMenu_Toggle(); }
});
document.querySelector("#toggle").addEventListener("click", slideMenu_Toggle);
};
.slidemenu {
background: transparent;
height: 100%;
left: 0px;
pointer-events: none;
position: fixed;
top: 0px;
width: 100%;
z-index: 9991;
}
.slidemenu .menu {
border-right: 1px solid #000;
color: #333;
height: 100%;
overflow: visible;
position: absolute;
top: 0px;
width: 80%;
pointer-events: visible;
background: aliceblue;
-webkit-transition: transform .5s ease;
-webkit-transform: translateX(-100%);
}
.slidemenu .menu.visible {
-webkit-transform: translateX(0%);
}
<div style="text-align: right; margin-top: 3em;">
<button id="toggle" style="font-size: 2em;">toggle</button>
</div>
<div class="slidemenu">
<div class="menu">
<p>Some text</p>
</div>
</div>
Here is a workaround
<script language="JavaScript">
var TheDivParentContents
self.window.onload=getDivContents
function getDivContents(){
TheDivParentContents=document.getElementById("TheDivParent").innerHTML;
}
function OnClickHideDiv(){
document.getElementById("TheDivParent").innerHTML="";
}
function OnClickShowDiv(){
document.getElementById("TheDivParent").innerHTML=TheDivParentContents;
}
</script>
<body bgcolor="white">
<input script=JavaScript type=button onclick="OnClickShowDiv()" value="Show Div">
<input script=JavaScript type=button onclick="OnClickHideDiv()" value="Hide Div">
<span id=TheDivParent>
<div>
some text
</div>
</span>
</body>
Note that i place the div that i want to hide inside a Span tag. and that span tag will be used by the functions in the script to save the innerhtml of the div to a global variable.. Hope this works for you.
Related
I have my code from this site: https://isabelcastillo.com/error-info-messages-css
I want that a css message box is shown for 3 seconds after a button click and then the message is fading out.
Here is my code:
.isa_success,
.isa_error {
margin: 8px 0px;
padding: 8px;
position: absolute;
left: 50%;
top: 20%;
transform: translate(-50%, -50%);
}
.isa_success {
color: #4F8A10;
background-color: #DFF2BF;
border-radius: .5em;
opacity: 0;
-webkit-animation: fadeInOut 3s;
animation: fadeInOut 3s;
}
.isa_error {
color: #D8000C;
background-color: #FFD2D2;
border-radius: .5em;
opacity: 0;
-webkit-animation: fadeInOut 3s;
animation: fadeInOut 3s;
}
<button id="handle">Fade</button>
<div id="isa_success">Whatever you want here - images or text</div>
Test
<script type="text/javascript">
function start() {
var slideSource = document.getElementById('isa_success');
document.getElementById('handle').onclick = function () {
slideSource.classList.add('fade');
}}
</script>
This script does not work.
Here is my working code. My main fault was that i have forgot to remove the classelement after a specific time.
Thanks for help!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.fade{
background: red;
opacity:0;
color: #4F8A10;
background-color: #DFF2BF;
border-radius: .5em;
margin: 8px 0px;
padding:8px;
position: absolute;
left: 50%;
top: 20%;
}
.elementToFadeInAndOut {
animation: fadeInOut 3s linear forwards;
}
#keyframes fadeInOut {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
</style>
</head>
<body onload="javascript:start();">
<body>
<script type="text/javascript">
function start() {
var div = document.querySelector(".fade");
var btn = document.querySelector(".fadeButton");
btn.addEventListener("click", function(){
div.classList.add("elementToFadeInAndOut");
setTimeout(function(){div.classList.remove("elementToFadeInAndOut");}, 3000);
});
}
</script>
<button class="fadeButton">Button</button>
<div class="fade">This is a message!</div>
</body>
</html>
You are adding a class 'fade' to the classist but don't have it in the CSS file.
try this
var slideSource = document.getElementById('isa_success');
document.getElementById('handle').onclick = function () {
slideSource.classList.add('fade');
}
.isa_success,
.isa_error {
margin: 8px 0px;
padding: 8px;
position: absolute;
left: 50%;
top: 20%;
transform: translate(-50%, -50%);
}
.isa_success {
color: #4F8A10;
background-color: #DFF2BF;
border-radius: .5em;
opacity: 0;
-webkit-animation: fadeInOut 3s;
animation: fadeInOut 3s;
}
.isa_error {
color: #D8000C;
background-color: #FFD2D2;
border-radius: .5em;
opacity: 0;
-webkit-animation: fadeInOut 3s;
animation: fadeInOut 3s;
}
.fade{
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
<button id="handle">Fade</button>
<div id="isa_success">Whatever you want here - images or text</div>
Test
There is a possibility to do this without Javascript. What's important though is the sequence of the HTML elements.
Here I am using a hidden checkbox to determine whether or not a button (label) was clicked.
#clickMe {
display: none;
}
#clickMeLabel {
padding: 10px;
background-color: lightgreen;
border: none;
border-radius: 10px;
display: inline-block;
}
#clickMe:checked+#clickMeLabel {
background-color: green;
color: white;
}
#isa_success {
color: #4F8A10;
background-color: #DFF2BF;
border-radius: .5em;
opacity: 0;
transition: opacity 3s;
}
#clickMe:checked~#isa_success {
opacity: 1;
}
<input id="clickMe" type="checkbox">
<label for="clickMe" id="clickMeLabel">Click me</label>
<div id="isa_success">Whatever you want here - images or text</div>
Good evening, I'm a beginner front-end developer who is trying to implement sketches of Pinterest for training.
I've found this gif for the signup/login page but I have a major issue for implementing animation, I don't have any idea for reversing the animation when the user clicks on the signup button can anybody tell me how can I reverse an animation?
function animation() {
var element = document.getElementById("containerForm")
element.classList.add("slide")
}
.containerForm {
width:50px;height:50px;background-color:red;
}
.slide {
animation: slide 2s ease-in-out;
position: relative;
animation-fill-mode: forwards;
}
#keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
overflow: hidden;
visibility: visible;
}
}
<div class="containerForm" id="containerForm">
<form></form>
</div>
<button onclick="animation()">click</button>
but as I've said I don't have an idea for the second step
Link of gif
you can add another css class and make use of the animation-direction property.
ie
.slide-back{
animation: slide 2s ease-in-out;
position: relative;
animation-direction: reverse;
}
function animation() {
var element = document.getElementById("containerForm")
element.classList.add("slide")
}
function reverse() {
var element = document.getElementById("containerForm")
element.classList.remove("slide")
}
.containerForm {
width:50px;
height:50px;
background-color:red;
transform: translateX(0);
transition: transform 2s;
}
.slide {
transform: translateX(100%);
}
<div class="containerForm" id="containerForm">
<form></form>
</div>
<button onclick="animation()">click</button>
<button onclick="reverse()">click</button>
transition works too:
example:
*{margin:0;}
#tst {
display: grid;
grid-template-columns: repeat(2, 1fr);
min-height: 100vh;
background: #555;
}
label {
margin: auto;
appearance: button;
cursor: pointer;
min-width: 6em;
text-align: center;
}
#a,
#b {/*hides radios */
position: absolute;
right: 100vw;
}
[for="a"],
#c {
grid-row: 1;
grid-column: 1;
}
#c {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
background: white;
border: solid;
transition: 0.5s;
font-size:2vw;
}
#a:checked~#c {
transform: translatex(0)
}
#b:checked~#c {
transform: translatex(100%)
}
h1 {
margin: auto;
}
#c p[class] {
margin: auto;
grid-column: 1;
grid-row: 2;
transition: 0.25s;
background: inherit;
color: #164fb7;
font-size: 3vw;
}
#c p.b {
opacity: 0;
color: tomato;
}
#b:checked~#c p.b {
opacity: 1
}
/* there were no js nor animation nor absolute positionning ;) */
<div id="tst">
<input id="a" type=radio name=toggle>
<input id="b" type=radio name=toggle>
<label for="a">Left</label>
<label for="b">Right</label>
<div id="c">
<h1>here or there ?</h1>
<p class="a">Standing on the left</p>
<p class="b">Standing on the right</p>
</div>
</div>
Instead of adding a class I suggest using the animation-play-state property and adding event listeners:
one click listener to the button
one animationiteration to the div
simply change the play state from paused to running
Let me show you what I mean:
const element = document.getElementById("containerForm");
const btn = document.querySelector("button");
function animation() {
element.style.animationPlayState = "running";
}
function stopAnimation() {
element.style.animationPlayState = "paused";
}
btn.addEventListener("click", animation);
element.addEventListener("animationiteration", stopAnimation);
.containerForm {
width: 50px;
height: 50px;
background-color: red;
animation: slide 2s ease-in-out infinite alternate paused;
}
#keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
<div class="containerForm" id="containerForm">
<form></form>
</div>
<button>click</button>
I created a landing page where an image will fade on into the screen, then a user can press the arrow, and it will bring them to a different page with more content.
What my goal is, is to get it so that when the user presses the button, the new page slides in to view.
I found an example of what I wanted here: https://tympanus.net/Development/PageTransitions/
I would like to use the "Move to left / from right" transition.... I tried downloading the source file from this website and figuring out how to implement their code into mine, but I was really confused... Does anyone have any suggestions as to how to get this transition to work? I would like to keep it strictly HTML/CS/Java/JQ....
Thanks
* {
margin: 0;
padding: 0;
}
.fade-in {
animation: animationFrames ease 1s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode: forwards;
/*when the spec is finished*/
-webkit-animation: animationFrames ease 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode: forwards;
/*Chrome 16+, Safari 4+*/
-moz-animation: animationFrames ease 1s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode: forwards;
/*FF 5+*/
-o-animation: animationFrames ease 1s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode: forwards;
/*Not implemented yet*/
-ms-animation: animationFrames ease 1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode: forwards;
/*IE 10+*/
}
#keyframes animationFrames {
0% {
opacity: 0;
transform: translate(0px, -25px);
}
100% {
opacity: 1;
transform: translate(0px, 0px);
}
}
#-moz-keyframes animationFrames {
0% {
opacity: 0;
-moz-transform: translate(0px, -25px);
}
100% {
opacity: 1;
-moz-transform: translate(0px, 0px);
}
}
#-webkit-keyframes animationFrames {
0% {
opacity: 0;
-webkit-transform: translate(0px, -25px);
}
100% {
opacity: 1;
-webkit-transform: translate(0px, 0px);
}
}
#-o-keyframes animationFrames {
0% {
opacity: 0;
-o-transform: translate(0px, -25px);
}
100% {
opacity: 1;
-o-transform: translate(0px, 0px);
}
}
#-ms-keyframes animationFrames {
0% {
opacity: 0;
-ms-transform: translate(0px, -25px);
}
100% {
opacity: 1;
-ms-transform: translate(0px, 0px);
}
}
#showcase {
background-image: url('https://images.freecreatives.com/wp-content/uploads/2016/03/Cute-Purple-Background.jpg');
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 20px;
}
#showcase h1 {
font-size: 6vw;
color: #fff;
font-family: passion one;
letter-spacing: 4vw;
margin-left: 4vw;
text-shadow: 2px 2px 3px #000;
}
#showcase h2 {
font-size: 2.5vw;
line-height: 2vw;
color: #fff;
font-family: passion one;
text-shadow: 2px 2px 3px #000;
}
#showcase .button {
font-size: 18px;
text-decoration: none;
color: white;
padding: 10px 20px;
border-radius: 10px;
margin-top: 100px;
background-color: darkgreen;
text-shadow: 2px 2px 3px #000;
}
#showcase .button:hover {
background-color: green;
color: #fff;
}
.hiddendiv {
display: none;
width: 300px;
height: 300px;
background-color: green;
}
.button:focus+.hiddendiv {
display: block;
margin-left: 100px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="wrapper">
<div class="wrapper fade-in">
<header id="showcase">
<div id="background">
<h1>TITLE</h1>
</div>
<h2>2017</h2>
<i class="fa fa-angle-double-right" style="font-size:36px"></i>
</header>
I implemented something similar using this jQuery plugin...
http://joaopereirawd.github.io/animatedModal.js/
As you can see in the plugin documentation, you can have your new window content already created and when you click the arrow button, the plugin will make it appear using the animation you selected.
In my case I need the new window content to be generated dinamically the button is pressed, so I create a click event in that button that generates all the new window content inside of a div (and a new link that will be responsible of really triggering the animated modal), and append all to the DOM. Then I create the animatedModal element associated to the generated div, and trigger the click event in the new link with the click() function.
For your case (include the css and javascript files following the following the plugin documentation)...
HTML:
<a id="linktonewwindow" href="#newwindow" class="button"><i class="fa fa-angle-double-right" style="font-size:36px"></i></a>
<div id="newwindow">
<!-- IMPORTANT. Create the element to close the window!!! -->
<button class="close-newwindow"><i class="fa fa-stop fa-fw" aria-hidden="true"></i></button>
<div class="yournewwindowcontent">
<!-- Put your new window content here-->
</div>
</div>
JQUERY:
$("#linktonewwindow").animatedModal({
modalTarget:'newwindow',
animatedIn:'bounceInLeft', // Choose the animations you prefer
animatedOut:'bounceOutLeft',
color:'#999999', // Background color of the new window
beforeOpen: function() {
},
afterOpen: function() {
},
beforeClose: function() {
},
afterClose: function() {
}
});
I hope it helps
I have created the following code to display a popup, and it works fine with the animation I added afterwards to have a pop-out effect. However, if I close it and attempt to reopen it, the animation does not show? the modal just instantly appears.
How do I fix it?
<div id="overlay">
<div class="popout">
<p>Content you want the user to see goes here.</p>
Click here to [<a href='#' onclick='overlay()'>close</a>]
</div>
</div>
<style>
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
}
#overlay div {
width:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
}
.popout {
animation: popout 1s ease;
-webkit-animation: popout 1s ease;
}
#keyframes popout {
from{transform:scale(0)}
80%{transform:scale(1.2)}
to{transform:scale(1)}
}
#-webkit-keyframes popout {
from{-webkit-transform:scale(0)}
80%{-webkit-transform:scale(1.2)}
to{-webkit-transform:scale(1)}
}
</style>
<script>
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
<a href='#' onclick='overlay()'>Click here to show the overlay</a>
Look at this please
<div id="overlay">
<div>
<p>Content you want the user to see goes here.</p>
Click here to [<a href='#' onclick='overlay()'>close</a>]
</div>
</div>
<style>
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
text-align: center;
z-index: 1000;
}
#overlay div {
width: 300px;
margin: 100px auto;
background-color: #fff;
border: 1px solid #000;
padding: 15px;
text-align: center;
}
.popout {
visibility: visible !important;
animation: popout 1s ease;
-webkit-animation: popout 1s ease;
-moz-animation: popout 1s ease;
-ms-animation: popout 1s ease;
}
#keyframes popout {
from {
transform: scale(0)
}
80% {
transform: scale(1.2)
}
to {
transform: scale(1)
}
}
#-webkit-keyframes popout {
from {
-webkit-transform: scale(0)
}
80% {
-webkit-transform: scale(1.2)
}
to {
-webkit-transform: scale(1)
}
}
#-moz-keyframes popout {
from {
-moz-transform: scale(0)
}
80% {
-moz-transform: scale(1.2)
}
to {
-moz-transform: scale(1)
}
}
#-ms-keyframes popout {
from {
-ms-transform: scale(0)
}
80% {
-ms-transform: scale(1.2)
}
to {
-ms-transform: scale(1)
}
}
</style>
<script>
function overlay() {
el = document.getElementById("overlay");
var clases = el.className;
if (clases.indexOf('popout') == -1) {
el.className = 'popout';
} else {
el.className = '';
}
}
</script>
<a href='#' onclick='overlay()'>Click here to show the overlay</a>
https://jsfiddle.net/xapdhxv3/1/
I have an animation in CSS that spins an image around its centre. I want to be able to change animation-timing-function and -webkit-animation-timing-function etc. programmatically in JavaScript. Here is the code and what I have tried:
<div id="content"> <div id="container">
<div id="outerQ"></div> <div id="innerQ">
</div>
</div>
<div id="logo"></div>
<span id="sp"></span>
<input type="button" id="linear" value="Linear"/>
<input type="button" id="ease" value="Ease in and out"/>
</div>
SCRIPT :
<head>
<script src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script>
$(document).ready(function ()
{
$("#linear").click(function ()
{
$("#innerQ").css("-webkit-animation-timing-function", "linear");
});
$("#ease").click(function ()
{
$("#innerQ").css("-webkit-animation-timing-function", "ease-in-out");
});
});
</script>
CSS:
<style>
body
{
background: #018a9a;
margin: 20px;
}
#content
{
width: 566px;
height: 120px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -80px;
margin-left: -278px;
}
#outerQ
{
width: 96px;
height: 120px;
background-image: url('outerQ.png');
}
#innerQ
{
width: 96px;
height: 120px;
background-image: url('innerQ.png');
position: absolute;
left: 0;
top: 0;
}
#container
{
width: 96px;
height: 120px;
float: left;
}
#logo
{
width: 470px;
height: 120px;
background-image: url('LogoLarge.png');
float: left;
}
#sp
{
clear: both;
}
#keyframes spin
{
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#-webkit-keyframes spin
{
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes spin
{
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#innerQ
{
/*IE 10*/
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 1.3s;
animation-play-state: running;
transform-origin: 48px 50.5px;
/*Chrome*/
-webkit-animation-name: spin;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1.3s;
-webkit-animation-play-state: running;
-webkit-transform-origin: 48px 50px;
/*Firefox*/
-moz-animation-name: spin;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration: 1.3s;
-moz-animation-play-state: running;
-moz-transform-origin: 48px 50px;
}
</style>
</head>
<body>
HTML:
<input type="button" id="linear" value="Linear"/>
<input type="button" id="ease" value="Ease in and out"/>
</div>
</body>
I am using webkit here because I use Chrome, clicking the buttons do nothing. I also want to change 'animation-iteration-count' and 'animation-duration' but these don't work. The only one that does work is '-webkit-animation-play-state'. I have also tried:
$("#innerQ").style.WebkitAnimationTimingFunction = "ease-in-out";
That doesn't work too. Is there a way of changing these properties after the page has loaded? Thanks
function function_name() {
document.getElementById('innerQ"').className = "innerQ";
}
CSS
.innerQ
{
//you css code(put all timing stuff here!!!)
}
//Step 1--->Put you desired css animation in a css class
//Step 2--->add that css class with javascript(className)
//Step 3---->Call function animation on click of the button