sidebar navigation text not smooth while transition - javascript

i try to change css but not work for text short text is ok but i have to put long paragraph when click it not smooth while transition working i use template from w3school, i want text show up smooth like button or short text please advise me how I should use it to remember for next time i can help in community if i saw someone ask like me thank you.
/* Set the width of the side navigation to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "400px";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
font-family: Gotham;
color: #818181;
display: block;
transition: 0.3s
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
<body bgcolor="#E6E6FA">
<div id="mySidenav" class="sidenav">
×
<p style=color:white>TEST TEST TEST TEST TEST TEST TEST TEST
TEST TEST TEST TEST
TEST TEST TEST TEST
TEST TEST TEST TEST
TEST TEST TEST TEST</p>
</div>
<span onclick="openNav()"><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" width="40px" style="padding-top: 40px; padding-left: 40px;"></span>
<div id="main">
</div>

You don't need two separate JavaScript functions. Only one called toggleNav
Use Element.classList.toggle() to toggle a CSS class
Don't animate the width. Use transform: translateX(-100%) to hide the Nav, and translateX(0%) to show (open).
Don't use links if you actually want buttons. Links (Anchors) are used to navigate
Don't use inline on* JS attributes and style attributes
const toggleNav = () => {
document.querySelector("#mySidenav").classList.toggle("is-open");
};
document.querySelectorAll(".toggleNav").forEach(el => {
el.addEventListener("click", toggleNav)
});
/* QuickReset */ * {margin:0; box-sizing: border-box;}
#mySidenav {
position: fixed;
overflow-x: hidden;
width: calc(100vw - 200px); /* try not to use fixed px */
height: 100vh;
z-index: 200;
top: 0;
left: 0;
padding: 60px;
background-color: #111;
color: #fff;
transition: 0.5s;
transform: translateX(-100%); /* hide it by minus own width */
}
#mySidenav.is-open {
transform: translateX(0%); /* show it */
}
.toggleNav {
padding: 1rem 1.3rem;
background: none;
border: none;
font-family: Gotham;
font-size: 2rem;
cursor: pointer;
}
.toggleNav:hover {
color: #999;
}
#mySidenav .toggleNav {
position: absolute;
top: 0;
right: 0;
color: #777;
}
<div id="mySidenav">
<button type="button" class="toggleNav">✕</button>
<p>
TEST TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST TEST
</p>
</div>
<button type="button" class="toggleNav">☰</button>
<div id="main"></div>

If I haven't understood it wrong you want to make text word position won't change then write the following code:
<p id="sidenavText">TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</p>
Set width on the text too
var sidenavWidth = 400;
document.querySelector("#sidenavText").style.width = sidenavWidth + "px";
function openNav() {
document.getElementById("mySidenav").style.width = sidenavWidth + "px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
var sidenavWidth = 400;
document.querySelector("#sidenavText").style.width = sidenavWidth + "px";
function openNav() {
document.getElementById("mySidenav").style.width = sidenavWidth + "px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
font-family: Gotham;
color: #818181;
display: block;
transition: 0.3s
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
<body bgcolor="#E6E6FA">
<div id="mySidenav" class="sidenav">
×
<p id="sidenavText" style="color:white">TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</p>
</div>
<span onclick="openNav()"><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" width="40px" style="padding-top: 40px; padding-left: 40px;"></span>
<div id="main">
</div>

Related

Unable to implement a side Navbar using React

I wanted to implement a hamburger side navbar using react but I am unable to implement the changes that must be displayed on Clicking the hamburger. I am still learning React so please explain what am I doing wrong and feel free to suggest an alternative approach. Here is my code.
import React from 'react';
import * as FaIcons from "react-icons/fa";
class Navbar extends React.Component {
constructor() {
super();
this.state = {
navbarState : 1,
style : {}
}
}
openNav() {
this.setState({"width" : "250px"});
}
closeNav() {
this.setState({"width" : "0px"});
}
handleClick() {
this.setState((prevState) => {
if(prevState.navbarState === 0) {
return {navbarState : 1, style : {width : '250px'}};
}
else {
return {navbarState : 0, style : {width : '0px'}};
}
});
}
render() {
return (
<div>
<div id="mySidenav" className="sidenav" style={this.state.style} >
{console.log(this.state.navbarState)}
<a href="#" className="closebtn" onClick={() => this.handleClick}>×</a>
About
Services
Clients
Contact
</div>
<span onClick={() => this.handleClick}>
{/* <FaIcons.FaBars /> */}
<div className = "hamburger">
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
</div>
</span>
</div>
);
}
}
export default Navbar;
And my CSS is as follows :
.hamburger{
position: absolute;
cursor: pointer;
margin: 5px;
right: 5%;
top: 5%;
}
.line{
width: 30px;
height: 3px;
background: white;
margin: 5px;
}
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: black; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
.sidenav-active {
height: 100%; /* 100% Full-height */
width: 250px; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: black; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a, .sidenav-active a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: white;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .sidenav-active a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn, .sidenav-active .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
First it looks like as you're using a Class-Based Component and you're not binding your handleClick function correctly. Solution to this is either to bind it in your constructor or use an arrow function like so:
handleClick = () => { ... }
This will apply similarly to your other two functions. For further information on Arrow Functions and Binding your functions within Class-Based Components see: https://reactjs.org/docs/faq-functions.html
Secondly, I suspect that handleClick being called in your <span>. Instead of
<span onClick={() => this.handleClick} ... />
Try
<span onClick={this.handleClick} ... /> or <span onClick={() => this.handleClick()} ... />
Let me know if this helps!

How do I get the elements to go back to their correct position after media query?

I'm having trouble getting some list elements back to their right place after resizing the window back from "#media screen and (max-width: 800px)".
These list elements are as default centered in line in the header and my goal is to have them displayed in my sidebar on smaller devices.
Right now everything works great when resizing from big screen to small screen but then I use some javascript in small screen mode to open and close the side menu and when I then try to resize it back to big screen size the list elements doesn't go back to where they are supposed to be.
They seem to stay aligned left of the page and not centered in line anymore.
Also I've checked for overrides in the css that could cause this problem but there seem to be none and it's strange that it works before I use javascript.
// för att öppna sidomenyn med 250 width
function openNav() {
document.getElementById("minHuvudmeny").style.width = "250px";
}
function closeNav() { <!--Script för att stänga sidomenyn med 0 width-->
document.getElementById("minHuvudmeny").style.width = "0";
}
body {
text-align: center;
background-image: url(bakgrund.jpg);
background-position: bottom;
background-size: auto;
font-family: 'Cuprum', sans-serif;
left: 0;
margin: 0; }
.navknapp { ****Here i put the nav list inline****
display: inline;
margin: 10px; }
#media screen and (max-width: 800px) {
.huvudmeny {
height: 100%;
width: 0;
background-color: #fff;
position: fixed;
z-index: 1;
overflow-x: hidden;
transition: 0.5s;
top: 0;
left: 0;
padding: 0;
padding-top: 60px;
}
.visameny {
display: block;
font-size: 50px;
text-align: left;
cursor: pointer;
position: fixed;
margin-left: 10px;
top: 0;
}
.ejvisameny {
display: block;
}
.huvudmeny .navknapp { Here i put the navlist back to blocks
display: block;
border: 1px solid black;
transition: 0.3s
}
.huvudmeny .navknapp:hover,
.offcanvas .navknapp:focus {
background-color: red;
}
.huvudmeny .ejvisameny {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
}
<header>
<h1 id=huvudRubrik>Välkommen till Daniels sida</h1>
<nav id="minHuvudmeny" class="huvudmeny">
✖
<li class="navknapp">Home</li>
<li class="navknapp">News</li>
<li class="navknapp">Contact</li>
<li class="navknapp">About</li>
</nav>
<span class="visameny" onclick="openNav()">☰</span>
</header>
I suggest that you add another media query for desktop (min-width:801px) where you assign a 100% width to a nav with !important.
#media screen and (min-width: 801px) {
.huvudmeny {
width:100% !important;
}
}
Thus, you'll override a Zero width of a nav, that sticks the menu to left edge.
demo

Overlay text doesn't hide, launching and closing of overlay nav not working

Currently I have a header, subheader, CSS-based menu, and then the text of an overlay display which should be hidden by default.
What I expected my code to produce was the header, subheader, CSS-based menu, then an "open" button that launches the overlay as in this example.
This Fiddle gives a reproducible example.
Presumably some of my other HTML or CSS is breaking the overlay, but it's unclear exactly how.
This is the key HTML:
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<!-- Use any element to open the sidenav -->
<span onclick="openNav()">open</span>
Key JavaScript:
/* Set the width of the side navigation to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
and CSS:
/* The Overlay (background) */
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 100%;
width: 0;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
background-color: rgb(0,0,0); /* Black fallback color */
background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
/* Position the content inside the overlay */
.overlay-content {
position: relative;
top: 25%; /* 25% from the top */
width: 100%; /* 100% width */
text-align: center; /* Centered text/links */
margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}
/* The navigation links inside the overlay */
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block; /* Display block instead of inline */
transition: 0.3s; /* Transition effects on hover (color) */
}
/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
/* Position the close button (top right corner) */
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
Well you only set the width of your div to 0px. This won't hide your div.
/* Set the width of the side navigation to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
if you do the following
function closeNav() {
document.getElementById("mySidenav").style.visibility = "hidden";
}
It will hide.
you can read more about the css visibility property here:
http://www.w3schools.com/jsref/prop_style_visibility.asp

Javascript function delete media query effect

I am working on a website that's look like this image:
The idea is when clicking on the button of the aside menu the aside menu will close and the bigwrapper will expand its size to fit the blank space so the result will look like this
I have written a function in Javascript to this and it just worked right, however, I wanted to make a media query that let the menu and the menu button disappear when the screen size get less than 840px it also worked
Now the problem is if someone clicked the button before the media query executed the media query effect will get disabled I think that javascript function delete the media query effect how can I fix that here is the code
<div id="mySidenav" class="sidenav">
<img class="menuicons" src="images/icons/menu/home2.png" alt="">Home
<img class="menuicons" src="images/icons/menu/offer.png" alt="">Offers
<img class="menuicons" src="images/icons/menu/cart4.png" alt="">Cart
<img class="menuicons" src="images/icons/menu/about.png" alt="">About us
<img class="menuicons" src="images/icons/menu/contact us.png" alt="">Contact us
</div>
<div id="menu_button" onclick="nav();categoriesScaler()">
<img src="images/icons/menu2.png" alt="Not availabale" />
</div>
<div id="bigwrapper">
<!--Some content goes here-->
</div>
here is the function
<script>
var hidden = false;
function nav()
{
if(hidden == false)
{
closeNav();
hidden = true;
}
else
{
openNav();
hidden = false;
}
}
function openNav()
{
document.getElementById("mySidenav").style.width = "30%";
document.getElementById("bigwrapper").style.width = "60%";
document.getElementById("bigwrapper").style.marginLeft = "35%";
}
/* Close/hide the sidenav */
function closeNav()
{
document.getElementById("mySidenav").style.width = "0";
document.getElementById("bigwrapper").style.width = "90%";
document.getElementById("bigwrapper").style.marginLeft = "5%";
}
</script>
here is the css for bigwrapper and sidenav at the end will be the media query
/* The side navigation menu */
.sidenav {
height: 800px; /* 100% Full-height */
width: 30%; /* 0 width - change this with JavaScript */
/*position: relative; /* Stay in place */
z-index: 1; /* Stay on top */
/* top: 0;
left: 0;*/
background-color: #292929; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.4s; /* 0.5 second transition effect to slide in the sidenav */
float: left;
box-sizing: border-box;
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
margin-bottom: 25px;
transition: 0.3s;
font-size: 30px;
font-weight: bold;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
/*big wrapper*/
#bigwrapper
{
border : 1px solid #000;
width : 60%;
margin : 0 5% 0 35%;
min-height: 800px;
background: #F5F5F5;
padding: 3%;
box-sizing: border-box;
transition: 0.4s;
}
here is the media query
#media screen and (max-width : 840px)
{
.sidenav,#menu_button
{
display: none;
}
#bigwrapper
{
width: 90%;
margin-left: 5%;
}
}
Sorry cause the question is too long.
The widths set by your openNav and closeNav functions seem to be in line with the css, so we can simply use those functions based on width, testing using resize event.
I think the following should work, and the nav should reappear when the browser goes back to > 840px. Add this at the bottom of your script:
window.onresize=function(){
if (window.outerWidth <= 840) {
closeNav();
} else {
openNav();
}
}
Also your button is not visible (outside media query), so add this to your CSS:
#menu_button {
display: block; /* or similar style */
}
BTW, this would be a lot simpler using a class based system. Instead of setting styles you could add classes. When clicking the button you could add .open class to .sidenav (and next button click remove .open). Then in your media queries you could style .sidenav.open { display:none} You could do similar things with the width of the other elements. You can also check if .sidenav has this .open class instead of using var hidden. Much simpler.

Animate.css and Typed.js - Hide typed till animation finishes.

I'm using Bootstrap, Animate.css and Typed.js to build a webpage. The effect I want is the page to be blank, the nav to slide down using animate.css fadeInDown when that completes the Typed.js line to start writing and when that completes a chevron (provided by FontAwesome) to animate in using animate.css bounceInUp.
I've written the following code but everything just happens at once and the chevron doesn't animate at all.
<body>
<!--NAV BAR SECITON-->
<nav class="navbar navbar-fixed-top">
<div class="container-fluid animated fadeInDown">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="companylogo.png" /></a>
<ul class="nav navbar-nav pull-right">
<li><h3>Blog</h3></li>
</ul>
</div>
</div>
</nav>
<!-- Main page banner -->
<div class="jumbotron">
<div class="container text-center special">
<div class="centermaintextline vertical-center">
<div class="showAndTell">
<h1>
<span class="maintextline"></span>
</h1>
</div>
</div>
<div class="text-center bottom-box">
<h1><i class="fa fa-chevron-down"></i></h1>
</div>
</div>
</div>
<!--Script that should hide the section to be typed.js so the flashing cursor doesn't appear till ready-->
<!--Also hide the chevron-->
<script>
$(document).ready($('.showAndTell').hide());
$(document).ready($('.fa-chevron-down').hide());
</script>
<script src="typed.js" type="text/javascript"></script>
<!-- thanks http://www.mattboldt.com/ -->
<script>
/*This function will execute typed.js and then show the chevron and animate it-*/
function typingEffect()
{
$(".maintextline").typed({
strings: ["Stuff to be typed"],
typeSpeed: 100,
startDelay: 1000,
});
$('.fa-chevron-down').show();
$('.fa-chevron-down').add('animited infinite bounceInUp');
}
/*function that should show the block to be typed.js and then execute the function that will typed.js*/
function showTypingEffect()
{
$('.showAndTell').show();
typingEffect();
}
/*call the previous function to get things going after the navbar finishes animating*/
$(document).ready($('.container-fluid').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', showTypingEffect()));
</script>
</body>
CSS Stuff
/*********************************************************
* *
* Stuff that affects the first panel *
* *
*********************************************************/
/*Makes .jumbotron occupy the full window*/
.jumbotron
{
width: 100%;
height:100%;
padding-top: 0px;
padding-bottom: 0px;
}
.jumbotron .container
{
width:100%;
height:100%;
padding-left: 0px;
padding-right:0px;
}
/*Makes things center vertically in the page, funnily enough*/
.vertical-center
{
min-height: 85%; /* Fallback for vh unit */
min-height: 85vh; /* You might also want to use
'height' property instead.
/* Make it a flex container */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* Align the bootstrap's container vertically */
-webkit-box-align : center;
-webkit-align-items : center;
-moz-box-align : center;
-ms-flex-align : center;
align-items : center;
/* In legacy web browsers such as Firefox 9
we need to specify the width of the flex container */
width: 100%;
/* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
hence the bootstrap's container won't be aligned to the center anymore.
Therefore, we should use the following declarations to get it centered again */
-webkit-box-pack : center;
-moz-box-pack : center;
-ms-flex-pack : center;
-webkit-justify-content : center;
justify-content : center;
}
.vertical-center
{
min-height: 85%; /* Fallback for browsers do NOT support vh unit */
min-height: 85vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
/* Remove the default bottom margin of .jumbotron */
.jumbotron .vertical-center
{
margin-bottom: 0;
}
/*Everything below here styles the text in the cetner of the page*/
.special
{
background: transparent;
color: #fff;
font-family: "ocr-a-std", san-serif;
text-transform: uppercase;
}
/*Make the main keyword underline */
.special a, .special a:hover, .special a:visited
{
text-decoration: underline;
color:#fff;
}
.bottom-box
{
bottom: 0;
margin-bottom: 50px;
position: absolute;
width:100%;
}
.fa-chevron-down
{
}
/*********************************************************
* *
* Stuff that affects the navigation bar *
* *
*********************************************************/
.nav
{
}
/*Style the top bar*/
.navbar-fixed-top, .navbar-fixed-top a, .navbar-fixed-top a:hover, .navbar-fixed-top a:visited, .navbar-fixed-top li
{
background-color: transparent;
border-color: transparent;
font-family: "futura-pt", sans-serif;
color: #fff;
font-size: 22px;
}
.navbar-fixed-top .navbrand
{
color: #fff;
}
.navbar-fixed-top
{
position: absolute;
}
.nav h4
{
margin-right: 0.3em;
}
/*********************************************************
* *
* Makes the cursor blink for the typed.js *
* *
*********************************************************/
.typed-cursor{
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
#keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
see jQuery ready documentation
The .ready() method is typically used with an anonymous function.
example :
<script>
$(document).ready(function(){
$('.showAndTell').hide();
$('.fa-chevron-down').hide();
$('.container-fluid').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', showTypingEffect);
});
</script>

Categories