hide bootstrap navbar when scrolling - javascript

I'm trying to hide/show a Bootstrap navbar when scrolling down/up but it does not seem to work. I'm stuck and I would really appreciate some help here. Could anyone tell me what I am doing wrong? Please bear in mind I'm learning how to use Bootstrap and got very little knowledge about jQuery.
When I check the code with the browser console it does not show any error.
I have also tried fadeIn and fadeOut as well as addClass and removeClass functions with no luck.
$(document).ready(function() {
var banner = $("#navscroll");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= banner.height()) {
$("#banner").hide();
} else {
$("banner").show();
}
});
});
console.log();
body {
background-color: azure;
}
.divi {
width: 500px;
height: 500px;
}
#divi1 {
background-color: red;
}
#divi2 {
background-color: greenyellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 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-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<!-- Stylesheet for Mysite -->
<title>My Site</title>
</head>
<body>
<!-- Banner -->
<div id="banner" class="container-fluid">
<nav id="navscroll" class="navbar navbar-toggleable-sm navbar-light fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">My Site</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Me<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">What I do</a>
<a class="nav-item nav-link" href="#">Find Me</a>
</div>
</div>
</nav>
</div>
<!-- Banner -->
<!-- Divs -->
<div class="container-fluid">
<div id="divi1" class="divi"></div>
<div id="divi2" class="divi"></div>
</div>
<!-- Divs -->
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>

There are two issues preventing your code from showing the navbar back when scrolling up:
The line $("banner").show(); => there is "#" missing before banner.
When hiding an element, its height isn't kept. Therefore, when testing the nvarbar height after it's already hidden, you get an unexpected result. Therefore, I recommend to save the height in advance and compare it to the saved variable.
The fixed code is:
$(document).ready(function() {
var banner_height = $("#navscroll").height();
var lastScrollTop = 0;
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var currScrollTop = $(this).scrollTop();
if (scroll >= banner_height && currScrollTop > lastScrollTop) {
$("#banner").hide();
} else {
$("#banner").show();
}
lastScrollTop = currScrollTop;
});
});
body {
background-color: azure;
}
.divi {
width: 500px;
height: 500px;
}
#divi1 {
background-color: red;
}
#divi2 {
background-color: greenyellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 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-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<!-- Stylesheet for Mysite -->
<title>My Site</title>
</head>
<body>
<!-- Banner -->
<div id="banner" class="container-fluid">
<nav id="navscroll" class="navbar navbar-toggleable-sm navbar-light fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">My Site</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Me<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">What I do</a>
<a class="nav-item nav-link" href="#">Find Me</a>
</div>
</div>
</nav>
</div>
<!-- Banner -->
<!-- Divs -->
<div class="container-fluid">
<div id="divi1" class="divi"></div>
<div id="divi2" class="divi"></div>
</div>
<!-- Divs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>

Try to define banner height outside the scroll function and also you forgot #, your script looks like this
$(document).ready(function(){
var banner = $("#navscroll");
var bannerHeight = banner.height();
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll >= bannerHeight){
$("#banner").hide();
} else {
$("#banner").show();
}
});
});

I have fixed the code for you and added some comments,
try to open console and scroll to see what is happening.
Basicly you were comparing scroll height to the banner height which changed from 40 to -16 when it got hidden, so you have to save it before.
$(document).ready(function(){
var banner = $("#navscroll");
var bannerStartHeight = $("#navscroll").height();
$(window).scroll(function(){
var scroll = $(window).scrollTop();
console.log("SCROLL: "+scroll)
console.log("BANNER HEIGHT:"+banner.height())
console.log("BANNER START HEIGHT: "+bannerStartHeight)
if (scroll >= bannerStartHeight){
$("#banner").hide();
} else {
$("#banner").show(); //here u forgot a #
}
});
});
Hope it helps

Banner height should be calculated outside the scroll function.
$(document).ready(function() {
var banner = $("#navscroll");
var bannerHgt = banner.height();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= bannerHgt) {
$("#banner").hide();
} else {
$("#banner").show();
}
});
});
console.log();
body{
background-color: azure;
}
.divi{
width: 500px;
height: 500px;
}
#divi1{
background-color: red;
}
#divi2{
background-color: greenyellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 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-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<!-- Stylesheet for Mysite -->
<title>My Site</title>
</head>
<body>
<!-- Banner -->
<div id="banner" class="container-fluid">
<nav id="navscroll" class="navbar navbar-toggleable-sm navbar-light fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">My Site</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Me<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">What I do</a>
<a class="nav-item nav-link" href="#">Find Me</a>
</div>
</div>
</nav>
</div>
<!-- Banner -->
<!-- Divs -->
<div class="container-fluid">
<div id="divi1" class="divi"></div>
<div id="divi2" class="divi"></div>
</div>
<!-- Divs -->
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>

Related

Bootstrap 5 JavaScript not working, what did I do wrong?

Pardon me if I am missing something obvious. I am using WebStorm to write a website and wanted to experiment with Bootstrap. Now the problem is that I'm pretty sure the Bootstrap's JavaScript isn't working. For example, I can't toggle a div with a "collapse" class, the Navbar "active" class isn't working as well. Here is my code. UPDATE: updated code, I should also add my javascript is working, but the bootstrap javascript isn't
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shachar's Website</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- My StyleSheet -->
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<a class="navbar-brand text-info " href="#">Logo</a>
<button class="navbar-toggler bg-info menu-icon-container" type="button" data-toggle="collapse" data-target="#navbar-info" onclick="animateMenu(this)">
<div class="menu-icon1"></div>
<div class="menu-icon2"></div>
<div class="menu-icon3"></div>
</button>
<div class="collapse navbar-collapse" id="navbar-info">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</div>
</nav>
Test1
<div class="collapse" id="bonus">
Test2
</div>
<div id="homepage-body" class=""></div>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+ mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<!-- My JavaScript -->
<script type="text/javascript" src="./myscript.js"></script>
</body>
<script> needs to be placed before </body> and add integrity and crossorigin. In general, like this:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+ mo//f6V8Qbsw3" crossorigin="anonymous"></script>
Here is the documentation.

HTML cannot send data to Firebase

After i write firebase login, firebase init this file this file appears
My CSS firebaserc
{
"projects": {
"default": "smarthome-e154e"
}
}
My HTML if you want to see my code.
<!doctype html>
<html lang="en">
<head>
<!-- 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">
<title>Pembagi Kartu</title>
<link rel = "icon" href = "title.png" type = "image/x-icon">
<link rel="stylesheet" href="styles.css">
<style>
body {
background-image: url('card2.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<header class="fixed-top bg-light">
<nav class="navbar navbar-expand-lg navbar-light container">
<a class="navbar-brand" href="#">Pembagi Kartu Otomatis</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pilihan</a>
</li>
</ul>
</div>
</nav>
</header>
<br><br><br><br><br>
<content>
<div class="container bg-light "style="min-height: 100%;height: 100%; background-color: aliceblue;">
<div class="justify-content-center d-flex">
<button type="button" class="btn btn-success" onclick="led1on()" id="Acak">Acak</button>
<button type="button" class="btn btn-danger" onclick="led1off()" id="Tentukan">Tentukan</button>
<button type="button" class="btn btn-primary">Mulai</button>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</content>
<br><br><br><br><br>
<footer class="fixed-bottom bg-light">
<br>
<div class="inner container">
<p>© Renaldy Kevin Sidharta - 2021</p>
</div>
</footer>
<!-- 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>
<script src="app.js"></script>
</body>
</html>
i want to update data to firebase, my project is turn light on or off using internet.
My app.js
const firebaseConfig = {
SENSORED };
firebase.initializeApp(firebaseConfig);
let database = firebase.database();
function led1off(){
console.log(document.getElementById());
database.ref('Lampu/Led0').set("0");
}
function led1on(){
database.ref('Lampu/Led0').set("1");
}
My error after write firebase serve --debug --only function
[2021-11-09T12:17:35.704Z] AssertionError [ERR_ASSERTION]: expected value to be defined but got "undefined"
at new AssertionError (internal/assert/assertion_error.js:467:5)
at Object.assertDefined (C:\Users\Kevin\AppData\Roaming\npm\node_modules\firebase-tools\lib\utils.js:360:15)
at C:\Users\Kevin\AppData\Roaming\npm\node_modules\firebase-tools\lib\serve\index.js:15:36
at arrayMap (C:\Users\Kevin\AppData\Roaming\npm\node_modules\firebase-tools\node_modules\lodash\lodash.js:653:23)
at Function.map (C:\Users\Kevin\AppData\Roaming\npm\node_modules\firebase-tools\node_modules\lodash\lodash.js:9622:14)
at serve (C:\Users\Kevin\AppData\Roaming\npm\node_modules\firebase-tools\lib\serve\index.js:14:25)
at Command.actionFn (C:\Users\Kevin\AppData\Roaming\npm\node_modules\firebase-tools\lib\commands\serve.js:47:16)
at C:\Users\Kevin\AppData\Roaming\npm\node_modules\firebase-tools\lib\command.js:190:25
at processTicksAndRejections (internal/process/task_queues.js:95:5)
Error: An unexpected error has occurred.
What happen? i dont know to solve this problem. Please help me
i want to update this database value to 0 or 1
Note : im using node.js

bootstrap default navbar doestn work right

Bootstrap DEFAULT-navbar jump to a few pixels under #point of my sections, anyway AFFIX-navbar works great.
You can check it here: http://kresyproduction.cz/
The problem is when i click on any link in default navbar it doesnt scroll in right way. Just like u can see on my page. Few pixels under the section and it hides some content. But when you scroll a little bit and the default navbar change to affix links work perfect.
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<title>Kresy Production</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="img/favicon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<script src="js/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
</script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
</head>
<body>
<nav class="navbar navbar navbar-default navbar-static-top" data-spy="affix" data-offset-top="50">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#domu"><img src="img/kp_white.png" alt="logo" title="Kresy Production" style="width auto;height: 30px;"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Domů</li>
<li>Služby</li>
<li>Showreel</li>
<li>O nás</li>
<li>Kontakt</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
.
.
</body>
Your navbar has data-offset-top value. That is causing the issue. Change this
<nav class="navbar navbar-default nav-fixed-top" data-spy="affix" data-offset-top="50">
to this -
<nav class="navbar navbar-default nav-fixed-top" data-spy="affix" >
Hope this helps...
EDIT: 1 without removing data-offset-top value, edit it to this
<nav class="navbar navbar-default navbar-fixed-top" data-spy="affix" data-offset-top="xx"> -- xx could be the data offset that works for you.

Close toggle after opening

Just learning Bootstrap and I snagged a theme online and while working on the nav bar, found that the toggle button doesn't toggle back to close after being opened. I've done quite a bit of searching but have had a hard time finding anything that could help me... Attached is the code I am working on. Any and all help is appreciated.
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>CardSpoiler</title>
<meta name="description" content="BlackTie.co - Free Handsome Bootstrap Themes" />
<meta name="keywords" content="themes, bootstrap, free, templates, bootstrap 3, freebie,">
<meta property="og:title" content="">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="fancybox/jquery.fancybox-v=2.1.5.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,300,200&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="prefetch" href="images/zoom.png">
</head>
<style>
body {
background: #232526;
background: -webkit-linear-gradient(to right, #232526 , #414345);
background: linear-gradient(to right, #232526 , #414345);
margin: 0em;
vertical-align: middle;
}
li { cursor: pointer; cursor: hand; }
.navbar-toggle{
background-color: #232526;
}
</style>
<body>
<div class="navbar navbar-fixed-top" data-activeslide="1">
<div class="container">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav row">
<li data-slide="1" class="col-12 col-sm-1"><a id="home" title="Home"><span class="icon icon-home"></span> <span class="text">Home</span></a></li>
<li data-slide="2" class="col-12 col-sm-1"><a id="warrior" title="Warrior" class="external nav"><span class="icon icon-filter"></span> <span class="text">Warrior</span></a></li>
<li data-slide="3" class="col-12 col-sm-1"><a id="druid" href="../../../CardSpoiler.html" title="Druid"><span class="icon icon-leaf"></span> <span class="text">Druid</span></a></li>
<li data-slide="4" class="col-12 col-sm-1"><a id="priest" href="../../../CardSpoiler.html" title="Priest"><span class="icon icon-plus-sign"></span> <span class="text">Priest</span></a></li>
<li data-slide="5" class="col-12 col-sm-1"><a id="paladin" href="../../../CardSpoiler.html" title="Paladin"><span class="icon icon-heart"></span> <span class="text">Paladin</span></a></li>
<li data-slide="6" class="col-12 col-sm-1"><a id="hunter" href="../../../CardSpoiler.html" title="Hunter"><span class="icon icon-screenshot"></span> <span class="text">Hunter</span></a></li>
<li data-slide="1" class="col-12 col-sm-1"><a id="mage" href="../../../CardSpoiler.html" title="Mage"><span class="icon icon-fire"></span> <span class="text">Mage</span></a></li>
<li data-slide="2" class="col-12 col-sm-1"><a id="shaman" href="../../../CardSpoiler.html" title="Shaman"><span class="icon icon-tint"></span> <span class="text">Shaman</span></a></li>
<li data-slide="3" class="col-12 col-sm-1"><a id="warlock" href="../../../CardSpoiler.html" title="Warlock"><span class="icon icon-user"></span> <span class="text">Warlock</span></a></li>
<li data-slide="4" class="col-12 col-sm-1"><a id="rogue" href="../../../CardSpoiler.html" title="Rogue"><span class="icon icon-eye-close"></span> <span class="text">Rogue</span></a></li>
<li data-slide="5" class="col-12 col-sm-1"><a id="minions" href="../../../CardSpoiler.html" title="Minions"><span class="icon icon-chevron-up"></span> <span class="text">Minions</span></a></li>
<li data-slide="6" class="col-12 col-sm-1"><a id="spells" href="../../../CardSpoiler.html" title="Spells"><span class="icon icon-chevron-down"></span> <span class="text">Spells</span></a></li>
</ul>
<div class="row">
<div class="col-sm-2 active-menu"></div>
</div>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
</body>
<!-- SCRIPTS -->
<script src="js/html5shiv.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.pack-v=2.1.5.js"></script>
<script src="js/script.js"></script>
<!-- fancybox init -->
<script>
$(document).ready(function(e) {
var lis = $('.nav > li');
menu_focus( lis[0], 1 );
$(".fancybox").fancybox({
padding: 10,
helpers: {
overlay: {
locked: false
}
}
});
});
document.getElementById("home").onclick = function () {
location.href = "../../../CardSpoiler.html";
};
document.getElementById("warrior").onclick = function () {
location.href = "../../../CardSpoiler_Warrior.html";
};
document.getElementById("druid").onclick = function () {
location.href = "../../../CardSpoiler_Druid.html";
};
document.getElementById("priest").onclick = function () {
location.href = "../../../CardSpoiler_Priest.html";
};
document.getElementById("paladin").onclick = function () {
location.href = "../../../CardSpoiler_Paladin.html";
};
document.getElementById("hunter").onclick = function () {
location.href = "../../../CardSpoiler_Hunter.html";
};
document.getElementById("mage").onclick = function () {
location.href = "../../../CardSpoiler_Mage.html";
};
document.getElementById("shaman").onclick = function () {
location.href = "../../../CardSpoiler_Shaman.html";
};
document.getElementById("warlock").onclick = function () {
location.href = "../../../CardSpoiler_Warlock.html";
};
document.getElementById("rogue").onclick = function () {
location.href = "../../../CardSpoiler_Rogue.html";
};
document.getElementById("minions").onclick = function () {
location.href = "../../../CardSpoiler_MSOG_Minions.html";
};
document.getElementById("spells").onclick = function () {
location.href = "../../../CardSpoiler_MSOG_Spells.html";
};
</script>
</html>
The problem was with the z-index of the .navbar-toggle. The list items had a bigger z-index, while the .navbar-toggle lacked it. Adding this to your CSS will work:
.navbar-toggle {
z-index: 5;
}
Try playing around with Working JSBin.
To compare it with the original code you had, see Old Code.

jQuery progressbar only load on first

When I run my code it makes the animation not show on my progressbar and the percentages keep going up and dont stop at the given value.
I have no idea what I am doing wrong in my scripting or maybe namegiving. I try to make all progress bars load up to their given value as an animation with a span under them showing how much percent the progressbar is on.
Here is a fiddle
https://jsfiddle.net/2s2bmoj2/
Ans some of my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Result test</title>
<!-- Animate CSS -->
<link href="css/animate.css" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/waypoints.min.js"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/modernizr.js" type="text/javascript"></script>
<script src="js/bars.js" type="text/javascript"></script>
<script>
</script>
</head>
<body>
<nav class="navbar navbar-inverse 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">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Result page test</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Result random test</h1>
</div>
</div>
<div class="row">
<div class="col-md-6 js--wp-2">
<h2>Photoshop</h2>
<h4>Kanalen</h4>
<progress class="progressbar" value="21" max="100">
</progress>
<span class="progress-value">0%</span>
<h4>Kanalen</h4>
<progress class="progressbar" value="56" max="100">
</progress>
<span class="progress-value">0%</span>
<h4>Kanalen</h4>
<progress class="progressbar" value="83" max="100">
</progress>
<span class="progress-value">0%</span>
<h4>Kanalen</h4>
<progress class="progressbar" value="15" max="100">
</progress>
<span class="progress-value">0%</span>
</div>
</div>
<div class="col-md-12">
View open tests
</div>
</div>
</section>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')
</script>
<script src="js/bootstrap.js"></script>
<script src="js/animation.js"></script>
<script src="js/progressbar.js"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.waypoints.min.js"></script>
</body>
</html>
ANIMATION
$(document).ready(function () {
var progressbar = document.getElementsByClassName('progressbar')
, target = +progressbar.value
, time = (300 / target) * 5
, value = 0;
var loading = function () {
value += 1;
progressbar.value = value;
$('.progress-value').html(value + '%');
if (value == target) {
clearInterval(animate);
}
};
var animate = setInterval(function () {
loading();
}, time);
});
This jQuery code should be working. I created it in your codepen.
$(function() {
$.each($('progress'), function(key, item) {
var targetVal = item.value;
var currentVal = 0;
var time = (300 / targetVal) * 5;
var progressText = $(item).next('[class^=progress-value]');
item.value = 0;
var loading = setInterval(function() {
item.value = currentVal++;
progressText.html(item.value + '%');
if (targetVal == currentVal) {
clearInterval(loading);
}
}, time);
});
});
you can use var prbar=getElementsByClassName('progressbar');

Categories