I have one page website with sections and bootstrap navbar. I can move to different section by clicking link in navbar, scrolling (auto-scroll to next section) and clicking arrow (up/down).
My problem is: when I click link or click arrow to move to different section, and then scroll, scrolling don't take new location/section, but act as if I were on previous section. Example: I'm on 2nd section, I click link and move to 4th section, and than scroll up. Instead of going to 3rd section, I go to first.
My js code is:
/*fullpagescroll*/
$(document).ready(function() {
var scrollLink = $('.scroll');
/*smoothScrolling */
scrollLink.click(function(e) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 800)
})
/*active link */
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 50
if (sectionOffset <= scrollbarLocation) {
$(this).parent().addClass('active')
$(this).parent().siblings().removeClass('active')
}
})
})
});
//Set each section's height equals to the window height
$('section').height($(window).height());
/*set the class 'active' to the first element
this will serve as our indicator*/
$('section').first().addClass('active');
/* handle the mousewheel event together with
DOMMouseScroll to work on cross browser */
$(document).on('mousewheel DOMMouseScroll', function (e) {
e.preventDefault();//prevent the default mousewheel scrolling
var active = $('section.active');
//get the delta to determine the mousewheel scrol UP and DOWN
var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;
//if the delta value is negative, the user is scrolling down
if (delta < 0) {
//mousewheel down handler
next = active.next();
//check if the next section exist and animate the anchoring
if (next.length) {
/*setTimeout is here to prevent the scrolling animation
to jump to the topmost or bottom when
the user scrolled very fast.*/
var timer = setTimeout(function () {
/* animate the scrollTop by passing
the elements offset top value */
$('body, html').animate({
scrollTop: next.offset().top
}, 'slow');
// move the indicator 'active' class
next.addClass('active')
.siblings().removeClass('active');
clearTimeout(timer);
}, 500);
}
} else {
//mousewheel up handler
/*similar logic to the mousewheel down handler
except that we are animate the anchoring
to the previous sibling element*/
prev = active.prev();
if (prev.length) {
var timer = setTimeout(function () {
$('body, html').animate({
scrollTop: prev.offset().top
}, 'slow');
prev.addClass('active')
.siblings().removeClass('active');
clearTimeout(timer);
}, 500);
}
}
});
$(document).ready(function(){
$("a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
});
My html is:
<!DOCTYPE html>
<html>
<head>
<title>CKB </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<!--<section id="move"> -->
<!-- NAVBAR-->
<section id="pageA">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand ml-auto">Brand</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a class="scroll" href="#pageA">Start</a></li>
<li ><a class="scroll" href="#pageB">About us</a></li>
<li ><a class="scroll" href="#pageC">Prices</a></li>
<li ><a class="scroll" href="#pageD">Knowledge</a></li>
<li ><a id="right" class="scroll" href="#pageE">Contact</a></li>
<li ><a id="right" class="scroll" href="#pageF">Localization</a></li>
</ul>
</div>
</div>
</nav>
<!---LOGO -->
<div class= "down">
<img src="down.png">
</div>
<!-- strzałki nawigujące -->
</section>
<section id="pageB">
<div class= "up1">
<img src="up.png">
</div>
<div class= "down ">
<img src="down.png">
</div>
</section>
<section id="pageC">
<div class= "up">
<img src="up.png">
</div>
<div class= "down">
<img src="down.png">
</div>
</section>
<section id="pageD">
<div class= "up">
<img src="up.png">
</div>
<div class= "down">
<img src="down.png">
</div>
</section>
<section id="pageE">
<div class= "up">
<img src="up.png">
</div>
<div class= "down">
<img src="down.png">
</div>
</section>
<section id="pageF">
<div class= "up">
<img src="up.png">
</div>
</section>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
My css is:
body {
overflow:hidden;
}
#content {
left:50%;
position: center;
padding-top: 10%;
text-align: center;
text-shadow: 5px 4px 3px rgba(0,0,0,0.4),
5px 8px 13px rgba(0,0,0,0.1),
5px 18px 23px rgba(0,0,0,0.1);
}
#logo {
width: 350px;
height: auto;
}
#sentencja {
padding-top: 1%;
margin-top: 0;
text-align: center;
color: white;
font-style: italic;
font-size: 2em;
}
.navbar-default {
background-color: black;
font-size: 1.15em;
font-weight: bold;
opacity: 0.8;
/*border-bottom: 2px solid grey;
height: 70px;
padding-top: 0.7%; */
}
.navbar .navbar-collapse {
text-align: center;
}
#media (min-width: 768px) {
.navbar-nav {
float:none;
margin:0 auto;
display: block;
text-align: center;
}
}
#media (min-width: 768px) {
.navbar-nav > li {
display: inline-block;
float:none;
}
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: white;
}
#media only screen and (max-width: 750px) {
.navbar-default .navbar-collapse {
border-color: grey;
background-color: black;
}
}
.navbar-default .navbar-brand { /* kolor */
color: #d6d6d6;
}
#media (min-width:768px){
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
float: left;
margin-right: -190px;
}
}
section {
width: 100%;
height: 750px;
float: left;
}
#pageA {
background: orange;
height:100%;
width:100%;
}
#pageB {
background: red;
height:100%;
width:100%;
}
#pageC {
background: yellow;
height:100%;
width:100%;
}
#pageD {
background: blue;
height:100%;
width:100%;
}
#pageE {
background: green;
height:100%;
width:100%;
}
#pageF {
background: white;
height:750px;
width:100%;
}
h1 {
text-align: center;
color: white;
margin-top: 70px;
}
h3 {
color: white;
}
.up {
position:relative;
padding-top:5.5%;
left:47.5%;
}
.up1 {
position:relative;
padding-top:7%;
left:47.5%;
}
.down {
position:relative;
left:47.5%;
padding-top: 475px;
}
*/
.down1 {
padding-top: 60px;
}
How to synchronise it? Thanks
Related
I handle hover event by my own to add a triangle pointer and a horizontally aligned submenu bar. It's working fine for showing and navigating to the submenu when the top menu is clicked. The problem is during hover, the submenu bar will disappear when trying to move mouse to the submenu.
TIA
screenshot
Code:
$("#menubar li.dropdown>a.nav-link").hover(function() {
if ($("#menubar li.dropdown").filter(function() {
return $(this).data("show")
}).length === 0)
$(this).closest("li").addClass("active show");
},
function() {
/*when top menu is clicked, don't hide submenu*/
if ($("#menubar li.dropdown").filter(function() {
return $(this).data("show")
}).length === 0)
$(this).closest("li").removeClass("active show");
});
$("#menubar li>a.nav-link").on("click", function(e) {
e.stopPropagation();
var $li = $(this).closest("li");
if (!$li.hasClass("dropdown")) {
$("#menubar li.dropdown").removeClass("active show");
$("#menubar li.dropdown").data("show", false);
} else {
if ($li.data("show")) {
$li.removeClass("active show");
$li.data("show", false);
} else {
$("#menubar li.dropdown").removeClass("active show");
$li.addClass("active show");
$li.data("show", true);
}
}
});
$("#menubar ul.dropdown-menu>li>a").on("click", function(e) {
$("#menubar li.dropdown").removeClass("active show");
$("#menubar li.dropdown").data("show", false);
});
#menubar ul {
height: 44px;
padding-top: 5px;
}
#menubar .nav-link {
font-size: 14px;
padding: 8px 50px 0 0 !important;
color: white !important;
}
#menubar .nav-link:focus,
#menubar .nav-link:hover,
#menubar .nav-link:visited {
color: white !important;
}
#menubar .navbar {
padding-left: 0 !important;
}
.navbar.navbar-dark {
height: 44px;
margin: 0 15%;
}
nav.navbar .navbar-nav li.nav-item.active:after {
content: "";
position: relative;
margin-left: -31px;
left: 50%;
bottom: 15px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
}
/*submenu*/
#menubar li.dropdown.show {
position: static;
}
#menubar li.dropdown.show .dropdown-menu {
display: table;
width: 100%;
text-align: center;
left: 0;
right: 0;
margin: 0;
}
.dropdown-menu>li {
display: table-cell;
padding-top: 6px;
}
.dropdown-menu>li a {
font-weight: 600;
}
.dropdown-menu>li a:hover {
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-dark ">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menubar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" id="menubar">
<ul class="nav navbar-nav">
<li class="nav-item ">
<a class="nav-link" href="#">Menu1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">Menu2</a>
<ul class="dropdown-menu" role="menu">
<li>Submenu1</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
</ul>
</div>
</nav>
You need to change hover event from link to list item, it is a common practice for your case:
$("#menubar li.dropdown").hover(function() {
...
});
I'm currently trying to create a navigation bar that sticks when you scroll past. I've gotten to the point where the bar will stick when I scroll past, but when I scroll back to the top the navbar is still sticking. I've been able to troubleshoot to realize that the navbar.offsetTop is being set to 0 when scrolling past, which causes the class "sticky" to never be removed. How can I fix this so that the navbar retains its original offset while being "stuck" to the top of the page?
HTML
<div style="height: 40px">
<ul class="navbar" id="navbar">
<a class="navbutton left" href="about.html"><b>About</b></a>
<a class="navbutton left" href="Games.html"><b>Games</b></a>
<a class="navbutton left" href="#"><b>Btn 1</b></a>
<a class="navbutton left" href="#"><b>Btn 2</b></a>
<a class="navbutton left" href="#"><b>Btn 3</b></a>
<a class="navbutton left" href="#"><b>Btn 4</b></a>
<a class="navbutton" href="#" style="float: right"><b>Btn 5</b></a>
</ul>
</div>
CSS
body {
font-family: Monaco;
background-color: white;
color: #f0dcca;
transition-duration: 0.4s;
}
.navbar {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navbutton {
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
/* padding: length|initial|inherit; */
padding: 10px 12px;
transition-duration: 0.4s;
}
.navbutton:hover {
background-color: #f0dcca;
color: black;
}
.sticky {
position: fixed;
top:0;
width: 100%;
}
.content {
padding: 16px;
}
.sticky + .content {
padding-top: 60px;
}
Javascript
function stickyNav() {
var navbar = document.getElementById("navbar");
var navTop = navbar.offsetTop;
console.log('navTop = ' + navTop);
console.log('scrollY = ' + window.scrollY);
if (window.scrollY >= navTop) {
navbar.classList.add("sticky");
}
else {
navbar.classList.remove("sticky");
}
}
window.addEventListener('scroll', stickyNav);
The problem is in the function definition of stickyNav.
What I'm seeing is stickyNav function is registered as a callback for the scroll event. But the variables navbar and navTop are inside the function which is assigning values to them every time you scroll. And navTop is getting assigned 0 every time. And the sticky class is never removed.
Try avoiding reassigning values. This worked for me.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Monaco;
background-color: white;
color: #f0dcca;
transition-duration: 0.4s;
height: 1000px;
}
.navbar {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navbutton {
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
/* padding: length|initial|inherit; */
padding: 10px 12px;
transition-duration: 0.4s;
}
.navbutton:hover {
background-color: #f0dcca;
color: black;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.content {
padding: 16px;
}
.sticky+.content {
padding-top: 60px;
}
</style>
<script>
function stickyNav() {
var navbar = document.getElementById("navbar");
var navTop = navbar.offsetTop;
window.addEventListener('scroll', function() {
console.log('navTop = ' + navTop);
console.log('scrollY = ' + window.scrollY);
if (window.scrollY >= navTop) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
});
}
</script>
</head>
<body onload="stickyNav()">
<h1>dummy content</h1>
<h1>dummy content</h1>
<h1>dummy content</h1>
<div style="height: 40px">
<ul class="navbar" id="navbar">
<a class="navbutton left" href="about.html"><b>About</b></a>
<a class="navbutton left" href="Games.html"><b>Games</b></a>
<a class="navbutton left" href="#"><b>Btn 1</b></a>
<a class="navbutton left" href="#"><b>Btn 2</b></a>
<a class="navbutton left" href="#"><b>Btn 3</b></a>
<a class="navbutton left" href="#"><b>Btn 4</b></a>
<a class="navbutton" href="#" style="float: right"><b>Btn 5</b></a>
</ul>
</div>
</body>
</html>
I'm trying to hide the h1 when the scroll is greater than 850, but when it goes below 850 also hides the nav.
If I hide the nav without hiding the h1, then it doesn't return with the fadeIn ()
I don't understand why the nav is hidden, if I ask you to just hide the id '#marca'.
HTML and CSS
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.header {
position: fixed;
margin-top: -23px;
width: 100%;
height: 70px;
}
.marca{
display: block;
}
h1{
text-align: center;
padding-top: 15px;
margin-bottom: 0;
}
h1 a{
text-decoration: none;
color: black;
}
.vacio{
height: 3000px;
}
/* MENU HEADER */
.menu-negro,
.menu-blanco{
margin-top: -35px;
/* display: flex;
justify-content: flex-end; */
float: right;
}
.menu-negro a,
.menu-blanco a,
.menu-negro img,
.menu-blanco img{
margin-right: 10px;
}
.menu-blanco{
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../js/proba.js" charset="utf-8"></script>
</head>
<body>
<header class="header">
<h1 id="marca">Marca</h1>
<nav id="menu-negro" class="menu-negro">
<a id="btn-carro" href="#"><img src="../logos/carro32pxnegro.png" alt=""></a>
<a id="btn-usuario" href="#"><img src="../logos/usuario32pxnegro.png" alt=""></a>
</nav>
<nav id="menu-blanco" class="menu-blanco">
<a id="btn-carro" href="#"><img src="../logos/carro32pxnegro.png" alt=""></a>
<a id="btn-usuario" href="#"><img src="../logos/usuario32pxnegro.png" alt=""></a>
</nav>
</header>
<div class="vacio">
</div>
</body>
</html>
This is my jquery code.
$(document).ready(function(){
marca = $('#marca')
menuNegro = $('#menu-negro')
$(window).scroll(function(){
window_y = $(window).scrollTop()
scroll_critical = 850
if(window_y > scroll_critical && marca.css('display') == "block"){
marca.fadeOut()
}
if(window_y < scroll_critical && marca.css('display') == "none"){
marca.fadeIn()
}
})
})
The problem is not that the fadeOut is hidding the entire nav, but this
when the h1 marca is hidden, the menu-negro stop floating to him, and start floating to the parent element, so it just goes up because 2 things, the header has a margin-top: -23px; and the menus have a margin-top: -35px;, what you could do is to add a class to change the margin of the nav like
$(document).ready(function(){
marca = $('#marca')
menuNegro = $('#menu-negro')
$(window).scroll(function(){
window_y = $(window).scrollTop()
scroll_critical = 850
if(window_y > scroll_critical && marca.css('display') == "block"){
$('.menu-negro').addClass('no-margin-top');
marca.fadeOut()
}
if(window_y < scroll_critical && marca.css('display') == "none"){
$('.menu-negro').removeClass('no-margin-top');
marca.fadeIn()
}
})
})
and in the css just add
.menu-negro.no-margin-top {
margin-top: 23px;
}
Sorry for the bad title, I didn't really know how to explain it concisely.
I'm trying to make a navbar that only shows up when hovering over an icon that appears only when scrolling upwards and stays visible as long as I have my cursor over it (over the navbar or the icon).
The problem is, I want it to be always visible in the first section of the website.
It works ok when first loading it, but after scrolling down and then returning up when I hover over the navbar and then I move the cursor outside it disappears.
Here's a fiddle so you can take a look: https://jsfiddle.net/kksp9pbu/1/
Here's the HTML:
<div id="menu-trigger" class="hidden-menu trigger"><i class="fa fa-bars"></i></div>
<nav class="navbar navbar-default navbar-fixed-top" id="main-nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<main>
<section class="container-fluid">
<div class="row">
<div class="col-xs-12" id="header">
<h1>The navbar should always be visible here</h1>
</div>
</div>
</section>
<section class="container-fluid">
<div class="row" id="about">
<div id="about-l"><h3>About</h3></div>
</div>
</section>
<section class="container-fluid">
<div class="row" id="portfolio">
<div id="about-l"><h3>Portfolio</h3></div>
</div>
</section>
CSS in case you need it:
#menu-trigger {
position: fixed;
top: 15px;
height: 40px;
right: 20px;
z-index:1;
cursor: pointer;
}
.fa-bars{
color: #fff
}
#main-nav {
height: 70px;
background-color: rgba(0, 119, 124, 0.46);
border-bottom: 3px solid #111;
}
.navbar-fixed-top {
top:0px;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.hidden-nav {
top:-75px !important;
}
.trigger {
opacity: 1;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.hidden-menu {
opacity: 0;
}
#main-nav a:link,
#main-nav a:visited {
text-decoration: none;
text-transform: uppercase;
font-weight: 400;
}
.navbar-nav {
margin-left: 80px;
}
.navbar-nav li {
padding: 30px 0 0 100px;
}
.navbar-nav>li>a {
padding: 0 0 5px 0 !important;
color: #fff !important;
}
.navbar-nav a:hover,
.navbar-nav a:active {
border-bottom: 1px solid #333;
}
.navbar-brand {
transition: color 0.2s ease;
color: #fff!important;
font-size: 2em !important;
font-weight: 100 !important;
}
.navbar-brand:hover {
color: #ffb100 !important;
}
/*----HEADER----*/
#header {
text-align: center;
height: 100vh;
background-color: #333;
background-color: #333;
color: #fff;
padding-top: 15%;
}
#header h1 {
font-size: 2.8em;
font-weight: 100;
}
/*----ABOUT----*/
#about{
height:100vh;
background-color:#39bebe;
}
#portfolio{
height:100vh;
background-color:#009eee;
}
And here's the jQuery code:
$(document).ready(function(){
var lastScrollTop = 0;
$(window).scroll(function(event) {
var scroll = $(window).scrollTop();
var aboutOffset=$("#about").offset().top;
if(scroll<=aboutOffset){ // if I haven't reached #about section yet
$("#main-nav").removeClass("hidden-nav");
} else {
$("#main-nav").addClass("hidden-nav"); //hide the navbar
function hideIt(){
$("#menu-trigger").addClass("hidden-menu"); //hide the trigger
};
if (scroll > lastScrollTop){ //scrolling down
setTimeout(hideIt, 2000);
} else {
$("#menu-trigger").removeClass("hidden-menu");
}
lastScrollTop = scroll;
$("#menu-trigger, #main-nav").on("mouseover", function(){ //if I hover over the trigger or the navbar
$("#main-nav").removeClass("hidden-nav"); // I leave the navbar visible
});
$("#menu-trigger, #main-nav").on("mouseout", function(){ //if I move the cursor out of the trigger or the navbar
$("#main-nav").addClass("hidden-nav"); // hide the navbar
});
}
}); // END $(window).scroll();
}); //END $(document).ready();
You have a function that it does something when you do scroll.
$(window).scroll(function(event) {
...
}
And you have a conditional that when it's false, this sets somthing behaviors.
if(scroll<=aboutOffset){
$("#main-nav").removeClass("hidden-nav");
} else {
...
}
The behavior that it's doing to hide the navbar is this:
$("#menu-trigger, #main-nav").on("mouseout", function(){
$("#main-nav").addClass("hidden-nav");
});
You need to delete this behavior ;-)
UPDATE
Or, a better solution would be this:
if(scroll<=aboutOffset){
$("#main-nav").removeClass("hidden-nav");
$("#menu-trigger, #main-nav").off("mouseout");
} else {
...
}
Final Update The problem got solved. Thank you all. Prepros compile my js file into main-dist. the new code was in there instead of my main.js. Thank you for all who help me.
update Able to reproduce the nonworking code in jsBin
I'm wondering why the function is not working in my js file after my jquery file is called but the script work in my HTML file.
I want the function to be in my js file so it isn't in each one of my HTML file.
Example 1 in html on jsFiddle
Example 2 in html
var navBar = function() {
var pull = $('#pull');
var menu = $('nav ul');
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
};
$(document).ready(navBar);
Really Long snippet. The navbar code work in snippet as well but it doesn't work when i load in my browser
//time on front page
function displayTime () {
var elt = document.getElementById("clock");
var now = new Date();
elt.innerHTML = now.toLocaleTimeString();
setTimeout (displayTime, 1000);
};
displayTime();
/*
function menu(){
$('.tMenu').click(function(){
$('nav ul').slideToggle();
})
}
menu(); */
var navBar = function() {
var pull = $('#pull');
var menu = $('nav ul');
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
};
$(document).ready(navBar);
//slider main page
var main = function(){
$('.arrow-next').click(function(){
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.fadeOut(500).removeClass('active-slide');
nextSlide.fadeIn(500).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function(){
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if(prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(500).removeClass('active-slide');
prevSlide.fadeIn(500).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
$('.dot').click(function(){
var index = $(this).index(); // get the index or position of the current element that has the class .dot
$('.slide').fadeOut(500); // to hide all elements with class .slide
$('.dot').removeClass('active-dot');
$('.slide').removeClass('active-slide').addClass('active');
$('#slide' + (index+1)).fadeIn(500);
$('#slide' + (index+1)).removeClass('active').addClass('active-slide');
$(this).addClass('active-dot');
});
};
$(document).ready(main);
.clearfix:before,
.clearfix:after {
content: ' ';
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
nav {
background: #17181D;
border-bottom: 1px solid #0A0A0A;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
height: 40px;
width: 100%;
}
nav ul {
height: 40px;
width: 600px;
margin: 0 auto;
padding: 0;
}
nav li {
display: inline;
float: left;
}
nav a {
color: #DED6D6;
display: inline-block;
line-height: 40px;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 0px #30365E;
width: 150px;
}
nav li a {
border-right: 1px solid #515676;
border-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #2575C6;
}
nav a#pull {
display: none;
}
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #C0C0C0;
border-right: 1px solid #C0C0C0;
}
nav a {
text-align: center;
width: 100%;
text-indent: 25px;
}
}
#media only screen and (max-width: 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #17181D;
width: 100%;
position: relative;
text-decoration: none;
}
nav a#pull:after {
border-top: .5em double white;
border-bottom: .145em solid white;
content: ' ';
display: inline-block;
height: 0.85em;
width: 1em;
position: absolute;
right: 15px;
top: 13px;
}
}
#media only screen and (max-width: 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid white;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
<div>
<h1 class='vb'></h1>
<div class='time'></div>
<div id='clock'></div>
<nav class='clearfix'>
<ul class='clearfix'>
<li>
Home
</li>
<li>
Bio
</li>
<li>
Hobbies
</li>
<li>
Resume
</li>
</ul>
<a href='#' id='pull'>Menu</a>
</nav>
</div>
</header>
<div class='slider container'>
<div class='slide active-slide slide-bg' id='slide1'>
<div class='container'>
<div class='row'>
<div class='slide-copy-1 col-xs-12'>
<h1>Surrounding</h1>
<p class='fun'>Our lives are so hectic with everyday work, business and errands that we tend to never stop and take in our surrounding. When was the last time you stop and enjoy a nice beatiful sunset?</p>
</div>
</div>
</div>
</div>
<div class='slide' id='slide2'>
<div class='container'>
<div class='row'>
<div class='slide-copy col-xs-5'>
<h1>Get Moving And Motivated!</h1>
<p>In a world where digital devices is so prominent, we get lost in them. Our strength are that we are very adaptable but it can also be our greatest weakness. </p>
</div>
<div class='slide-image col-md-8'>
<!--
<ul class='imageList'>
<li><a href='#'><img src="images/jog.jpg" /></a></li>
<li><a href='#'><img src="images/health.png" /></a></li>
<li><a href='#'><img src="images/motivated.jpg" /></a></li>
<li><a href='#'><img src='images/possible.jpg' /></a></li>
</ul> -->
</div>
</div>
</div>
</div>
<div class='slide' id='slide3'>
<div class='container'>
<div class='row'>
<div class='slide-copy col-xs-5'>
<h1>Food Delight</h1>
<p>We have all been there before!! Food is the best type of comfort. Eating healthy is great but nothing can satisfied your soul more than your favorite rarities.</p>
<!--<img src="images/sushi.jpg"/>-->
</div>
</div>
</div>
</div>
<div class='slide' id='slide4'>
<div class='container'>
<div class='row'>
<div class='slide-copy col-xs-5'>
<h1>Videos</h1>
<p>Movies, TV shows and online video play such a huge role in our culture. Learning, Entertainment, Visual Satisfaction etc.</p>
<!--<iframe class='vid' width="750" height="400" src="https://www.youtube.com/embed/sGbxmsDFVnE" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
</div>
</div>
<div class='slider-nav'>
<ul class='slider-dot'>
<li class='dot dot1 active-dot'>•</li>
<li class='dot dot2'>•</li>
<li class='dot dot3'>•</li>
<li class='dot dot4'>•</li>
</ul>
</div>
Please see it's working here [1]: https://jsfiddle.net/e1aar5hz/11/
$(function() {
var pull = $('#pull');
var menu = $('nav ul');
menu.hide();
pull.show()
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
You code works just as it should. You target a link with id="pull" to toggle the menu on and off. The problem is, on your CSS, you hide that #pull link when you add this:
a#pull {
display: none;
}
So the button we need to click to toggle the menu is not there.
Just remove that CSS and you will see the "Menu" button and that the script is working fine.
If this is not the problem, please elaborate on what you are expecting to happen with the code you have here.
i recreated your code and is working just fine the only error i corrected was on displayTime function
function displayTime () {
var now = new Date();
var elt = $("#clock").text(now.toLocaleTimeString());
setTimeout (displayTime, 1000);
};
here is a demo http://plnkr.co/edit/6qNQMIQT4EhtqrlzUtGb?p=preview