Scroll to element from bootstrap navbar - javascript

I'm developing a website for a small association. It is built using bootstrap 4, and I have a navbar that links to several flex-container. I would like these links to scroll smoothly to these elements.
I am using the following jQuery to achieve this:
// Scroll to id from nav items
$(".navbar a").click(function () {
$("body,html").animate({
scrollTop: $("#" + $(this).data('value')).offset().top - $('.navbar').height() - 10
}, 1000)
});
This should scroll to a position corresponding to the top of the flex-container - the height of the navbar - a buffer of 10.
I also have the flowing in the the same .js file, which uses the ScrollReveal package to fade in text/images as the user scrolls through:
// Reveal text on scroll through
window.sr = ScrollReveal({ reset: true });
sr.reveal('.reveal', { opacity: 0.1, duration:600 });
Often clicking a nav-link will initially over-scroll, but will re-scroll to the correct position on a second click. I have found that if I remove the ScrollReveal call, the scrolling works as expected.
Is there something wrong with either of the above snippets?
// Get height of screen for header
$(document).ready(function () {
$('.header').height($(window).height());
});
// Scroll to id from nav items
$(".navbar a").click(function () {
$("body,html").animate({
scrollTop: $("#" + $(this).data('value')).offset().top - $('.navbar').height() - 10
}, 1000)
});
// Header button -> scroll down
$(".header button").click(function () {
$("body,html").animate({
scrollTop: $("#" + $(this).data('value')).offset().top - $('.navbar').height() - 10
}, 1000)
});
// This is causing the problem //
// Reveal text on scroll through
window.sr = ScrollReveal({ reset: true });
sr.reveal('.reveal', { opacity: 0.1, duration:600 });
#font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyC0ISg.ttf) format('truetype');
}
html,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
font-family: "Raleway", serif;
}
p {
font-size: 1rem;
}
html {
height: 100% !important;
}
.flex-container {
padding-left: .8em !important;
padding-right: .8em !important;
}
/* Nav bar */
.navbar {
background-color: rgba(26, 62, 85, 0.88);
}
.nav-link,
.navbar-brand {
color: rgba(141, 162, 180, 0.9);
cursor: pointer;
}
.nav-link {
margin-right: 1em !important;
}
.nav-link:hover {
color: #4bb2f9 !important;
}
.navbar-collapse {
justify-content: flex-end;
}
<!doctype html>
<html lang="en">
<head>
<!-- Meta tags -->
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1 viewport-fit=cover">
<meta name="description" content="Actin Art homepage"/>
<meta name="author" content="Nick Riddiford">
<meta http-equiv="content-type" content="text/html"/>
<!-- 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">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<!--Scroll spy-->
<body data-spy="scroll" data-target=".navbar" data-offset="50" class="post">
<nav class="navbar navbar-expand-md navbar fixed-top">
<!-- Brand -->
<a class="navbar-brand navbar-left" href="index.html">
<img src="images/UK_flag.png" alt="Logo">
</a>
<a class="navbar-brand navbar-left" href="index_fr.html">
<img src="images/FR_flag.png" alt="">
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-value="about" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" data-value="school-workshops" href="#school-workshops">School Workshops</a>
</li>
<li class="nav-item">
<a class="nav-link" data-value="books" href="#books">Books</a>
</li>
<li class="nav-item">
<a class="nav-link" data-value="exhibitions" href="#exhibitions">Exhibitions</a>
</li>
<li class="nav-item">
<a class="btn" href="mailto:asso.actin#gmail.com">
<i class="fas fa-envelope fa-2x"></i>
</a>
</li>
</ul>
</div>
</nav>
<div class="flex-container mt-5 reveal" id="about">
<h1 class="text-center display-3 mb-3">About</h1>
<div class="row justify-content-center h-100">
<div class="col-xs-12 col-md-6 col-lg-4 reveal">
<p>Actin Art - <strong>L’association des Artistes et des Scientifiques Actine</strong> - is a science
communication project that combines science and art. It aims to raise general public interest in the
sciences and explain recent scientific discoveries. We are creating a series of short, illustrated,
science-based books that accurately relay science via fun, adventure stories for 3-5 year olds.</p>
<p class="reveal">As the science is accurate, the parents and teachers reading the stories to the children
will learn too, and be better able to explain the science to the children. The characters in our stories
are based on the real molecules, proteins and cells that scientists study in the lab. Our aim is that these books will inspire
children and adults to become as excited as we are by cells, molecules and biology in general!</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4 reveal">
<p>
</p>
<img src="images/ActinArt_s2.jpg" alt="Actin Art" class="img-fluid">
</div>
</div>
</div>
<div class="flex-container mt-5 reveal" id="school-workshops">
<h1 class="text-center display-3 mb-3">School workshops</h1>
<div class="row justify-content-center h-100">
<div class="col-xs-12 col-md-6 col-lg-4 reveal">
<img src="images/cadherine-Joann.jpg" alt="Workshop" class="img-fluid">
<p>
</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4 reveal">
<p>We recently held a workshop at the Lyonnais nursery located in the 5th arrondissement in Paris. After
around 15 minutes of storytelling with our artwork, we held activities that related to some of our
stories. This was a huge success, and the children were really engaged with our stories. After
following-up with the school three months later we were delighted to discover that the children
remembered some of the key concepts from our stories!</p>
<p class="reveal">The school was very grateful for our involvement, and is looking forward to our next
workshop – as are
we! In fact, we would like to hold similar sessions in other nurseries (ages 3 – 5) around Paris. If you
would like to invite us to hold one at your school – please <a href="mailto:asso.actin#gmail.com">e-mail
us!</a></p>
</div>
</div>
</div>
<div class="flex-container mt-5 reveal" id="books">
<h1 class="text-center mb-3 display-3">Books</h1>
<div class="row justify-content-center h-100">
<div class="col-xs-12 col-md-6 col-lg-4 reveal">
<p>We have been working very hard on publishing some of our stories, and are delighted to announce that the
first three – part of the Jeunesse Esprits Curieux collection – will be published in November 2018!
These books are aimed at children aged 3+, and have been written by members of our group – working
scientists who are specialists in their field and want to help children (and adults) become excited
about science. For each book, the author and illustrator have worked hard to make the story both
scientifically accurate, as well as exciting and beautiful.
</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4 reveal">
<p>
</p>
<img src="images/Book_example_paint_s.jpg" alt="Kitten painters" class="img-fluid">
</div>
</div>
</div>
<div class="flex-container mt-5 reveal" id="exhibitions">
<h1 class="text-center mb-3 display-3">Exhibitions</h1>
<div class="row justify-content-center h-100">
<div class="col-xs-12 col-md-6 col-lg-4 reveal">
<img src="images/Exhibition_s.jpg" alt="Poster" class="img-fluid" width="500">
<p>
</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4 reveal">
<p>To complement the books we are publishing, and to celebrate the beautiful artwork each book contains, we
are planning an exhibition ‘Le Jardin de Curiosites’. This will take place over the summer of 2019
in the Jardin Curie at the Institut Curie. Please e-mail us if
you would like to find out more, or follow us on social media
to keep updated!
</p>
</div>
</div>
</div>
<footer class="footer bg-dark">
<div class="text-center">
<i class="fab fa-facebook-f fa-2x"></i>
<i class="fab fa-twitter fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/scrollreveal#3.3.2/dist/scrollreveal.min.js"></script>
</body>

Since scrolling isn't playing nice with <div class="flex-container reveal"> consider wrapping your flex-containers in an additional <div> and placing the id on that outer div
<div id="about">
<div class="flex-container mt-5 reveal">

Related

Collapsible Navbar Scrolling Page Up and Not Opening When Clicking on it - Not Responsive Due to JavaScript or jQuery?

I have been trying to sort out this issue for a few days and have been unable to determine the issue. Whenever I press the link on the Navbar dropdown it scrolls up to the top of the page. Additionally, the navbar toggler is not showing on a phone.
I have this navbar working on other pages where the javascript is not being used and it works; but any page that has js, the navbar dropdown does not work.
Here is the full code, any help would be appreciated.
window.sr = ScrollReveal();
sr.reveal('.showcase-left', {
duration: 4000,
origin: 'left',
distance: '300px'
});
window.sr = ScrollReveal();
sr.reveal('.showcase-right', {
duration: 4000,
origin: 'right',
distance: '300px'
});
window.sr = ScrollReveal();
sr.reveal('.info-left', {
duration: 2000,
origin: 'bottom',
distance: '300px'
});
window.sr = ScrollReveal();
sr.reveal('.info-right', {
duration: 2000,
origin: 'right',
distance: '300px'
});
$(function() {
// Smooth Scrolling
$('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;
}
}
});
});
.fade-in-image {
animation: fadeIn 5s;
-webkit-animation: fadeIn 5s;
-moz-animation: fadeIn 5s;
-o-animation: fadeIn 5s;
-ms-animation: fadeIn 5s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#showcase img {
width: 90%;
}
#showcase {
margin-left: 40px;
}
#testimonial {
background: #f1f1f1;
padding: 50px 0 30px 0;
text-align: 40px;
margin: 60px;
}
#info1 .info-left {
margin-top: 90px;
margin-bottom: 90px;
}
#info1 .info-right {
margin-top: 150px;
margin-bottom: 90px;
}
#contact {
background: url(./project/static/pics/gallery/90LayoutPhoto.jpg);
padding: 40px;
color: #fff;
border-top: #333 7px solid;
border-top: #333 7px solid;
}
<!-- Font Awesome -->
<script src="https://unpkg.com/scrollreveal"></script>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal,min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js"></script>
<!-- Bootstrap 4 Font Awesome 4-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js" />
<nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-danger">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="/static/pics/OldLogo.jpg" alt="Logo" style="width:80px; border-radius:16px;">
</a>
<div class="d-flex ms-auto order-2">
<h2>604-726-9705</h2>
</div>
</div>
</nav>
<div>
<br>
<br>
<br>
<div id="myCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
<ol class="carousel-indicators carousel-fade">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="overlay-image" style="background-image:url(./static/pics/unsplash/gapext0.jpg);"></div>
<div class="container">
<strong id="hero-title"> Welcome to GRADE A PAINTERS</strong>
<br>
<strong id="hero-textp"> Grade A Painters is a highly rated painting company serving the Lower Mainland Vancouver since 2008. We are known for our quality work and
competitive pricing.</strong>
<p></p>
Book Your Project Today
</div>
</div>
<div class="carousel-item">
<div class="overlay-image" style="background-image:url(./static/pics/unsplash/gapext.jpg);"></div>
<div class="container">
<strong id="hero-title">We’re here for YOU!</strong>
<br>
<strong id="hero-textp"> Grade A Painters is a full service one stop shop for interior and exterior home services, offering the highest quality
residential paint jobs in Vancouver and everything else your house needs to stay happy and healthy- from pressure washing
to painting your home, we’re here for you.</strong>
<p></p>
<div>
Call Us Now
</div>
</div>
</div>
<div class="carousel-item">
<div class="overlay-image" style="background-image:url(./static/pics/unsplash/gpaext3.jpg);"></div>
<div class="container">
<strong id="hero-title">Free, In-Home PAINT COLOR CONSULT</strong>
<br>
<strong id="hero-textp">Choosing paint colors for your house is not easy! If you use us as your house painter, we'll provide you with a free in-home
professional color consultation.</strong>
<p></p>
FREE Consultation
</div>
</div>
</div>
<a href="#myCarousel" class="carousel-control-prev" role="button" data-bs-slide="prev">
<span class="visually-hidden">Previous</span>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a href="#myCarousel" class="carousel-control-next" role="button" data-bs-slide="next">
<span class="visually-hidden">Next</span>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">Home</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item-active dropdown">
<a class="nav-link dropdown-toggle" id="navdrop" data-toggle="dropdown" href="#">Painting</a>
<div class="dropdown-menu">
<a class="dropdown-item-active" href="exterior.html">Exterior Painting</a>
<a class="dropdown-item-active" href="interior.html">Interior Painting</a>
<a class="dropdown-item-active" href="index1.html">Interior Painting</a>
</div>
</li>
<li class="nav-item-active">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
</ul>
<div class="d-flex ms-auto order-5">
<form class="form-inline" action="booknow.html">
<button class="btn btn-danger" type="submit">Book Now!</button>
</form>
</div>
</div>
</div>
</nav>
<section id="info1">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="info-left card-img-top">
<img src="/static/pics/intwbrushes.jpg" alt="Painter Pic" width=100% height=100%/>
</div>
</div>
<div class="col-md-8 col-sm-8">
<div class="info-right">
<h2>Call Us Today</h2>
<p class="text">At GRADE A PAINTERS, we offer fast, high-quality solutions for all of your interior or exterior residential painting projects. Monetarily and comparatively speaking, the best way to make a good first impression for a minimal price, is with a fresh coat
of paint. House painting is like the cover of a book: the first thing anybody visiting or passing by notices. With an image saying about a thousand words, nothing presents itself better than a perfectly detailed, professionally completed paint
job; and nobody does it better than Grade A Painters. As a dedicated team of local, experienced, precision painters, we’re committed to giving your home or business the best treatment possible; ensuring it always makes the very best first
impression.</p>
</div>
</div>
</div>
</div>
</section>
<div class="container-fluid fade-in-image">
<script src="https://googlereviews.cws.net/google-reviews.js"></script><br />
<script>
load_google_reviews("ChIJTblLDDt4hlQRarDEfpsSqvc");
</script>
</div>
<section id="showcase">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="showcase-left">
<img src="/static/pics/extwper.jpg" alt="Exterior w / Person">
<h2 class="text">Check out our Interior Project Page!</h2>
<div id="button">
Click Here
</div>
</div>
<br>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="showcase-right">
<img src="/static/pics/intwper.jpg" alt="interior w / Person">
<h2 class="card-text">Check out our Interior Project Page!</h2>
<div id="button">
Click Here
</div>
</div>
</div>
</div>
</div>
</section>
<hr>
<div class="container-fluid">
<div class="bg-danger text-white">
<h1 class="text-white">CALL US TODAY!</h1>
<h5 class="text-white"> Monday - Friday 8am - 9pm</h5>
<h5 class="text-white"> Saturday 9am - 9pm</h5>
<h5 class="text-white"> Sunday 10am - 6pm</h5>
</div>
</div>
<div class="container-fluid">
<footer class="bg-dark text-center text-white">
<!-- Grid container -->
<div class="container-fluid p-4 pb-0">
<!-- Section: Social media -->
<section class="mb-4">
<!-- Facebook -->
<a class="btn text-white btn-floating m-1" style="background-color: #3b5998;" href="https://www.facebook.com/gradeapaintersbc" role="button"><i class="fa fa-facebook"></i
></a>
<!-- Yelp -->
<a class="btn text-white btn-floating m-1" style="background-color: #C41200;" href="https://www.yelp.ca/biz/grade-a-painters-coquitlam" role="button"><i class="fa fa-yelp"></i></a>
<!-- Linkedin -->
<a class="btn text-white btn-floating m-1" style="background-color: #0082ca;" href="https://www.linkedin.com/in/christopher-white-60353928/" role="button"><i class="fa fa-linkedin"></i></a>
<!-- Google -->
<a class="btn text-white btn-floating m-1" style="background-color: #dd4b39;" href="https://www.google.com/search?q=grade+a+painters&rlz=1C1GCEA_enCA845CA845&oq=gr" role="button"><i class="fa fa-google"></i></a>
<!-- BBB -->
<a class="btn text-white btn-floating m-1" style="background-color: #0082ca;" href="https://www.bbb.org/ca/bc/coquitlam/profile/commercial-painter/grade-a-painters-0037-1257346" role="button"><i class="fa fa-bbb">BBB</i></a>
</section>
<!-- Section: Social media -->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© 2023 Copyright:
<a class="text-white" href="https://gradeapainters.com/">GradeAPainters.com</a>
</div>
<!-- Copyright -->
</footer>
</div>

My axios based front-end server cannot receive any response from my back-end server

I have been creating a responsive movies website with both front-end and back-end functionality. I have also created a mysql database containing movie data that I want to be displayed on my front-end.
I am currently using axios for http requests. I have designed my front-end and back-end servers already and just started implementing axios to help get the data from my mysql server to my front-end html.
However, whenever I try to run both servers and go to localhost:3001/movies , it does display the data from mysql database. It will give a request failed with status code 404.
This is the error message I receive when i inspect the page
<!DOCTYPE html>
<html lang="en">
<style>
.big-banner{
height: 100vh;
min-height: 500px;
background-image: url(homeBackground.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* ----------------- Styles for page 1: Home Page --------------------*/
div#aboutCyber {
margin-bottom: 6%;
}
div#aboutCyber {
text-align: center;
max-width: 65%;
padding-top: 0%;
}
div#aboutCyber > h3 {
font-size: 2.2em;
font-weight: bold;
text-align: center;
}
div#aboutCyber > p{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 1.5em;
font-weight: 350;
margin-top: 2%;
}
div#aboutCybersecurityImg > img {
margin-left: 20%;
}
div#cyberattackGallery {
background-color: rgb(237, 240, 243);
}
div#cyberattackExamples {
margin-top: 9%;
padding: 50px 0;
}
div#cyberattackExamples > h3 {
text-align: center;
}
section#reasonsWhy {
padding: 130px 0;
}
section#reasonsWhy h2 {
text-align: center;
}
div#reasonsWhyHeading > h2{
text-align: center;
}
section#websitePurpose {
text-align: center;
}
div.purposes {
padding: 60px;
}
section#contactSection {
padding: 100px 0;
text-align: center;
}
</style>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="About Cybersecurity home page">
<meta name="keywords" content="Cybersecurity, services, cybersecurity services">
<title>movies Page</title>
<!-- Latest compiled and minified CSS -->
<link rel ="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!--Font-awesome link-->
<link rel ="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<link href="/spmoviesFrontend/public/styles.css">
<!-- <script src="javascriptCodes.js"></script> -->
<body>
<!--------------------- Navigation -------------------------------->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">All about Cybersecurity</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="cyberthreats.html">Cyberthreats</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="communities.html">Communities</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="badHabits.html">Bad Internet Habits</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="cyb">Cybersecurity services</a>
</li>
</ul>
</div>
</div>
</nav>
<!------------------------------Background img-------------------------->
<header class="big-banner">
<div class="container h-100 text-light">
<div class="row h-100 align-items-center">
<div class="col-12 text-center">
<div class="col-md-12 mb-4 white-text text-center wow fadeIn">
<h3 class="display-3 white-text mb-0 pt-md-5 pt-5">Cybersecurity</h3>
<hr class="hr-light my-4 w-75">
<h3 class="subtext-header mt-2 mb-4 ">Why you should pay attention to it</h3>
</div>
</div>
</div>
</div>
</header>
<!---------------------------Opening tag line and description----------------------->
<div class="jumbotron jumbotron-fluid bg-white" id="aboutCyberJumbo">
<div class="container" id="aboutCyber">
<h2>Welcome</h2>
<p>All your cybersecurity needs and inquiries on one website!</p>
</div>
</div>
<!------------------------------About Cyber-security-------------------------->
<div class="container my-5">
<!-- Section: Block Content -->
<section class="dark-grey-text">
<h3 class="text-center font-weight-bold mb-4 pb-2">About Cybersecurity</h3>
<p class="text-center text-muted w-responsive mx-auto mb-5">Cybersecurity, computer security, IT security. However you call it, they all mean the same thing. It is the practise of defending computers, mobile devices, networks and data from malicious attacks. Such attacks are commonly referred to as cyber-threats. There are many reasons why an attack was launched, but the most common reason is to access and steal sensitive data from a company's archives to a person's personal computer.</p>
<!-- Grid column -->
<!-- Grid column -->
</div>
<!-- Grid row -->
<hr class="my-5">
</section>
<!-- Section: Block Content -->
</div>
<div id="posts">
</div>
<!-- <div id="posts">
<div class="card" style="margin-top: 2rem;">
<div class="card-body">
<p class="card-text">Hello!</p>
</div>
<div class="card-footer text-muted">
10 July 2019
</div>
</div>
<div class="card" style="margin-top: 2rem;">
<div class="card-body">
<p class="card-text">Hello World!</p>
</div>
<div class="card-footer text-muted">
10 July 2019
</div>
</div>
</div> -->
<!-------------------Examples of cyberattacks and cyber attack statistics--------------->
<div class="container-fluid bg-light">
<div class="container" id="cyberattackExamples">
<h3 class="my-4">Cyberthreats can target anyone </h3>
<hr class="mt-4 mb-4">
<div class="row">
<div class="col-lg-6 mb-4 ">
<div class="card h-100 shadow">
<img class="card-img-top" src="images_page1/equifaxBreach.png" alt="">
<div class="card-body">
<h4 class="card-title">
Equifax data breach
</h4>
<p class="card-text">Equifax suffered a massive data breach in 2017, which resulted in millions of customer records being compromised</p>
</div>
<a href='https://www.csoonline.com/article/3444488/equifax-data-breach-faq-what-happened-who-was-affected-what-was-the-impact.html'><button type="button" class="btn btn-primary btn-rounded">Read More</button>
</div>
</div>
<div class="col-lg-6 mb-4">
<div class="card h-100 shadow">
<img class="card-img-top" src="images_page1/facebookBreach.png" alt="">
<div class="card-body">
<h4 class="card-title">
Facebook's security breach
</h4>
<p class="card-text">In 2018, Facebook suffered from a cyberattack, which resulted in the privacy of 50 million user accounts being affected being compromised </p>
</div>
<button type="button" class="btn btn-primary btn-rounded">Read more</button>
</div>
</div>
<div class="container" id="cyberattackExamples">
<!-- Page Heading -->
<h3 class="my-4">Just because you are a teenager doesn't mean you are invulnerable</h3>
<hr class="mt-4 mb-4">
<div class="row">
<div class="col-lg-6 mb-4">
<div class="card h-100 shadow">
<img class="card-img-top" src="images_page1/businessInsider.png" alt="">
<div class="card-body">
<h4 class="card-title">
BusinessInsider report
</h4>
<p class="card-text">A report published by research firm Software Advice found out that Millenials are the most apatheic when it comes to safety precautions online. it found that Millenials were most likely to do things that affect their security online such as reusing their passwords.</p>
</div>
<button type="button" class="btn btn-primary btn-rounded">Read more</button>
</div>
</div>
<div class="col-lg-6 mb-4">
<div class="card h-100 shadow">
<img class="card-img-top" src="images_page1/whichUKreport.png" alt="">
<div class="card-body">
<h4 class="card-title">
Which? report on the scams targetting young people
</h4>
<p class="card-text"> The article talked about how scams such as job scams and social media scams commonly affect young people and why they are being affected the most.</p>
</div>
<button type="button" class="btn btn-primary btn-rounded">Read more</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--------------------------Why should you care about Cybersecurity, section----------------------->
<section id="reasonsWhy">
<div class="container">
<div class="row">
<div>
<h2>So why should you care about Cybersecurity ?</h2>
<hr>
<p class="lead">For individuals, cybersecurity is important to everyone as it is the practice of protecting your computer, smartphones or any other digital device against malicious attacks. Without cybersecurity, you face the risk of being the victim of a multitude of cyberthreats. Being the victim of a cyberthreat is.............less than ideal, to put it nicely</p>
<p class="lead">Without cybersecurity, you run the risk of:</p>
<div class="list-group">
<a class="list-group-item list-group-item-action flex-column align-items-start ">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Having sensitive data stolen</h5>
</div>
<a class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Having your computer infected by malicious software</h5>
</div>
<a class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Falling for cyber scams</h5>
</div>
</a>
</div>
<p class="lead">And the list goes on.</p>
<p class="lead">As you can see, being the victim of a cyberthreat such as hacking or malware has potentially devastating consequences. In addition, awareness of cyber scams is also key to protecting yourself from harm when using your computer or the Internet.</p>
</div>
</div>
</div>
</div>
</section>
<!---------------------------WHat the user can do on the website----------------------->
<section id="websitePurpose">
<div class="container-fluid bg-light">
<div class="row">
<div class="purposes">
<div class="col-lg-8 mx-auto">
<h2>So........ how does this website help me to learn more about cybersecurity as a whole ?</h2>
<hr>
<p class="lead">Well then my friend, you are in luck as you have come to the right place to learn all about cybersecurity, cyberthreats, services and more ! </p>
<p>You may be wondering what this website does differently to help you learn about this issue. Well for starters, I have compiled a collection of the most common forms of cyberthreats and malware that befall on teens and young adults, a brief explanation on how they work and the ways you can prevent yourself from being a victim of such threats.</p>
</div>
</div>
</div>
<div class="row">
<div class="purposes">
<div class="col-lg-8 mx-auto">
<h2>The ins and outs of cybersecurity isn't as complicated as you think</h2>
<hr>
<p class="lead">Don't think I'd forgotten about your bad Internet habits just yet</p>
<p>C'mon, we've all done it before. Clicking on “Agree” without reading the terms. Doing a little online shopping while using free public WiFi. Downloading files from dubious websites. And, of course, creating easy-to-guess passwords, because “no one is interested in hacking my accounts.” Don’t worry. You’re not alone. Even I've had some of these habits before. Using a simple password ? Guilty as charged. However, these bad Internet habits are a lot more unsafe than you think. Which is why I have also complied a list of the common bad Internet usage and computer habits that you might have, why you should break them, and how some of them could bite you back in the long run should you not break them. </p>
</div>
</div>
</div>
<div class="row">
<div class="purposes">
<div class="col-lg-8 mx-auto">
<h2>The cybersecurity communities to join and newsletters to subscribe to are endless</h2>
<hr>
<p class="lead">If you are keen on the issue of cybersecurity and wish to know more about it, you can join on of the many different communities out there dedicated to the issue. These communities consist of forums where you can ask questions regarding cybersecurity to newsletters and magazines which publish the latest news stories such as cyber attacks and developments in anti-virus and malware.</p>
</div>
</div>
</div>
<div class="row">
<div class="purposes">
<div class="col-lg-8 mx-auto">
<h2>There are a vast array of services out there for you if you are interested</h2>
<hr>
<p class="lead">Cybersecurity services, anti-virus software, communities, the resources out there are endless.</p>
<p>Last but not least, this website also contains a page dedicated to providing you with information about the different cybersecurity services out there as well as the different communities you can join or newsletters to subscribe to if you would like to know more about cybersecurity related issues. For example, I would be providing a short recommendation of the anti-virus software i think is best for you and why that is so.</p>
</div>
</div>
</div>
</div>
</section>
<section id="contactSection">
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2>Get In Touch !</h2>
<hr>
<p class="lead">Do you still have any burning questions ? Inquiries ? Or have any feedback regarding my website.</p>
<p class="lead">Well, if it is the latter, then I would like to give you my thanks in advance for helping me improve this website at every step ! Just leave your email and phone number below, as well as a message if you have anything in particular to say, and I will get to you as soon as I can !</p>
</div>
</div>
</div>
</section>
<section id="formSection">
<div class="container">
<form id="feedback" action="#" method="post" onsubmit="return validateForm()">
<fieldset id="userInfo">
<!------------------------First and Last name--------------------->
<div class="form-row">
<div class="col">
<input name="userFirstName" type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input name="userLastName" type="text" class="form-control" placeholder="Last name">
</div>
</div>
<!----------------------------Email--------------------------------->
<div class="md-form md-outline input-with-pre-icon">
<div class="form-group">
<label for="emailInfo" data-error="wrong" data-success="right"></label>
<input name="userEmail" type="email" class="form-control" id="emailInfo" aria-describedby="emailHelp" placeholder="Enter your email">
<small id="emailHelp" class="form-text text-muted">I'll never share your email with anyone else.</small>
</div>
</div>
<!----------------------------Phone number----------------------------->
<div class="form-group">
<label for="exampleInputEmail1"></label>
<input type="tel" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter your phone number">
</div>
</fieldset>
<!-------------Where have you heard the website from------------->
<div class="form-group">
<label for="heardFrom">How did you know about this website ?</label>
<select class="browser-default custom-select" id="heardFrom">
<option value="browsing">Chanced upon when browsing</option>
<option value="looking_up">Looking up on Cybersecurity</option>
<option value="Instagram">Instagram</option>
<option value="From_Friend">From a friend</option>
</select>
</div>
<!----------------------------Text Box--------------------------------->
<div class="form-group">
<label name="userFeedback" for="feedbackInfo">Leave any feedback or inquiries here:</label>
<textarea class="form-control" id="feedbackInfo" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-primary">Reset</button>
</form>
</div>
</section>
<!--------------------------------Footer----------------------------------->
<footer class="page-footer font-small bg-light text-light">
<div class="container">
<div class="row">
<div class="col-md-12 py-5">
<div class="mb-5 flex-center">
<div class="middle">
<a class="btn" href="#">
<i class="fab fa-facebook-f"></i>
</a>
<a class="btn" href="#">
<i class="fab fa-twitter"></i>
</a>
<a class="btn" href="#">
<i class="fab fa-google"></i>
</a>
<a class="btn" href="#">
<i class="fab fa-instagram"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 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>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<script>
// API url
const baseUrl = "http://localhost:3001";
/
const loggedInUserID = 1;
axios.get(`${baseUrl}/spUsers/${loggedInUserID}/`)
.then((response) => {
const posts = response.data;
posts.forEach((post) => {
const postHtml = `
<div class="card" style="margin-top: 2rem;">
<div class="card-body">
<p class="card-text">${post.text_body}</p>
</div>
<div class="card-footer text-muted">
${post.created_at}
</div>
</div>
`;
$("#posts").append(postHtml);
});
})
.catch((error) => {
console.log(error);
});
</script>
</body>
</html>
This is my html webpage that will be displayed
This is my index.js code that will link both the front end and back end
const express = require("express");
const app = express();
app.get("/", (req, res) => {
res.sendFile("/public/home.html", { root: __dirname });
});
app.get("/movies/", (req, res) => {
res.sendFile("/public/movies.html", { root: __dirname });
});
app.get("/users/:id", (req, res) => {
res.sendFile("/public/user.html", { root: __dirname });
});
app.get("/users/", (req, res) => {
res.sendFile("/public/users.html", { root: __dirname });
});
const PORT = 3001;
app.listen(PORT, () => {
console.log(`Client server has started listening on port ${PORT}`);
});
This is my app.js which is part of my back end serve that uses DOM
app.put("/spUsers/:userID/", isLoggedInMiddleware, (req, res, next) => {
const userID = parseInt(req.params.userID);
if (isNaN(userID)) {
console.log("Userid is invalid")
res.status(400).send();
return;
}
if (userID !== req.decodedToken.user_id) {
console.log(userID)
console.log(req.decodedToken.user_id)
res.status(403).send();
return;
}
spUsers.edit(userID, req.body, (error) => {
if (error) {
console.log(error);
if (error.code == 'ER_DUP_ENTRY') {
res.status(422).send();
console.log("Code reached here")
}
else {
res.status(500).send();
}
return;
};
res.status(204).send();
});
});
This is my controller.js
var db = require('./databaseConfig.js');
var spUsers = {
findAll: function (callback) {
var dbConn = db.getConnection();
dbConn.connect(function (err){
const findAllUsersQuery = "SELECT * from spmovies.users;";
dbConn.query(findAllUsersQuery, (error, results) => {
if (error) {
return callback(error, null);
};
return callback(null, results);
});
});
}

Bootstrap javascript not working with locally hosted Bootstrap 4

I am learning Bootstrap through a Coursera course and one of the exercises has me make a toggled drop down menu for mobile screens. I have the code copied exactly as the instructor has it, but in my browser, the drop down menu wont drop down--it is just a button that does nothing when clicked. I figured this probably has something to do with the Bootstrap javascript packages not properly being loaded in or something, but I am not sure. Any help would be much appreciated. I have included my HTML here. I am quite certain the path to the directories where the js files are all correct.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>Ristorante Con Fusion</title>
</head>
<body>
<nav class='navbar navbar-dark navbar-expand-sm bg-primary fixed-top'>
<div class='container'>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target='#Navbar'>
<span class="navbar-toggler-icon"></span>
</button>
<a class='navbar-brand mr-auto' href='#'> Ristorante confusion</a>
<div class='collapse navbar-collapse' id='#Navbar'>
<ul class='navbar-nav mr-auto'>
<li class='nav-item'> <a class='nav-link' href='./aboutus.html'>Home</a> </li>
<li class='nav-item'> <a class='nav-link' href='#'>Menu</a> </li>
<li class='nav-item'> <a class='nav-link' href='#'>About</a></li>
<li class='nav-item'> <a class='nav-link' href='#'>Contact</a> </li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron">
<div class="container">
<div class ="row row-header align-items-center">
<div class = "col-12 col-sm-6">
<h1>Ristorante con Fusion</h1>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div>
<div class = "col-12 col-sm-6">
</div>
</div>
</div>
</header>
<div class = "container">
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col col-sm order-sm-first col-md">
<h2>Uthappizza</h2>
<p>A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 col-md-3">
<h3>This Month's Promotions</h3>
</div>
<div class="col col-sm col-md">
<h2>Weekend Grand Buffet</h2>
<p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>
</div>
</div>
<div class="row row-content">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Meet our Culinary Specialists</h3>
</div>
<div class="col col-sm order-sm-first col-md">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. </p>
</div>
</div>
</div>
<footer class ="footer">
<div class = "container">
<div class="row">
<div class="col-4 offset-1 col-sm-2">
<h5>Links</h5>
<ul class ="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-7 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net
</address>
</div>
<div class="col-12 col-sm-4 align-self-center">
<div class="text-center">
Google+
Facebook
LinkedIn
Twitter
YouTube
Mail
</div>
</div>
</div>
<div class = "row justify-content-center">
<div class ="col-auto">
<p>© Copyright 2018 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
Try moving popper.js file below the bootstrap.js file
Make sure that you are not missing a my-custom-file.js that initializes the dropdown
Make sure that the dropdown structure has all the CSS class that Bootstrap needs (eg: in your code container is inside navbar, try moving that container a level up so that navbar-collapse is a direct child of navbar.
Good luck and keep it up!

Responsive Textarea on Image (Bootstrap)

Somehow i cant figure that out.
Hello everyone.
Ive got a simple frontend with a navbar and 2 Cols underneath.
left col got fixed size of 80px, and the right one got an image inside (so this image is fluid / responsive).
To add an input field over the image isnt the problem at all, but here comes my blockade.
I cant get the inputfield to be responsive to the size of the image.
So my thoughts was, to get the scale of the image and downscale the input.
something like this in JS
$(window).resize(function() {
// 1192 is the original imagewidth
let scale = $(".step:visible").width() / 1192;
let inputposition = document.getElementById(testid);
inputposition .css('transform', 'scale(' + scale + ')');
inputposition .css('transform-origin', 'top left');
});
now i thought about transform: scale(scale); on but this downscales the image too.
maybe someone of you can give me some food for thoughts.
So my goal is, that the inputfield minimizes as well reposition if the window resizes.
heres the sample code im workin with:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Test</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i">
<script src="assets/js/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-light navbar-expand-lg bg-danger clean-navbar">
<div class="container"><a class="navbar-brand logo" >Test</a><button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav ml-auto">
</ul>
</div>
</div>
</nav>
<main class="page landing-page">
<section class="clean-block clean-info dark" style="padding: 0px;">
<div class="container" style="">
<div class="row align-items-start" style="">
<div id="sidebar" class="col-1 d-md-flex flex-grow-0 flex-shrink-0 bg-danger active" style="max-width: 80px;min-width: 80px;height: 100%;padding:0px">
<ul class="list-unstyled components" style="padding:0px">
<li class="active" id="page1_li" style="position: relative; padding: 10px;">
<a onclick="function(this);" id="page1">
<img src="thumb_page1.jpg" class="img-fluid" alt="Responsive image" style="width:100%">
<div class="overlay">
<i id="overlay_page<?= $i ?>" class=""></i>
</div>
</a>
</li>
</ul>
</div>
<div class="col text-center bg-primary" style="padding: 0px;">
<form class="form-horizontal form" action="submit.php" method="post">
<div class="step " id="page1">
<div class="fullpage" style="" data-fullpage="fullpage">
<img class="img-thumbnail align-items-center" src="page1.jpg" alt="" draggable="false" contenteditable="false">
<!-- input that needs to be scaled -->
<input type="textarea" id="testid" name="testid" value="" style="position:absolute;left:100px;top:150px;width:300px;height:100px">
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</main>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
With best regards.
This is really simple. Don't add position:absolute to <input> but use <div> for that.
You need a <div> with position:relative as container. Add image with classes w-100 d-block to make it responsive. Create a <div> overlay and place content inside. <input> and <textarea> with class .form-control will have width:100% by default.
/*DEMO*/body{padding:3rem}
#overlay{
position:absolute;
top:50%;
right:3rem;
left:3rem;
transform:translateY(-50%);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="position-relative">
<img class="w-100 d-block" src="https://via.placeholder.com/400x300/007bff/ffffff" alt="">
<div id="overlay">
<input class="form-control" placeholder="Lorem Ipsum">
<hr>
<textarea class="form-control" placeholder="Lorem Ipsum"></textarea>
</div>
</div>

jQuery - Animate scroll to section page

I have been working on my personal site, but had a problem with the menu.
Web site in progress
Using jQuery I have tried to animate the main menu of the site, it is assumed that when clicking on one of the links, the contents of the main container should be moved to the corresponding section, but this is not happening, it only links correctly when clicking In one of the links for the first time, then everything fails.
I know the problem is with jQuery, but I'm really new to this library and I can not identify the problem.
I would appreciate your help.
$(document).ready(function() {
$('.scroll-to').on('click', function(event){
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
});
// scroll function
function scrollToID(id, speed){
var offSet = 150;
var targetOffset = $(id).offset().top - offSet;
$('.main_content, .principal_content').animate({scrollTop:targetOffset}, speed);
}
if (typeof console === "undefined") {
console = {
log: function() { }
};
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/resume.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
<script src="https://use.fontawesome.com/0d6e13b87e.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script lenguage="javascript" src="js/script.js" type="text/javascript"></script>-->
<title>Jorge Cortés - Front-end Development</title>
</head>
<body>
<div class="main_content">
<header class="header_content">
</header>
<nav class="navigation_content">
<div class="profile_card">
<div class="profile_img">
<img src="img/image.png" alt="Jorge">
</div>
</div>
<ul class="menu">
<li><a class="scroll-to" data-id="about_me" href="#about_me"><i class="icon fa fa-user-circle"></i>About me</a></li>
<li><a class="scroll-to" data-id="experience" href="#experience"><i class="icon fa fa-briefcase"></i>Experience</a></li>
<li><a class="scroll-to" data-id="education" href="#education"><i class="icon fa fa-graduation-cap"></i>Education</a></li>
<li><a class="scroll-to" data-id="skill" href="#skill"><i class="icon fa fa-grav"></i>Skills</a></li>
</ul>
</nav>
<main class="principal_content">
<section class="about_me" id="about_me">
<h1>Hello, I am <span>Jorge</span><br> Web Designer and Front-end</h1>
<div class="separator_light"></div>
<p>I have two years experience as a web/interface developer.
I have a taste <br> of clean, elegant styling, and I have lots of experience in the
production of HTML <br> and CSS code for websites.
</p>
<!--<p>Futhermore I have experience using JS libraries and writing JS code,
and I have a reasonable grasp of using CMS, specifically Joomla and WordPress.
</p>-->
<h2>Personal Info</h2>
<div class="separator_bold"></div>
<ul class="personal_info">
<li><em>Name</em><span>Jorge Cortés Álvarez</span></li>
<li><em>Date of Birth</em><span>May 26, 1993</span></li>
<li><em>e-mail</em><span>jorgecortesalvarez#outlook.com</span></li>
<li><em>Phone</em><span>(+57) 300 433 8040</span></li>
<li><em>Address</em><span>Cartagena de Indias - Colombia</span></li>
</ul>
</section>
<section class="experience" id="experience">
<h2>Work History</h2>
<div class="separator_bold"></div>
<h3>Platform Administrator OJS</h3>
<h4><i class="fa fa-thumb-tack"></i>Palobra Journal - University of Cartagena <br>
<i class="fa fa-calendar"></i>2015 - 2016</h4>
<p>Customization of the user's interface, configuration and support
of the platform Open Journal Systems (OJS) for the virtual publication
of the Palobra Journal in the University of Cartagena.
</p>
<h3>Front-end Web Developer</h3>
<h4><i class="fa fa-thumb-tack"></i>Freelance/Self-Employed <br>
<i class="fa fa-calendar"></i>2014 - Today</h4>
<p>Experience in the design and development of web sites using
techonologies as HMTL5, CSS3, JS and content management systems
as Joomla and WordPress.
</p>
</section>
<section class="education" id="education">
<h2>Academic History</h2>
<div class="separator_bold"></div>
<h3>Systems Engineer</h3>
<h4><i class="fa fa-graduation-cap"></i>Bachelor's degree - University of Cartagena <br>
<i class="fa fa-calendar-o"></i>2016</h4>
<p></p>
<h3>Secondary Education</h3>
<h4><i class="fa fa-graduation-cap"></i>High School degree - Institute Promoción Social <br>
<i class="fa fa-calendar-o"></i>2009</h4>
</section>
<section class="skill" id="skill">
<h2>Development Skills</h2>
<div class="separator_bold"></div>
<ul>
<li><p>HTML5</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
<li><p>CSS3</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
<li><p>JavaScript</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
<li><p>UX/UI</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
<li><p>Usability Testing</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
</ul>
</section>
</main>
<div class="social_media">
<p>© 2017 Jorge Cortés Álvarez. All Rights Reserved. </p>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
</div>
</div>
</body>
</html>
Some styles are missing in your code, I've changed a bit your code and I've also added some styles to make the principal_content div scrollable. Your code works just the first time because the value of the scroll in that moment is 0, you need to add the value of the current scroll value to your calculation, this is the formula:
section offset top - container offset top + scrollTop value of the container
Here is your code working, but here you have a jsfiddle example that is more concise:
$(document).ready(function() {
var cont = $('.main_content .principal_content');
var contOffset = cont.offset();
// scroll function
function scrollToID(id, speed){
var targetOffset = $(id).offset().top - contOffset.top + cont.scrollTop();
cont.animate({scrollTop: targetOffset}, speed);
}
$('.scroll-to').on('click', function(event){
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
});
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.menu {
background: #CCC;
height: 25px;
margin: 0;
padding: 0;
}
.menu li {
display: inline-block;
}
.main_content {
height: 100%;
}
.principal_content {
height: 100%;
overflow-y: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jorge Cortés - Front-end Development</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
<script src="https://use.fontawesome.com/0d6e13b87e.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script lenguage="javascript" src="js/script.js" type="text/javascript"></script>
</head>
<body>
<div class="main_content">
<nav class="navigation_content">
<ul class="menu">
<li><a class="scroll-to" data-id="about_me" href="#about_me"><i class="icon fa fa-user-circle"></i>About me</a></li>
<li><a class="scroll-to" data-id="experience" href="#experience"><i class="icon fa fa-briefcase"></i>Experience</a></li>
<li><a class="scroll-to" data-id="education" href="#education"><i class="icon fa fa-graduation-cap"></i>Education</a></li>
<li><a class="scroll-to" data-id="skill" href="#skill"><i class="icon fa fa-grav"></i>Skills</a></li>
</ul>
</nav>
<main class="principal_content">
<section class="about_me" id="about_me">
<h1>Hello, I am <span>Jorge</span><br> Web Designer and Front-end</h1>
<div class="separator_light"></div>
<p>I have two years experience as a web/interface developer.
I have a taste <br> of clean, elegant styling, and I have lots of experience in the production of HTML <br> and CSS code for websites.
</p>
<h2>Personal Info</h2>
<div class="separator_bold"></div>
<ul class="personal_info">
<li><em>Name</em><span>Jorge Cortés Álvarez</span></li>
<li><em>Date of Birth</em><span>May 26, 1993</span></li>
<li><em>e-mail</em><span>jorgecortesalvarez#outlook.com</span></li>
<li><em>Phone</em><span>(+57) 300 433 8040</span></li>
<li><em>Address</em><span>Cartagena de Indias - Colombia</span></li>
</ul>
</section>
<section class="experience" id="experience">
<h2>Work History</h2>
<div class="separator_bold"></div>
<h3>Platform Administrator OJS</h3>
<h4><i class="fa fa-thumb-tack"></i>Palobra Journal - University of Cartagena<br><i class="fa fa-calendar"></i>2015 - 2016</h4>
<p>Customization of the user's interface, configuration and support of the platform Open Journal Systems (OJS) for the virtual publication of the Palobra Journal in the University of Cartagena.
</p>
<h3>Front-end Web Developer</h3>
<h4><i class="fa fa-thumb-tack"></i>Freelance/Self-Employed<br><i class="fa fa-calendar"></i>2014 - Today</h4>
<p>Experience in the design and development of web sites using techonologies as HMTL5, CSS3, JS and content management systems as Joomla and WordPress.
</p>
</section>
<section class="education" id="education">
<h2>Academic History</h2>
<div class="separator_bold"></div>
<h3>Systems Engineer</h3>
<h4><i class="fa fa-graduation-cap"></i>Bachelor's degree - University of Cartagena<br><i class="fa fa-calendar-o"></i>2016</h4>
<p></p>
<h3>Secondary Education</h3>
<h4><i class="fa fa-graduation-cap"></i>High School degree - Institute Promoción Social<br><i class="fa fa-calendar-o"></i>2009</h4>
</section>
<section class="skill" id="skill">
<h2>Development Skills</h2>
<div class="separator_bold"></div>
<ul>
<li><p>HTML5</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
<li><p>CSS3</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
<li><p>JavaScript</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
<li><p>UX/UI</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
<li><p>Usability Testing</p><div class="skill_bar"><span style="width: 50%;"></span></div></li>
</ul>
</section>
</main>
<div class="social_media">
<p>© 2017 Jorge Cortés Álvarez. All Rights Reserved. </p>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
</div>
</div>
</body>
</html>
use the $(body) instead of $('.main_content, .principal_content')
try this:
$(document).ready(function() {
$('.scroll-to').on('click', function(event){
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
function scrollToID(id, speed){
var offSet = 150;
var targetOffset = $(id).offset().top - offSet;
$('body').stop().animate({scrollTop:targetOffset},speed, 'swing');
}
if (typeof console === "undefined") {
console = {
log: function() { }
};
}
});

Categories