sidebar showing when the page loads for the first time

sidebar showing when the page loads for the first time - javascript

I'm trying to add a sidebar navigation panel to my webpage. Doing it using js html and css.When i load the page for the first time it shows the sidebar even before clicking on the icon to open it. How can i prevent opening of the sidebar automatically when the page loads for the first time? thanks in advance!!! codes are as follows...
$(document).ready(function(){
$(".fa-times").click(function(){
$(".sidebar_menu").addClass("hide_menu");
$(".toggle_menu").addClass("opacity_one");
});
$(".toggle_menu").click(function(){
$(".sidebar_menu").removeClass("hide_menu");
$(".toggle_menu").removeClass("opacity_one");
});
});
/*side navigation bar*/
.toggle_menu{
cursor:pointer;
z-index: 1000000;
opacity: 0;
}
.sidebar_menu{
position: fixed;
width: 20em;
margin-left: 0px;
overflow: hidden;
height: 100vh;
max-height: 100vh;
background-color: rgba(17,17,17,0.9);
opacity: 0.9;
transition: all 0.3s ease-in-out;
left:0px;
}
.fa-times{
right: 1em;
top : 1em;
opacity: 0.7;
cursor: pointer;
position: absolute;
color: #8bea8b;
transition: all 0.3s ease-in-out;
}
.fa-times:hover{
opacity: 1;
}
.hide_menu{
margin-left: -20em;
}
.opacity_one{
opacity: 1;
transition: all 0.3s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
<title>Forestpin</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="fullpage/jquery.fullPage.css" />
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
<script src="fullpage/vendors/jquery.easings.min.js"></script>
<!-- This following line is only necessary in the case of using the option `scrollOverflow:true` -->
<script type="text/javascript" src="fullpage/vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="fullpage/jquery.fullPage.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="sidemenu.js"></script>
</head>
<body>
<!--top navigation bar-->
<nav class="navbar navbar-default header navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="images/logofpin.png" id="logofpin">
</a>
<img alt="Logo" src="images/logo2.png" class="navbar-brand toggle_menu" id="logo2">
<div class="sidebar_menu">
<i class="fa fa-times"></i>
</div>
</div>
</div>
</nav>

Just add the class opacity_one to your Logo div, and hide_menu to the sidebar div. Check the updated snippet below!
$(document).ready(function(){
$(".fa-times").click(function(){
$(".sidebar_menu").addClass("hide_menu");
$(".toggle_menu").addClass("opacity_one");
});
$(".toggle_menu").click(function(){
$(".sidebar_menu").removeClass("hide_menu");
$(".toggle_menu").removeClass("opacity_one");
});
});
/*side navigation bar*/
.toggle_menu{
cursor:pointer;
z-index: 1000000;
opacity: 0;
}
.sidebar_menu{
position: fixed;
width: 20em;
margin-left: 0px;
overflow: hidden;
height: 100vh;
max-height: 100vh;
background-color: rgba(17,17,17,0.9);
opacity: 0.9;
transition: all 0.3s ease-in-out;
left:0px;
}
.fa-times{
right: 1em;
top : 1em;
opacity: 0.7;
cursor: pointer;
position: absolute;
color: #8bea8b;
transition: all 0.3s ease-in-out;
}
.fa-times:hover{
opacity: 1;
}
.hide_menu{
margin-left: -20em;
}
.opacity_one{
opacity: 1;
transition: all 0.3s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
<title>Forestpin</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="fullpage/jquery.fullPage.css" />
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
<script src="fullpage/vendors/jquery.easings.min.js"></script>
<!-- This following line is only necessary in the case of using the option `scrollOverflow:true` -->
<script type="text/javascript" src="fullpage/vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="fullpage/jquery.fullPage.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="sidemenu.js"></script>
</head>
<body>
<!--top navigation bar-->
<nav class="navbar navbar-default header navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="images/logofpin.png" id="logofpin">
</a>
<img alt="Logo" src="images/logo2.png" class="navbar-brand toggle_menu opacity_one" id="logo2">
<div class="sidebar_menu hide_menu">
<i class="fa fa-times"></i>
</div>
</div>
</div>
</nav>

Related

How can I change text animations so that they just show up in their own space?

I was adding some animations with CSS to the site I was working on. But the overflow: hidden attribute doesn't seem to work the way I expected it should. Here's my code.
.jumbotron {
height: 100%;
height: 100vh;
align-items: center;
display: flex;
position: relative;
}
.sty {
display: inline-block;
position: relative;
}
.sty1 {
position: relative;
animation: firanim 1.5s ease-in-out;
overflow: hidden;
}
.sty2 {
position: relative;
animation: secanim 1s ease-in-out;
overflow: hidden;
}
#keyframes firanim {
from {top:-50px;}
to {top:0px;}
}
#keyframes secanim {
from {left:-55vw;}
to {left:0px;}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" type="text/css">
<!-- EndCSS -->
<title>lorem ipsum</title>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark text-white sticky-top">
<a class="navbar-brand" href="#">Under Development</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavId">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Follow</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron justify-content-center">
<div class="text-monospace sty">
<h1 class="display-3">welcome<span class="text-danger">!</span></h1>
<div class="sty1">
<span class="lead">lorem ipsum lorem <span class="text-warning">LOREM IPSUM.</span></span>
</div>
<div class="sty2">
<span class="lead">lorem ipsum lorem ipsum lorem.</span>
</div>
</div>
</div>
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- EndJS -->
</body>
</html>
So is there any additional class missing in my code or anything wrong I am using? Because I was expecting the span element with .lead class to just show in his own space not like some text flying over to the place from somewhere. I am hoping you'll get what i wanted to say.

You are animating the whole box (.sty1 and .sty2), the text (.lead) its not outside the (.sty1 and .sty2) thats why its not getting hidden by overflow: hidden
you need to keep the (.sty1 and .sty2) in thier place and animate .lead
try this
.jumbotron {
height: 100%;
height: 100vh;
align-items: center;
display: flex;
position: relative;
}
.sty {
display: inline-block;
position: relative;
}
.sty1 {
overflow: hidden;
}
.sty2 {
overflow: hidden;
}
.sty1 .lead {
position: relative;
animation: firanim 1.5s ease-in-out;
}
.sty2 .lead {
position: relative;
animation: secanim 1s ease-in-out;
}
#keyframes firanim {
from {
top: -50px;
}
to {
top: 0px;
}
}
#keyframes secanim {
from {
left: -55vw;
}
to {
left: 0px;
}
}

your animation it's set on the .leads container(.sty1 and .sty2), so that's the one that it's moving , your lead are moving along with it, to fix it you can wrap those in a div with a class that will have its overflow to hidden, like this
I added a animation-container and set overflow:hidden, see the updated html
.jumbotron {
height: 100%;
height: 100vh;
align-items: center;
display: flex;
position: relative;
}
.sty {
display: inline-block;
position: relative;
}
.sty1 {
position: relative;
animation: firanim 1.5s ease-in-out;
overflow: hidden;
}
.sty2 {
position: relative;
animation: secanim 1s ease-in-out;
overflow: hidden;
}
.animation-container {
overflow: hidden;
}
#keyframes firanim {
from {
top: -50px;
}
to {
top: 0px;
}
}
#keyframes secanim {
from {
left: -55vw;
}
to {
left: 0px;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" type="text/css">
<!-- EndCSS -->
<title>Anurag Srivastava - Portfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark text-white sticky-top">
<a class="navbar-brand" href="#">Under Development</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavId">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Follow</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron justify-content-center">
<div class="text-monospace sty">
<h1 class="display-3">welcome<span class="text-danger">!</span></h1>
<div class="animation-container">
<div class="sty1">
<span class="lead">lorem ipsum lorem <span class="text-warning">LOREM IPSUM.</span></span>
</div>
</div>
<div class="sty2">
<span class="lead">lorem ipsum lorem ipsum lorem.</span>
</div>
</div>
</div>
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- EndJS -->
</body>
</html>

Try the following HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" type="text/css">
<!-- EndCSS -->
<title>Anurag Srivastava - Portfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark text-white sticky-top">
<a class="navbar-brand" href="#">Under Development</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavId">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Follow</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron justify-content-center">
<div class="text-monospace sty">
<h1 class="display-3">welcome<span class="text-danger">!</span></h1>
<div class="sty1">
<span class="lead_1">lorem ipsum lorem <span class="text-warning">LOREM IPSUM.</span></span>
</div>
<div class="sty2">
<span class="lead_2">lorem ipsum lorem ipsum lorem.</span>
</div>
</div>
</div>
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- EndJS -->
</body>
</html>
And the following CSS
.jumbotron {
height: 100%;
height: 100vh;
align-items: center;
display: flex;
position: relative;
}
.sty {
display: inline-block;
position: relative;
}
.sty1 {
overflow: hidden;
}
.lead_1{
animation: firanim 1.5s ease-in-out;
position: relative;
}
.lead_2{
position: relative;
animation: secanim 1s ease-in-out;
}
.sty2 {
overflow: hidden;
}
#keyframes firanim {
from {top:-50px;}
to {top:0px;}
}
#keyframes secanim {
from {left:-55vw;}
to {left:0px;}
}
Hope it helps! :)

Inability to Toggle a Sidebar Using JS

I've all my CSS and Javascript inside my HTML file on Django which looks as follows:
<!doctype html>
<html lang="en">
<head>
<title>Dashboard</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script>
function toggleSidebar(){
document.getElementsByClassName("sidebar");
}
</script>
<style type="text/css">
.toggle-btn {
position:absolute;
left:180px;
top:70px
}
.toggle-btn span {
display:block;
width:30px;
height:5px;
background:#000000;
margin: 5px 0px;
}
.sidebar {
height:100%;
width:160px;
position: fixed;
z-index:1;
top:0;
let:0;
background-color:#111;
overflow-x: hidden;
padding-top:70px;
}
.sidebar.active {
left:0px
}
.sidebar a {
padding:6px 8px 6px 16px;
text-decoration: none;
font-size:18px;
color: #818181;
display:block;
}
.sidebar a:hover {
color:#ffffff;
}
</style>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="toggle-btn">
<span></span>
<span></span>
<span></span>
</div>
<div class="sidebar">
Categories
Test 1
Test 2
Test 3
Test 4
</div>
</body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="#">Home.com</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Logout</a>
</div>
</div>
</div>
</nav>
<section class="hero">
<div class="hero-inner">
<h1>Centered Text</h1>
</div>
</section>
</header>
</body>
</html>
I wanted to toggle the sidebar, that means triggering a hide function when someone clicks on the hamburger menu indicated by the spann tag, as you can probably tell by the following:
<script>
function toggleSidebar(){
document.getElementsByClassName("sidebar");
}
</script>
So far it's not working yet as excepted, given that I'm an absolute beginner to CSS & Javascript. I would be super appreciative if someone could point out the things I might have done wrong.
In CodePen

I could fix the toggle functionality, hope this helps:
function toggleSidebar() {
var x = document.getElementsByClassName("sidebar")[0];
if(x.classList.contains('active')) {
x.classList.remove('active')
return;
}
x.classList.add('active')
}
if you check the sidebar div you'll see that class is being added and removed on toogle

You can use jQuery's toggle method. You need to have an onclick event on your .toggle-button with the name of your method (toggleSidebar), so it knows to call it when it's clicked.
You can also add an EventListener to your button instead of onclick.
.toggle-btn {
position: absolute;
left: 180px;
top: 70px;
}
.toggle-btn span {
display: block;
width: 30px;
height: 5px;
background: #000000;
margin: 5px 0px;
}
.sidebar {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 70px;
}
.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 18px;
color: #818181;
display: block;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
function toggleSidebar() {
$(".sidebar").toggle();
}
</script>
</head>
<body>
<div class="toggle-btn" onclick="toggleSidebar()">
<span></span>
<span></span>
<span></span>
</div>
<div class="sidebar">
Categories
Test 1
Test 2
Test 3
Test 4
</div>
</body>

why background color not changing?

I am using bootsrap in my html .I want to change the background color of my div when screen resolution change from large to medium or small .I added class but it not reflect when i change my screen resolution .Here is my code
http://plnkr.co/edit/6sSYngN0hn2tZZ1wDEML?p=preview
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional Bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>
<style>
.col-lg-12{
height: 50px;
background: red !important;
}
.col-md-12{
height: 50px;
background: yellow !important;
}
.col-xs-12{
height: 50px;
background: black !important;
}
.col-sm-12{
height: 50px;
background: blue !important;
}
</style>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
hi
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

it wasn't working because you defined your CSS properties without media-queries. as all the classes were added to a common DIV, the CSS property with highest specificity was getting applied.
Below is the solution to make it work.
#media (max-width: 767px) {
.col-xs-12 {
height: 50px;
background: black !important;
}
}
#media (min-width: 768px) {
.col-sm-12 {
height: 50px;
background: blue !important;
}
}
#media (min-width: 992px) {
.col-md-12 {
height: 50px;
background: yellow !important;
}
}
#media (min-width: 1200px) {
.col-lg-12 {
height: 50px;
background: red !important;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional Bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
hi
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

CSS animation and Jquery2

I need help making an interactive website, similar to briandelaney.com .
I especially want to incorporate the slide effect between links that the designer used. I read his code but I am not fluent in Javascript, but am familiar with Jquery.
I want to slide my menu when a link is clicked. How do I animate the CSS transforms with Javascript after this input? The section of code I want animated is on JSFiddle. Here's the code for the animation http://jsfiddle.net/1pc4f081/3/.
<section>
<div class='homecard' style="height:815px;">/* Initially, the menu is a card in the center of the page. I want this to slide to the top of the page when a link is clicked */
<div class="menu home appear" id="mainmenu">
<ul>
<li class="hover-effect1"> <a href="/about" class="main-menu about-link">
<span class="effect" data-hover="About">
<span class="what">
<span> About</span>
</span>
</span>
</a>
<div class="border right">
<div></div>
</div>
</li>
<li class="hover-effect"> <a href="/services" class="main-menu service-link">
<span class="effect" data-hover="Services">
<span class="what">
<span> Services</span>
</span>
</span>
</a>
<div class="border right">
<div></div>
</div>
</li>
<li class="hover-effect 3"> <a href="contact" class="main-menu contact-link">
<span class="effect" data-hover="Contact">
<span class="what">
<span> Contact</span>
</span>
</span>
</a>
</li>
</ul>
</div>
</div>
css:
.homecard {
-webkit-animation-name: pushHeaderUp;
-moz-animation-name:pushHeaderUp;
animation-name:pushHeaderUp;
-moz-animation-duration:3s;
-moz-animation-iteration-count:1;
-moz-animation-timing-function:ease;
-moz-animation-fill-mode:forwards;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function:ease;
-webkit-animation-fill-mode: forwards;
animation-duration:3s;
animation-timing-function:ease;
animation-fill-mode: forwards;
}
#keyframes pushHeaderUp {
0% {
-webkit-transform:translateY(0px);
transform:translateY(0px);
-moz-transform:transloateY(0px)
}
60% {
-webkit-transform:translateY(-180px);
transform:translateY(180px);
-moz-transform:translateY:(-180px)
}
100% {
-webkit-transform:translateY(-240px);
transform:translateY(-240px);
-moz-transform:translateY(-240px)
}
}
JS
$(document).ready(function () {
$('.main-menu').click(function () {
$('.homecard').addClass('.pushHeaderUp');
});

Well that is a whole tutorial my friend.
step - 1 Full HTML structural elements
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimal-ui" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="shortcut icon" href="favicon.ico">
<!--<link rel="stylesheet" type="text/css" href="" />-->
<style></style>
</head>
<body>
<header class="container text-center">
<!-- header content goes in here -->
<div class="row text-center" >
<!-- row -->
<figure class="pull-left text-left">
<!-- Logo goes here -->
<img scr= />
<figcaption>abc</figcaption>
</figure>
<nav>
<!-- navigation menu goes in here -->
<a data-hash=about>about</a>
<a data-hash=work>work</a>
<a data-hash=process>process</a>
<a data-hash=contact>contact</a>
</nav>
<div class=pull-right>
<!-- social menu goes in here -->
<menu class=pull-left>
<li>1</li>
<li>2</li>
<li>3</li>
</menu>
</div>
</div>
</header>
<main class=container-fluid>
<!-- Page layers content goes in here -->
<section class=container data-content=about>
<article class=row></article>
</section>
<section class=container data-content=work>
<article class=row></article>
</section>
<section class=container data-content=process>
<article class=row></article>
</section>
<section class=container data-content=contact>
<article class=row></article>
</section>
</main>
</body>
</html>
step - 2 The css structure
*{box-sizing: border-box; padding: 0; margin: 0}
:root{width: 100vw; height: 100wh}
.container{width: 100%}
.row{width: 960px; margin: 0 auto}
.text-left{text-align: left}
.text-center{text-align: center}
.text-right{text-align: right}
.pull-left{float: left}
.pull-right{float: right}
nav a, menu li{display: inline}
main{
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow: hidden
}
main section.container{
position: absolute;
top: 100vh;
left:0;
width: 100%;
height: 100%;
backface-visibility: hidden;
will-change: opacity, top;
transform: translate3d(0,0,0);
z-index:-1;
opacity: 0;
overflow-y: auto;
transition: opacity 0.3s ease, top 0.3s .1s ease;
}
main section.container.visible{
opacity: 1;
z-index:1;
top: 0;
}
main section[data-content=about]{background-color: green}
main section[data-content=work]{background-color:red}
main section[data-content=process]{background-color:yellow}
main section[data-content=contact]{background-color:purple}
step -3 The approach
step - 3.1 the css approach
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimal-ui" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="shortcut icon" href="favicon.ico">
<!--<link rel="stylesheet" type="text/css" href="" />-->
<style>
*{box-sizing: border-box; padding: 0; margin: 0}
:root{width: 100vw; height: 100wh}
.container{width: 100%}
.row{width: 960px; margin: 0 auto}
.text-left{text-align: left}
.text-center{text-align: center}
.text-right{text-align: right}
.pull-left{float: left}
.pull-right{float: right}
nav a, menu li, nav label{display: inline; margin: 4px}
nav a.active{color:red}
main{
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow: hidden
}
main section.container{
position: absolute;
top: 100vh;
left:0;
width: 100%;
height: 100%;
backface-visibility: hidden;
will-change: opacity, top;
transform: translate3d(0,0,0);
z-index:-1;
opacity: 0;
overflow-y: auto;
transition: opacity 0.3s ease, top 0.3s .1s ease;
}
#aboutInput:checked ~ header nav label[for=aboutInput] a,
#workInput:checked ~ header nav label[for=workInput] a,
#processInput:checked ~ header nav label[for=processInput] a,
#contactInput:checked ~ header nav label[for=contactInput] a,
main section.container.visible{
color: red
}
#aboutInput:checked ~ main section[data-content=about],
#workInput:checked ~ main section[data-content=work],
#processInput:checked ~ main section[data-content=process],
#contactInput:checked ~ main section[data-content=contact],
main section.container.visible{
opacity: 1;
z-index:1;
top: 0;
}
main section[data-content=about]{background-color: green}
main section[data-content=work]{background-color:red}
main section[data-content=process]{background-color:yellow}
main section[data-content=contact]{background-color:purple}
</style>
</head>
<body>
<input type=radio name=radio id=aboutInput checked hidden/>
<input type=radio name=radio id=workInput hidden/>
<input type=radio name=radio id=processInput hidden/>
<input type=radio name=radio id=contactInput hidden/>
<header class="container text-center">
<!-- header content goes in here -->
<div class="row text-center" >
<!-- row -->
<figure class="pull-left text-left">
<!-- Logo goes here -->
<img scr= />
<figcaption>abc</figcaption>
</figure>
<nav>
<!-- navigation menu goes in here -->
<label for=aboutInput><a data-hash=about>about</a></label>
<label for=workInput><a data-hash=work>work</a></label>
<label for=processInput><a data-hash=process>process</a></label>
<label for=contactInput><a data-hash=contact>contact</a></label>
</nav>
<div class=pull-right>
<!-- social menu goes in here -->
<menu class=pull-left>
<li>1</li>
<li>2</li>
<li>3</li>
</menu>
</div>
</div>
</header>
<main class=container-fluid>
<!-- Page layers content goes in here -->
<section class=container data-content=about>
<article class=row></article>
</section>
<section class=container data-content=work>
<article class=row></article>
</section>
<section class=container data-content=process>
<article class=row></article>
</section>
<section class=container data-content=contact>
<article class=row></article>
</section>
</main>
</body>
</html>
step - 3.2 Javascript approach
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimal-ui" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="shortcut icon" href="favicon.ico">
<!--<link rel="stylesheet" type="text/css" href="" />-->
<style>
*{box-sizing: border-box; padding: 0; margin: 0}
:root{width: 100vw; height: 100wh}
.container{width: 100%}
.row{width: 960px; margin: 0 auto}
.text-left{text-align: left}
.text-center{text-align: center}
.text-right{text-align: right}
.pull-left{float: left}
.pull-right{float: right}
nav a, menu li, nav label{display: inline; margin: 4px}
nav a.active{color: red}
main{
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow: hidden
}
main section.container{
position: absolute;
top: 100vh;
left:0;
width: 100%;
height: 100%;
backface-visibility: hidden;
will-change: opacity, top;
transform: translate3d(0,0,0);
z-index:-1;
opacity: 0;
overflow-y: auto;
transition: opacity 0.3s ease, top 0.3s .1s cubic-bezier(0.385, -0.600, 0.610, 1.555);
}
main section.container.visible{
opacity: 1;
z-index:1;
top: 0;
}
main section[data-content=about]{background-color: green}
main section[data-content=work]{background-color:red}
main section[data-content=process]{background-color:yellow}
main section[data-content=contact]{background-color:purple}
</style>
</head>
<body>
<header class=container>
<!-- header content goes in here -->
<div class="row text-center" >
<!-- row -->
<figure class=pull-left>
<!-- Logo goes here -->
<img scr= />
<figcaption>abc</figcaption>
</figure>
<nav>
<!-- navigation menu goes in here -->
<a data-hash=about class=active>about</a>
<a data-hash=work>work</a>
<a data-hash=process>process</a>
<a data-hash=contact>contact</a>
</nav>
<div class=pull-right>
<!-- social menu goes in here -->
<menu class=pull-left>
<li>1</li>
<li>2</li>
<li>3</li>
</menu>
</div>
</div>
</header>
<main class=container-fluid>
<!-- Page layers content goes in here -->
<section class="container visible" data-content=about>
<article class=row></article>
</section>
<section class=container data-content=work>
<article class=row></article>
</section>
<section class=container data-content=process>
<article class=row></article>
</section>
<section class=container data-content=contact>
<article class=row></article>
</section>
</main>
<script>
//You need this to run the code once the window has fully loaded
window.addEventListener('load', function(event) {
function returnDataHash () {
var navAnchors = document.querySelectorAll("nav a"),
dataHash = this.getAttribute("data-hash"),
hashSection = "data-content=" + dataHash,
sectionContainer = document.querySelector("["+ hashSection +"]"),
sectionContainers = document.querySelectorAll("main section.container");
for ( var j = 0; j < sectionContainers.length; j++) {
sectionContainers[j].classList.remove("visible");
}
for ( var y = 0; y < navAnchors.length; y++) {
navAnchors[y].classList.remove("active");
}
sectionContainer.classList.add("visible");
this.classList.add("active");
}
//main section.container.visible
var navElements = document.querySelectorAll("nav a");
for (var i = 0; i < navElements.length; i++) {
navElements[i].addEventListener("click", returnDataHash ,false)
}
}, false)
</script>
</body>
</html>
step - 3.3 Jquery approach
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimal-ui" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="shortcut icon" href="favicon.ico">
<!--<link rel="stylesheet" type="text/css" href="" />-->
<style>
*{box-sizing: border-box; padding: 0; margin: 0}
:root{width: 100vw; height: 100wh}
.container{width: 100%}
.row{width: 960px; margin: 0 auto}
.text-left{text-align: left}
.text-center{text-align: center}
.text-right{text-align: right}
.pull-left{float: left}
.pull-right{float: right}
nav a, menu li, nav label{display: inline; margin: 4px}
nav a.active{color: red}
main{
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow: hidden
}
main section.container{
position: absolute;
top: 100vh;
left:0;
width: 100%;
height: 100%;
backface-visibility: hidden;
will-change: opacity, top;
transform: translate3d(0,0,0);
z-index:-1;
opacity: 0;
overflow-y: auto;
transition: opacity 0.3s ease, top 0.3s .1s ease;
}
main section.container.visible{
opacity: 1;
z-index:1;
top: 0;
}
main section[data-content=about]{background-color: green}
main section[data-content=work]{background-color:red}
main section[data-content=process]{background-color:yellow}
main section[data-content=contact]{background-color:purple}
</style>
</head>
<body>
<header class=container>
<!-- header content goes in here -->
<div class="row text-center" >
<!-- row -->
<figure class=pull-left>
<!-- Logo goes here -->
<img scr= />
<figcaption>abc</figcaption>
</figure>
<nav>
<!-- navigation menu goes in here -->
<a data-hash=about class=active>about</a>
<a data-hash=work>work</a>
<a data-hash=process>process</a>
<a data-hash=contact>contact</a>
</nav>
<div class=pull-right>
<!-- social menu goes in here -->
<menu class=pull-left>
<li>1</li>
<li>2</li>
<li>3</li>
</menu>
</div>
</div>
</header>
<main class=container-fluid>
<!-- Page layers content goes in here -->
<section class="container visible" data-content=about>
<article class=row></article>
</section>
<section class=container data-content=work>
<article class=row></article>
</section>
<section class=container data-content=process>
<article class=row></article>
</section>
<section class=container data-content=contact>
<article class=row></article>
</section>
</main>
<script src=https://code.jquery.com/jquery-2.1.3.min.js ></script>
<script>
// You need this to run the code once the window has fully loaded
$( document ).ready(function() {
$("nav a").click( function () {
var dataHash = $(this).attr("data-hash");
$(this).addClass("active").siblings().removeClass("active");
$("main section[data-content=" + dataHash + "]").addClass("visible").siblings().removeClass("visible");
})
});
</script>
</body>
</html>
Now you can change the ease function in transition: opacity 0.3s ease, top 0.3s .1s ease; as you like to make it elastic. Have a look at Ceaser - CSS Easing Animation Tool or Easing Functions Cheat Sheet

You can fix my code later to use key frames or whatever you want, but a hope that this can help you at least a little bit:
First of all - fix your js:
$(document).ready(function(){
$('.main-menu').click(function(event){
event.preventDefault();
$('.homecard').addClass('pushHeaderUp');
});
});
And css:
.pushHeaderUp{
-webkit-transform: translateY(240px);
-webkit-transition: -webkit-transform 3s ease;
}
http://jsfiddle.net/1pc4f081/5/

Slide Image Up on Page Load

I'm trying to achieve the following EFFECT on page load. The Image starts at 0% opacity and off the page, and then it slides into position while achieving 100% opacity. I've managed to get the opacity to work but not the slide
My code is as follows:
HTML
<head>
title>Nic Brown</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function() {
window.onload = function() {
$('#logo').hide().fadeIn(2000);
};
</script>
<script type="text/javascript" src="js/plugins/slideup.js"></script>
</head>
<body>
<div class="navbar navbar-mine navbar-static-top">
<div class="container">
<div class="name">
<a href="#" class="navbar-brand" style="font-family:'norm'; font-size:1.7em; margin-top:3px">NICHOLAS
<em>BROWN</em>
</a>
</div>
<button class="btn btn-default btn-lg navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Social
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
<div class="frontbg">
<img onload="this.style.opacity='1';" src="img/bg/2.png" id="logo" />
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
CSS
.frontbg {
width: 80%;
height: auto;
left: 10%;
top: 15%;
position: fixed;
}
.frontbg img {
width: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
opacity:0;
-moz-transition:opacity 2s;
-webkit-transition:opacity 2s;
-o-transition:opacity 2s;
transition:opacity 2s;
}
The Other CSS is just Bootstrap Stuff.
Here is the attempted jQuery Slide Up
$(document).ready(function() {
$('.frontbg').delay(3000).animate({bottom:"15%"},600);
});
Your help would be much appreciated. The website can be viewed online HERE

You can actually create that effects without using javascript. using css3's
#keyframes
heres my fiddle http://jsfiddle.net/KaDy8/20/

I guess this will work:
$(document).ready(function(){
$("#myId").css({top:1000,position:'absolute'});
$("#myId").animate({top:100}, 800);
});

do it using css. no needs of Jquery
#-moz-keyframes slidein {
from {margin-bottom:0%;}
to {margin-top:35%;}
}
#-webkit-keyframes slidein {
from {margin-bottom:0%;}
to {margin-top:15%;}
}
for example

A very similar answer here
JQuery Animate() slide div up from bottom of page
$('#content').animate({'margin-top': '50px'}, 1000);

Develop Reference

JavaScript is the programming language of the Web.

sidebar showing when the page loads for the first time - javascript

Related

How can I change text animations so that they just show up in their own space?

Inability to Toggle a Sidebar Using JS

why background color not changing?

CSS animation and Jquery2

Slide Image Up on Page Load

Categories

Resources