Bootstrap gallery thumbnail with carousel bo - javascript

I want add following effect - got 4 thumbnails, single thumbnail = different album:
After click on single should be indicated carousel:
I don't have idea how can I put together thumbnail and carousel.
What can I use to automatic add pages with gallery albums, and management them on Bootstrap 3?
<section id="gallery">
<div class="container bg-5 text-center">
<div class="row">
<h2>Gallery</h2>
<center>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
</a>
39
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
</a>
38
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
</a>
37
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
</a>
36
</div>
</center>
</div>
<div class="row">
<div class="col-md-12">
<ul class="pagination">
<li>
«
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
...
</li>
<li>
»
</li>
</ul>
</div>
</div>
</div>
Carousel


In this, carousel thumbnails, appear twice, on top and at the bottom of the carousel slides. I can't figure out why!! :)
<html>
<head>
<title>Stackoverflow Trials</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
<style>
h4 {
margin: 20px 10px 10px;
}
p {
margin: 10px;
}
#carousel-example-generic {
margin: 20px auto;
width: 400px;
}
#carousel-example-generic .carousel-indicators {
margin: 10px 0 0;
overflow: auto;
position: static;
text-align: left;
white-space: nowrap;
width: 100%;
}
#carousel-example-generic .carousel-indicators li {
background-color: transparent;
-webkit-border-radius: 0;
border-radius: 0;
display: inline-block;
height: auto;
margin: 0 !important;
width: auto;
}
#carousel-example-generic .carousel-indicators li img {
display: block;
opacity: 0.5;
}
#carousel-example-generic .carousel-indicators li.active img {
opacity: 1;
}
#carousel-example-generic .carousel-indicators li:hover img {
opacity: 0.75;
}
#carousel-example-generic .carousel-outer {
position: relative;
}
</style>
</head>
<body>
<section id="gallery">
<div class="container bg-5 text-center">
<div class="row">
<h2>Gallery</h2>
<center>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded thumbnail" id="thumb1" src="http://placehold.it/350x250" alt="">
</a>
39
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded thumbnail" id="thumb2" src="http://placehold.it/350x250" alt="">
</a>
38
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded thumbnail" id="thumb3" src="http://placehold.it/350x250" alt="">
</a>
37
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded thumbnail" id="thumb4" src="http://placehold.it/350x250" alt="">
</a>
36
</div>
</center>
</div>
<div class="row">
<div class="col-md-12">
<ul class="pagination">
<li>
«
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
...
</li>
<li>
»
</li>
</ul>
</div>
</div>
</div>
</section>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class='carousel-outer'>
<!-- Wrapper for slides -->
<!-- Indicators -->
<ol class="carousel-indicators"></ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"></div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<ol class='carousel-indicators'>
</ol>
</div>
<script>
$(document).ready(function() {
// create arrays of images to be displayed in each carousel for each thumbnails.
// the array name is exactly the same as thumbnail id
var thumb1 = new Array("book2.jpg","book3.jpg","book4.jpg","book5.jpg");
var thumb2 = new Array("book3.jpg","book4.jpg","book5.jpg","book2.jpg");
var thumb3 = new Array("book4.jpg","book5.jpg","book2.jpg","book3.jpg");
var thumb4 = new Array("book5.jpg","book4.jpg","book3.jpg","book2.jpg");
var $carousel = $('#carousel-example-generic .carousel-inner');
var $carouselInd = $('#carousel-example-generic .carousel-indicators');
$( ".thumbnail" ).click(function() {
var numberOfSlides = $('.item').length;
if(numberOfSlides >0) {
// remove all items from the carousel before adding the new ones to it.
$carousel.empty();
//$carouselInd.empty();
}
var m = this.id;
m = eval(m);
//alert(m.length);
for(var i=0 ; i< m.length ; i++) {
var j= i+1;
$('<div class="item"><img src="images/'+m[i]+'"><div class="carousel-caption"></div> </div>').appendTo('.carousel-inner');
$('<li data-target="#carousel-example-generic" data-slide-to="'+i+'"><img src="http://placehold.it/100x50&text=slide'+j+'" alt="" /></li>').appendTo('.carousel-indicators');
}
$('.item').first().addClass('active');
$('.carousel-indicators > li').first().addClass('active');
$('#carousel-example-generic').carousel();
});
});
</script>
</body>

Related

Make bootstrap mega menu open on hover instead of on click

I am using a bootstrap mega menu and I have it styled and working as I need, however I need it to open for desktop devices on hover (instead of on click). I thought I would be able to easily do this with just css, but I cannot get it to work.
Any suggestions? I am open to using jQuery or jscript, but I am not very fluid with these just yet.
Working jsfiddle: https://jsfiddle.net/L2o657p6/4/
HTML:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Mega Menuu</title>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Menu Logo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-megamenu">
Today <span class="sr-only">(current)</span>
<div class="dropdown-container">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="media">
<div class="media-left">
<a class="link-image" href="#"><img class="media-object" src="holder.js/100x100"></a>
<a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
<a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
</div>
<div class="media-body">
<h5>Today's Featured Collections</h5>
<ul class="list-links">
<li>Press Every Button</li>
<li>Travel with Technology</li>
<li>Smart Choice</li>
<li>Fall in Love with Tech</li>
<li>Smartphones at a Snip</li>
</ul>
</div>
</div>
</div><!-- /col -->
<div class="col-sm-6 col-md-4">
<div class="media">
<div class="media-left">
<a class="link-image" href="#"><img class="media-object" src="holder.js/100x100"></a>
<a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
<a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
</div>
<div class="media-body">
<h5>Today's Trending Collections</h5>
<ul class="list-links">
<li>Harley-Davidson</li>
<li>Will you be my Valentine?</li>
<li>Summer Wedding Bridesmaid Dresses</li>
<li>Pink Wedding Centerpiece Ideas</li>
<li>Wedding Party Table Runners</li>
<li>Backyard Wedding Reception</li>
</ul>
</div>
</div>
</div><!-- /col -->
<div class="col-sm-6 col-md-4">
<h5>My Collections</h5>
<span class="text-muted">You currently have no collections. Learn how to create one.</span>
</div><!-- /col -->
</div><!-- /row -->
</div>
</div><!-- /dropdown-container -->
</li>
<li class="dropdown dropdown-megamenu">
Fashion
<div class="dropdown-container">
<div class="row">
<div class="col-sm-4 col-md-2">
<h5>Top categories</h5>
<ul class="list-links">
<li role="separator" class="divider"></li>
<li>Men's</li>
<li>Women's</li>
<li>Kids</li>
</ul>
</div><!-- /col -->
<div class="col-sm-4 col-md-3">
<h5>Shop for</h5>
<ul class="list-links">
<li role="separator" class="divider"></li>
<li>Jewelry & Watches</li>
<li>Handbags & Accessories</li>
<li>Health & Beauty</li>
<li>Shoes</li>
<li>Sales & Events</li>
</ul>
</div><!-- /col -->
<div class="col-sm-12 col-md-7">
<img src="holder.js/100px200">
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /dropdown-container -->
</li>
<li class="dropdown dropdown-megamenu">
Electronics
<div class="dropdown-container">
<div class="row">
<div class="col-sm-4 col-md-2">
<h5>Top categories</h5>
<ul class="list-links">
<li>Cell Phones & Accessories</li>
<li>Cameras & Photo</li>
<li>Computers & Tablets</li>
</ul>
</div><!-- /col -->
<div class="col-sm-4 col-md-3">
<h5>Other categories</h5>
<ul class="list-links">
<li>Car Audio, Video & GPS</li>
<li>iPhone</li>
<li>iPad</li>
<li>TV, Audio</li>
<li>Video Games & Consoles</li>
</ul>
</div><!-- /col -->
<div class="col-sm-12 col-md-7">
<img src="holder.js/100px200">
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /dropdown-container -->
</li>
<li class="dropdown dropdown-megamenu">
Deals
<div class="dropdown-container">
<div class="row">
<div class="col-sm-3">
<h5>Best deals of the day</h5>
<ul class="list-links">
<li>Car Audio, Video & GPS</li>
<li>iPhone</li>
<li>iPad</li>
<li>TV, Audio</li>
<li>Video Games & Consoles</li>
</ul>
</div><!-- /col -->
<div class="col-sm-3">
<a href="#" class="thumbnail">
<img src="holder.js/100px140" alt="">
<div class="caption">
<h5>Waterproof cellphone cover</h5>
<p>$5.99</p>
</div>
</a>
</div><!-- /col -->
<div class="col-sm-3">
<a href="#" class="thumbnail">
<img src="holder.js/100px140" alt="">
<div class="caption">
<h5>Large 20 slot leather watch box organizer</h5>
<p>$25.99</p>
</div>
</a>
</div><!-- /col -->
<div class="col-sm-3">
<a href="#" class="thumbnail">
<img src="holder.js/100px140" alt="">
<div class="caption">
<h5>Samsung Galaxy Tab A SM-P550NZAAXAR 9.7-Inch W-Fi Tablet (Titanium with S-Pen)</h5>
<p>$319</p>
</div>
</a>
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /dropdown-container -->
</li>
<li class="dropdown dropdown-megamenu">
Contact Us
<div class="dropdown-container">
<div class="row">
<div class="col-sm-6 col-md-4">
<h5>Contact us</h5>
<p>Feel free to drop us a line, we will respond as sson as possible.</p>
<form>
<div class="form-group">
<label class="sr-only" for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Your Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputText1">Text</label>
<textarea type="password" class="form-control" id="exampleInputText1" placeholder="Your Message" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /col -->
<div class="col-sm-6 col-md-8">
<img src="holder.js/100px260?text=Map">
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /dropdown-container -->
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
CSS:
.nav > .dropdown-megamenu {
position: static;
}
#media (max-width: 767px) {
.navbar-nav .open .dropdown-container {
position: static;
float: none;
width: auto;
margin-top: 0;
border: 0;
box-shadow: none;
border-radius: 0;
}
}
.dropdown-megamenu > .dropdown-container {
position: absolute;
top: 100%;
left: 0;
right: 0;
max-width: 100%;
padding: 15px;
}
.dropdown-megamenu .dropdown-menu {
display: block;
}
.link-image .media-object {
float: left;
margin-bottom: 7.5px;
}
.link-image-sm + .link-image-sm .media-object {
margin-left: 7.5px;
}
.thumbnail .caption {
min-height: 120px;
}
.thumbnail:hover {
text-decoration: none;
}
/* Link list */
.list-links {
list-style: none;
padding: 0;
}
.list-links li {
line-height: 1.71428571;
}
.list-links a {
color: #555;
}
.list-links a:hover,
.list-links a:focus,
.list-links a:active {
color: #22527b;
}
html,
body {
height: 100%;
min-height: 500px;
}
body {
background: -webkit-linear-gradient(top, #59a874 0, #449a63 100%);
background: linear-gradient(to bottom, #59a874 0, #449a63 100%);
}
h3 {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
text-align: center;
line-height: 1.3;
margin-bottom: 2rem;
color: #fff;
}

You can just add a desktop only media query:
#media (min-width: 768px){
.navbar-nav .dropdown-megamenu:hover .dropdown-container {
display: block;
}
}
Here's a fiddle: https://jsfiddle.net/vqubh18j/
You could trim the selector down to dropdown:hover .dropdown-container if you wish.
Also note there is a 2px top margin on the dropdown that makes a tiny gap between the navbar and the dropdown, allowing slower mouse movers to have the menu disappear unintentionally:
.dropdown-container {
...
/* Should probably be removed or replaced with
margin: 0; border-top: 2px solid transparent; */
margin: 2px 0 0;
...
}

When one clicks on dropdown-toggle, class open is added to dropdown-megamenu.
.nav > .dropdown-megamenu.open .dropdown-container > .dropdown-menu,
.nav > .dropdown-megamenu.open > .dropdown-container {
display: block;
}
Adapting the above CSS selector to the hover pseudo-class will give the following:
.nav > .dropdown-megamenu:hover .dropdown-container > .dropdown-menu,
.nav > .dropdown-megamenu:hover > .dropdown-container {
display: block;
}
As hovering is not available on touch devices, the above selector is better wrapped in a media query.
#media (min-width: 768px) {
.nav > .dropdown-megamenu:hover .dropdown-container > .dropdown-menu,
.nav > .dropdown-megamenu:hover > .dropdown-container {
display: block;
}
}
Updated JSFiddle

Bootstrap 4 - I can't stretch background image in div

I'm trying to make a website, which is using just screen space.
Logo is in the upper middle of the page, full width navbar and then 2 rows of 3 full width images, which would be cropped as resolution allows. Here is the sketch.
My problem is that images, which are set as a background of the col-sm-4 div are not showing and their height is set to 0px (I tried !important). The code is not reacting on height in % or background-size - cover. How can I make these images precisely on page with same height on every resolution?
#import url('https://fonts.googleapis.com/css?family=Cinzel+Decorative');
#import url('https://fonts.googleapis.com/css?family=Cinzel');
/*ALL*/
html, body {
height: 100% !important;
width: 100% !important;
}
body {
background: grey !important;
}
header {
height: 15% !important;
}
.Menu {
height: 5% !important;
}
.Images {
height: 80% !important;
}
/*Header*/
.logo {
display: inline-block;
padding: 1rem 0 .5rem 0 !important;
}
.col-sm-4 {
border: solid 1px #9f0000;
}
.Images {
}
.image {
background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* NavBar */
nav {
font-size: 13pt;
font-family: 'Cinzel', sans-serif;
padding: .3rem 0 .3rem 0 !important;
text-transform: capitalize;
}
.nav-link {
color: #fff !important;
margin: 0 25% 0 25%;
}
.nav-link:hover {
font-style: underline;
}
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8">
<!-- Mobile adaptation -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Mine Stylesheet -->
<link rel="stylesheet" href="stylesheet/stylesheet.css">
<!-- Imported Stylesheets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
<!-- Scripts (jQuery) -->
<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-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<!-- Tittle -->
<title>Geo Expo</title>
</head>
<body>
<main class="container-fluid p-0">
<header class="row Logo no-gutters">
<div class="col-sm-3">
<header>
<img class="logo d-block img-fluid mx-auto" src="./logo/PNG.png" alt="Logo" />
</header>
</div>
</header>
<div class="row Menu no-gutters">
<div class="col-sm-12">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Toogle" aria-controls="Toogle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fa fa-bars mx-auto" aria-hidden="true"></i></span>
</button>
<div class="collapse navbar-collapse" id="Toogle">
<ul class="navbar-nav mt-2 mt-lg-0 mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Repliky</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Unikáty</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Instalace</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="row Images no-gutters">
<div class="col-sm-4 image" id="image00"></div>
<div class="col-sm-4 image" id="image01"></div>
<div class="col-sm-4 image" id="image02"></div>
<div class="col-sm-4 image" id="image10"></div>
<div class="col-sm-4 image" id="image11"></div>
<div class="col-sm-4 image" id="image12"></div>
<!-- <div class="col-sm-4">
<img class="image" src="./images/bridge.jpg" alt="Bridge">
</div>
<div class="col-sm-4">
<img class="image" src="./images/park.jpg" alt="Park">
</div>
<div class="col-sm-4">
<img class="image" src="./images/tunnel.jpg" alt="Tunnel">
</div>
<div class="col-sm-4">
<img class="image" src="./images/bridge.jpg" alt="Bridge">
</div>
<div class="col-sm-4">a
<img class="image" src="./images/park.jpg" alt="Park">
</div>
<div class="col-sm-4">
<img class="image" src="./images/tunnel.jpg" alt="Tunnel">
</div> -->
</div>
</main>
</body>
</html>

The easiest way is to set a min-height using vh units (% of viewport height) on the .image DIV...
https://www.codeply.com/go/iFDwwGDmKi
.image {
background-image: url("..");
min-height: 45vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Edit:
To have the images fill the remaining page height, w/o scrolling, set flex-grow and overflow hidden on the .Images container.
.Images {
flex-grow: 1;
overflow-y:hidden;
}
https://www.codeply.com/go/iFDwwGDmKi (updated)

You just need to add the native Bootstrap 4 class img-fluid to your images like so:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<main class="container-fluid p-0">
<header class="row Logo no-gutters">
<div class="col-sm-3 mx-auto">
<header>
<img class="logo d-block img-fluid mx-auto" src="https://placehold.it/120x60" alt="Logo" />
</header>
</div>
</header>
<div class="row Menu no-gutters">
<div class="col-sm-12">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Toogle" aria-controls="Toogle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fa fa-bars mx-auto" aria-hidden="true"></i></span>
</button>
<div class="collapse navbar-collapse" id="Toogle">
<ul class="navbar-nav mt-2 mt-lg-0 mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Repliky</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Unikáty</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Instalace</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="row Images no-gutters">
<div class="col-sm-4 image" id="image00">
<img class="img-fluid" src="https://placeimg.com/640/480/arch">
</div>
<div class="col-sm-4 image" id="image01">
<img class="img-fluid" src="https://placeimg.com/640/480/animals">
</div>
<div class="col-sm-4 image" id="image02">
<img class="img-fluid" src="https://placeimg.com/640/480/nature">
</div>
<div class="col-sm-4 image" id="image10">
<img class="img-fluid" src="https://placeimg.com/640/480/people">
</div>
<div class="col-sm-4 image" id="image11">
<img class="img-fluid" src="https://placeimg.com/640/480/tech">
</div>
<div class="col-sm-4 image" id="image12">
<img class="img-fluid" src="https://placeimg.com/640/480/any">
</div>
</div>
</main>

As pointed out by Temani Afif, you didn't specify any parent with a specific height. Specify the height in your .image class instead of 100%, i.e. height: 200px;

How to display divs lined up under parent for tree link display

progress:
https://jsfiddle.net/zigzag/wkf0ufat/6/
How do I make sure that respective teams three teams in each vertical column line up right under the parent div of NBA, NFL and NHL. I called quits on css gymnastics here where we need to think of horizontal layout for first and second row but vertical layout in the third row. Third row is a list of teams. I started with Grid layout but realised that using IE 11 I couldn't try it.
$('.menu-toggle').click(function() {
$(this).find('span').toggleClass('glyphicon-triangle-bottom').toggleClass('glyphicon-triangle-right');
var clickValue = $(this).attr('id');
//do switch statement based on clickValue. Right now it selects the id of first just fine.
//first: toggle second and hide third
//second: show
$('#secondRow').toggle();
});
.container-fluid {
margin: 5px;
}
.box {
height: 200px;
width: 200px;
border: 2px solid black;
margin: auto;
background: dodgerblue;
color: white;
padding: 20px;
}
#firstRow,
#secondRow {
text-align: center;
}
#secondRow>div {
display: inline-block;
}
span {
color: white;
padding-top: 60px;
}
span:hover {
opacity: 0.2;
}
.thirdRow {
text-align: left;
}
.thirdRow div {
dispaly: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row" id="firstRow">
<div class="center-block box">
<img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
<p>Leagues</p>
<a class="menu-toggle" href="#" id="first">
<span class="glyphicon glyphicon-triangle-bottom"></span>
</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" id="secondRow">
<div class="box">
<img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
<p>NBA</p>
<span class="glyphicon glyphicon-triangle-bottom"></span>
</div>
<div class="box">
<img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
<p>NFL</p>
<span class="glyphicon glyphicon-triangle-bottom"></span>
</div>
<div class="box">
<img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
<p>NHL</p>
<span class="glyphicon glyphicon-triangle-bottom"></span>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row thirdRow" id="NBArow">
<div class="box">
<img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
<p>Warriors</p>
</div>
<div class="box">
<img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
<p>Rockets</p>
</div>
<div class="box">
<img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
<p>Celtics</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row thirdRow" id="NFLrow">
<div class="box">
<img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
<p>Penguins</p>
</div>
<div class="box">
<img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
<p>Kings</p>
</div>
<div class="box">
<img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
<p>Ducks</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row thirdRow" id="NHLrow">
<div class="box">
<img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
<p>Penguins</p>
</div>
<div class="box">
<img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
<p>Kings</p>
</div>
<div class="box">
<img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
<p>Ducks</p>
</div>
</div>
</div>

Your question mentions a tree view, which is really a collection of nested lists. The block view you describe requires making some levels of nested list layout horizontally and some levels vertically, but the content is really just a list of lists (or a list of a list of lists...)
Here's a snippet that uses lists for markup. One with default styles and one with some styles to achieve the columns you want. This method will accurately display more or fewer lists than the example.
$('a').on('click', function(e) {
e.preventDefault();
$(this).next('ul').slideToggle()
});
.blocks {
font-size: 0;
}
.blocks a,
.blocks span {
display: block;
background: #ddd;
width: 100px;
height: 40px;
font-size: 12px;
line-height: 40px;
text-align: center;
margin: 0 auto;
}
.blocks ul {
list-style: none;
padding: 0;
}
.blocks li {
display: inline-block;
vertical-align: top;
}
.blocks ul ul ul li {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Tree</h3>
<div class="tree">
<ul>
<li>
Leagues
<ul>
<li>
NFL
<ul>
<li><span>Bears</span></li>
<li><span>Lions</span></li>
<li><span>Browns</span></li>
</ul>
</li>
<li>
NBA
<ul>
<li><span>Clippers</span></li>
<li><span>Hornets</span></li>
<li><span>Nets</span></li>
</ul>
</li>
<li>
NHL
<ul>
<li><span>Sabres</span></li>
<li><span>Blackhawks</span></li>
<li><span>Bruins</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<h3>Blocks</h3>
<div class="blocks">
<ul>
<li>
Leagues
<ul>
<li>
NFL
<ul>
<li><span>Bears</span></li>
<li><span>Lions</span></li>
<li><span>Browns</span></li>
</ul>
</li>
<li>
NBA
<ul>
<li><span>Clippers</span></li>
<li><span>Hornets</span></li>
<li><span>Nets</span></li>
</ul>
</li>
<li>
NHL
<ul>
<li><span>Sabres</span></li>
<li><span>Blackhawks</span></li>
<li><span>Bruins</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Active state accordion

Using this script for accordion. But I can't find how to change the color for the accordionButton when the button is active.
JS
$(document).ready(function() {
$('.accordionButton').click(function() {
$('.accordionButton').removeClass('on');
$('.accordionContent').slideUp('normal');
if ($(this).next().is(':hidden') == true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('.accordionContent').hide();
$(".accordionContent").first().show();
});
CSS
.accordionButton {
color: #fff;
text-transform: uppercase;
font-variant: normal;
background-color: #51a429;
padding: 2px 2px 2px 5%;
cursor: pointer;
border-bottom: 5px solid #f5f5f5
}
.accordionButton:hover {
background-color: #1b3281
}
.accordionContent {
padding: 4% 5% 2% 0%
}
Thanks.

The way your accordion works is by adding the .on class to the currently open accordion tab's button. As such, I think this is what you meant:
.accordionButton.on {
background-color: yellow;
}
If you meant the moment when the button is clicked, then this will do the trick:
.accordionButton:active {
background-color: red;
}
You can see these behaviours in the snippet below.
$(document).ready(function() {
$('.accordionButton').click(function() {
$('.accordionButton').removeClass('on');
$('.accordionContent').slideUp('normal');
if ($(this).next().is(':hidden') == true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$(".accordionButton").first().addClass('on');
$('.accordionContent').hide();
$(".accordionContent").first().show()
});
.accordionButton {
color: #fff;
text-transform: uppercase;
font-variant: normal;
background-color: #51a429;
padding: 2px 2px 2px 5%;
cursor: pointer;
border-bottom: 5px solid #f5f5f5
}
.accordionButton:hover {
background-color: #1b3281
}
.accordionButton:active {
background-color: red;
}
.accordionButton.on {
background-color: yellow;
}
.accordionContent {
padding: 4% 5% 2% 0%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion-container" class="f-ms">
<div id="accordion-link-1" class="accordionButton">
<p class="f-fp f-lp">TEST</p>
</div>
<!-- end accordion-link-1 -->
<div id="accordion-1" class="accordionContent">
<div id="accordion-title-1" class="f-ms">
<h1 class="f-fp">Global deals </h1>
<p><span class="size13">Select tile for details</span>
</p>
<p class="f-lp"><span class="buttonBlue">CLICK HERE TO GO TO </span>
</p>
</div>
<!-- end accordion-title-1 -->
<div id="accordion-content-1" class="f-ms flex-container">
<a href="https://www.google.com/tombstone.png?type=thumbnail" id="102087">
<div id="accordion-1-tile-1" class="flex-grow-1 box-shadow">
<a href="">
<img id="m12" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-1-tile-1 -->
</a>
<a href="">
<div id="accordion-1-tile-2" class="flex-grow-1 box-shadow">
<a href="https://www.google.com/tombstone.png?type=thumbnail&did=101982">
<img id="m13" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-1-tile-2 -->
</a>
<a href="https://www.google.com/tombstone.png?type=thumbnail&did=101">
<div id="accordion-1-tile-3" class="flex-grow-1 box-shadow">
<a href="">
<img id="m14" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10
" alt="">
</a>
</div>
<!-- end accordion-1-tile-3 -->
</a>
</div>
<!-- end accordion-content-1 -->
</div>
<!-- end accordion-1 -->
<div id="accordion-link-2" class="accordionButton">
<p class="f-fp f-lp">TEST</p>
</div>
<!-- end accordion-link-2 -->
<div id="accordion-2" class="accordionContent">
<div id="accordion-title-2" class="f-ms">
<h1 class="f-fp">Global deals </h1>
<p><span class="size13">Select tile for details</span>
</p>
<p class="f-lp"><span class="buttonBlue">CLICK HERE TO GO TO </span>
</p>
</div>
<!-- end accordion-title-2 -->
<div id="accordion-content-2" class="f-ms flex-container">
<a href="https://www.google.com/tombstone.png?type=thumbnail" id="102087">
<div id="accordion-2-tile-1" class="flex-grow-1 box-shadow">
<a href="">
<img id="m15" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-2-tile-1 -->
</a>
<a href="">
<div id="accordion-2-tile-2" class="flex-grow-1 box-shadow">
<a href="">
<img id="m16" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-2-tile-2 -->
</a>
<a href="">
<div id="accordion-2-tile-3" class="flex-grow-1 box-shadow">
<a href="">
<img id="m17" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10
" alt="">
</a>
</div>
<!-- end accordion-2-tile-3 -->
</a>
</div>
<!-- end accordion-content-2 -->
</div>
<!-- end accordion-2 -->
<div id="accordion-link-3" class="accordionButton">
<p class="f-fp f-lp">TEST</p>
</div>
<!-- end accordion-link-3 -->
<div id="accordion-3" class="accordionContent">
<div id="accordion-title-3" class="f-ms">
<h1 class="f-fp">Global deals</h1>
<p><span class="size13">Select tile for details</span>
</p>
<p class="f-lp"><span class="buttonBlue">CLICK HERE TO GO TO </span>
</p>
</div>
<!-- end accordion-title-3 -->
<div id="accordion-content-3" class="f-ms flex-container">
<a href="">
<div id="accordion-3-tile-1" class="flex-grow-1 box-shadow">
<a href="">
<img id="m18" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-3-tile-1 -->
</a>
<a href="">
<div id="accordion-3-tile-2" class="flex-grow-1 box-shadow">
<a href="">
<img id="m19" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-3-tile-2 -->
</a>
<a href="">
<div id="accordion-3-tile-3" class="flex-grow-1 ">
<a href="">
<img id="m20" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-3-tile-3 -->
</a>
</div>
<!-- end accordion-content-3 -->
</div>
<!-- end accordion-3 -->
<div id="accordion-link-4" class="accordionButton">
<p class="f-fp f-lp">TEST</p>
</div>
<!-- end accordion-link-4 -->
<div id="accordion-4" class="accordionContent">
<div id="accordion-title-4" class="f-ms">
<h1 class="f-fp">Global deals</h1>
<p><span class="size13">Select tile for details</span>
</p>
<p class="f-lp"><span class="buttonBlue">CLICK HERE TO GO TO </span>
</p>
</div>
<!-- end accordion-title-4 -->
<div id="accordion-content-4" class="f-ms flex-container">
<a href="">
<div id="accordion-4-tile-1" class="flex-grow-1 box-shadow">
<a href="">
<img id="m21" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-4-tile-1 -->
</a>
<a href="">
<div id="accordion-4-tile-2" class="flex-grow-1 ">
<a href="">
<img id="m22" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-4-tile-2 -->
</a>
<a href="">
<div id="accordion-4-tile-3" class="flex-grow-1 box-shadow">
<a href="">
<img id="m23" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10
" alt="">
</a>
</div>
<!-- end accordion-4-tile-3 -->
</a>
</div>
<!-- end accordion-content-4 -->
</div>
<!-- end accordion-4 -->
<div id="accordion-link-5" class="accordionButton">
<p class="f-fp f-lp">TEST</p>
</div>
<!-- end accordion-link-5 -->
<div id="accordion-5" class="accordionContent">
<div id="accordion-title-5" class="f-ms">
<h1 class="f-fp">Global deals</h1>
<p><span class="size13">Select tile for details</span>
</p>
<p class="f-lp"><span class="buttonBlue">CLICK HERE TO GO TO </span>
</p>
</div>
<!-- end accordion-title-5 -->
<div id="accordion-content-5" class="f-ms flex-container">
<a href="">
<div id="accordion-5-tile-1" class="flex-grow-1 box-shadow">
<a href="">
<img id="m24" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-5-tile-1 -->
</a>
<a href="">
<div id="accordion-5-tile-2" class="flex-grow-1 box-shadow">
<a href="">
<img id="m25" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-5-tile-2 -->
</a>
<a href="">
<div id="accordion-5-tile-3" class="flex-grow-1 box-shadow">
<a href="">
<img id="m26" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-5-tile-3 -->
</a>
</div>
<!-- end accordion-content-5 -->
</div>
<!-- end accordion-5 -->
</div>

Why am I getting this behavior with my Bootstrap 3 carousel?

I am trying to achieve this effect with my own carousel which has a semi-transparent images on the right and left sides; but I am getting this bad effect with my own project when moving between slides : here.
Here is the HTML code that I wrote :
<header class="container">
<div class="row">
<div id="carousel1" class="carousel slide" data-ride="carousel"> <!--Carousel begin-->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="carousel-caption carouselTextBackground">
<h2>Hangars</h2>
</div>
<div class="slideRight hidden-xs">
<img src="images/carousel-home/Bridge - 1200 by 420.jpg" class="img-responsive">
</div>
<div class="slideLeft hidden-xs">
<img src="images/carousel-home/Frame - 1200 by 420.jpg" class="img-responsive">
</div>
<img src="images/carousel-home/Hangar - 1200 by 420.jpg" alt="First slide image" class="center-block img-responsive">
</div> <!-- end of item -->
<div class="item">
<div class="carousel-caption carouselTextBackground">
<h2>Bridges</h2>
</div> <!-- end carousel-caption -->
<div class="slideRight hidden-xs">
<img src="images/carousel-home/Frame - 1200 by 420.jpg" class="img-responsive">
</div>
<div class="slideLeft hidden-xs">
<img src="images/carousel-home/Hangar - 1200 by 420.jpg" class="img-responsive">
</div>
<img src="images/carousel-home/Bridge - 1200 by 420.jpg" alt="Second slide image" class="center-block img-responsive">
</div> <!-- end of item -->
<div class="item">
<div class="carousel-caption carouselTextBackground">
<h2>The Right Choice for the job</h2>
</div> <!-- end carousel-caption -->
<div class="slideRight hidden-xs">
<img src="images/carousel-home/Hangar - 1200 by 420.jpg" class="img-responsive">
</div>
<div class="slideLeft hidden-xs">
<img src="images/carousel-home/Bridge - 1200 by 420.jpg" class="img-responsive">
</div>
<img src="images/carousel-home/Frame - 1200 by 420.jpg" alt="Third slide image" class="center-block img-responsive">
</div> <!-- end of item -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel1" 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="#carousel1" 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> <!-- end row -->
</header> <!-- end container -->
and here is the CSS code :
#carousel1 {
position:relative;
}
.carousel-caption {
position:absolute;
right:0%;
bottom:0%;
left:0%;
z-index:999;
color:#fff;
text-align:left;
}
.carousel-caption h2 {
margin:0;
text-align:left;
color:#FFFFFF;
}
.carouselTextBackground {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: rgba(0,0,0,.4);
padding-left: 20px;
padding-top: 12px;
}
.slideRight {
position:absolute;
left:100%;
width:100%;
height:100%;
opacity:.5;
}
.slideLeft {
position:absolute;
right:100%;
width:100%;
height:100%;
opacity:.5;
}
.carousel-inner {
overflow:visible;
}
Please help me with this because it is bugging me very much... and just tell me the better way to do it and I am not asking you to do it for me. Thanks a lot.

One potential solution - set all images to lower opacity, then increase the opacity on the .active carousel item:
.carousel-inner>.item>a>img, .carousel-inner>.item>img {
opacity: 0.5;
}
.carousel-inner>.active {
opacity: 1;
}
This is untested, but it should work.

Categories