This is a new question, based off this question which was nicely resolved.
Here's the temp site which I'm creating for the client. Here's how this all originated.
That all being said, however, when you scroll to or click on PROJECT, you'll be scrolled to the completed projects section. This is good.
However, when you click or SCROLL to Blog, Roofing or Contact, the targeting is off.
Blog is not active but Roofing is and so on for Roofing and Contact.
So, I don't understand when you scroll past or into or click to Blog, Roofing and Contact, the Active feature is off kilter. #kmoser helped with my previous question and I didn't want to turn it into a discussion so I made a new question. Thank you everyone.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light sticky-top" id="ftco-navbar">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars"></span> Menu
</button>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Services</li>
<li class="nav-item">Project</li>
<li class="nav-item">Blog</li>
<li class="nav-item">Roofing</li>
<li class="nav-item">Contact</li>
</ul>
<div class="d-flex align-items-center justify-content-center">
<img src="images/logos/weathertight-logo.png" class="logosmaller" alt="" />
<!-- <span class="flaticon-roof-2"></span> -->
</div>
<div class="col-3 d-flex justify-content-end align-items-center">
<div class="social-media">
<p class="mb-0 d-flex">
<span class="fa fa-facebook"><i class="sr-only">Facebook</i></span>
<span class="fa fa-twitter"><i class="sr-only">Twitter</i></span>
<span class="fa fa-instagram"><i class="sr-only">Instagram</i></span>
<span class="fa fa-dribbble"><i class="sr-only">Dribbble</i></span>
</p>
</div>
</div>
</div>
</div>
</nav>
<section id="bloglink" class="ftco-section">
<div class="container">
<div class="row justify-content-center pb-5 mb-3">
<div class="col-md-7 heading-section text-center ftco-animate">
<span class="subheading">News & Blog</span>
<h2>Latest news from our blog</h2>
</div>
</div>
</div>
</section>
<section id="roofinglink" class="ftco-section bg-light">
<div class="container">
<div class="row justify-content-center pb-5 mb-3">
<div class="col-md-12 heading-section text-center ftco-animate">
<span class="subheading">Roofing</span>
<h2>Roofing that Pays for Itself</h2>
<div class="sec-title text-center wow animated fadeInDown">
<h2>Commercial Roofing that Pays for Itself!</h2>
<p>The heating and AC loss you have been experiencing in your commercial building can be significantly reduced with one of our energy saving roofing systems! WeatherTight Systems’ completely air-tight roofing systems seal in your building’s cool
air and heat. For most of our flat top roofing materials we also apply a seamless, high-solids silicone and acrylic based material as a way of ensuring there will be no water leaks into your commercial building. The result is a roof that is
truly protected from the scorching sun and other destructive weather elements.</p>
</div>
</div>
</div>
</div>
</section>
<section id="contactlink" class="ftco-section bg-light">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="wrapper">
<div class="row no-gutters">
Contact link section
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
I can't find a way to reduce the width of the input window in the code in the Jumbotron section. I can not see/find any code that controls the width of the input window. The code below is the code from Bootstrap v5. How do I shorten the width of the input window, keeping it centered and its responsiveness?
<!doctype html>
<html>
<head>
<!-- Bootstrap CSS -->
<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">
<!-- Code for jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!-- Code for FontAwesome -->
<link href="Desktop/FontAwesome/fontawesome-free-icons/css/all.css" rel="stylesheet">
<title>Project App Landing Page</title>
<style type="text/css">
.jumbotron{
background-image: url(blueSky.jpg);
min-height: 450px;
text-align: center;
}
#appSummary {
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">MyApp</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download The App</a>
</li>
</ul>
<form class="d-flex">
<div class="col-xs-4">
<input class="form-control" type="email" placeholder="Email" aria-label="Email">
<input class="form-control" type="password" placeholder="Password" aria-label="password">
<button class="btn btn-success" type="submit">Log in</button>
</div>
</form>
</div>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-3" >My Awesome App!</h1>
<p class="lead">This is why YOU should download this fantastic app!</p>
<hr class="m-y-2">
<p>Want to know more? Join our mailing list!</p>
<form>
<div class="input-group mb-3">
<span class="input-group-text">#</span>
<input type="email" id="email" class="form-control" placeholder="Your email" aria-label="Email" aria-describedby="basic-addon1">
<button type="submit" class="btn btn-primary btn-md">Sign up</button>
</div>
</form>
</div>
<div class="container">
<div class="row" id="appSummary">
<h1>Why This App Is Awesome</h1>
<p class="lead">Summary, once again, of your app's awesomeness</p>
</div>
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="cardPic.png" class="card-img-top" alt="Card Image">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-radiation-alt"></i>Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="cardPic.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><i class="far fa-heart"></i>Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="cardPic.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-pump-medical"></i>Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
</div>
</div>
</body>
</html>
In Bootstrap the form-control class has 100% width. Remove the "form-control" class from this line:
<input type="email" id="email" class="form-control" placeholder="Your email" aria-label="Email" aria-describedby="basic-addon1">
Then you should be able to apply your own width to the input, either in the <style> block or with a different Bootstrap class.
I am trying to include a 400 x 100 png logo as a Navbar Brand image in Bootstrap 5. However, The logo appears to be a bit too big and even if I reduce the size of the logo, it still overlaps the black container and text input box underneath the Navbar in desktop view. In mobile devices, the logo and associated navbar overlaps even more. Also, the toggle button on the right is not aligned horizontally with the brand image on the left. I would like them to be on the same line. Attaching some screenshots for clarity. Can someone please help?
Desktop View
Mobile View
I would also want the brand image to be more aligned to the left in the mobile view. I am atatching the HTML code for review.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Localhost Site - Classroom Attendance</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Testing HTML 5 and Bootstrap 5">
<meta name="keywords" content="html5,bootstrap5">
<meta name="author" content="classroom">
<!-- Bootstrap 5 -->
<link rel="stylesheet" href="css/bootstrap.min.css"></link>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<!-- Navbar Brand -->
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="media/fadmeter-logo.png" alt="Classroom Logo" width="250" height="62.5">
</a>
</div>
<!-- Toggler/Collapsible Button -->
<div class="container-fluid">
<button class="navbar-toggler ms-auto ms-sm-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
<ul class="navbar-nav ms-2 align-items-end">
<li class="nav-item">
<a class="nav-link" href="#">Resources</a>
</li>
<li>
<a class="nav-link" href="#">Contact</a>
</li>
<li>
<a class="nav-link" href="#">Login</a>
</li>
<li>
<form action="#">
<input type="submit" class="btn btn-primary" value="Register">
</form>
</li>
</ul>
</div>
</div>
</nav>
</div>
<br>
<!-- Code Input Area -->
<div class="container rounded mt-5 pt-3 pb-1 bg-dark text-white" style="width:400px">
<form action="#">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input type="text" class="form-control" placeholder="Enter Code">
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Go</button>
</div>
</div>
</form>
</div>
<br>
<!-- Headline and Description -->
<div class="container">
<h3>My Headline Text</h3>
<p><span style="color:blue">Localhost</span> is a test page for HTML 5 and Bootstrap 5.</p>
</div>
<!-- Headline and Description -->
<div class="row mx-5">
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/1.png" style="width: 96px" alt="1">
<div class="card-body">
<h5 class="card-title">Class 1</h5>
<p class="card-text">All students in class room 1.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/2.png" style="width: 96px" alt="2">
<div class="card-body">
<h5 class="card-title">Class 2</h5>
<p class="card-text">All students in class room 2.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/3.png" style="width: 96px" alt="3">
<div class="card-body">
<h5 class="card-title">Class 3</h5>
<p class="card-text">All students in class room 3.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/4.png" style="width: 96px" alt="4">
<div class="card-body">
<h5 class="card-title">Class 4</h5>
<p class="card-text">All students in class room 4.</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 -->
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
Remove the width height from image tag and use "img-fluid" class in image tag.
Or in mobile view you can use position absolute
Thanks for the suggestion provided by #Minhaj. I tweaked my code and it works fine now. I incorrectly placed the brand image in a separate div outside the navbar div. This is my new code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Localhost Site - Classroom Attendance</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Testing HTML 5 and Bootstrap 5">
<meta name="keywords" content="html5,bootstrap5">
<meta name="author" content="classroom">
<!-- Bootstrap 5 -->
<link rel="stylesheet" href="css/bootstrap.min.css"></link>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<!-- Navbar Brand -->
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="img-fluid" src="media/fadmeter-logo.png" alt="Fadmeter Logo" width="200" height="50" style="position:absolute; top:0; left:0">
</a>
<!-- Toggler/Collapsible Button -->
<button class="navbar-toggler ms-auto ms-sm-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
<ul class="navbar-nav ms-2 align-items-end">
<li class="nav-item">
<a class="nav-link" href="#">Resources</a>
</li>
<li>
<a class="nav-link" href="#">Contact</a>
</li>
<li>
<a class="nav-link" href="#">Login</a>
</li>
<li>
<form action="#">
<input type="submit" class="btn btn-primary" value="Register">
</form>
</li>
</ul>
</div>
</div>
</nav>
</div>
<br>
<!-- Code Input Area -->
<div class="container rounded mt-5 pt-3 pb-1 bg-dark text-white" style="width:400px">
<form action="#">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input type="text" class="form-control" placeholder="Enter Code">
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Go</button>
</div>
</div>
</form>
</div>
<br>
<!-- Headline and Description -->
<div class="container">
<h3>My Headline Text</h3>
<p><span style="color:blue">Localhost</span> is a test page for HTML 5 and Bootstrap 5.</p>
</div>
<!-- Headline and Description -->
<div class="row mx-5">
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/1.png" style="width: 96px" alt="1">
<div class="card-body">
<h5 class="card-title">Class 1</h5>
<p class="card-text">All students in class room 1.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/2.png" style="width: 96px" alt="2">
<div class="card-body">
<h5 class="card-title">Class 2</h5>
<p class="card-text">All students in class room 2.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/3.png" style="width: 96px" alt="3">
<div class="card-body">
<h5 class="card-title">Class 3</h5>
<p class="card-text">All students in class room 3.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/4.png" style="width: 96px" alt="4">
<div class="card-body">
<h5 class="card-title">Class 4</h5>
<p class="card-text">All students in class room 4.</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 -->
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
The modal doesn't display any of my images. I tried changing the pictures and code. However I'm new to this, and I have no clue. Could it be the javascript or the code itself? I've tried atom and Dreamweaver and I get the same problem.
$(function() {
$('#site-modal').on('show.bs.modal',function() {
$(this)
.find('.modal content img')
.attr('src',$(event.relatedTarget).data('highres') )
});
});
There is a broken image link of dome sort.
$(function() {
$('#site-modal').on('show.bs.modal', function() {
$(this)
.find('.modal content img')
.attr('src', $(event.relatedTarget).data('highres'))
});
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!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">
<!-- css style sheet-->
<!-- 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"> -->
<link href="css/bootstrap-4.2.1.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link href="larry 2.css" rel="stylesheet" type="text/css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hello, world!</title>
</head>
<body>
<header id="page-hero" class="site-header">
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#page-hero">
<i class="fas fa-ankh"></i> LarryJ Designs</a>
</div>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myTogglerNav" aria-controls="#myTogglerNav" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<section class="collapse navbar-collapse align" id="myTogglerNav">
<div class="navbar-nav">
<a class="nav-item nav-link" href="index.html">Home</a>
<a class="nav-item nav-link" href="about3.html">About </a>
<a class="nav-item nav-link" href="portfolio2.html">Portfolio</a>
<a class="nav-item nav-link" href="">Contact</a>
</div>
</section>
</nav>
<section class="layout-hero d-flex align-items-center text-light text-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-11 col-sm-10 col-md-8">
<h3 class="page-section-title">Larry J designs</h3>
<p>Conformity is the jailer of freedom and the enemy of growth.” ― John F. Kennedy</p>
</div>
</div>
</div>
</section>
</header>
<section class="layout-card container-fluid">
<div class="row justify-content-center">
<div class="col-8 col-sm-12 col-lg-10">
<div class="card-deck">
<section class="card my-3">
<a data-toggle="modal" data-target="#site-modal" data-highres="#" href="business_card.png"> <img class="layout-image img-fluid" src="business_card.png" alt="photo sample"></a>
<div class="card-body">
<h4 class=" layout-title card-title">Business Cards</h4>
<p class="card-text layout-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</section>
<section class="card my-3">
<a data-toggle="modal" data-target="#site-modal" data-highres="#" href="stocklayouts-graphic-design-templates-2.jpg"><img src="stocklayouts-graphic-design-templates-2.jpg" class="card-img-top img-fluid" alt="..."></a>
<div class="card-body">
<h4 class="card-title layout-text">Flyers</h4>
<p class="card-text layout-text"></p>
</div>
</section>
<section class="card my-3">
<a data-toggle="modal" data-target="#site-modal" data-highres="#" href="website stock.jpg"> <img src="website stock.jpg" class="card-img-top img-fluid" alt="..."></a>
<div class="card-body">
<h4 class="card-title layout-title">Webpages</h4>
<p class="card-text layout-text"> As of this moment we build small webpages, such as porfolios, small business, blogs etc. </p>
</div>
</section>
</div>
</div>
</div>
</section>
<footer class="site-footer text-light d-flex justify-content-center">
<section class="layout-social py-5">
<a class="text-light px-2" href="https://twitter.com/planetoftheweb">
<i class=" layout-icon fab fa-twitter"></i>
</a>
<a class="text-light px-2" href="https://facebook.com/viewsource">
<i class=" layout-icon fab fa-facebook"></i>
</a>
<a class="text-light px-2" href="https://linkedin.com/in/planetoftheweb">
<i class=" layout-icon fab fa-linkedin"></i>
</a>
<a class="text-light px-2" href="https://github.com/planetoftheweb">
<i class=" layout-icon fab fa-github"></i>
</a>
<a class="text-light px-2" href="https://plus.google.com/+RayVillalobos0">
<i class=" layout-icon fab fa-google-plus"></i>
</a>
<a class="text-light px-2" href="https://dribbble.com/planetoftheweb">
<i class=" layout-icon fab fa-dribbble"></i>
</a>
<a class="text-light px-2" href="https://www.flickr.com/photos/planetoftheweb/sets/72157602932636630/">
<i class=" layout-icon fab fa-flickr"></i>
</a>
<a class="text-light px-2" href="https://www.youtube.com/user/planetoftheweb">
<i class=" layout-icon fab fa-youtube"></i>
</a>
<div class="copyright py-4 text-center text-white">
<div class="container">
<small>Copyright © Larry J designs 2019</small>
</div>
</div>
</section>
</footer>
<article id="site-modal" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<img data-dismiss="modal" class="img-fluid" src="#" alt="Modal Photo">
</div>
</div>
</article>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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> -->
<script src="js/bootstrap-4.2.1.js"></script>
<script src="larryj.js"></script>
</body>
</html>
this element does not exsist find('.modal content img')
You have ".modal-content img" this one
Can you try something similar to the code showed below:
$(function(){
$('#site-modal').on('show.bs.modal',function(event) {
var url = $(event.relatedTarget).children().attr('src')
$('#site-modal')
.find('img')
.attr('src',url )
});
});
Image display in a modal
I've replicated the example and it works: https://jsfiddle.net/ayj0obwh/
I think your problem is that you are loading a CSS library outside of <head> and even outside of <html> tags. Try removing it, because you are already loading Bootstrap CSS on <head> tag.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
This my code again . Id it the CSS or is that okay . it's been weeks working with this problem .
$(function() {
$('#site-modal').on('show.bs.modal', function() {
$(this)
.find('.modal content img')
.attr('src', $(event.relatedTarget).data('highres'))
});
});
#import url('https://fonts.googleapis.com/css?family=Merriweather:300|Source+Sans+Pro:200,400,600');
:root {
/*
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
*/
/* Override Variables */
--font-family-sans-serif: 'Source Sans Pro', -apple-system,
BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol';
--gray-dark: #404040;}
/* Page Variables */
--font-family-serif: Merriweather, serif;
--color-text: var(--gray-dark);
--font-family-text: var(--font-family-serif);
--secondary: #6c757d;
}
family-sans {
font-family: var(--font-family-sans-serif);
}
body {
font-family: var(--font-family-text);
color: var(--color-text);
font-weight: 200;
background-image:url(jonathan-bowers-531776-unsplash.jpg);
background-repeat: no-repeat;
background-size: auto;
background-position:top;
}
.site-header {
background: url("");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
;
}
.site-header .layout-hero {
min-height: 20vh;
}
.site-header .page-section-title .header-title {
font-size: 3em;
font-family: var(--font-family-sans-serif);
font-weight: 200;
}
.site-header .page-section-text.page {
font-size: 1.2em;
}
.layout-social .layout-icon {
font-size: 2em;
}
img {
max-width: 75%;
height: auto;
display:block;
margin-left:auto;
margin-right:auto;
}
h2,h5{text-align:center;
text-transform:uppercase;
}
h1{font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";text-transform: capitalize;}
h3{color:red;}
#media screen and (max-width: 768px) {
.site-header .navbar-collapse {
background-color: rgba(0, 0, 0, 0.9);
padding: 10px;
}
}
.site-header .nav-link {
position: relative;
padding-bottom: 0;
margin-bottom: 2px;
}
.site-header .nav-link:before {
content: '';
position: absolute;
width: 100%;
max-width: 100px;
height: 2px;
left: 0;
bottom: 0;
background-color: var(--red);
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-out;
}
.site-header .nav-link:hover:before {
visibility: visible;
left: 0;
transform: scaleX(1);}
.animated {
visibility: visible !important;
}
h1{text-transform:uppercase;}
<!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">
<!-- css style sheet-->
<!-- 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"> -->
<link href="css/bootstrap-4.2.1.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link href="larry 2.css" rel="stylesheet" type="text/css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hello, world!</title>
</head>
<body>
<header id="page-hero" class="site-header">
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#page-hero">
<i class="fas fa-ankh"></i> LarryJ Designs</a>
</div>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myTogglerNav" aria-controls="#myTogglerNav" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<section class="collapse navbar-collapse align" id="myTogglerNav">
<div class="navbar-nav">
<a class="nav-item nav-link" href="index.html">Home</a>
<a class="nav-item nav-link" href="about3.html">About </a>
<a class="nav-item nav-link" href="portfolio2.html">Portfolio</a>
<a class="nav-item nav-link" href="">Contact</a>
</div>
</section>
</nav>
<section class="layout-hero d-flex align-items-center text-light text-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-11 col-sm-10 col-md-8">
<h3 class="page-section-title">Larry J designs</h3>
<p>Conformity is the jailer of freedom and the enemy of growth.” ― John F. Kennedy</p>
</div>
</div>
</div>
</section>
</header>
<section class="layout-card container-fluid">
<div class="row justify-content-center">
<div class="col-8 col-sm-12 col-lg-10">
<div class="card-deck">
<section class="card my-3">
<a data-toggle="modal" data-target="#site-modal" data-highres="#" href="business_card.png"> <img class="layout-image img-fluid" src="business_card.png" alt="photo sample"></a>
<div class="card-body">
<h4 class=" layout-title card-title">Business Cards</h4>
<p class="card-text layout-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</section>
<section class="card my-3">
<a data-toggle="modal" data-target="#site-modal" data-highres="#" href="stocklayouts-graphic-design-templates-2.jpg"><img src="stocklayouts-graphic-design-templates-2.jpg" class="card-img-top img-fluid" alt="..."></a>
<div class="card-body">
<h4 class="card-title layout-text">Flyers</h4>
<p class="card-text layout-text"></p>
</div>
</section>
<section class="card my-3">
<a data-toggle="modal" data-target="#site-modal" data-highres="#" href="website stock.jpg"> <img src="website stock.jpg" class="card-img-top img-fluid" alt="..."></a>
<div class="card-body">
<h4 class="card-title layout-title">Webpages</h4>
<p class="card-text layout-text"> As of this moment we build small webpages , such as portfolios , small business , blogs etc. </p>
</div>
</section>
</div>
</div>
</div>
</section>
<footer class="site-footer text-light d-flex justify-content-center">
<section class="layout-social py-5">
<a class="text-light px-2" href="https://twitter.com/planetoftheweb">
<i class=" layout-icon fab fa-twitter"></i>
</a>
<a class="text-light px-2" href="https://facebook.com/viewsource">
<i class=" layout-icon fab fa-facebook"></i>
</a>
<a class="text-light px-2" href="https://linkedin.com/in/planetoftheweb">
<i class=" layout-icon fab fa-linkedin"></i>
</a>
<a class="text-light px-2" href="https://github.com/planetoftheweb">
<i class=" layout-icon fab fa-github"></i>
</a>
<a class="text-light px-2" href="https://plus.google.com/+RayVillalobos0">
<i class=" layout-icon fab fa-google-plus"></i>
</a>
<a class="text-light px-2" href="https://dribbble.com/planetoftheweb">
<i class=" layout-icon fab fa-dribbble"></i>
</a>
<a class="text-light px-2" href="https://www.flickr.com/photos/planetoftheweb/sets/72157602932636630/">
<i class=" layout-icon fab fa-flickr"></i>
</a>
<a class="text-light px-2" href="https://www.youtube.com/user/planetoftheweb">
<i class=" layout-icon fab fa-youtube"></i>
</a>
<div class="copyright py-4 text-center text-white">
<div class="container">
<small>Copyright © Larry J designs 2019</small>
</div>
</div>
</section>
</footer>
<article id="site-modal" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<img data-dismiss="modal" class="img-fluid" src="#" alt="Modal Photo">
</div>
</div>
</article>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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> -->
<script src="js/bootstrap-4.2.1.js"></script>
<script src="larryj.js"></script>
</body>
</html>
I'm not able to get my jquery code to work with my Bootstrap 4. div.
My goal is to have two divs (fluid bootstrap containers) in the banner section, however one showing upon loading the page for about 5sec. and then gradually fading out while the next div gradually fades in.
I'd appreciate your help and if possible an explanation why my second block of code won't work.
PS: I know that the 2nd code block does not represent my goal, but it should also work and does not.
This works:
setTimeout(
function() {
$('#div-a').replaceWith($('#div-b'));
$('#div-b').show();
},
4000
);
But this doesn't work:
setTimeout(function(){
$("#div-a").fadeOut("slow", function () {
$('#div-a').replaceWith($('#div-b'));
$('#div-b').show();
});
}, 2000);
In my CSS file I have the following:
#div-b {
display: none;
}
In my HTML file I have the following:
<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>TEXATREK</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-expand-lg navbar-light bg-light" id="navi">
<a class="navbar-brand" href="">
<img class="brand-logo" src="images/logos/Trexatek_Logo_AND_Name_Gold-Orange.png" alt="">
</a>
<!--HAMBURGER Toggler Icon-->
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu" >
<span class="navbar-toggler-icon"></span>
</button>
<!-- NAVBAR -> div BELLOW -->
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav ml-auto mr-5 ">
<li class="nav-item mr-5"><a class="nav-link" href="">Users</a></li>
<li class="nav-item mr-5"><a class="nav-link" href="">Products</a></li>
<li class="nav-item mr-5"><a class="nav-link" href="">Items</a></li>
<li class="nav-item mr-5"><a class="nav-link" href="">Pigis</a></li>
<li class="nav-item mr-5"><a class="nav-link" href="">Rolls</a></li>
</ul>
</div>
</nav>
<!-- SECTION 1 -->
<!--WELLCOME PAGE SECTION-->
<div id="div-a" class=" mt-2 px-0 pt-05 container-fluid">
<div class="row">
<div class="hex-container mx-0 px-0 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<img class="hex-banner img-fluid" src="images/Banner/Hexagon-Banner/Hexagon_Photo_Grid_with_logo_in_middle 1915x615.png" alt="">
</div>
</div>
</div>
<!--REPLACEMENT AFTER 5 SECONDS -- START-->
<div id="div-b" class=" mt-2 px-0 pt-05 container-fluid">
<div class="row">
<div class="hex-container mx-0 px-0 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<h1>SIGN UP NOW BITCHES</h1>
</div>
</div>
</div>
<!--REPLACEMENT AFTER 5 SECONDS -- END-->
<!-- SECTION 2 -->
<!--INFORMATION ABOUT TEXATREK 1. US 2.OUR STRENGTH 3. WHY TEXATREK-->
<div class="container-fluid pt-5">
<div class="row">
<div class="mx-0 px-0 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<!--WHAT WE DO info section-->
<div class="texatrek-info what-we-do">
<h2>WHAT WE DO</h2>
<h3>Our company specializes in sourcing precision components that are manufactured in India by our network of carefully selected, high quality suppliers, all of which are ISO 9001 certified. Our goal is to ensure reliable supplies at competitive costs and with zero defects.</h3>
</div>
<!--OUR STRENGTHS info section-->
<div class="texatrek-info our-strengths">
<h2>OUR STRENGTH IS YOUR ADVANTAGE</h2>
<h3> We manage and expand our carefully selected Indian supplier base to meet the ever-growing demand of our customers. By offering a broad selection of manufacturing technologies we are able to support you to meet the challenges you are facing in terms of design and supply chain, that is optimized for manufacturing and thus resulting in reduced unit cost. </h3>
</div>
<!--BACKGROUND IMAGE HEXAGONS-->
<div class="product-background">
<img class="img-fluid product-background-img" src="images/Background/Background-info_cropped.png" alt="">
</div>-
</div>
</div>
</div>
<!-- SECTION 3 -->
<!--PRODUCTS AND SERVICES SECTION-->
<div class="container-fluid pt-5">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
<img id="products-services" class="img-fluid"src="images\Info_Graphics\Products and Services.png" alt="">
</div>
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div class="solutions-container">
<!--THE BLACK IN THE BLUE BLOCK (div)-->
<div class="solutions-inside">
<h3 class="solutions text-left">SOLUTIONS SOLUTIONS SOLUTIONS THAT FIT</h3>
<h5 class="solutions-para text-left">paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</h5>
</div>
</div>
</div>
</div>
</div>
<!-- SECTION 4 -->
<div class="container-fluid pt-5">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
</div>
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
</div>
</div>
</div>
<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>
<link rel="stylesheet" href="TrexatekNavbar_V3_Bootstrap.css">
<script>
$('#div-a').fadeOut('slow').promise().done(function() {
$('#div-a').replaceWith($('#div-b'));
$('#div-b').fadeIn('slow');
});
/*
setTimeout(function(){
$("#div-a").fadeOut("slow", function () {
$('#div-a').replaceWith($('#div-b'));
$('#div-b').show();
});
}, 2000);
setTimeout(
function() {
$('#div-a').replaceWith($('#div-b'));
$('#div-b').show();
},
4000
);
*/
</script>
</body>
</html>