Change text and image/video on click and scroll - javascript
I'm just a novice. I know some html, but I have no idea how to do the following:
there is an html page, it has a section or div with 3 columns (1st column - text, 2nd - video, in the 3rd column there are 4 links).
When the user scrolls to this section, I need the page to stop (I would like to but not necessarily), and while the person scrolls, it should change the text in the 1st column and the video in the 2nd(both same time) . And also the user should be able to scroll through these videos&text by clicking on the links in the 3rd column. How it is done here: fleet-app
It's written in React, so I can't to spy the solution.
I found this solution Javascript - change image and text on select, but I can't figure out how to apply it in my situation.
Is it possible to do this with Javascript or CSS or something else?
Please don't scold me too much - I'm just learning:)
The solution I got now is very ugly - example codepen.io/Avelaskes/pen/rNOKVbQ
(function($){
$(document).ready(function() {
// Scroll to Top
jQuery('.scrolltotop').click(function(){
jQuery('html').animate({'scrollTop' : '0px'}, 400);
return false;
});
jQuery(window).scroll(function(){
var upto = jQuery(window).scrollTop();
if(upto > 500) {
jQuery('.scrolltotop').fadeIn();
} else {
jQuery('.scrolltotop').fadeOut();
}
});
var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};
var hamburgers = document.querySelectorAll(".hamburger");
if (hamburgers.length > 0) {
forEach(hamburgers, function(hamburger) {
hamburger.addEventListener("click", function() {
this.classList.toggle("is-active");
}, false);
});
}
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400);
jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400);
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
});
})(jQuery);(function($){
$(document).ready(function() {
// Scroll to Top
jQuery('.scrolltotop').click(function(){
jQuery('html').animate({'scrollTop' : '0px'}, 400);
return false;
});
jQuery(window).scroll(function(){
var upto = jQuery(window).scrollTop();
if(upto > 500) {
jQuery('.scrolltotop').fadeIn();
} else {
jQuery('.scrolltotop').fadeOut();
}
});
var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};
var hamburgers = document.querySelectorAll(".hamburger");
if (hamburgers.length > 0) {
forEach(hamburgers, function(hamburger) {
hamburger.addEventListener("click", function() {
this.classList.toggle("is-active");
}, false);
});
}
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400);
jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400);
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
});
})(jQuery);
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght#0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Oswald:wght#200;300;400;500;600;700&family=Raleway:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body {
font-family: 'Raleway', sans-serif;
font-size: 16px;
font-weight: 400;
background: #fff;
color: #333333;
}
a:hover {
text-decoration: none;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
::selection {
color: white;
background: #C840E9;
}
::-webkit-selection {
color: white;
background: #C840E9;
}
::-moz-selection {
color: white;
background: #C840E9;
}
.scrolltotop {
width: 40px;
height: 40px;
border-radius: 20px 20px 0 0;
background: #5773FF;
text-align: center;
padding-top: 8px;
font-size: 22px;
color: #ffffff;
position: fixed;
right: 5px;
bottom: 5px;
display: none;
transition: 0.2s all ease;
-webkit-transition: 0.2s all ease;
-moz-transition: 0.2s all ease;
}
.scrolltotop:hover {
background: #C840E9;
color: #fff;
box-shadow: 0px 0px 5px rgba(0,0,0,.5);
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5);
}
/*---- header-area start ----*/
.header-area {
background-color: #15161C;
padding: 25px 0;
}
.navbar {
padding: 0px;
}
.navbar-brand img {
max-width: 100%;
display: block;
transition: 0.2s all ease;
-moz-transition: 0.2s all ease;
-webkit-transition: 0.2s all ease;
}
.navbar-brand img:hover {
opacity: 0.8;
}
.main-menu-part ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.main-menu-part ul li {
float: left;
}
.main-menu-part ul li a {
font-family: 'Cabin', sans-serif;
display: block;
padding: 0px 5px 0px 52px;
text-transform: capitalize;
font-weight: normal;
font-size: 18px;
color: #fff;
transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
-moz-transition: 0.3s all ease;
}
.main-menu-part ul li a:hover {
opacity: 0.8;
}
.hamburger {
padding: 10px 0px 0px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
outline: 0px!important;
}
.hamburger:hover {
opacity: 0.7;
}
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 40px;
height: 4px;
background-color: #13F1FC;
border-radius: 2px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
.hamburger--squeeze .hamburger-inner {
transition-duration: 0.075s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze .hamburger-inner::before {
transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}
.hamburger--squeeze .hamburger-inner::after {
transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze.is-active .hamburger-inner {
transform: rotate(45deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--squeeze.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}
.hamburger--squeeze.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
/*---- rkma-area start ----*/
.rkma-area {
background-color: #15161c;
}
.mnrkma_top {
background: url(img/bg.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 60px 0;
padding-bottom: 545px;
}
.rkma_top h2 {
color: #fff;
font-size: 50px;
text-align: center;
font-weight: 600;
padding-top: 50px;
}
.rkma_top p {
font-family: 'Cabin', sans-serif;
color: #B7E6FF;
font-size: 16px;
text-align: center;
line-height: 25px;
padding-top: 5px;
}
.rkma_part {
position: relative;
-webkit-animation:animation-hci0jy 5s 2s infinite alternate;
animation:animation-hci0jy 5s 2s infinite alternate;
-webkit-animation-timing-function:cubic-bezier(0.43,0.05,0.6,0.99);
animation-timing-function:cubic-bezier(0.43,0.05,0.6,0.99);
}
.rkma_part img {
width: 334px;
display: block;
margin: auto;
padding-top: 50px;
}
.rkma_part_1 {
position: absolute;
top: 0;
left: 24%;
-webkit-animation: animation-hci0jy 5s 2s infinite alternate;
animation: animation-hci0jy 5s 2s infinite alternate;
animation-timing-function: ease;
-webkit-animation-timing-function: cubic-bezier(0.43,0.05,0.6,0.99);
animation-timing-function: cubic-bezier(0.43,0.05,0.6,0.99);
}
.rkma_part_2 {
position: absolute;
top: 0;
right: 24%;
-webkit-animation: animation-hci0jy 5s 2s infinite alternate;
animation: animation-hci0jy 5s 2s infinite alternate;
animation-timing-function: ease;
-webkit-animation-timing-function: cubic-bezier(0.43,0.05,0.6,0.99);
animation-timing-function: cubic-bezier(0.43,0.05,0.6,0.99);
}
#-webkit-keyframes animation-hci0jy{
0% {
-webkit-transform:translateY(0px);
-ms-transform:translateY(0px);
transform:translateY(0px);
}
50% {
-webkit-transform:translateY(15px);
-ms-transform:translateY(15px);
transform:translateY(15px);
}
100% {
-webkit-transform:translateY(0px);
-ms-transform:translateY(0px);
transform:translateY(0px);
}
}
#keyframes animation-hci0jy{
0% {
-webkit-transform:translateY(0px);
-ms-transform:translateY(0px);
transform:translateY(0px);
}
50% {
-webkit-transform:translateY(15px);
-ms-transform:translateY(15px);
transform:translateY(15px);
}
100% {
-webkit-transform:translateY(0px);
-ms-transform:translateY(0px);
transform:translateY(0px);
}
}
/*---- smy-area start ----*/
.smy-area {
background-color: #15161C;
padding: 60px 0;
padding-top: 0;
}
.smy_top h2 {
color: #9F9F9F;
font-size: 52px;
font-weight: 700;
text-align: center;
}
.smy_top p {
color: #9F9F9F;
font-size: 27px;
font-weight: 700;
text-align: center;
padding-top: 5px;
padding-bottom: 30px;
}
.smy_left img {
max-width: 100%;
display: block;
}
.smy_left p {
font-family: 'Source Sans Pro', sans-serif;
color: #fff;
font-size: 25px;
font-weight: 600;
padding-left: 103px;
line-height: 35px;
margin-top: -68px;
}
.smy_right img {
width: 180px;
height: 120px;
border-radius: 100%;
display: block;
margin: auto;
border: 4px solid #B9B8B8;
}
.smy_right p {
color: #F2F2F2;
font-size: 18px;
text-align: center;
line-height: 25px;
padding-top: 16px;
}
/*---- tabbingsec-area start---*/
.tabbingsec-area2 {
display: none;
}
.tabs {
width: 100%;
display: inline-block;
}
.tab-links:after {
display: block;
clear: both;
content: '';
}
.tab-links {
padding-top: 110px
}
.tab-links li {
list-style: none;
padding-bottom: 19px;
}
.tab-links li i {
color: #C4C4C4;
font-size: 10px;
padding-right: 6px;
}
.tab-links a {
color: #E4E4E4;
font-size: 16px;
}
.tab-links a:hover {
text-decoration: none;
}
.tab-links li.active a {
color: #13F1FC;
}
/*----- Content of Tabs -----*/
.tab {
display: none;
}
.tab.active {
display: block;
}
#tabbingsec {
background: #15161C;
padding: 60px 0px;
}
.width60 {
width: 50%;
float: left;
}
.width60 h3 {
color: #9F9F9F;
font-size: 40px;
font-weight: 800;
padding-top: 60px;
padding-bottom: 6px;
}
.width60 p {
color: #AAABAB;
font-size: 28px;
line-height: 37px;
}
.width40 {
width: 50%;
float: left;
}
.width40 img {
max-width: 10%;
display: block;
margin: auto;
}
.width60 a {
width: 121px;
height: 46px;
line-height: 46px;
text-align: center;
color: #fff;
background:#ff8b38;
border-radius:3px;
font-size: 15px;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="tabbingsec">
<div class="container">
<div class="tabs">
<div class="row">
<div class="col-lg-8 col-md-9 col-sm-6">
<div class="tab-content">
<div id="tab1" class="tab active">
<div class="width60">
<h3>First of all</h3>
<p>Decide where you will <br>enter into a position <br>and where you want<br> to put a stop order</p>
</div>
<div class="width40">
<img src="img/ph4.png" alt=""/>
</div>
</div>
<div id="tab2" class="tab">
<div class="width60">
<h3>In App</h3>
<p>Choose the calculator<br> depending on what<br> market you are working<br> or choose Universal</p>
</div>
<div class="width40">
<img src="img/ph5.png" alt=""/>
</div>
</div>
<div id="tab3" class="tab">
<div class="width60">
<h3>Balance</h3>
<p>Enter the amount of<br> balance or the amount<br> of money from which <br>you will count risk</p>
</div>
<div class="width40">
<img src="img/ph6.png" alt=""/>
</div>
</div>
<div id="tab4" class="tab">
<div class="width60">
<h3>Required</h3>
<p>Enter the price at wich<br> you plan to enter into <br>position and the price <br>of the planed stop order</p>
</div>
<div class="width40">
<img src="img/ph7.png" alt=""/>
</div>
</div>
<div id="tab5" class="tab">
<div class="width60">
<h3>Be WISE</h3>
<p>Chose the aceptable<br> risk amount in %.<br> The amount that you<br> are ready to loose in<br> case you wrong in your<br> predicrion</p>
</div>
<div class="width40">
<img src="img/ph8.png" alt=""/>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-3 col-sm-6">
<ul class="tab-links">
<li class="active"><i class="fas fa-circle" aria-hidden="true"></i>First step</li>
<li><i class="fas fa-circle" aria-hidden="true"></i> Second step</li>
<li><i class="fas fa-circle" aria-hidden="true"></i> Third step</li>
<li><i class="fas fa-circle" aria-hidden="true"></i> Fourth step</li>
<li><i class="fas fa-circle" aria-hidden="true"></i> Fivth step</li>
</ul>
</div>
</div>
</div>
</div>
</section>
Related
Fullscreen overlay opens on page load
I'm not sure if my function is wrong or there is something i miss-typed somewhere but every time I open my html page then the nav is open.
the function closes correctly and opens correctly once clicked anywhere on the overlay but the only issue im having is that when i load the page the nav is already opened.
//Toggle of burgermenu
$(document).ready(function() {
$(".burger a").click(function() {
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".burger a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
//toggle transparency on scroll
$(window).scroll(function() {
if($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/
{
$('.navbar-default').addClass('opaque');
} else {
$('.navbar-default').removeClass('opaque');
}
});
/* NAVBAR */
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
width: auto;
padding: 15px;
margin-top: 0px;
margin-left: 10px;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 99;
border: none;
}
.navbar-default {
background-color: rgba(0, 0, 0, 0.0);
height: 50px;
transition: background-color .5s ease 0s;
}
.navbar-default .navbar-toggle {
border-color: rgba(221, 221, 221, 0);
}
.navbar-header {
float: none;
}
.navbar-default.opaque {
height: 50px;
background-color: rgba(51, 51, 61, 0.8);
transition: background-color .5s ease 0s;
border-radius: 0;
}
#nav-container {
padding: 0px;
}
#burgerimg {
margin: 0px;
margin-right: 10px;
margin-top: 10px;
}
/*Overlay*/
.overlay {
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: #33333d;
z-index: 99;
}
a.headlink {
font-size: 26px;
opacity: 0.3;
}
a.headlink :hover {
opacity: 1;
}
.wrap {
color: #e9e9e9;
text-align: center;
max-width: 90%;
margin: 0 auto;
}
.wrap ul.wrap-nav {
text-transform: capitalize;
padding: 150px 0px 100px;
}
.wrap ul.wrap-nav li {
display: inline-block;
vertical-align: top;
width: 15%;
}
.wrap ul.wrap-nav li a {
color: #fff;
display: block;
text-decoration: none;
transition-property: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
opacity: 1;
}
.wrap ul.wrap-nav ul li {
display: block;
width: 100%;
color: #e9e9e9;
}
.wrap ul.wrap-nav ul li a {
font-size: 12px;
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.wrap ul.wrap-nav ul li a {
color: #fff;
opacity: 0.3;
}
.wrap ul.wrap-nav ul li a:hover {
color: #34B484;
opacity: 1;
}
.wrap img {
margin: 0px;
margin-bottom: 30px;
}
#media screen and (max-width:48em) {
.wrap ul.wrap-nav>li {
width: 100%;
padding: 20px 0;
border-bottom: 1px solid #575757;
}
.wrap ul.wrap-nav {
padding: 30px 0px 0px;
}
nav ul {
opacity: 0;
visibility: hidden;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container" id="nav-container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="images/Logo.png" align="left" alt="logo"></a>
<div class="burger">
<a class="btn-open" href="#"><img id="burgerimg" align="right" src="images/burger.png"></a>
</div>
</div>
</div>
</nav>
<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li>
<a href="#" class="headlink"><img src="images/prod-icon.png">
<BR>Products</a>
<ul>
<li>Product Brief</li>
<li>Getting Started</li>
<li>Technology</li>
</ul>
</li>
</ul>
</div>
</div>
<!--END NAVBAR-->
<h1>WEBPAGE AND ETC</h1>
Add display: none to overlay - see demo below:
//Toggle of burgermenu
$(document).ready(function() {
$(".burger a").click(function() {
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".burger a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
//toggle transparency on scroll
$(window).scroll(function() {
if ($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/ {
$('.navbar-default').addClass('opaque');
} else {
$('.navbar-default').removeClass('opaque');
}
});
/* NAVBAR */
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
width: auto;
padding: 15px;
margin-top: 0px;
margin-left: 10px;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 99;
border: none;
}
.navbar-default {
background-color: rgba(0, 0, 0, 0.0);
height: 50px;
transition: background-color .5s ease 0s;
}
.navbar-default .navbar-toggle {
border-color: rgba(221, 221, 221, 0);
}
.navbar-header {
float: none;
}
.navbar-default.opaque {
height: 50px;
background-color: rgba(51, 51, 61, 0.8);
transition: background-color .5s ease 0s;
border-radius: 0;
}
#nav-container {
padding: 0px;
}
#burgerimg {
margin: 0px;
margin-right: 10px;
margin-top: 10px;
}
/*Overlay*/
.overlay {
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: #33333d;
z-index: 99;
display: none;
}
a.headlink {
font-size: 26px;
opacity: 0.3;
}
a.headlink :hover {
opacity: 1;
}
.wrap {
color: #e9e9e9;
text-align: center;
max-width: 90%;
margin: 0 auto;
}
.wrap ul.wrap-nav {
text-transform: capitalize;
padding: 150px 0px 100px;
}
.wrap ul.wrap-nav li {
display: inline-block;
vertical-align: top;
width: 15%;
}
.wrap ul.wrap-nav li a {
color: #fff;
display: block;
text-decoration: none;
transition-property: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
opacity: 1;
}
.wrap ul.wrap-nav ul li {
display: block;
width: 100%;
color: #e9e9e9;
}
.wrap ul.wrap-nav ul li a {
font-size: 12px;
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.wrap ul.wrap-nav ul li a {
color: #fff;
opacity: 0.3;
}
.wrap ul.wrap-nav ul li a:hover {
color: #34B484;
opacity: 1;
}
.wrap img {
margin: 0px;
margin-bottom: 30px;
}
#media screen and (max-width:48em) {
.wrap ul.wrap-nav>li {
width: 100%;
padding: 20px 0;
border-bottom: 1px solid #575757;
}
.wrap ul.wrap-nav {
padding: 30px 0px 0px;
}
nav ul {
opacity: 0;
visibility: hidden;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container" id="nav-container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="images/Logo.png" align="left" alt="logo"></a>
<div class="burger">
<a class="btn-open" href="#"><img id="burgerimg" align="right" src="images/burger.png"></a>
</div>
</div>
</div>
</nav>
<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li>
<a href="#" class="headlink"><img src="images/prod-icon.png">
<BR>Products</a>
<ul>
<li>Product Brief</li>
<li>Getting Started</li>
<li>Technology</li>
</ul>
</li>
</ul>
</div>
</div>
<!--END NAVBAR-->
<h1>WEBPAGE AND ETC</h1>
Side nav sliding transition not sliding out
My element slides in fine but cannot slide back out. I think it is something to do with the display: none syntax
Any help or suggestions are appreciated and if you need more info just ask. Thanks
I have included a JSfiddle as well :
https://jsfiddle.net/fraserdale/8Lm78mbv/
<div id="mySidenav" class="sidenav1 change " style="width: 250px">
<ul style="list-style-type: none">
<li>Thanks </li>
<li>For</li>
<li>The</li>
<li>Help!</li>
</ul>
</div>
<div class="sidenav slideTogglebox" id="sidenav">
<div class="toggle change" onclick="myFunction(this)" id="slideToggle">
<div class="bar1 animated fadeIn"></div>
<div class="bar2 "></div>
<div class="bar3 animated fadeIn"></div>
</div>
<ul class="sidebar-inner " id="modes">
<li class="gamemode fa fa-3x fa-dot-circle-o active animated fadeIn"></li>
<li class="gamemode fa fa-3x fa-pie-chart animated fadeIn"></li>
<li class="gamemode fa fa-3x fa-delicious animated fadeIn"></li>
<li class="gamemode fa fa-3x fa-line-chart animated fadeIn"></li>
<li class="gamemode fa fa-3x fa-braille animated fadeIn"></li>
</ul>
</div>
<h1 id="main" class="animated fadeIn"> Lorem Ipsum</h1>
and the JS
<script>
function myFunction(x) {
x.classList.toggle("change");
var x = document.getElementById('mySidenav');
if (x.style.display === 'none') {
x.style.display = 'block';
document.getElementById("mySidenav").style.marginLeft = "0px";
document.getElementById("main").style.marginLeft = "375px";
document.getElementById("sidenav").style.marginLeft = "250px";
} else {
<!-- x.style.display = 'none';
document.getElementById("mySidenav").style.marginLeft = "-250px";
document.getElementById("main").style.marginLeft = "125px";
document.getElementById("sidenav").style.marginLeft = "-0px";
}
}
and finally the CSS
body {
background-color: #23272B;
margin: 0px;
padding: 0px;
outline: none;
}
.credit{
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
font-size: 15px;
color: #fff;
font-family: Verdana, Geneva, Tahoma, sans-serif
}
.sidenav {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #16191C;
position: fixed;
top: 0px;
width: 125px;
height: 100%;
color: #e1ffff;
z-index: 200;
margin-left: 250px;
transition: 1s;
}
* {
transition: all 500ms ease-out;
-webkit-transition: all 500ms ease-out ;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
font-family: open sans, sans-serif;
}
.sidebar-inner {
height: 200px;
position: relative;
top: 50%;
transform: translateY(-50%);
padding-left: 25px;
padding-right: 25px;
transition: 1s;
}
ul .gamemode:hover {
opacity: 1;
background-color: #3B50D4;
transition: 0.4s;
}
li {
transition: all 500ms ease-out;
-webkit-transition: all 500ms ease-out ;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.active {
background-color: #3B50D4;
}
.gamemode {
/*border: 1px solid white;*/
width: 65px;
color: #fff;
font-size: 30px;
text-align: center;
padding: 15%;
/*display: block;*/
}
.toggle {
display: inline-block;
cursor: pointer;
position: absolute;
width: 100%;
padding: 25%;
}
.bar1, .bar2, .bar3 {
width: 45px;
height: 5px;
background-color: #333;
margin: 6px ;
transition: 1s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
.sidenav1 {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
/*left: 100px;*/
background-color: #111;
overflow-x: hidden;
transition: 1s;
padding-top: 60px;
transform: 0.3
}
.sidenav1 a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
/*display: block;*/
transition: 0.3s;
}
.sidenav1 a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.sidenav1 .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
margin-left: 375px;
transition: margin-left 1s;
padding: 16px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
You aren't hiding that menu with display: none when it slides off the screen, so the test for if (x.style.display === 'none') { won't work to test the state. I just added a .closed class to that element that will toggle as the menu opens/closes and can be used to detect the state instead.
body {
background-color: #23272B;
margin: 0px;
padding: 0px;
outline: none;
}
.credit{
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
font-size: 15px;
color: #fff;
font-family: Verdana, Geneva, Tahoma, sans-serif
}
.sidenav {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #16191C;
position: fixed;
top: 0px;
width: 125px;
height: 100%;
color: #e1ffff;
z-index: 200;
margin-left: 250px;
transition: 1s;
}
* {
transition: all 500ms ease-out;
-webkit-transition: all 500ms ease-out ;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
font-family: open sans, sans-serif;
}
.sidebar-inner {
height: 200px;
position: relative;
top: 50%;
transform: translateY(-50%);
padding-left: 25px;
padding-right: 25px;
transition: 1s;
}
ul .gamemode:hover {
opacity: 1;
background-color: #3B50D4;
transition: 0.4s;
}
li {
transition: all 500ms ease-out;
-webkit-transition: all 500ms ease-out ;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.active {
background-color: #3B50D4;
}
.gamemode {
/*border: 1px solid white;*/
width: 65px;
color: #fff;
font-size: 30px;
text-align: center;
padding: 15%;
/*display: block;*/
}
.toggle {
display: inline-block;
cursor: pointer;
position: absolute;
width: 100%;
padding: 25%;
}
.bar1, .bar2, .bar3 {
width: 45px;
height: 5px;
background-color: #333;
margin: 6px ;
transition: 1s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
.sidenav1 {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
/*left: 100px;*/
background-color: #111;
overflow-x: hidden;
transition: 1s;
padding-top: 60px;
transform: 0.3
}
.sidenav1 a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
/*display: block;*/
transition: 0.3s;
}
.sidenav1 a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.sidenav1 .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
margin-left: 375px;
transition: margin-left 1s;
padding: 16px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Memes</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<script src="https://use.fontawesome.com/9d0e231cc7.js"></script>
</head>
<body>
<div id="mySidenav" class="sidenav1 change " style="width: 250px">
<ul style="list-style-type: none">
<li>Thanks </li>
<li>For</li>
<li>The</li>
<li>Help!</li>
</ul>
</div>
<div class="sidenav slideTogglebox" id="sidenav">
<div class="toggle change" onclick="myFunction(this)" id="slideToggle">
<div class="bar1 animated fadeIn"></div>
<div class="bar2 "></div>
<div class="bar3 animated fadeIn"></div>
</div>
<ul class="sidebar-inner " id="modes">
<li class="gamemode fa fa-3x fa-dot-circle-o active animated fadeIn"></li>
<li class="gamemode fa fa-3x fa-pie-chart animated fadeIn"></li>
<li class="gamemode fa fa-3x fa-delicious animated fadeIn"></li>
<li class="gamemode fa fa-3x fa-line-chart animated fadeIn"></li>
<li class="gamemode fa fa-3x fa-braille animated fadeIn"></li>
</ul>
</div>
<h1 id="main" class="animated fadeIn"> Lorem Ipsum</h1>
<script>
function myFunction(x) {
x.classList.toggle("change");
var x = document.getElementById('mySidenav');
x.classList.toggle('closed');
if (!x.classList.contains('closed')) {
//x.style.display = 'block';
document.getElementById("mySidenav").style.marginLeft = "0px";
document.getElementById("main").style.marginLeft = "375px";
document.getElementById("sidenav").style.marginLeft = "250px";
} else {
<!-- x.style.display = 'none'; -->
document.getElementById("mySidenav").style.marginLeft = "-250px";
document.getElementById("main").style.marginLeft = "125px";
document.getElementById("sidenav").style.marginLeft = "-0px";
}
}
</script>
</body>
</html>
Why does dropdown menu only work properly in header?
I just implemented a dropdown-menu that drops down when the user hovers/clicks the menu image.
However as soon as the user scrolls down to section2, then the dropdown stops to work properly. Either it simply does not drop down when the user hovers/clicks the dropdown image, or if it does, the menu items can't be clicked.
I can't see how the other sections can influence whether or not a fixed dropdown works.
Any suggestions?
thanks
var main = function() {
$(".dropdown img").click(function() {
$(".dropdown-menu").slideDown("slow");
});
$(".dropdown img").mouseenter(function() {
$(".dropdown-menu").slideDown("slow");
});
$(".dropdown ul").mouseleave(function() {
$(".dropdown-menu").slideUp("slow");
});
$(window).scroll(function() {
$(".dropdown-menu").slideUp();
$(".dropdown img").removeClass("rotate");
});
$(".dropdown img").mouseenter(function() {
$(".dropdown img").addClass("rotate");
});
$(".dropdown-menu").mouseleave(function() {
$(".dropdown img").removeClass("rotate");
});
};
$(document).ready(main);
html,
body {
font-size: 100%;
height: 100%
}
/*Header*/
.dropdown img {
height: 2.5em;
width: 3.5em;
}
.dropdown-menu {
background-color: rgba(0, 0, 0, 0.5);
}
.header {
background: url(/img/sri.jpg) no-repeat center center;
background-size: cover;
background-attachment: fixed;
position: relative;
box-shadow: inset 0 0 0 1000px rgba(125, 132, 145, 0.6);
min-height: 100%
}
.header ul li a {
color: #fff;
}
.header .logo {
float: left;
margin-top: 0.42em;
}
#rowheader {
margin-top: 5em;
}
.header .dropdown {
margin-top: 0.42em;
position: fixed;
right: 2em;
}
.dropdown img {
border-radius: 50%;
background: black;
height: 3em;
width: 3em;
-webkit-transition: width 1s, height 1s, -webkit-transform 1s;
/* Safari */
transition: width 1s, height 1s, transform 1s;
}
.rotate {
-webkit-transform: rotate(180deg);
/* Safari */
transform: rotate(180deg);
}
.dropdown ul {
left: -8em;
width: auto;
position: absolute;
}
.header .logo p {
font-size: 1em;
color: black;
font-family: 'Permanent Marker', cursive;
font-weight: bold;
}
#rowheader h1 {
font-weight: bolder;
font-size: 3em;
position: relative;
color: #fff;
text-align: center;
}
/*Section1*/
#section1 {
text-align: center;
margin-top: 3em;
margin-bottom: 3em;
font-size: 1em;
height: auto;
position: relative;
font-family: 'Open Sans', sans-serif;
}
#section1 h2 {
font-size: 2em;
font-weight: bolder;
text-align: center;
padding: 0 2.5em 1em;
display: block;
}
#section1 p {
line-height: 1.8em;
font-size: 0.9em;
padding: 1em 0;
}
#section1 a {
color: #fff;
background: #007bb6;
text-decoration: none;
padding: 0.1em 0.5em;
border-radius: 5px 5px 5px 5px;
}
#section1 a:hover {
background: #005983
}
/*Section2*/
#section2 {
line-height: 1.8em;
height: auto;
margin-top: 2em;
margin-bottom: 2em;
position: relative;
}
#section2 h2 {
font-size: 2em;
font-weight: bolder;
text-align: center;
padding: 0 2.5em 1em;
display: block;
}
#section2 p {
padding: 0 0 0.5em;
font-family: 'Open Sans', sans-serif;
padding-bottom: 2em;
}
#section2 img {
width: 100%;
height: 100%;
}
#img-wrapper {
display: inline-block;
overflow: hidden;
}
#img-wrapper img {
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#img-wrapper img:hover {
-webkit-transform: scale(1.1);
/* Safari and Chrome */
-moz-transform: scale(1.1);
/* Firefox */
-ms-transform: scale(1.1);
/* IE 9 */
-o-transform: scale(1.1);
/* Opera */
transform: scale(1.1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- Header -->
<div class="header">
<div class="container">
<div class="logo">
<p>???</p>
</div>
<div class="dropdown">
<img src="img/menuwhite.jpg">
<ul class="dropdown-menu">
<li>Find me on Linkedin
<li>
<li>Send me an email
</li>
<li>Download my resume
</li>
</ul>
</div>
<div id="rowheader">
<h1></h1>
</div>
</div>
</div>
<!-- Section1 -->
<div id="section1" class="container">
<h2>About</h2>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h3>Me</h3>
<p>blablablabla</p>
<p>blablablablablablablablablqblablablablablablablablablablablablablablabla</p>
</div>
<!-- Section2 -->
<div id="section2" class="container">
<h2>My Projects</h2>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div id="img-wrapper">
<img src=" "">
</div>
</div>
</div>
</div>
You are missing z-index on .header .dropdown element
.header .dropdown {
margin-top: 0.42em;
position: fixed;
right: 2em;
z-index: 20;
}
How to expand toggle sidebar more
I'm using the following HTML + CSS for a sidebar on a asp.net web page. I got this from a template. Currently when I toggle the sidebar, it comes out messed up. The text and icon are not in the same line. I think it is running out of space. How can i change it so that when it is toggled, it opens up more? Thank you. I'm really new to CSS and bootstrap. Thank you.
<div id="wrapper">
<!-- Sidebar -->
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav" id="sidebar">
<li class="sidebar-brand"><a id="menu-toggle" href="#">Menu<span id="main_icon" class="glyphicon glyphicon-align-justify"></span></a></li>
<li><a>Dashboard<span class="sub_icon glyphicon glyphicon-dashboard"></span></a></li>
<li><a>Reports<span class="sub_icon glyphicon glyphicon-link"></span></a></li>
<li><a>Configuration<span class="sub_icon glyphicon glyphicon-link"></span></a></li>
<li><a>Settings<span class="sub_icon glyphicon glyphicon-link"></span></a></li>
</ul>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<div class="page-content inset">
<div class="row">
<div>
<asp:ContentPlaceHolder ID="body" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
</div>
</div>
CSS:
.row{
margin-left:0px;
margin-right:0px;
}
#wrapper {
padding-left: 70px;
transition: all .4s ease 0s;
height: 100%
}
#sidebar-wrapper {
margin-left: -150px;
left: 70px;
width: 150px;
background: #222;
position: fixed;
height: 100%;
z-index: 10000;
transition: all .4s ease 0s;
}
.sidebar-nav {
display: block;
float: left;
width: 150px;
list-style: none;
margin: 0;
padding: 0;
}
#page-content-wrapper {
padding-left: 0;
margin-left: 0;
width: 100%;
height: auto;
}
#wrapper.active {
padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
left: 150px;
}
#page-content-wrapper {
width: 100%;
}
#sidebar_menu li a, .sidebar-nav li a {
color: #999;
display: block;
float: left;
text-decoration: none;
width: 150px;
background: #252525;
border-top: 1px solid #373737;
border-bottom: 1px solid #1A1A1A;
-webkit-transition: background .5s;
-moz-transition: background .5s;
-o-transition: background .5s;
-ms-transition: background .5s;
transition: background .5s;
}
.sidebar_name {
padding-top: 25px;
color: #fff;
opacity: .7;
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
line-height: 60px;
font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
.sidebar-bottom {
position: absolute;
bottom: 0;
}
#main_icon
{
float:right;
padding-right: 30px;
padding-top:20px;
}
.sub_icon
{
float:right;
padding-right: 32px;
padding-top:10px;
}
.content-header {
height: 65px;
line-height: 65px;
}
.content-header h1 {
margin: 0;
margin-left: 20px;
line-height: 65px;
display: inline-block;
}
#media (max-width:767px) {
#wrapper {
padding-left: 70px;
transition: all .4s ease 0s;
}
#sidebar-wrapper {
left: 70px;
}
#wrapper.active {
padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
left: 150px;
width: 150px;
transition: all .4s ease 0s;
}
}
.glyphicon{
font-size: 19px;
}
}
JS:
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("active");
});
You'll just need to make some updates to the CSS to make it wider. These are the selectors I made changes to. You can see the working version in the Fiddle below.
#sidebar-wrapper {
margin-left: -242px;
left: 70px;
width: 250px;
background: #222;
position: fixed;
height: 100%;
z-index: 10000;
transition: all .4s ease 0s;
}
#wrapper.active #sidebar-wrapper {
left: 66px;
}
.sidebar-nav {
display: block;
float: left;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
#media (max-width:767px) {
#wrapper {
padding-left: 70px;
transition: all .4s ease 0s;
}
#sidebar-wrapper {
left: 70px;
}
#wrapper.active {
padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
left: 242px;
/*width: 150px; You can remove this */
transition: all .4s ease 0s;
}
}
Check out this Fiddle
jQuery Jump Scroll
When a user clicks any link on the page they are jumped to the closest panel of 3 specific panels that have been indicated to jump scroll in jQuery.
How do I edit jQuery jump scroll code to only affect links in the nav bar ("About", "Work", "Contact") and no other links on the page as a user navigates content on the site?
CSS:
/****Landscape****/
/*global styles*/
body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a{
appearance: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background:transparent;
color: #000000;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
a:focus, a:hover {
color: #e6e8eb;
cursor:pointer;
transition: color 0.5s ease;
width: inherit;
right: 0;
left: 0;
}
a:active { color: #484747; }
/*----/----global styles*/
/*contact panel*/
.letmeknow:hover {
color: #464c4c;
cursor:pointer;
transition: color 0.5s ease;
}
.letmeknow {
appearance: none;
width:80%;
height:50px;
font-size:1.05em;
background:transparent;
color: #e6e8eb;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
outline:none;
border:none;
}
/*Contact submit Form*/
#container {
width: 840px;
margin: 25px auto;
}
.whysign {
float: left;
background-color: white;
width: 480px;
height: 347px;
border-radius: 0 5px 5px 0;
padding-top: 20px;
padding-right: 20px;
}
.signup {
float: left;
width: 300px;
padding: 30px 20px;
background-color: white;
text-align: center;
border-radius: 5px 0 0 5px;
}
[type=text] {
display: block;
margin: 0 auto;
width: 80%;
border: 0;
border-bottom: 1px solid rgba(0,0,0,.2);
height: 45px;
line-height: 45px;
margin-bottom: 10px;
font-size: 1em;
color: rgba(0,0,0,.4);
}
input[type="submit"] {
appearance: none;
width:80%;
height:50px;
font-size:1.05em;
background:transparent;
color: #e6e8eb;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
outline:none;
border:none;
}
input[type="submit"]:hover {
color: #464c4c;
cursor:pointer;
transition: color 0.5s ease;
}
[type='text']:focus {
outline: none;
border-color: #53CACE;
}
span:hover {
color: #53CACE;
}
/*----/----contact form*/
/*Nav Bar*/
.header {
background: #ffffff;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
.nav {
background: #ffffff;
float: right;
text-align: right;
}
.nav > li {
display: inline-block;
padding: 2px;
padding-right: 30px;
}
/*----/----Nav Bar*/
/*Panels*/
.panel {
width: 100%;
background: #000000;
color: #ffffff;
height: 40em;
padding: 3em;
box-sizing: border-box;
}
.links{
color: #ffffff;
}
.panel .inner {
padding-top: 10%;
color: #df
}
.panel.panel-blank {
background: #ffffff;
color: #000000;
}
/*----/----Panels*/
/*logo*/
.logo {
float:left;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
}
/*----/----logo*/
/****Portrait****/
#media (max-width: 850px) {
/*global styles*/
.body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
}
.header {
background: #ffffff;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.nav {
position: fixed;
width: 100%;
text-align: center;
display: none;
background-color: #ffffff;
left: 0;
top: 39px;
}
.nav > li {
postition: absolute;
display: block;
left: 0;
width: 100%;
padding-top: 0.6em;
padding-bottom: 1em;
}
.nav > li:hover {
postition: absolute;
display: block;
left: 0;
width: 100%;
padding-top: 0.6em;
padding-bottom: 1em;
cursor:pointer;
}
/*----/----global styles*/
/*logo*/
.logo {
float:left;
display: block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
}
/*----/----logo*/
/*navigation icon*/
#toggle-menu {
float:right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
#toggle-menu span {
display: block;
width: 15px;
height: 3px;
background: black;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/
}
/*----/----Portrait*/
.footer {
width: 100%;
background: #000000;
color: #ffffff;
height: 10em;
padding: 5em;
box-sizing: border-box;
}
jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script>
jQuery(document).ready(function () {
$(window).resize(function(){
if ($(window).width() >=850) {
$(".nav").show();
}
else{ $(".nav").hide();}
});
$('#toggle-menu').click(function () {
$(this).toggleClass('menu-is-active')
});
/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {
$("#toggle-menu").removeClass();
});
$("nav").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----navigation icon animation*/
/*toggle menu*/
jQuery("#toggle-menu").click(function () {
jQuery(".nav").slideToggle();
});
/* click outside of nav to close toggle*/
$(document).click(function () {
if ($(window).width() < 850) {
$(".nav").hide();
} else {
$(".nav").show();
}
});
$("#toggle-menu").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----toggle menu*/
/*Jump Scroll*/
$(function() {
var $window = $(window), $document = $(document),
transitionSupported = typeof document.body.style.transitionProperty === "string", // detect CSS transition support
scrollTime = 1; // scroll time in seconds
$(document).on("click", "a[href*=#]:not([href=#])", function(e) {
var target, avail, scroll, deltaScroll;
if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname) {
target = $(this.hash);
target = target.length ? target : $("[id=" + this.hash.slice(1) + "]");
if (target.length) {
avail = $document.height() - $window.height();
if (avail > 0) {
scroll = target.offset().top;
if (scroll > avail) {
scroll = avail;
}
} else {
scroll = 0;
}
deltaScroll = $window.scrollTop() - scroll;
// if we don't have to scroll because we're already at the right scrolling level,
if (!deltaScroll) {
return; // do nothing
}
e.preventDefault();
if (transitionSupported) {
$("html").css({
"margin-top": deltaScroll + "px",
"transition": scrollTime + "s ease-in-out"
}).data("transitioning", scroll);
} else {
$("html, body").stop(true, true) // stop potential other jQuery animation (assuming we're the only one doing it)
.animate({
scrollTop: scroll + "px"
}, scrollTime * 1000);
return;
}
}
}
});
if (transitionSupported) {
$("html").on("transitionend webkitTransitionEnd msTransitionEnd oTransitionEnd", function(e) {
var $this = $(this),
scroll = $this.data("transitioning");
if (e.target === e.currentTarget && scroll) {
$this.removeAttr("style").removeData("transitioning");
$("html, body").scrollTop(scroll);
}
});
}
});
/*----/----Jump Scroll*/
/*contact let me know toggle*/
jQuery(".letmeknow").click(function () {
jQuery(".container").slideToggle();
});
/*----/-----contact let me know toggle*/
});
</script>
HTML:
<div class="header">
<div class="navbar">
LogoPlaceHolder
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="maincontent">
<div class="panel multiplepanels" id="panel1">
<div class="inner"> 1 </div>
</div>
<div class="panel panel-blank multiplepanels" id="panel2">
<div class="inner"> <p>Work Title 1</p> View Project → </div>
</div>
<div class="panel multiplepanels" id="panel3">
<div class="inner"> <p>Work Title 2</p> View Project → </div>
</div>
<div class="panel panel-blank multiplepanels" id="panel4">
<div class="inner"> <p>Work Title 3</p> View Project → </div>
</div>
<div class="panel multiplepanels" id="panel5">
<div class="inner"> <p>Work Title 4</p> View Project → </div>
</div>
<div class="panel panel-blank multiplepanels" id="panel6">
<div class="inner"> <p>Work Title 5</p> View Project → </div>
</div>
<div class="panel multiplepanels" id="panel7">
<div class="inner"> <p>Work Title 6</p> View Project → </div>
</div>
<div class="panel panel-blank multiplepanels" id="panel8">
<div class="inner"> <P>Like what I do?</P> </div>
</div>
<div class="panel multiplepanels" id="panel9">
<div class="inner"> <p>Social</p> </div>
</div>
</div>
<footer>
<div class="" id="panel10">
<div class="inner"> © 2015 thiswebsite.com</div>
</div>
</footer>
Give those elements a unique id or class and in the on() function, use those as the selectors:
$(document).on("click", "#uniqueId .orClass", function(e) {
//code
});
You can trigger the wanted click event only on the children of the .nav element by doing the following:
$(".nav").on("click", "a[href*=#]:not([href=#])", function(e) {
...
});
or
$(document).on("click", ".nav a[href*=#]:not([href=#])", function(e) {
...
});