<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>AYNTK</title>
</head>
<body>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="templates\Slide 1.jpg" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="templates\Slide 2.jpg" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="templates\Slide 3.jpg" class="d-block w-100">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<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>
</body>
</html>
I am really new to designing with HTML and CSS... I took this code from Bootstrap website, trying to create a carousel and added the relative path of my images to the img tag as source. The images does not get displayed on the website.. What can possibly be the reason?
host your images on Google drive as in upload them on Google drive , make them available for anyone within Google drive then copy the link for each image , place the link wherever you want that image in your code with in image tags and it's done bro.
Your images will be loaded.
Are you hosting it some where or your running it locally in your browser bro
Change \ to / in src attribute of img tag as
<img src="templates/Slide 1.jpg" >
I'm getting the issue as the images are getting listed of the slideshow. i want to show first image of the list when i run the code and other images need to get by clicking manually.
please help me regarding this issue.
Thanks.
Just use this bootstrap 4 snippet for Carousel
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>My Carousel</title>
</head>
<body>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17a4115b2a1%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17a4115b2a1%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.90625%22%20y%3D%22217.803125%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17a4115b29d%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17a4115b29d%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3046875%22%20y%3D%22217.803125%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17a4115b2a7%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17a4115b2a7%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22276.9921875%22%20y%3D%22217.803125%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
As I said in the title, I am trying to use JavaScript to update the favicon (shortcut icon) depending on Bootstrap Carousels.
For example, As the carousel changes to the second slide, 2.ico should be the favicon, as the carousel changes to the third slide, 3.ico should be the favicon. Here's what I have done.
<html>
<head>
<link rel="stylesheet" href="bootstrap.css">
<link rel="shortcut icon" href="1.ico" type="image/x-icon">
</head>
<!-- bootstrap boilerplate html for carousels -->
<body>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</body>
<script src="bootstrap.js">
<script>
if ( /*slide 2 is active*/ ) {
document.getElementsByTagName("link")[0].setAttribute("href", "2.ico");
}
if ( /*slide 3 is active*/ ) {
document.getElementsByTagName("link")[0].setAttribute("href", "3.ico");
}
</script>
You need to add an event listener to your carousel. You have more detail explanation in the docs page. But a simple javascript example for your HTML would be
<script>
$(document).ready(function() {
const myCarousel = document.getElementById('carouselExampleControls')
myCarousel.addEventListener('slid.bs.carousel', function() {
let currentIndex = $('.carousel-item.active').index() + 1;
// do something...
})
});
</script>
I can't seem to figure out why bootstrap's modal window isn't popping up.
I've looking into other similar questions and I still can't get it to work.
I've tried the process of elimination and try to eliminate all my scripts (except the bootstrap script) and it still won't open. Same with my CSS files. I also had inputted manual code for a modal window (before I incorporated bootstrap) so I was worried that the id="modal" from other modals would interfere. I deleted those too and nothing worked.
Here is my codepen, I've commented the sections the modal window code starts: https://codepen.io/eylenkim/pen/KKwMPLm
HTML:
<!--
-- fix other <a> tags // fix navigation
--fix "exit" for contact pop up (mobile)
-- center the Contact dialog box on viewport in mobile
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Art By Eylen | Shop</title>
<meta name="description" content="Browse Eylen's art portfolio to view work created with 35mm photography, blockprinting, and acrylic.">
<meta name="author" content="Eylen Kim">
<!-- data-src
––––––––––––––––––––––––––––––––––––––––––––––––––- -->
<link href="subpage-stylesheet.css" rel=stylesheet type="text/css">
<link href="StyleSheet.css" rel=stylesheet type="text/css">
<link href="skeleton.css" rel=stylesheet type="text/css">
<link href="otherCss/normalize.css" rel="stylesheet" type="text/css">
<link href="otherCss/font-awesome.css" rel=stylesheet type="text/css">
<link href="bootstrap-4.3.1-dist/css/bootstrap.css" rel=stylesheet type="text/css">
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" type="text/css">
<!-- Mobile Meta
––––––––––––––––––––––––––––––––––––––––––––––––––-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Favicon
––––––––––––––––––––––––––––––––––––––––––––––––––-->
<link rel="icon" type="image/png" href="photo/favicon1.png" />
</head>
<!-- Menu // Hamburger Bar
––––––––––––––––––––––––––––––––––––––––––––––––––-->
<nav class="navigation">
<a href="#" class="menu-icon">
<i class="fa fa-bars"></i>
</a>
<ul class="main-navigation" role="navigation">
<div id="nav-x" class="menu-icon">⨯</div>
<li>
<div href="index.html">
Home</a>
</li>
<li>
<div href="portfolio.html">
Portfolio</a>
</li>
<li>
<div class="trigger" style="height: 100%;padding: 10px 0 10px 10px;">
About Me
<div class="modal">
<div class="modal-content" style="height: 95%; max-height: 600px;padding: 2rem 4.6rem;">
<span class="close-button">×</span>
<h3>
Hello,<br>I'm Eylen!
</h3>
<img id="about-me-pic" src="photo/meee.JPG">
<p style="font-size: .75em; height: 44.3%; padding-top: 15px;">This art website is my passion project. I have coded my own platform to showcase & sell my art. What a treat to have you here on this site!<br><br> The mediums I work with: 35mm film photography, acrylic (canvas & glass), polymer clay (earrings), and printmaking.
<br><br>
In my free time I like petting my cat, tickling some gnarly tunes on the bass/electric guitar, coding, playing video games, and doing art stuff.<br><br>
</p>
</div>
</div>
</div>
</li>
<li style="height: 100%;padding: 20px 0 10px 7px;">
<p class="about-me-desktop" onclick="document.getElementById('id01').style.display='block'" style="position: relative;top: -3px;">Contact
</p>
<div class="w3-container">
<div id="id01" class="w3-modal">
<div class="modal-content-contact-portfolio">
<span class="close-button" onclick="document.getElementById('id01').style.display='none'" >×</span>
<h3 style="margin-bottom: 0px;">
Contact Me
</h3>
<p>
<div class="contact-us-form" style="font-size: .7em;">
<form action="https://formspree.io/eylenkim#gmail.com" method="POST">
<div class="row" style="z-index: 9999999;">
<div class="six columns">
<input class="u-full-width" type="text" placeholder="Name" id="nameInput" name="Name" requiprintmaking>
</div>
<div class="six columns">
<input class="u-full-width" type="email" placeholder="Email" id="emailInput" name="Email" requiprintmaking>
</div>
</div>
<textarea class="u-full-width" placeholder="Message" id="messageInput" name="Message" requiprintmaking style="height: 160px;margin-top: 20px;line-height: 17px;padding-top: 8px;"></textarea>
<input class="button u-pull-right" type="submit" value="Send" style="color: black;"><br><br><br>
</form>
</div>
</p>
</div>
</div>
</div>
</li>
</ul>
</nav>
<header>
<div class="container fade-in">
<div class="row">
<a href="index.html">
<h1 class="one-third column u-pull-left">Art By <span><br></span><span id="h1-title-span"> Eylen</span></h1>
</a>
<h2 class="one-third column u-pull-left" id="portfolio-title-desktop">| Shop</h2>
<h2 class="one-third column u-pull-left" id="portfolio-title-mobile">
<span>──<br></span>Shop
</h2>
<div class="about-contact-text" class="one-third column u-pull-right">
<a href="index.html">
<p class="about-me-desktop">Home</p>
</a>
<span class="trigger">
<p class="about-me-desktop">
About Me
</p>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<h3>
Hello,<br>I'm Eylen!
</h3>
<img id="about-me-pic" src="photo/meee.JPG">
<p>This art website is my passion project. I have coded my own platform to showcase & sell my art. What a treat to have you here on this site!<br><br> The mediums I work with: 35mm film photography, acrylic (canvas & glass), polymer clay (earrings), and printmaking.
<br><br>
In my free time I like petting my cat, tickling some gnarly tunes on the bass/electric guitar, coding, playing video games, and doing art stuff.<br><br>
</p>
</div>
</div>
</span>
<p class="about-me-desktop" onclick="document.getElementById('id02').style.display='block'">
Contact
</p>
<div class="w3-container">
<div id="id02" class="w3-modal">
<div class="modal-content-contact">
<span class="close-button" onclick="document.getElementById('id02').style.display='none'" >×</span>
<h3 style="margin-bottom: 0px;">
Contact Me
</h3>
<p>
<div class="contact-us-form">
<form action="https://formspree.io/eylenkim#gmail.com" method="POST">
<div class="overlap-text">
<div class="overlap-text-base-contact">
<h2 class="load two-thirds column">Contact</h2>
</div>
</div>
<div class="row" style="z-index: 9999999;">
<div class="six columns">
<input class="u-full-width" type="text" placeholder="Name" id="nameInput" name="Name" required>
</div>
<div class="six columns">
<input class="u-full-width" type="email" placeholder="Email" id="emailInput" name="Email" required>
</div>
</div>
<br>
<textarea class="u-full-width" placeholder="Message" id="messageInput" name="Message" required style=" height: 100px;
margin-top: 10px;
line-height: 17px;
padding-top: 8px;"></textarea>
<br><br>
<input class="button u-pull-right" type="submit" value="Send"><br><br><br>
</form>
</div>
</p>
</div>
</div>
</div>
</div>
</div>
</header>
<body class="top" id="top">
<section class="grid-wrapper">
<div class="filter-controls">
<div class="control fade-in">Filter By:
<select class="filter-field form-control">
<option value="">None</option>
<option value="prints">Prints</option>
<option value="earrings">Earrings</option>
<option value="commissions">Commisions</option>
</select>
</div>
</div>
<div class="grid bootstrap-on fade-in" style="flex-direction: row !important;">
<!------ Product w/ Carousel ---------------------------------------------------------------------->
<div class="card item" data-color="earrings">
<div class="price-tag">$10</div>
<div id="earrings1" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image" class="d-block w-100 crop-shp" alt="...">
</div>
<div class="carousel-item">
<img src="image" class="d-block w-100 crop-shop" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#earrings1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#earrings1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Carousel</h5>
<p class="card-text">I want to potentially add the ability to click on the carousel images for the pop up modal</p>
</div>
</div>
<!------ Product w/ Modal Window ---------------------------------------------------------------------->
<div class="card item" data-color="prints">
<div class="price-tag" data-toggle="modal" data-target="#exampleModal">$10</div>
<img src="image" class="card-img-top crop-shop" alt="Print" data-toggle="modal" data-target="#exampleModal">
<div class="card-body">
<h5 class="card-title">(Modal Window)</h5>
<p class="card-text">I want the modal window to pop up when clickin on the image</p>
</div>
</div>
</div>
<!-- Modal ------------------------------------------------------------------------------------>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Cute Earrings</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>THIS IS THE MODAL!</p>
Buy
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</select>
</section>
<!----- Muuri Filtering ----->
<script>
document.addEventListener('DOMContentLoaded', function () {
var grid = null,
wrapper = document.querySelector('.grid-wrapper'),
searchField = wrapper.querySelector('.search-field'),
filterField = wrapper.querySelector('.filter-field'),
sortField = wrapper.querySelector('.sort-field'),
gridElem = wrapper.querySelector('.grid'),
searchAttr = 'data-title',
filterAttr = 'data-color',
searchFieldValue,
filterFieldValue,
sortFieldValue,
dragOrder = [];
// Init the grid layout
grid = new Muuri(gridElem, {
dragEnabled: false,
layout: {
fillGaps: true
}
});
// Filter field event binding
filterField.addEventListener('change', filter);
// Sort field event binding
sortField.addEventListener('change', sort);
// Filtering
function filter() {
filterFieldValue = filterField.value;
grid.filter(function (item) {
var element = item.getElement(),
isSearchMatch = !searchFieldValue ? true : (element.getAttribute(searchAttr) || '').toLowerCase().indexOf(searchFieldValue) > -1,
isFilterMatch = !filterFieldValue ? true : (element.getAttribute(filterAttr) || '') === filterFieldValue;
return isSearchMatch && isFilterMatch;
});
}
});
</script>
<script src="js/muuri.js"></script>
<script src="https://unpkg.com/web-animations-js#2.3.2/web-animations.min.js"></script>
<!--Modal - Dialog Boxes -->
<script type="text/javascript"> const modals = Array.from(document.querySelectorAll('.modal'));
const triggers = Array.from(document.querySelectorAll('.trigger'));
var closeButton = document.querySelector(".close-button");
//if a trigger is clicked then...
for (const trigger of triggers) {
trigger.addEventListener('click', toggleModal);
}
// .. then toggle it's modal
function toggleModal(event) { event.target.closest('.trigger').querySelector('.modal').classList.toggle("show-modal"); }
// check if the clicked element is a modal, or in a modal
function windowOnClick(event) {
if (modals.some((modal) => modal.contains(event.target))) {
toggleModal();
}
}
</script>
<script>
function closeButton() {
document.getElementByClass('id02').style.display='none'
}
</script>
<!----- JS files ----->
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript" src="js/singlenav.js"></script>
<script type="text/javascript" src="js/scrollreveal.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload#12.4.0/dist/lazyload.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<i class="icon-chevron-up"></i>
<!----- Lazy Load ----->
<script>
(function() {
function logElementEvent(eventName, element) {
console.log(
Date.now(),
eventName,
element.getAttribute("data-src")
);
}
var callback_enter = function(element) {
logElementEvent("🔑 ENTERED", element);
};
var callback_exit = function(element) {
logElementEvent("🚪 EXITED", element);
};
var callback_reveal = function(element) {
logElementEvent("👁️ REVEALED", element);
};
var callback_loaded = function(element) {
logElementEvent("👍 LOADED", element);
};
var callback_error = function(element) {
logElementEvent("💀 ERROR", element);
element.src =
"https://via.placeholder.com/440x560/?text=Error+Placeholder";
};
var callback_finish = function() {
logElementEvent("✔️ FINISHED", document.documentElement);
};
ll = new LazyLoad({
elements_selector: ".lazy",
load_delay: 300,
threshold: 0,
// Assign the callbacks defined above
callback_enter: callback_enter,
callback_exit: callback_exit,
callback_reveal: callback_reveal,
callback_loaded: callback_loaded,
callback_error: callback_error,
callback_finish: callback_finish
});
})();
</script>
<!----- Scroll To Top ----->
<script>
$(window).scroll(function() {
if ($(this).scrollTop() >= 600) { // If page is scrolled more than 50px
$('#return-to-top').fadeIn(200); // Fade in the arrow
} else {
$('#return-to-top').fadeOut(200); // Else fade out the arrow
}
});
$('#return-to-top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop : 0 // Scroll to top of body
}, 500);
});
</script>
</body>
</html>
There are 2 separate issues that are preventing the modal from showing up.
1) The first issue is with your code
The bootstrap library you use returns 404.
How to check if it's happening for you?
Open your browser's inspector, and press CTRL+SHIFT+I
You will see:
Failed to load resource: the server responded with a status of 404 () eylenkim/fullpage/bootstrap-4.3.1-dist/css/bootstrap.css
In fact, this happens for a lot of your relative URLs.
Solution
Replace links to Bootstrap libraries with working ones, eg. from https://getbootstrap.com/
The ones I used in my testing of your code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
See gist for minimum code sample for a modal here: https://codepen.io/edwin-chua/pen/rNaLOEg
Once you fix the link problem, you will run into the second issue.
2) The second issue is with your stylesheet
Once you fixed your code as I suggested, you get a dark overlay with no modal.
Removing the reference to https://eylenkim.github.io/ArtByEylen/StyleSheet.css allows the modal to show up, so something in here is interfering with the modal's css.
Here is a working pen: https://codepen.io/edwin-chua/pen/QWwEyyZ
Separate Problem
You seem to have imported some libraries twice, once in the Codepen UI, and once in the HTML file. This will cause you debugging headaches. Make sure you only import them once. Since you are building an entire webpage, I suggest putting all of it in the HTML file.
also see JS tab
And
Further Comments
This section of code seems to be for closing the modal? If so, it probably isn't required, as Bootstrap automatically binds the click events.
<!--Modal - Dialog Boxes -->
<script type="text/javascript"> const modals = Array.from(document.querySelectorAll('.modal'));
const triggers = Array.from(document.querySelectorAll('.trigger'));
var closeButton = document.querySelector(".close-button");
//if a trigger is clicked then...
for (const trigger of triggers) {
trigger.addEventListener('click', toggleModal);
}
// .. then toggle it's modal
function toggleModal(event) { event.target.closest('.trigger').querySelector('.modal').classList.toggle("show-modal"); }
// check if the clicked element is a modal, or in a modal
function windowOnClick(event) {
if (modals.some((modal) => modal.contains(event.target))) {
toggleModal();
}
}
</script>
I am performing carousel play and pause using jquery and javascript in bootstrap. I have written the code but not getting where I missed.
Here is the full code which might let u catch my mistake.
The problem is that the buttons for play and pause are in the scope of carousel and the behaviour a button normally gives is not the same here.
For the current situation, the buttons are positioned below the prev button and performing the same action which prev is performing i.e. showing the previous image.
<!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="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" href="css/styles.css">
<title>Ristorante Con Fusion</title>
</head>
<body>
<div class="container">
<div class="row row-content">
<div class="col">
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid"
src="img/uthappizza.png" alt="uthappizza">
<div class="carousel-caption d-none d-md-block">
<h2>Uthappizza<span class="badge badge-danger">HOT</span><span class="badge badge-pill badge-secondary">$4.99</span></h2>
<p class="d-none d-sm-block">A unique combination of Indian Uthappam</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid"
src="img/buffet.png" alt="buffet">
<div class="carousel-caption d-none d-md-block">
<h2>Weekend Grand Buffet<span class="badge badge-danger">NEW</span></h2>
<p class="d-none d-sm-block">Featuring mouthwatering combinations with a choice of five different salads.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid"
src="img/alberto.png" alt="alberto">
<div class="carousel-caption d-none d-md-block">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p class="d-none d-sm-block">Award winning three-star Michelin chef with wide International experience.</p>
</div>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class="active"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
</ol>
<a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
<div class="btn-group" id="carouselButton">
<button class="btn btn-danger btn-sm" id="carousel-pause">
<span class="fa fa-pause"></span>
</button>
<button class="btn btn-danger btn-sm" id="carousel-play">
<span class="fa fa-play"></span>
</button>
</div>
</div>
</div>
</div>
<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">
<div class="media">
<img class="d-flex mr-3 img-thumbnail align-self-center" src="img/uthappizza.png" alt="uthappizza">
<div class="media-body">
<h2 class="mt-0">Uthappizza<span class="badge badge-danger">HOT</span><span class="badge badge-pill badge-secondary">$4.99</span></h2>
<p>A unique combination of Indian Uthappam (pancake) and Italian pizza.</p>
</div>
</div>
</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">
<div class="media">
<img class="d-flex order-sm-last mr-3 img-thumbnail align-self-center" src="img/buffet.png" alt="buffet">
<div class="media-body">
<h2 class="mt-0">Weekend Grand Buffet<span class="badge badge-danger">NEW</span></h2>
<p>Featuring mouthwatering combinations with a choice of five different salads.</p>
</div>
</div>
</div>
</div>
<div class="row row-content align-items-center">
<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 col-md order-sm-first">
<div class="media">
<img class="d-flex mr-3 img-thumbnail align-self-center" src="img/alberto.png" alt="alberto">
<div class="media-body">
<h2 class="mt-0">Alberto Somayya<span class="badge badge-danger">Exclusive</span><span class="badge badge-pill badge-secondary">$4.99</span></h2>
<h4>Executive Chef</h4>
<p>Award winning three-star Michelin chef with wide International experience.</p>
</div>
</div>
</div>
</div>
</div>
<!-- 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>
<script>
$(document).ready(function(){
$('#mycarousel').carousel({ interval : 2000 });
$('#carousel-pause').click(function(){
$('#mycarousel').carousel('pause');
});
$('#carousel-play').click(function(){
$('#mycarousel').carousel('cycle');
});
});
</script>
</body>
</html>
Proper Behaviour of Carousel play and pause.
yeah dude, i also had the problem while doing a course from coursera. It is not the problem with jquery. Set the "z-index" of "carouselButton" to 2 or higher and it should work
Yeah...set z-index: 1; to carouselButton ...it will definitely work.
After going through your script i discover you opt out an important detail in your code that is you didn't add pause: false after interval:2000. so your script code should have been presented this way.
<script>
$(document).ready(function(){
$("#mycarousel").carousel( { interval: 2000, pause: false } );
$("#carousel-pause").click(function(){
$("#mycarousel").carousel('pause');
});
$("#carousel-play").click(function(){
$("#mycarousel").carousel('cycle');
});
});
</script>
or you can make use of this
<script>
$('#mycarousel').carousel({
interval: 1500,
pause: false
});
$('#carousel-pause').click(function() {
$('#mycarousel').carousel('pause');
});
$('#carousel-play').click(function() {
$('#mycarousel').carousel('cycle');
});
</script>
either ways your code will be up and running fine when you click the pause or play button