I am a novice in web development using flask/jinja. I have content in my word file. I want to read the word file contents (text3.docs) into my html document (home.html). The home.html extends from base.html. I tried the below code but I am getting decoding error. kindly help.
Project structure:
Home.html
{% extends 'base.html'%}
{% block title %}Home{% endblock %}
{% block content%}
<p>{{file}}</p>
{% endblock%}
base.html
<!DOCTYPE html>
<html lang="english">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href={{url_for('static', filename='images/logo1.png')}}>
<title>{% block title%}{% endblock %}</title>
<!-- Bootstrap CSS CDN -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous"
>
<!-- Our Custom CSS -->
<link rel="stylesheet" href={{url_for('static', filename='stylesheets/style.css')}}>
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<nav class=" navbar navbar-expand-lg navbar-light fixed-top bg-light py-lg-0 " id="customNavbar">
<a class="navbar-brand" href="/">
<!-- Add logo -->
<img src={{url_for('static', filename='images/logo1.png')}} alt="logo">
</a>
<button class="navbar-toggle-collapsed d-block d-sm-block d-md-none" type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="true"
aria-label="Toggle navigation"
id="togglerButton">
<span class="line"></span>
<span class="line"></span>
<span class="line" style="margin-bottom: 0;"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
</ul>
</div>
<form class="lg-flex">
<button type="button" href="/signin" class="btn btn-custom">Sign In</button>
<button type="button" class="btn btn-custom">Sign Up</button>
</form>
</nav>
</div>
{% block content %}{% endblock %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>
routes.py
from flask import render_template, Blueprint
routes = Blueprint('routes', __name__)
f = open('Website/static/data/text3.docx', 'r', encoding="utf8")
file = f.read()
#routes.route('/')
def home():
return render_template('Home.html', file=file)
main.py
from Website import create_app
app = create_app()
if __name__ == '__main__':
app.run(debug=True)
style.css (css file might not be required but still i am providing below for reference)
#customNavbar .navbar-nav .nav-item .nav-link {
color: #4a438f;
font-weight: bold;
}
#customNavbar .btn-custom {
background-color: #4a438f;
color: #fff;
}
body {
margin-top: 60px;
font-family: 'Poppins', sans-serif;
background: #fff;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #4a438f;
text-align: justify;
}
Related
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
the following code generates a bootstrap navbar with a notification icon and I want to execute a function when I click the notification button to expand the dropdown and when I close the dropdown how do I do this in javascript?
I have try'd selecting the dropdown and modifying the click function but that executes when you click a element in the dropdown not when you click the button.
#ex4 {
color: white;
width: auto;
}
#ex4 .p1.has-badge:after {
position: absolute;
right: 10%;
top: 8%;
content: attr(data-count);
font-size: 40%;
padding: .2em;
border-radius: 50%;
line-height: 1em;
color: white;
background: rgba(255, 0, 0, .85);
text-align: center;
min-width: 1.5em;
}
form.logout {
padding-left: 10px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- Font awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Page style -->
<link rel="stylesheet" href="CSS/index.css">
<!-- Title -->
<title>Social Feed</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Social Feed</a>
<div class="d-flex align-items-center">
<div class="dropdown">
<a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
<div id="ex4">
<span class="p1 fa-stack fa-2x has-badge" data-count="0" id="badge">
<i class="p2 fa fa-bell fa-stack-1x xfa-inverse"></i>
</span>
</div>
</a>
<div class="dropdown-menu dropdown-menu-end">
<div id="notifications-header">
<h1>Notifications</h1>
</div>
<div id="notifications">
</div>
</div>
</div>
<form a name="logout" class="logout" action="PHP/Logout.php" method="get">
<button type="submit" class="btn btn-danger">Log Out</button>
</form>
</div>
</div>
</nav>
</body>
</script>
</html>
Hook into the Dropdown events
var myDropdown = document.getElementById('myDropdown')
//expand/open
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something when opened...
})
//hide/close
myDropdown.addEventListener('hide.bs.dropdown', function () {
// do something when closed...
})
Codeply
I am developing an app in Django.
I have this weird issue.
on my template I have:
<div class="form-group">
<input name="Data_inserimento_entry" type="date" class="form-control" id="date_to_turn_into_toda" >
</div>
<script type="text/javascript" src={% static "js/get_today_date.js" %}></script>
<script> get_today_date(date_to_turn_into_toda) </script>
on the js file get_today_date.js stored at static > js > get_today_date.js
I have
function get_today_date(id_data) {
var now = new Date();
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var today = now.getFullYear()+"-"+(month)+"-"+(day);
document.getElementById(id_data).value = today;
}
when I run the server and load the template, in the input slot, today's date appears. I am glad of that.
If I comment any of the two javascript lines in the template, it does not work anymore. I am glad of that.
Here comes the weird part
If I change the id ,
like this:
<div class="form-group">
<input name="Data_inserimento_entry" type="date" class="form-control" id="date_to_turn_into_today" >
</div>
<script type="text/javascript" src={% static "js/get_today_date.js" %}></script>
<script> get_today_date(date_to_turn_into_today) </script>
It does not work anymore. Why?
And even if I change the function name in both scripts, like:
<script type="text/javascript" src={% static "js/get_today_date.js" %}></script>
<script> get_today_date_ID(date_to_turn_into_today) </script>
and
function get_today_date_ID(id_data) {
var now = new Date();
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var today = now.getFullYear()+"-"+(month)+"-"+(day);
document.getElementById(id_data).value = today;
}
It does not work anymore. Why?
Is the syntax to call javascript correct?
Am I forgetting to change the ID or the function name in some other place than the template and the javascript file?
Note: the function in the javascript file and the javascript file have the same name (except for the extention .js), is this the problem?
Update:
in my model, I have:
class mymodel(models.Model):
Data_inserimento_entry = models.DateField(blank=False, null=False, default=timezone.now().date() )
Update:
here I post the whole template aggiungi_terminologia.html, responding to a comment asking for more explanation
{% extends 'base.html'%}
{% block content %}
<h1>Aggiungi terminologia in massa</h1>
<!-- scarica template glossario -->
<p>
<form method="get" action="static/files_for_download/template_glossario.xlsx">
<div class="container"></div>
<button type="submit" class="btn btn-success">Scarica template</button>
</div>
</form>
</p>
<div class="container">
<small id="inputHelp" class="form-text text-muted">NOTA: Non rinominare le colonne del template.</small>
</div>
<br>
<!-- carica glossario -->
<p>
<form class="container" method="POST" enctype="multipart/form-data" >
{% csrf_token %}
<div class="file-upload-wrapper" id="input-file-now">
<small id="inputHelp" class="form-text text-muted">Seleziona il template compilato con la terminologia da caricare.</small>
<input type="file" name="uploaded_glossary" id="input-file-now" data-max-file-size="5M" class="file-upload">
<br><br>
<div class="form-group">
<input name="Data_inserimento_entry" type="hidden" class="form-control" id="date_to_turn_into_toda">
</div>
<button type="submit" class="btn btn-primary">Carica glossario</button>
</div>
</form>
</p>
<br><br><br><br>
<!-- Django tag load static -->
{% load static %}
<!-- CSS -->
<link rel="stylesheet" type="text/css" href={% static "css/searchbar_style.css" %}>
<link rel="stylesheet" type="text/css" href={% static "css/upload_glossary_slot.css" %}>
<!-- Javascript -->
<script type="text/javascript" src={% static "js/get_today_date.js" %}></script>
<script> get_today_date("date_to_turn_into_toda") </script>
{% endblock %}
Here I post my entire template base.html:
{% load static %}
<!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">
<!-- favicon -->
<!-- <link rel="shortcut icon" href="{% static 'img/gestisco_logo_round_favicon2.png' %}" /> -->
<link rel="shortcut icon" href="{% static 'img/metaglossary_favicon_3.png' %}" />
<!-- 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">
<title>G</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!-- Pagina iniziale -->
<!-- questa nel tutorial non c è -->
<a class="navbar-brand" href="{% url 'home' %}">GESTI.S.CO Interreg IT-CH</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 mr-auto">
<!-- glossario -->
<li class="nav-item">
<a class="nav-link" href="{% url 'glossario' %}">Glossario<span class="sr-only">(current)</span></a>
</li>
<!-- Aggiungi terminologia -->
<li class="nav-item">
<a class="nav-link" href="{% url 'aggiungi_terminologia' %}">Aggiungi terminologia</a>
</li>
<!-- Aggiungi glossario -->
<li class="nav-item">
<a class="nav-link" href="{% url 'aggiungi_glossario' %}">Aggiungi terminologia in massa</a>
</li>
</ul>
</div>
</nav>
<br/>
<!-- SEZIONE MESSAGGI -->
{% if messages %}
{% for message in messages %}
{% if insert_attempt_output == "errato" %}
<!-- form compilato in modo NON valido - messaggio rosso -->
<div class="alert alert-danger" role="alert">
<button class="close" data-dismiss="alert">
<small><sup>[X]</sup></small>
</button>
{{message}}
</div>
{% else %}
<!-- form compilato in modo valido - messaggio verde -->
<div class="alert alert-success" role="alert">
<button class="close" data-dismiss="alert">
<small><sup>[X]</sup></small>
</button>
{{message}}
</div>
{% endif %}
{% endfor %}
{% endif %}
<br>
<!-- formattazione del body -->
<div class="container">
{% block content %}
{% endblock %}
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<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>
<!-- css -->
<link rel="stylesheet" type="text/css" href={% static "css/top_navbar_style.css" %}>
</body>
</html>
when I run the server and load the template, in the input slot, today's date appears. I am glad of that.
I have no idea how it could work, because it looks like the main problem you have is you pass variable into the function get_today_date instead of string (id), i.e. instead of
<script> get_today_date(date_to_turn_into_today) </script>
call
<script> get_today_date('date_to_turn_into_today') </script>
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>
When my navbar is collapsed, scrolling is normal and the navbar becomes fixed to the top of the page when scrolling past the header/ jumbotron. However, when the navbar is expanded (revealing 'one', 'two', and 'three'), the page will jump skipping some of the content and covering it up by the navbar. How can I make the page scroll/ behave "normally" and allow the expanded navbar fix to the top of the page without jumping over content below?
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<script type="text/javascript">
</script>
<style>
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
nav {
z-index: 9;
}
.emoji p:hover {
text-decoration: none;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color:#f64e09; color:#fff; height:200px;">
<div class="container text-center" style="color: white;">
<div>
<h1 style="font-family: 'Lobster', cursive;">Website</h1> </div>
<h1 style="font-size: 30px; font-family: 'Cabin', sans-serif;">
</h1> </div>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<div class="container-fluid">
<div class="navbar-static-top">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a id="navId" class="navbar-brand" style="color:white;" href="#">Navbar Title</a> </div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>One </li>
<li class="active">Two </li>
<li>Three </li>
</ul>
</div>
</div>
</nav>
<!-- Start containter for everything south of navbar -->
<div class="container-fluid">
<div class="container" style="padding-top: 20px;">
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1> </div>
</div>
<div class="panel panel-default" style="font-family: 'Cabin', sans- serif;">
<div class="panel-footer">
<center>
<p>This is the footer</p>
</center>
</div>
</div>
</body>
</html>
As you probably know, the reason why your content is not "jumping" while navbar is collapsed is in this style:
.affix + .container-fluid {
padding-top: 70px;
}
But when you are extending navbar, padding remains the same, but navbar itself becames taller. So, we have to somehow distingush those situations.
We can add some javascript to add an extra class to the <nav> element:
<script type="text/javascript">
$(document).ready(function() {
var navBar = $('#myNavbar');
$('.navbar-toggle').click(function(e) {
if (!navBar.is(':visible')) {
// #myNavbar is about to be shown, add extra class to parent <nav>
navBar.parents('nav').addClass('affix-visible-navbar');
} else {
// #myNavbar is about to be hidden, remove extra class from parent <nav>
navBar.parents('nav').removeClass('affix-visible-navbar');
}
});
});
</script>
and define new css-class:
.affix.affix-visible-navbar + .container-fluid {
padding-top: 155px !important;
}
So the complete working solution will look like this:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<script type="text/javascript">
</script>
<style>
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
.affix.affix-visible-navbar + .container-fluid {
padding-top: 155px !important;
}
nav {
z-index: 9;
}
.emoji p:hover {
text-decoration: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var navBar = $('#myNavbar');
$('.navbar-toggle').click(function(e) {
if (!navBar.is(':visible')) {
// #myNavbar is about to be shown, add extra class to parent <nav>
navBar.parents('nav').addClass('affix-visible-navbar');
} else {
// #myNavbar is about to be hidden, remove extra class from parent <nav>
navBar.parents('nav').removeClass('affix-visible-navbar');
}
});
});
</script>
</head>
<body>
<div class="container-fluid" style="background-color:#f64e09; color:#fff; height:200px;">
<div class="container text-center" style="color: white;">
<div>
<h1 style="font-family: 'Lobster', cursive;">Website</h1> </div>
<h1 style="font-size: 30px; font-family: 'Cabin', sans-serif;">
</h1> </div>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<div class="container-fluid">
<div class="navbar-static-top">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a id="navId" class="navbar-brand" style="color:white;" href="#">Navbar Title</a> </div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>One </li>
<li class="active">Two </li>
<li>Three </li>
</ul>
</div>
</div>
</nav>
<!-- Start containter for everything south of navbar -->
<div class="container-fluid">
<div class="container" style="padding-top: 20px;">
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1>
<h1>Content so the page scrolls</h1> </div>
</div>
<div class="panel panel-default" style="font-family: 'Cabin', sans- serif;">
<div class="panel-footer">
<center>
<p>This is the footer</p>
</center>
</div>
</div>
</body>
</html>
Of course, if you are changing #myNavbar elements (e.g. add/remove items), you have to adjust padding in the .affix.affix-visible-navbar + .container-fluid {}