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
Related
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.
I am currently working with this code which is part of my Web development course from udemy
<html lang="en">
<head>
<meta charset="utf-8">
<title>TinDog</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Limelight&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script 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>
</head>
<body>
<section id="title">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">Tindog</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">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class=" col-lg-6">
<h1 >Meet new and interesting dogs nearby.</h1>
<button type="button">Download</button>
<button type="button">Download</button>
</div>
<div class="col-lg-6">
<img src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<h3>Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
<h3>Elite Clientele</h3>
<p>We have all the dogs, the greatest dogs.</p>
<h3>Guaranteed to work.</h3>
<p>Find the love of your dog's life or your money back.</p>
</section>
<!-- Testimonials -->
<section id="testimonials">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em>
</section>
<!-- Press -->
<section id="press">
<img src="images/techcrunch.png" alt="tc-logo">
<img src="images/tnw.png" alt="tnw-logo">
<img src="images/bizinsider.png" alt="biz-insider-logo">
<img src="images/mashable.png" alt="mashable-logo">
</section>
<!-- Pricing -->
<section id="pricing">
<h2>A Plan for Every Dog's Needs</h2>
<p>Simple and affordable price plans for your and your dog.</p>
<h3>Chihuahua</h3>
<h2>Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
<h3>Labrador</h3>
<h2>$49 / mo</h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
<h3>Mastiff</h3>
<h2>$99 / mo</h2>
<p>Pirority Listing</p>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
</section>
<!-- Call to Action -->
<section id="cta">
<h3>Find the True Love of Your Dog's Life Today.</h3>
<button type="button">Download</button>
<button type="button">Download</button>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright 2018 TinDog</p>
</footer>
</body>
</html>
which is linked to this css file ( i have not writen much in css file because i am unable to make any change)
#title{ background-color:#ff4c68;}
h1{ line-height: 1.3;
font-size: 90px;
background-color: yellow; }
i noticed that I was able to change background color but i am unable to change line height, font size,font family of elements such as h1 ,h3 ,h2 etc from external css file but i can style it by inline css. why is that so?Please help.
After you load your stylesheet you are loading a third-party stylesheet from Bootstrap which probably applies its own styles to those elements.
Use the Inspector feature of your web browsers developer tools to look at your h1 element and see which styles are applied to it, in which order, and where they come from.
Remember that styles are applied in the cascade order with rulesets of higher specificity overriding those of lower specificity and when specificity is equal later rulesets overriding earlier ones.
If specifity is equal then simply moving the <link> to your stylesheet so it is added after Bootstrap's will resolve your problem.
I am start working with DataTable.js and when I want to integrate in my project which is done in ASP.NET CORE MVC 5.0 I get error like
Uncaught TypeError: $(...).DataTable is not a function
I try to google and I found that this error may come when you JQuery is older version, but I updated to newest version 3.7.1
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
WHat else I look is I try to change calling of function to call by ID and by class but nothing change as well.
Here is my layout page as well where I include datatable.min.js and datatable.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - BergClinic</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="~/datatables/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="~/datatables/datatables.css" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/fontawesome/css/all.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css">
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-primary border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">BergClinic</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Patient" asp-action="Index">Patients</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Doctor" asp-action="Index">Doctors</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="AdmissionPatient" asp-action="Index">Admission patient</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-white-50 bg-primary">
<div class="container">
© 2021 - BergClinic
</div>
</footer>
<script type="text/javascript" src="~/datatables/datatables.min.js"></script>
<script type="text/javascript" src="~/datatables/datatables.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- include summernote css/js -->
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#10"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
In my Index View Page I also create calling of datatable in following meaner
#model IEnumerable<BergClinics.Models.Doctor>
#{
ViewData["Title"] = "Index";
}
<div class="container p-3 bg-white">
<div class="row pt-4">
<div class="col-6">
<h2 class="text-primary">Doctor's List</h2>
</div>
</div>
<br /><br />
#if (Model.Count() > 0)
{
<table class="table datatable-responsive datatable-doctor" style="width:100%">
<thead>
<tr>
<th>
Doctor Name
</th>
<th>
Code
</th>
<th>
Speciality
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var obj in Model)
{
<tr>
<td width="25%">#obj.Firstname #obj.Lastname</td>
<td width="25%">#obj.Code</td>
<td width="25%">#obj.Speciality</td>
<td class="text-center">
<div class="w-75 btn-group" role="group">
<a asp-controller="Doctor" asp-route-Id="#obj.Id" asp-action="Edit" class="btn btn-primary mx-2">
<i class="fas fa-edit"></i>
</a>
<a asp-controller="Doctor" asp-route-Id="#obj.Id" asp-action="Delete" class="btn btn-danger mx-2">
<i class="far fa-trash-alt"></i>
</a>
</div>
</td>
</tr>
}
</tbody>
</table>
}
else
{
<p> No Doctor exists.</p>
}
</div>
<script>
$('.datatable-doctor').DataTable({
dom: 'Bfrtip',
//buttons: [
// {
// text: '<i class="btn btn-info"><i class="fas fa-plus"></i> Create New Doctor</a>',
// className: 'btn bg-blue',
// action: function (e, dt, node, config) {
// window.location.replace("/Doctor/Create");
// }
// }
//],
columnDefs: [
//Ovaj dio je potreban
{
responsivePriority: 1,
targets: -1
},
{
targets: [0],
orderable: true,
searchable: true,
printable: true,
width: "120"
}
]
});
</script>
Does anyone know where I made mistake ? What is wrong here ?
When you load jQuery you create a new instance of $ and jQuery which don't have any plugins you had previously loaded and attached to previous instances of jQuery.
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
You are loading four different versions of jQuery!
Load one and make sure it is the current version.
Remove all of the lines quoted above except the first one.
You are trying to call DataTables in a script loaded in the body of the document, which is above the footer where you have:
<script type="text/javascript" src="~/datatables/datatables.min.js"></script>
<script type="text/javascript" src="~/datatables/datatables.js"></script>
You need to load the plugin before you call it.
You also shouldn't load the plugin twice.
Move one of those lines so it is immediately after the line where you load jQuery. Remove the other one.
I seem to be having an issue when trying to set the persistence of the Firebase Auth session, I have been coming back and forward, trying to google search the issue but cannot seem to find an issue.
Below is my HTML and Javascript code, I am also using jQuery but that should not have an impact I believe.
HTML Code
<!doctype html>
<html lang="en">
<head>
<!-- Firebase stuff -->
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-auth.js"></script>
<title>Loading EasiChurch...</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="stream.js"></script>
<script src="init.js"></script>
<script src="app.js"></script>
<script src="content.js"></script>
<script src="node_modules/jquery/src/jquery.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<header>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#"><span id="sitetitle"></span></a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Locations</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings </a>
<div class="dropdown-menu" aria-labelledby="dropdownId">
<a class="dropdown-item" href="#">Site Configuration</a>
<a class="dropdown-item" href="#">Stream Configuration</a>
<a class="dropdown-item" href="#">Booking Configuration</a>
<a class="dropdown-item" href="#">Donations Configuration</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Sign Out</button>
</form>
</div>
</nav>
</header>
<!--<div id="div_logged_in">
<h1>Welcome <span id="username"></span>!</h1>
</div>
-->
<div id="div_not_logged_in">
<center>>
<div class="jumbotron">
<h3 class="display-4"><span id="sitetitle">Sitetitle</span></h3>
<p class="lead">Please Sign In using your Google Account below...</p>
<hr class="my-4">
<center><a class="btn btn-primary btn-lg" href="#" onclick="googleSignin()" role="button">Sign in with Google.</a></center>
</div>
</center>
</div>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
<style>
.jumbotron {
padding-right: 9px;
margin-top: 5%;
width: 90%;
margin-left: 3%;
}
</style>
</html>
Javascript Code
// Your web app's Firebase configuration
var firebaseConfig = {
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
console.log("Ready to go! Firebase Domain: " + firebaseConfig.authDomain)
// Session id is set before anything else, this is exicting
const sessionid = Math.random(); // changes per refresh, not really an issue tbh
// Initialise span variables that will change when we load firebase....
var loggedin = false;
var sitetitle;
var sitedescription;
var siteid;
var locations = {
core: "Hutt Valley",
sub1: "Hutt Valley",
sub2: "Hutt Valley",
sub3: "Hutt Valley",
sub4: "Hutt Valley",
};
// NOTE NEED TO USE DOM on load!!!
$('#div_logged_in').hide();
$('#div_not_logged_in').show();
var provider = new firebase.auth.GoogleAuthProvider();
function googleSignin() {
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION)
.signInWithPopup(provider).then(function(result) {
var token = result.credential.accessToken;
var user = result.user;
console.log("Google Array Table below -><-")
console.log(token);
console.log(user);
var name = user.displayName;
$('#div_logged_in').show();
$('#div_not_logged_in').hide();
welcomeMessage(user.displayName);
setupHTML(name);
}).catch(function(error) {
var errorCode = error.code;
var errorMessage = error.message;
console.log(error.code)
console.log(error.message)
});
}
function googleSignout() {
firebase.auth().signOut()
.then(function() {
console.log('Signout Succesfull')
}, function(error) {
console.log('Signout Failed')
});
}
function welcomeMessage(user) {
alert("Welcome " + user + "!")
}
// Setup HTML here...
function setupHTML(username) {
document.getElementById("username").innerHTML = username;
}
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>