Changing li class with span id in Modal pop up - javascript

In my html page, I have an external javascript code, that causes a modal to pop up when a project in my html class is clicked. the projects are specified through the li class attribute. I now wish to chance this, so the modal instead pops up when a span id element is clicked. Therfor I have revisited by Javascript code, and changed the li class-attribute (in this case .Project) into the span id attribute (#PopUp. Unfortunately I have not been able to make my code work, through that. Is anyone able to see where I go wrong?
window.onload = function() {
span = document.querySelectorAll("#PopUp");
document.querySelectorAll("#PopUp").forEach(LIelm => {
LIelm.addEventListener('click', showHideModal)
})
};
function showHideModal(e) {
if (!e.target.parentNode.matches('#PopUp , .modal-content')) return
e.preventDefault();
let currentParent = e.target.parentNode;
if (currentParent.matches('#PopUp')) {
document.getElementById(currentParent.dataset.modal).style.display = "block";
} else {
currentParent.parentNode.style.display = "";
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="content">
<div id="contact">
About Contact: c.thornval#live.dk 0045 7158 0488
<br>
<br>
</div>
<ul style="list-style: none;">
<li class="Project" data-modal="myModal_1">
<span id="myBtn_1">Irma Type</span>
<span id="year">2019</span>
<div class="Describtion">
<span id="PopUp">Images</id>
<p style="display:none;">Typedesign<br></p>
</div>
<div id="myModal_1" class="modal">
<div class="modal-content">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Images/Lirma/type.jpg" alt="img" width="100%">
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<p>Some text in the Modal...</p>
</div>
</div>
</div>
</li>

Related

Bootstrap carousel not showing images

I'm trying to make a carousel which browses through the images in an image folder. A script automatically adds the items to the carousel based on the images present. The images are labelled 1, 2, 3, and so on.
But no matter what I try, the carousel doesn't show the image. I've tried converting the images to different format. The images are originally JFIF.
Here's my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Edexcel International GCSE (9-1) Human Biology Student Book | Scotch's Pirated Book Reader (PBR) v3.6</title>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body onLoad="load()" style="margin-top: 10px;">
<div class="container">
<div style="text-align: center; line-height: 2px;">
<h4>Image browser</h4>
<p>Coded by someone</p>
</div><br /><br />
<div id="pageCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox" id="carousel-inner">
<!-- GONNA BE FILLED BY THE SCRIPT -->
</div>
<a class="carousel-control-prev" href="#pageCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-primary" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#pageCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-primary" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/new.js"></script>
</body>
</html>
The new.js file has the script which loads the images into the carousel. A basic summary of what it does is:
'use strict';
function load()
{
var index = 2; // The first image is named 2.jfif
var carousel_innerHTML = "";
while (index < 278) // There are 277 images
{
carousel_innerHTML = carousel_innerHTML + makeEntry(index);
index++;
}
document.getElementById('carousel-inner').innerHTML = carousel_innerHTML;
}
function makeEntry(index)
{
return '<!-- AUTO GENERATED CODE --> <div class="carousel-item"><img class="d-block mx-auto" src="assets/' + index + '.jfif" alt="' + index + '" /></div>\n';
}
You were missing a couple things:
You need to add an active class to the first div in the carousel-inner div
You should initialize the carousel when finished loading the images. $('#pageCarousel').carousel({interval: 3000});
Here is a working example for you.
'use strict';
// for this example
var images = ["","","https://upload.wikimedia.org/wikipedia/commons/c/c9/10150811_677994762257483_131131840_n_677994762257483.jpg", "https://upload.wikimedia.org/wikipedia/commons/1/1b/10603847_756710051052620_5858255939401577860_o_756710051052620.jpg","https://upload.wikimedia.org/wikipedia/commons/6/6a/1073115_556203904436570_702830415_o_556203904436570.jpg"]
function load() {
var index = 2; // The first image is named 2.jfif
var carousel_innerHTML = "";
while (index < 5) // There are 277 images
{
carousel_innerHTML = carousel_innerHTML + makeEntry(index);
index++;
}
document.getElementById('carousel-inner').innerHTML = carousel_innerHTML;
$('#pageCarousel').carousel({interval: 3000});
}
function makeEntry(index) {
var first = index === 2 ? "active" : "";
return '<!-- AUTO GENERATED CODE --> <div class="carousel-item ' + first + '"><img class="d-block mx-auto" src="' + images[index] + '" alt="' + index + '" /></div>\n';
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<body onLoad="load()" style="margin-top: 10px;">
<div class="container">
<div style="text-align: center; line-height: 2px;">
<h4>Image browser</h4>
<p>Coded by someone</p>
</div><br /><br />
<div id="pageCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox" id="carousel-inner">
<!-- GONNA BE FILLED BY THE SCRIPT -->
</div>
<a class="carousel-control-prev" href="#pageCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-primary" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#pageCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-primary" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- 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.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>
</html>

Bootstrap carousel: how to know which slider it is when carousel is paused

I have a carousel slide show which I can start (at browser refresh) and pause (myBtn2). When paused I need to know what is the current slider. How do I do that? Below my code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="./style.css">
<script src="main.js"></script>
<style>
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<button type="button" id="myBtn2" class="btn btn-danger btn-lg">Set</button>
<br>
<br>
<div id="myCarousel" class="carousel slide" data-interval="2000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="item1 active"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="jack-spades.png" alt="Jake Spade" width="460"
height="345">
</div>
<div class="item">
<img src="jack_dimond.jpg" alt="Jack Diamond" width="460"
height="345">
</div>
<div class="item">
<img src="queen.jpg" alt="Queen" width="460" height="345">
</div>
<div class="item">
<img src="queen_spades.jpg" alt="Queen Spade" width="460"
height="345">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script>
$(document).ready(function() {
// Activate Carousel
$("#myCarousel").carousel("cycle");
// Click on the button to stop sliding
$("#myBtn2").click(function() {
$("#myCarousel").carousel("pause");
});
// Enable Carousel Indicators
$(".item1").click(function() {
$("#myCarousel").carousel(0);
});
$(".item2").click(function() {
$("#myCarousel").carousel(1);
});
$(".item3").click(function() {
$("#myCarousel").carousel(2);
});
$(".item4").click(function() {
$("#myCarousel").carousel(3);
});
// Enable Carousel Controls
$(".left").click(function() {
$("#myCarousel").carousel("prev");
});
$(".right").click(function() {
$("#myCarousel").carousel("next");
});
});
</script>
</body>
</html>
$("div.active") or $("li.active")

I cannot navigate between carousel my slides

I have been working on a carousel for my website. everything looks correct when I open the page (picture shows up, dots are in place, and the next and prev buttons show up). but when I try to click on next or previous it doesn't do anything. been trying to fix it for awhile now but I just can't figure out what is wrong. Any help would be great.
My Code:
<div class="container">
<div class = "row">
<div class = "col-sm-12">
<div id = "my-slider" class = "carousel slide" data-ride="carousel">
<!--indicators dot nav -->
<ol class="carousel-indicators">
<li data-target="#my-slider" data-slide-to="0" class = "active"></li>
<li data-target="#my-slider" data-slide-to="1"></li>
<li data-target="#my-slider" data-slide-to="2"></li>
<li data-target="#my-slider" data-slide-to="3"></li>
<li data-target="#my-slider" data-slide-to="4"></li>
</ol>
<!--Wrapper for slide -->
<div class = "carousel-inner" role = "listbox">
<div class = "item active">
<img src = "image/img1.jpg" alt = "stuff"/>
<div class="carousel-caption">
<h1>header</h1>
<p>and paragraph</>
</div>
</div>
<div class = "item">
<img src = "image/img2.jpg" alt = "stupid stuff"/>
<div class="carousel-caption">
<h1>header</h1>
<p>and paragraph</>
</div>
</div>
<div class = "item">
<img src = "image/img3.jpg" alt = "other stuff"/>
<div class="carousel-caption">
<h1>header</h1>
<p>and paragraph</>
</div>
</div>
<div class = "item">
<img src = "image/img4.jpg" alt = "more stuff"/>
<div class="carousel-caption">
<h1>header</h1>
<p>and paragraph</>
</div>
</div>
<div class = "item">
<img src = "image/img5.jpg" alt = "last stuff"/>
<div class="carousel-caption">
<h1>header</h1>
<p>and paragraph</>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#my-slider" role = "button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden ="true"></span>
<span class = "sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#my-slider" role = "button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden = "true"></span>
<span class = "sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
Why are you trying to reinvent the wheel?? This is why frameworks exist. Whenever you are trying to apply a component just look for a framework. It will save a lot of time for you. I recommend using this one: jQuery thumbnail scroller
This looks like the example code from the Bootstrap slider. If so, you need to make sure the bootstrap.js is linked as well as jQuery for the slider to work.

Bootstrap 3: Hidding carousel controls on first and last items not working

I did get the JS code from: netgloo
JS:
var checkitem = function() {
var $this;
$this = $("#");
if ($("#diapos .carousel-inner .item:first").hasClass("active")) {
$this.children(".left").hide();
$this.children(".right").show();
} else if ($("#diapos .carousel-inner .item:last").hasClass("active")) {
$this.children(".right").hide();
$this.children(".left").show();
} else {
$this.children(".carousel-control").show();
}
};
checkitem();
$("#diapos").on("slid.bs.carousel", "", checkitem);
HTML:
<div id="diapos" class="carousel paper2 slide" data-ride="carousel">
<!-- diapos -->
<div class="carousel-inner" role="listbox">
<div class="overlay"></div>
<div class="item active" id="first">
<img src="img/01.jpg" alt="...">
</div>
<div class="item" id="second">
<img src="img/02.jpg" alt="...">
</div>
<div class="item" id="last">
<img src="img/03.jpg" alt="...">
</div>
</div>
</div>
<a class="left carousel-control" href="#diapos" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a>
<a class="right carousel-control" href="#diapos" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>
The code is not hidding the respective controls.
There are no other carousels in the document.
By the way, what's the function of this piece of HTML?:
<div class="overlay"></div>
The id of the carousel div is "diapos". So this on the third line should be assigned to that, as 'left' and 'right' are its immediate children :
var checkitem = function() {
var $this;
$this = $("#diapos"); // this line needs to be changed
if ($("#diapos .carousel-inner .item:first").hasClass("active")) {
$this.children(".left").hide();
//continue as before from here
Also, you probably forgot to close the 'diapos' div!

Bootstrap carousel how to hide one item from slider on xs size?

How I can hide one or two items from the bootstrap-carousel only on xs-size ?
When I added class 'hidden-xs' to this item in carousel and item div looks like:
<div class="item hidden-xs">
<img src="imgTop2.jpg" alt="...">
</div>
All the items and the carousel disappeared.
The same problem exist when i add 'hidden-xs' class to img element for this item.
How can I fix that ? I want to hide on xs only one or two slides. Others must by visible.
My code looks like:
<div id="carousel-top" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="hidden carousel-indicators" style="display:none">
<li data-target="#carousel-top" data-slide-to="0" class="active"></li>
<li class="" data-target="#carousel-top" data-slide-to="1"></li>
<li class="" data-target="#carousel-top" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="imgTop.jpg" alt="...">
</div>
<div class="item">
<img src="imgTop2.jpg" alt="...">
</div>
<div class="item">
<img src="imgTop3.jpg" alt="...">
</div>
<div class="item">
<img src="imgTop4.jpg" alt="...">
</div>
<div class="item">
<img src="imgTop5.jpg" alt="...">
</div>
</div>
<!-- Controls -->
<a class="hidden left carousel-control" href="#carousel-top" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="hidden right carousel-control" href="#carousel-top" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I can't think of a way to do it just with bootstrap helper classes, because the carousel script depends on the .item class. But you could use the following jQuery:
if ($(window).width() < 960) {
$('#carousel-top .hide-on-mobile').removeClass('item').addClass('hide');
}
You just have to add the class .hide-on-mobile to the items you want to hide on mobile devices.
Working Example
Expanding on Sebsemillia's approach, you can achieve this conditional logic actively on the window resize event. The only catch is that if the element has class "active", you must also remove this class and add it to another slide without the .hide-on-mobile class. See here, using class .no-mobile --
$(function(){
var $window = $(window);
function deviceWidth() {
return $window.width();
}
function toggleMobileSlideVisibility(show_hide) {
$no_mobile_slides = $('.carousel-inner').find('.no-mobile');
if (show_hide === 'hide'){
var reset_active_slide = false;
$no_mobile_slides.each(function(i, e){
if ($(e).hasClass('active')) {
reset_active_slide = true;
$(e).removeClass('active');
}
});
$no_mobile_slides.removeClass('item').addClass('hide');
if (reset_active_slide) {
$('.carousel-inner').find('.item').first().addClass('active');
}
} else if (show_hide === 'show') {
$no_mobile_slides.addClass('item').removeClass('hide');
}
}
var is_mobile_device = false;
var detectMobile = function detectMobile(){
if (deviceWidth() > 978) {
if (is_mobile_device) { toggleMobileSlideVisibility('show'); }
is_mobile_device = false;
} else {
if (!is_mobile_device) { toggleMobileSlideVisibility('hide'); }
is_mobile_device = true;
}
}
$(window).on('resize', function(){
detectMobile();
});
detectMobile();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://unsplash.it/1920/600/?random&img=2" alt="random">
<div class="carousel-caption">
Just A Slide
</div>
</div>
<div class="item no-mobile">
<img src="https://unsplash.it/1920/600/?random&img=3" alt="random-no-mobile">
<div class="carousel-caption">
A Slide That Should Hide On Mobile
</div>
</div>
<div class="item">
<img src="https://unsplash.it/1920/600/?random&img=4" alt="random2">
<div class="carousel-caption">
Just Another Slide
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Or you can use CSS media query to hide the items you choose on mobile:
#media screen and (max-device-width: 800px) {
.slide-hide-on-mobile { display: none; }
}
You just need to add class="slide-hide-on-mobile" to the items you want to hide:
<div class="item active slide-hide-on-mobile">
<img src="imgTop.jpg" alt="...">
</div>

Categories