I use pageres-cli (phantomjs) to take a screenshot from a website.
The animated stuff doesnt work while take a screenshot. I try to remove classes from HTML before rendering page. (".wow, .fadeIn, .animated ...")
I can remove elements etc, so i'm at the right point of the code, but this following specific code doesnt work.
page.evaluate(function (css) {
[...]
Array.prototype.slice.call(document.getElementsByClassName("wow")).forEach(function(script) {
script.classList.remove("wow");
});
}, opts.css);
HTML:
<section class="well2 well2_ins bg-secondary-rgba">
<div class="container">
<h3 class="text-primary center991">
Leistungen
<small>
<span>Alle Leistungen</span>
</small>
</h3>
</div>
<div class="owl-carousel">
<div class="item">
<div class="container">
<div class="row center991">
<div class="col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-delay=".1s">
<div class="thumbnail-1 thumbnail3">
<img src="http://placehold.it/270x200?text=Platzhalter Bild" alt=""/>
<div class="caption" data-equal-group="2">
<h5 class="txt-sec">
Hol- und Bringservice
</h5>
<a class="btn btn-primary offs1" href="/">Zum Angebot<span class="triang"></span></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-delay=".2s">
<div class="thumbnail-1 thumbnail3">
<img src="http://placehold.it/270x200?text=Platzhalter Bild" alt=""/>
<div class="caption" data-equal-group="2">
<h5 class="txt-sec">
Mobiler Service
</h5>
<a class="btn btn-primary offs1" href="/">Zum Angebot<span class="triang"></span></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-delay=".3s">
<div class="thumbnail-1 thumbnail3">
<img src="http://placehold.it/270x200?text=Platzhalter Bild" alt=""/>
<div class="caption" data-equal-group="2">
<h5 class="txt-sec">
Ersatzwagen
</h5>
<a class="btn btn-primary offs1" href="/">Zum Angebot<span class="triang"></span></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-delay=".4s">
<div class="thumbnail-1 thumbnail3">
<img src="http://placehold.it/270x200?text=Platzhalter Bild" alt=""/>
<div class="caption" data-equal-group="2">
<h5 class="txt-sec">
Sonnenschutzfolien
</h5>
<a class="btn btn-primary offs1" href="/">Zum Angebot<span class="triang"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="row center991">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="thumbnail-1 thumbnail3">
<img src="http://placehold.it/270x200?text=Platzhalter Bild" alt=""/>
<div class="caption" data-equal-group="2">
<h5 class="txt-sec">
Klimaanlagen-Service
</h5>
<a class="btn btn-primary offs1" href="/">Zum Angebot<span class="triang"></span></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="thumbnail-1 thumbnail3">
<img src="http://placehold.it/270x200?text=Platzhalter Bild" alt=""/>
<div class="caption" data-equal-group="2">
<h5 class="txt-sec">
Autoglasversiegelung
</h5>
<a class="btn btn-primary offs1" href="/">Zum Angebot<span class="triang"></span></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="thumbnail-1 thumbnail3">
<img src="http://placehold.it/270x200?text=Platzhalter Bild" alt=""/>
<div class="caption" data-equal-group="2">
<h5 class="txt-sec">Dichtigkeitsprüfung</h5>
<a class="btn btn-primary offs1" href="/">Zum Angebot<span class="triang"></span></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="thumbnail-1 thumbnail3">
<img src="http://placehold.it/270x200?text=Platzhalter Bild" alt=""/>
<div class="caption" data-equal-group="2">
<h5 class="txt-sec">Funktionstest</h5>
<a class="btn btn-primary offs1" href="/">Zum Angebot<span class="triang"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Related
Toggle multiple ids with button
I can't seem to do it in bootstrap 5
I tried the collapse function however this does not work well because the buttons work as a tab.
Toggle multiple ids with button
I can't seem to do it in bootstrap 5
I tried the collapse function however this does not work well because the buttons work as a tab.
<div class="col-11 col-lg-7 text-center">
<div class="nav btn-group mt-5" role="tablist" aria-orientation="vertical" >
<a class="btn btn-outline-success btn btn-light active" data-bs-toggle="tab" data-bs-target="#one-week" type="button" role="tab" aria-selected="true">1 Week</a>
<a class="btn btn-outline-success btn btn-light" data-bs-toggle="tab" data-bs-target="#two-weeks" type="button" role="tab" aria-selected="false">2 Weeks</a>
<a class="btn btn-outline-success btn btn-light" data-bs-toggle="tab" data-bs-target="#three-weeks" type="button" role="tab" aria-selected="false">3 Weeks</a>
<a class="btn btn-outline-success btn btn-light" data-bs-toggle="tab" data-bs-target="#four-weeks" type="button" role="tab" aria-selected="false">4 Weeks</a>
<a class="btn btn-outline-success btn btn-light" data-bs-toggle="tab" data-bs-target="#more-weeks" type="button" role="tab" aria-selected="false">More Weeks</a>
</div>
</div>
$ 90 /first week
$ /two weeks
$ /three weeks
<!-- four -->
<div class="tab-pane fade" id="four-weeks" role="tabpanel">
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0" data-to="135" data-aos data-aos-id="countup:in"></span> <span
class="h6 font-weight-normal align-self-end">/four weeks</span>
</div>
</div>
<!-- five -->
<div class="tab-pane fade" id="more-weeks" role="tabpanel" >
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0" data-to="15" data-aos data-aos-id="countup:in">20</span> <span
class="h6 font-weight-normal align-self-end">/extra weeks</span>
</div>
</div>
</div>
<hr style="color: #d2d2d7;">
<div class="d-flex pt-4">
<div class="p-0 me-2"> <i class="bi bi-check-circle-fill color-gray "></i>
</div>
<p class="mb-4 color-gray">16 Gorilla Boxes</p>
</div>
<div class="d-flex">
<div class="p-0 me-2"> <i class="bi bi-check-circle-fill color-gray "></i>
</div>
<p class="mb-4 color-gray">1 Gorilla Dolly Included</p>
</div>
</div>
<div class="tab-content " >
<!-- one -->
<div class="tab-pane fade show active" id="one-week1" role="tabpanel" ><span class="h5 mb-0">
<div class="d-flex mb-3">$</span> <span class="display-2 mb-0">90</span> <span
class="h6 font-weight-normal align-self-end">/first week</span>
</div>
</div>
<!-- two -->
<div class="tab-pane fade" id="two-weeks1" role="tabpanel" >
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0"><div data-to="105" data-aos data-aos-id="countup:in"></div></span> <span
class="h6 font-weight-normal align-self-end">/two weeks</span>
</div>
</div>
<!-- three -->
<div class="tab-pane fade" id="three-weeks1" role="tabpanel">
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0"><div data-to="120" data-aos data-aos-id="countup:in"></div></span> <span
class="h6 font-weight-normal align-self-end">/three weeks</span>
</div>
</div>
<!-- four -->
<div class="tab-pane fade" id="four-weeks1" role="tabpanel">
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0" data-to="135" data-aos data-aos-id="countup:in"></span> <span
class="h6 font-weight-normal align-self-end">/four weeks</span>
</div>
</div>
<!-- five -->
<div class="tab-pane fade" id="more-weeks1" role="tabpanel" >
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0" data-to="15" data-aos data-aos-id="countup:in">20</span> <span
class="h6 font-weight-normal align-self-end">/extra weeks</span>
</div>
</div>
</div>
<hr style="color: #d2d2d7;">
<div class="d-flex pt-4">
<div class="p-0 me-2"> <i class="bi bi-check-circle-fill color-gray "></i>
</div>
<p class="mb-4 color-gray">16 Gorilla Boxes</p>
</div>
<div class="d-flex">
<div class="p-0 me-2"> <i class="bi bi-check-circle-fill color-gray "></i>
</div>
<p class="mb-4 color-gray">1 Gorilla Dolly Included</p>
</div>
</div>
In the nav bar nav-tabs, the data attribute data-bs-target has to have to element id of the target tab-pane.
You had a different id.
Below is the fixed code:
<div class="col-11 col-lg-7 text-center">
<div class="nav nav-tabs btn-group mt-5" role="tablist" aria-orientation="vertical" >
<a class="btn btn-outline-success btn btn-light active" data-bs-toggle="tab" data-bs-target="#one-week1" type="button" role="tab" aria-selected="true" aria-controls="one-week1" >1 Week</a>
<a class="btn btn-outline-success btn btn-light" data-bs-toggle="tab" data-bs-target="#two-weeks1" type="button" role="tab" aria-selected="false" aria-controls="two-weeks1" >2 Weeks</a>
<a class="btn btn-outline-success btn btn-light" data-bs-toggle="tab" data-bs-target="#three-weeks1" type="button" role="tab" aria-selected="false" aria-controls="three-weeks1" >3 Weeks</a>
<a class="btn btn-outline-success btn btn-light" data-bs-toggle="tab" data-bs-target="#four-weeks1" type="button" role="tab" aria-selected="false" aria-controls="four-weeks1" >4 Weeks</a>
<a class="btn btn-outline-success btn btn-light" data-bs-toggle="tab" data-bs-target="#more-weeks1" type="button" role="tab" aria-selected="false" aria-controls="nav-home" >More Weeks</a>
</div>
</div>
<div class="tab-content " >
<!-- one -->
<div class="tab-pane fade show active" id="one-week1" role="tabpanel" ><span class="h5 mb-0">
<div class="d-flex mb-3">$</span> <span class="display-2 mb-0">90</span> <span
class="h6 font-weight-normal align-self-end">/first week</span>
</div>
</div>
<!-- two -->
<div class="tab-pane fade" id="two-weeks1" role="tabpanel" >
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0"><div data-to="105" data-aos data-aos-id="countup:in"></div></span> <span
class="h6 font-weight-normal align-self-end">/two weeks</span>
</div>
</div>
<!-- three -->
<div class="tab-pane fade" id="three-weeks1" role="tabpanel">
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0"><div data-to="120" data-aos data-aos-id="countup:in"></div></span> <span
class="h6 font-weight-normal align-self-end">/three weeks</span>
</div>
</div>
<!-- four -->
<div class="tab-pane fade" id="four-weeks1" role="tabpanel">
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0" data-to="135" data-aos data-aos-id="countup:in"></span> <span
class="h6 font-weight-normal align-self-end">/four weeks</span>
</div>
</div>
<!-- five -->
<div class="tab-pane fade" id="more-weeks1" role="tabpanel" >
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0" data-to="15" data-aos data-aos-id="countup:in">20</span> <span
class="h6 font-weight-normal align-self-end">/extra weeks</span>
</div>
</div>
</div>
<hr style="color: #d2d2d7;">
<div class="d-flex pt-4">
<div class="p-0 me-2"> <i class="bi bi-check-circle-fill color-gray "></i>
</div>
<p class="mb-4 color-gray">16 Gorilla Boxes</p>
</div>
<div class="d-flex">
<div class="p-0 me-2"> <i class="bi bi-check-circle-fill color-gray "></i>
</div>
<p class="mb-4 color-gray">1 Gorilla Dolly Included</p>
</div>
</div>
Here is my index.html page created by using Bootstrap 4.Here in 'Reserve Table Using modal' should only trigger only the modal which is for reserving table.But the whole page after the jumbotron went inside the modal.There is no custom jquery or javascript function added other than one script for tooltip.How's the fix?
<!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>
<nav class="navbar navbar-dark navbar-expand-sm fixed-top">
<div class="container">
<button class="navbar-toggler" data-toggle="collapse" type="button" data-target="#Navbar">
<span class="navbar-toggler-icon"> </span>
</button>
<a href="#" class="navbar-brand mr-auto">
<img src="img/logo.png" height="30" width="41" alt="logo.png">
</a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a href="./index.html" class="nav-link">
<span class="fa fa-home fa-lg"></span> Home </a> </li>
<li class="nav-item"><a href="./aboutus.html" class="nav-link">
<span class="fa fa-info fa-lg"></span> About </a></li>
<li class="nav-item"><a href="#" class="nav-link">
<span class="fa fa-list fa-lg"></span> Menu </a></li>
<li class="nav-item"><a href="./contactus.html" class="nav-link">
<span class="fa fa-address-card fa-lg"></span> Contact </a></li>
</ul>
<span class="navbar-text">
<a data-toggle="modal" data-target="#loginModal" >
<span class="fa fa-sign-in"> </span> Login
</a>
</span>
</div>
</div>
</nav>
<div class="modal fade" id="loginModal" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
Login
</h4>
<button type="button" class="close" data-dismiss="modal" >
×
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputEmail" >
Email Address
</label>
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail" placeholder="Enter Email">
</div>
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputPassword" >
Password
</label>
<input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword" placeholder="Enter Email">
</div>
<div class="col-sm-auto">
<div class="form-check">
<input type="checkbox" name="" id="rememberMe" class="form-check-input">
<label for="rememberMe" class="form-check-label">Remember Me</label>
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-primary btn-sm ml-auto">
Sign In
</button>
<button type="button" class="btn btn-secondary btn-sm ml-1" data-dismiss="modal">
Cancel
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<header class="jumbotron">
<div class="container">
<div class="row row-header">
<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-3 align-self-center" >
<img src="img/logo.png" class="img-fluid" alt="logo.png">
</div>
<div class="col-12 col-sm-3 align-self-center" >
<a class="btn btn-warning col-12 mb-2" href="#card" data-toggle="tooltip"
data-html="true"data-placement="bottom"
title="Or try to call us at <br><strong> +852 123456789</strong>" >
Reserve Table Using Internal Hyper Link
</a>
<a class="btn btn-warning col-12" href="" data-toggle="modal" data-target="#reserveTableModal">
Reserve Table Using Modal
</a>
</div>
</div>
</div>
</div>
</header>
<div class="modal fade" id="reserveTableModal" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<div class="modal-content">
<div class="modal-header bg-warning">
<h3 class="modal-title text-white">Reserve a Table</h3>
<button type="button" class="close" data-dismiss="modal" >
×
</button>
</div>
<div class="modal-body">
<form action="">
<div class="form-group row">
<h5 class="col-md-2">
<span class="label label-default">Number of Guests</span>
</h5>
<div class="form-check col-md-6 ">
<label for="1" class="col-form-label">
<input type="radio" name="TotalGuest" id="1"> 1
</label>
<input type="radio" name="TotalGuest" id="2">
<label for="2" class="col-form-label"> 2</label>
<input type="radio" name="TotalGuest" id="3">
<label for="3" class="col-form-label"> 3</label>
<input type="radio" name="TotalGuest" id="4">
<label for="4" class="col-form-label"> 4</label>
<input type="radio" name="TotalGuest" id="5">
<label for="5" class="col-form-label"> 5</label>
<input type="radio" name="TotalGuest" id="6">
<label for="6" class="col-form-label"> 6</label>
</div>
</div>
<div class="form-group row">
<div class="input-group">
<h5 class="col-md-2">
Section
</h5>
<div class="col-md-6 ">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-success custom-btn" for="noSmoke">
<input type="radio" name="smokeZone" id="noSmoke" autocomplete="off" checked="checked" > Non-Smoking
</label>
<label class="btn btn-danger custom-btn" for="Smoke">
<input type="radio" name="smokeZone" id="Smoke" autocomplete="off"> Smoking
</label>
</div>
</div>
</div>
</div>
<div class="form-group row">
<h5 class="col-md-2">
Date and Time
</h5>
<div class="col-md-10">
<div class="col-md-5 form-check-inline">
<input class="form-control" type="text" name="" id="" placeholder="Date">
</div>
<div class="col-md-5 form-check-inline">
<input class="form-control " type="text" name="" id="" placeholder="Time">
</div>
</div>
</div>
<div class="form-group row">
<div class="offset-md-2 col-md-10">
<button type="button" class="btn btn-secondary ml-1" data-dismiss="modal">
Cancel
</button>
<button type="submit" class="btn btn-primary">
Reserve
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row row-content">
<div class="col">
<div class="carousel slide" id="myCarousel" 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-sm-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 (pancake)
and Italian pizza, topped .</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-sm-block">
<h2 class="mt-0">
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-sm-block">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p class="d-none d-sm-block">Award winning three-star Michelin .
</p>
</div>
</div>
</div>
<ol class="carousel-indicators">
<li class="active" data-target="#myCarousel" data-slide-to="0"></li>
<li class="" data-target="#myCarousel" data-slide-to="1"></li>
<li class="" 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="carouselButtons">
<button class="btn btn-danger btn-sm" id="carousel-pause">
<span class="fa fa-pause"></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 src="img/uthappizza.png" alt="uthappizza.png" class="d-flex mr-3 img-thumbnail-align-self-center">
<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 class="d-none d-sm-block">
A unique combination of Indian Uthappam.</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">
<h2 class="mt-0">
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 class="media">
<img src="img/buffet.png" alt="buffet.png" class="d-flex ml-3 img-thumbnail align-self-center">
</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="media">
<img src="img/alberto.png" alt="alberto.png" class="d-flex ml-3 img-thumbnail align-self-center">
</div>
<div class="media-body">
<div class="col col-sm order-sm-first col-md">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p class="d-none d-sm-block">Award winning three-star Michelin
chef
</p>
</div>
</div>
</div>
<div class="row row-content" id="card">
<div class="col-sm-8 col-12 offset-sm-2">
<div class="card">
<h3 class="card-header bg-warning text-white">Reserve a Table</h3>
<div class="card-body">
<form action="">
<div class="form-group row">
<h5 class="col-md-2">
<span class="label label-default">Number of Guests</span>
</h5>
<div class="form-check col-md-6 ">
<label for="1" class="col-form-label">
<input type="radio" name="TotalGuest" id="1"> 1
</label>
<input type="radio" name="TotalGuest" id="2">
<label for="2" class="col-form-label"> 2</label>
<input type="radio" name="TotalGuest" id="3">
<label for="3" class="col-form-label"> 3</label>
<input type="radio" name="TotalGuest" id="4">
<label for="4" class="col-form-label"> 4</label>
<input type="radio" name="TotalGuest" id="5">
<label for="5" class="col-form-label"> 5</label>
<input type="radio" name="TotalGuest" id="6">
<label for="6" class="col-form-label"> 6</label>
</div>
</div>
<div class="form-group row">
<h5 class="col-md-2">
Date and Time
</h5>
<div class="col-md-10">
<div class="col-md-5 form-check-inline">
<input class="form-control" type="text" name="" id="" placeholder="Date">
</div>
<div class="col-md-5 form-check-inline">
<input class="form-control " type="text" name="" id="" placeholder="Time">
</div>
</div>
</div>
<div class="form-group row">
<div class="offset-md-2 col-md-10">
<button type="submit" class="btn btn-primary">Reserve </button>
</div>
</form>
</div>
</div>
</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>
<i class="fa fa-phone fa-lg"></i> +852 1234 5678<br>
<i class="fa fa-fax fa-lg"></i> +852 8765 4321<br>
<i class="fa fa-envelope fa-lg"></i> confusion#food.net
</address>
</div>
<div class="col-12 col-sm-4 align-self-center">
<div class="text-align">
<a class="btn btn-social-icon btn-google" href="http://google.com/+">
<i class="fa fa-google-plus fa-lg"></i>
</a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id=">
<i class="fa fa-facebook fa-lg"></i>
</a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/">
<i class="fa fa-linkedin fa-lg"></i>
</a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/">
<i class="fa fa-twitter fa-lg"></i>
</a>
<a class="btn btn-social-icon btn-youtube"href="http://youtube.com/">
<i class="fa fa-youtube fa-lg"></i>
</a>
<a class="btn btn-social-icon btn-envelope" href="mailto:">
<i class="fa fa-envelope-o fa-lg"></i>
</a>
</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>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
})
</script>
</body>
</html>
You forgot to close the form-group div inside the #card form.
...
<div class="form-group row">
<div class="offset-md-2 col-md-10">
<button type="submit" class="btn btn-primary">Reserve </button>
</div>
</div> <!-- This is the missing one -->
</form>
am having trouble getting my photos to display in modal using javascript. All i get when i click on a photo is a blank modal popping up. I believe this is because am still learning javascript and related questions haven't helped much. Would appreciate all the help i get
Modal html code
<!-- photos -->
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-xs-6">
<img src="images/image1.jpg" alt="recent photo">
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<img src="images/image2.jpg" alt="recent photo">
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<img src="images/image3.jpg" alt="recent photo">
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<img src="images/image4.jpg" alt="recent photo">
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<img src="images/image5.jpg" alt="recent photo">
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<img src="images/image6.jpg" alt="recent photo">
</div>
</div>
</div>
<!-- ./photos -->
<!-- modal -->
<div class="modal fade" id="trslphotos" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body"><img src="" class="img-responsive"></div>
<div class="modal-footer">
<a class="carousel-control left" href="#recent-photos" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="carousel-control right" href="#recent-photos" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
<!-- ./modal -->
This is the javascript am using to call the image
function displayPhotos(url) {
//this should load photos
$('.modal-body img').attr('src',url);
//show modal
$('#trslphotos').modal();
}
Here is the solution for you. I've simply called your displayPhotos() function on modal shown.
Fiddle
$('#trslphotos').on('shown.bs.modal', function (a, b,c) {
var clickedImageUrl = a.relatedTarget.childNodes[0].src;
displayPhotos(clickedImageUrl);
})
function displayPhotos(url) {
console.log(url);
$('.modal-body img').attr('src',url);
$('#trslphotos').modal();
}
Now it will work just fine with your code. Hope it helps u.
I don't know what your problem, may be this help you a little. Try to listen on click in trslphotos.
$(function() {
$('#trslphotos').on('show.bs.modal', function() {
$('.modal-body img').attr('src', "https://i.stack.imgur.com/nukKn.jpg");
//$('#trslphotos').modal('show');
});
$('#trslphotos').on('click', function() {
//$('.modal-body img').attr('src', "https://i.stack.imgur.com/nukKn.jpg");
$('#trslphotos').modal('show');
});
});
<link href="https://bootswatch.com/united/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image1.jpg" data-target="#trslphotos">
<img src="images/image1.jpg" alt="recent photo">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image2.jpg" data-target="#trslphotos">
<img src="images/image2.jpg" alt="recent photo">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image3.jpg" data-target="#trslphotos">
<img src="images/image3.jpg" alt="recent photo">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image4.jpg" data-target="#trslphotos">
<img src="images/image4.jpg" alt="recent photo">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image5.jpg" data-target="#trslphotos">
<img src="images/image5.jpg" alt="recent photo">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image6.jpg" data-target="#trslphotos">
<img src="images/image6.jpg" alt="recent photo">
</a>
</div>
</div>
</div>
<!-- ./photos -->
<!-- modal -->
<div class="modal fade" id="trslphotos" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<img src="" class="img-responsive">
</div>
<div class="modal-footer">
<a class="carousel-control left" href="#recent-photos" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="carousel-control right" href="#recent-photos" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
I have a list of thumbnails, on a Bootstrap 3 page. When clicking them, I want to open a modal which contains a carousel of additional info for each of the thumbnails.
I would like that when I click on the thumbnail, the modal opens with the specific slide in the carousel open.
I'm trying the following, but both the modal's "data-toggle" and carousel's "data-slide-to" attributes use "data-target" to set the target, but in this case the targets are two different IDs ("#myModal" and "#gallery" repectively). I can't have two "data-target" on the same HTML tag. Is there a way to hack this easily? Sorry, I'm not a dev.
This is the list of thumbnails:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3"><img src="http://placehold.it/150x75&text=item1" data-toggle="modal" data-target="#myModal" data-slide-to="0"></div>
<div class="col-xs-6 col-sm-4 col-md-3"><img src="http://placehold.it/150x75&text=item2" data-toggle="modal" data-target="#myModal" data-slide-to="1"></div>
<div class="col-xs-6 col-sm-4 col-md-3"><img src="http://placehold.it/150x75&text=item3" data-toggle="modal" data-target="#myModal" data-slide-to="2"></div>
<div class="col-xs-6 col-sm-4 col-md-3"><img src="http://placehold.it/150x75&text=item4" data-toggle="modal" data-target="#myModal" data-slide-to="3"></div>
</div>
</div>
And here's the modal code:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button></div>
<div class="modal-body">
<div id="gallery" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/600x400&text=item1" alt="item1">
<div class="carousel-caption">
<h4>heading 1</h4>
<p>This is the description.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/600x400&text=item2" alt="item2">
<div class="carousel-caption">
<h4>heading 2</h4>
<p>This is the description.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/600x400&text=item3" alt="item3">
<div class="carousel-caption">
<h4>heading 3</h4>
<p>This is the description.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/600x400&text=item4" alt="item4">
<div class="carousel-caption">
<h4>heading 4</h4>
<p>This is the description.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#gallery" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#gallery" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
</div>
</div>
</div>
You can wrap the image in anchor that targets the carousel like this:
<a href="#gallery" data-slide-to="0">
<img src="http://placehold.it/150x75&text=item1" data-toggle="modal" data-target="#myModal">
</a>
Demo: http://jsfiddle.net/NJWqw/
Suppose I have the following code:
<button class="btn btn-primary" ng-click="isCollapsed = !isCollapsed">Button1</button>
<div id="collapse1" collapse="isCollapsed">
<div class="well well-small">
<p ng-bind-html="b2data"></p>
</div>
</div>
<button class="btn btn-primary" ng-click="isCollapsed = !isCollapsed">Button2</button>
<div id="collapse2" collapse="isCollapsed">
<div class="well well-small">
<p ng-bind-html="b2data"></p>
</div>
</div>
How can I collapse each individually?
http://plnkr.co/edit/W26X4Iq8KrnY9cGsFvwA?p=preview
Try this out:- http://plnkr.co/edit/vPbihuL6JBE6qhwy4irP?p=preview
HTML:-
<div ng-controller="AccordionDemoCtrl">
<accordion-group heading="Static Header">
<button class="btn btn-primary" ng-click="isCollapsed1= !isCollapsed1">Button1</button>
<hr>
<div id="collapse2" collapse="isCollapsed1">
<div class="well well-small">
<p ng-bind-html="b2data"></p>
</div>
</div>
<button class="btn btn-primary" ng-click="isCollapsed2 = !isCollapsed2">Button2</button>
<hr>
<div id="collapse2" collapse="isCollapsed2">
<div class="well well-small">
<p ng-bind-html="b2data"></p>
</div>
</div>
</accordion-group>
</div>