I found this Fiddle that synchronizes two Bootstrap Carousels, it's what I'm looking for but it's using jQuery; I want to reduce it to Vanilla Javascript.
The error in Console is Cannot read properties of null (reading 'length') -- I think I'm getting this error because there is no "next sibling element" for the last element. I'm unfamiliar with jQuery and learning Javascript, so I'm not sure how to fix the code.
Also, is there a Javascript equivalent of jQuery's .siblings() method? And is Javascript's .cloneNode() method equivalent to jQuery's clone()? Thank you.
(function() {
// Initalize the "slide" title
var carouselHeader = document.querySelector('#carousel-text>h3')
carouselHeader.innerHTML = carouselHeader.getAttribute('slide-title');
var items = document.querySelectorAll('.carousel[ data-type="multi"] .item');
items.forEach(function(e, i, items) {
var next = items[i].nextElementSibling;
if (!next.length) {
console.log(next)
}
})
})();
/*** More jQuery to Reduce ***/
/* $('.carousel[ data-type="multi"] .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < 4; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid.bs.carousel', function () {
activeslide = $(this).find('.active');
$('#carousel-text>h3').text(activeslide.data('slide-title'));
$('#numberCarousel').carousel(activeslide.index());
}); */
#numberCarousel {
padding: 40px;
}
#numberCarousel .carousel-inner {
margin-left: 0;
}
#numberCarousel .item {
text-align: center;
cursor: pointer;
}
#numberCarousel .item .col-xs-2 {
background-color: #fff;
}
#numberCarousel .carousel-inner>.next {
left: 16.66666667%;
}
#numberCarousel .carousel-inner>.prev {
left: -16.66666667%;
}
#numberCarousel .carousel-inner>.next.left,
#numberCarousel .carousel-inner>.prev.right {
left: 0;
}
#numberCarousel .carousel-inner>.active.left {
left: -16.66666667%;
}
#numberCarousel .carousel-inner>.active.right {
left: 16.66666667%;
}
.carousel-control.left,
.carousel-control.right {
background-image: none;
}
.carousel-control {
width: 10%;
}
#numberCarousel .carousel-control .icon-prev,
#numberCarousel .carousel-control .icon-next {
transform: translate(0, -50%);
}
<div class="container-fluid" id="slider">
<div class="row">
<div class="col-xs-12">
<div id="carousel-text">
<h3></h3>
</div>
<!--/#carousel-text-->
</div>
<!-- /.col-xs-12 #slider -->
<div class="col-xs-12 hidden-xs carousel slide" data-type="multi" id="numberCarousel">
<div class="carousel-inner row">
<div class="item active">
<div class="col-xs-2">
<a data-target="#myCarousel" data-slide-to="0">
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">1</i>
</span>
</a>
</div>
</div>
<div class="item">
<div class="col-xs-2">
<a data-target="#myCarousel" data-slide-to="1">
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">2</i>
</span>
</a>
</div>
</div>
<div class="item">
<div class="col-xs-2">
<a data-target="#myCarousel" data-slide-to="2">
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">3</i>
</span>
</a>
</div>
</div>
<div class="item">
<div class="col-xs-2">
<a data-target="#myCarousel" data-slide-to="3">
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">4</i>
</span>
</a>
</div>
</div>
<div class="item">
<div class="col-xs-2">
<a data-target="#myCarousel" data-slide-to="4">
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">5</i>
</span>
</a>
</div>
</div>
<div class="item">
<div class="col-xs-2">
<a data-target="#myCarousel" data-slide-to="5">
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">6</i>
</span>
</a>
</div>
</div>
</div>
<!-- /.carousel-inner.row -->
<a class="left carousel-control" href="#numberCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#numberCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- /#numberCarousel -->
<div class="col-xs-12" id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="active item" data-slide-title="State 1">
<img src="https://t3.ftcdn.net/jpg/02/04/04/50/240_F_204045093_ojOEmSm3JobjF2tQOBKcYcXtU9Ss1ngf.jpg" alt="">
</div>
<div class="item" data-slide-title="State 2">
<img src="https://t3.ftcdn.net/jpg/02/04/04/50/240_F_204045093_ojOEmSm3JobjF2tQOBKcYcXtU9Ss1ngf.jpg" alt="">
</div>
<div class="item" data-slide-title="State 3">
<img src="https://t3.ftcdn.net/jpg/02/04/04/50/240_F_204045093_ojOEmSm3JobjF2tQOBKcYcXtU9Ss1ngf.jpg" alt="">
</div>
<div class="item" data-slide-title="State 4">
<img src="https://t3.ftcdn.net/jpg/02/04/04/50/240_F_204045093_ojOEmSm3JobjF2tQOBKcYcXtU9Ss1ngf.jpg" alt="">
</div>
<div class="item" data-slide-title="State 5">
<img src="https://t3.ftcdn.net/jpg/02/04/04/50/240_F_204045093_ojOEmSm3JobjF2tQOBKcYcXtU9Ss1ngf.jpg" alt="">
</div>
<div class="item" data-slide-title="State 6">
<img src="https://t3.ftcdn.net/jpg/02/04/04/50/240_F_204045093_ojOEmSm3JobjF2tQOBKcYcXtU9Ss1ngf.jpg" alt="">
</div>
</div>
<!-- /.carousel-inner -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev">back</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next">next</span>
</a>
</div>
<!-- /#myCarousel -->
</div>
<!-- /#carousel-bounding-box -->
</div>
<!--/.row-->
</div>
<!--/.container-fluid-->
Related
I have a grid view (using flex box approach) and i want to change it to list view using style sheet and j query/java script. Problem: Since in grid view approach all elements are in separate div, while changing it to list view they all need to be in single line (some still need vertically aligned) and this is responsive application.
I have created style sheet class to change flex box from row to column and things look good. But now all div are not in single line. Need some help with style sheet class.
On click of a button, i will remove grid-row, grid-item and add grid-column and grid-column-item classes. But as shown in HTML, it is all div structure in grid-item class. I need to change this div as well (like product_search_img class on extreme left in a single line followed by next three div in one column (in same line) and then followed by price, add to cart button in one column.
Current Layout:
Required Layout:
.grid-row {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.grid-item {
height: 400px;
flex-basis: 25%;
-ms-flex: auto;
max-width: 230px;
position: relative;
padding: 7px;
box-sizing: border-box;
}
.grid-column {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
}
.grid-column-item {
height: 200px;
flex-basis: 25%;
-ms-flex: auto;
max-width: 920px;
position: relative;
padding: 7px;
border-bottom: 1px solid #ccc;
}
.grid-column-item:first-child {
margin-top: 7px;
border-top: 1px solid #ccc;
}
<div class="grid-row">
<div class="grid-item" data-rank="1">
<div class="product_info_panel">
<div class="font-12 text-align-left margin-left-sm margin-top-sm">
<span class="color-font-blue bold">Sponsored</span>
</div>
<a href="#" data-name="sponsored_search_result_link">
<div class="product_search_img">
<img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
</div>
</a>
<div class="font-10 text-align-left status-flag">
<a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
title="This product has accessories">Accessories</a>
<a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
</div>
<a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
<div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
i5-6300U Dual-core (2 Core)
</div>
</a>
<div class="font-12 text-align-left margin-top-md">
<div class="show">
<span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
</div>
<div class="show">
<span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
</div>
</div>
<div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>
<div class="row" id="login-mode-cntl">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 padding-vsm">
<input class="form-control text-center AddInput-default" title="Please enter the value">
</div>
<div class="col-xs-9 col-sm-9 padding-vsm">
<button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
<i class="fas fa-shopping-cart"></i>
Add
</button>
</div>
</div>
</div>
</div>
<div class="grid-item" data-rank="1">
<div class="product_info_panel">
<div class="font-12 text-align-left margin-left-sm margin-top-sm">
<span class="color-font-blue bold">Sponsored</span>
</div>
<a href="#" data-name="sponsored_search_result_link">
<div class="product_search_img">
<img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
</div>
</a>
<div class="font-10 text-align-left status-flag">
<a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
title="This product has accessories">Accessories</a>
<a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
</div>
<a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
<div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
i5-6300U Dual-core (2 Core)
</div>
</a>
<div class="font-12 text-align-left margin-top-md">
<div class="show">
<span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
</div>
<div class="show">
<span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
</div>
</div>
<div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>
<div class="row" id="login-mode-cntl">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 padding-vsm">
<input class="form-control text-center AddInput-default" title="Please enter the value">
</div>
<div class="col-xs-9 col-sm-9 padding-vsm">
<button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
<i class="fas fa-shopping-cart"></i>
Add
</button>
</div>
</div>
</div>
</div>
<div class="grid-item" data-rank="1">
<div class="product_info_panel">
<div class="font-12 text-align-left margin-left-sm margin-top-sm">
<span class="color-font-blue bold">Sponsored</span>
</div>
<a href="#" data-name="sponsored_search_result_link">
<div class="product_search_img">
<img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
</div>
</a>
<div class="font-10 text-align-left status-flag">
<a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
title="This product has accessories">Accessories</a>
<a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
</div>
<a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
<div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
i5-6300U Dual-core (2 Core)
</div>
</a>
<div class="font-12 text-align-left margin-top-md">
<div class="show">
<span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
</div>
<div class="show">
<span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
</div>
</div>
<div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>
<div class="row" id="login-mode-cntl">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 padding-vsm">
<input class="form-control text-center AddInput-default" title="Please enter the value">
</div>
<div class="col-xs-9 col-sm-9 padding-vsm">
<button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
<i class="fas fa-shopping-cart"></i>
Add
</button>
</div>
</div>
</div>
</div>
<div class="grid-item" data-rank="1">
<div class="product_info_panel">
<div class="font-12 text-align-left margin-left-sm margin-top-sm">
<span class="color-font-blue bold">Sponsored</span>
</div>
<a href="#" data-name="sponsored_search_result_link">
<div class="product_search_img">
<img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
</div>
</a>
<div class="font-10 text-align-left status-flag">
<a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
title="This product has accessories">Accessories</a>
<a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
</div>
<a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
<div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
i5-6300U Dual-core (2 Core)
</div>
</a>
<div class="font-12 text-align-left margin-top-md">
<div class="show">
<span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
</div>
<div class="show">
<span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
</div>
</div>
<div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>
<div class="row" id="login-mode-cntl">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 padding-vsm">
<input class="form-control text-center AddInput-default" title="Please enter the value">
</div>
<div class="col-xs-9 col-sm-9 padding-vsm">
<button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
<i class="fas fa-shopping-cart"></i>
Add
</button>
</div>
</div>
</div>
</div>
</div>
From your comment, I believe you're already able to get the outer block to work as required, in the example below I have edited and created 3 separate blocks and did some restructuring.
Also, check the In Stock div, it will toggle between list_view and grid_view.
There will be few additional divs you will need to create deeper inside second_block example to handle VPN and SKU in the same line for List View.
.grid-row {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.grid-item {
/* height: 400px; */
flex-basis: 25%;
-ms-flex: auto;
max-width: 230px;
position: relative;
padding: 7px;
box-sizing: border-box;
border: 2px solid red;
}
.grid-column {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
}
.grid-column-item {
height: 200px;
flex-basis: 25%;
-ms-flex: auto;
max-width: 920px;
position: relative;
padding: 7px;
border-bottom: 1px solid #ccc;
}
.grid-column-item:first-child {
margin-top: 7px;
border-top: 1px solid #ccc;
}
.outer_block {
display: flex;
flex-direction: column;
}
.list_view {
display: none;
}
#media only screen and (max-width: 800px) {
.grid-row {
flex-direction: column;
}
.grid-item {
min-width: 100%;
}
.outer_block {
flex-direction: row;
}
.img-thumbnail {
width: 100px;
}
.second_block {
flex: 1;
}
.grid_view {
display: none;
}
}
<div class="grid-row">
<div class="grid-item" data-rank="1">
<div class="product_info_panel">
<div class="font-12 text-align-left margin-left-sm margin-top-sm">
<span class="color-font-blue bold">Sponsored</span>
</div>
<div class="outer_block">
<div class="first_block">
<!-- Image -->
<a href="#" data-name="sponsored_search_result_link">
<div class="product_search_img">
<img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%" />
</div>
</a>
</div>
<div class="second_block">
<!-- Accessories Text -->
<div class="font-10 text-align-left status-flag">
<a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
title="This product has accessories">Accessories</a
>
<a
tabindex="1"
role="button"
data-placement="bottom"
data-trigger="focus"
class="color-font-black bold statusflag statusflag2 HideProductStatusFlag"
data-toggle="popover"
data-content="body"
id="statusflag2"
data-original-title=""
title=""
></a>
</div>
<!-- Link to Prod Description -->
<a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
<div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
i5-6300U Dual-core (2 Core)
</div>
</a>
<!-- VPN AND SKU -->
<div class="font-12 text-align-left margin-top-md">
<div class="show">
<span class="color-font-dark-gray bold">VPN: </span
><span class="color-font-dark-gray">F47UT</span>
</div>
<div class="show">
<span class="color-font-dark-gray bold">SKU: </span
><span class="color-font-dark-gray">440Z</span>
</div>
</div>
<!-- In Stock when in List View-->
<div id="login-mode-cntl" class="list_view">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
</div>
<div class="third_block">
<!-- Adding Button -->
<div class="row">
<!-- Price -->
<div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">
$1,345.46
</div>
<!-- In Stock when in Grid View-->
<div class="row" id="login-mode-cntl" class="grid_view">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
<div class="col-xs-3 col-sm-3 padding-vsm">
<input class="form-control text-center AddInput-default" title="Please enter the value" />
</div>
<div class="col-xs-9 col-sm-9 padding-vsm">
<button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
<i class="fas fa-shopping-cart"></i>
Add
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am working on bootstrap modal. I had a set of gallery images. A modal popup is opened on clicking the image. The popup has two buttons one for print the modal content and second to close the modal.
The problem is when the user click print button every thing is ok and modal content will be printed, but when the user click in close button to close the modal after print the content nothing happen the modal doesn't closed. Please help me to fix this.
Here is my code
<div class="single-img">
<div class="container">
<h2 class="title"><span>title</span></h2>
<div class= "container popup">
<ul class="row list-inline">
<li class="col-md-3 col-xs-6" data-toggle="modal" data-target="#myModal">
<div class="content">
<a href="#myGallery" data-slide-to="0">
<span class="btn-link">
<i class="fa fa-plus" aria-hidden="true"></i>
</span>
<div class="img-wrap">
<img class="img-thumbnail" src="bluprnt3.png" alt="" />
</div>
</a>
</div>
</li>
<li class="col-md-3 col-xs-6" data-toggle="modal" data-target="#myModal">
<div class="content">
<a href="#myGallery" data-slide-to="1">
<span class="btn-link">
<i class="fa fa-plus" aria-hidden="true"></i>
</span>
<div class="img-wrap">
<img class="img-thumbnail" src="bluprnt4.png" alt="" />
</div>
</a>
</div>
</li>
<li class="col-md-3 col-xs-6" data-toggle="modal" data-target="#myModal">
<div class="content">
<a href="#myGallery" data-slide-to="2">
<span class="btn-link">
<i class="fa fa-plus" aria-hidden="true"></i>
</span>
<div class="img-wrap">
<img class="img-thumbnail" src="bluprnt5.png" alt="" />
</div>
</a>
</div>
</li>
</ul>
<!--begin modal window-->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" title="Close" >X</button>
</div>
<div class="modal-body">
<!--CAROUSEL CODE GOES HERE-->
<!--begin carousel-->
<div id="myGallery" class="carousel slide clearafter" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<img src="C.jpg" alt="item0">
</div>
<div class="item">
<img src="D.jpg" alt="item1">
</div>
<div class="item">
<img src="E.jpg" alt="item2">
</div>
</div>
</div>
<div class="slider-bottom clearafter">
<div class="modal-footer" style=" padding-left: 155px;">
<button class="btn-sm" type="button" data-dismiss="modal" style="float:left;" onclick="printDiv('myGallery')">Print</button>
</div>
<div class="slider-control">
<a class="left carousel-control" href="#myGallery" role="button" data-slide="prev">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
</a>
<a class="right carousel-control" href="#myGallery" role="button" data-slide="next">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function printDiv(div) {
var printContents = document.getElementById(div).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
//add this button to your main html
<button type="button" class="btn btn-default" onclick="javascript:test()" id="myBtn" data-dismis`enter code here`s="modal">Close</button>
//add this script to your main html
function test() {
$('#myModal').modal('toggle');
}
//add this style to your main html
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000000;
}
In my case Using bootstrap 4, using setTimeout helped me out.
By using setTimeout function, we hide modal after clicking print button.
function printDiv(div) {
var printContents = document.getElementById(div).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
setTimeout(function(){ $('#myModal').modal('hide'); }, 1000);
}
try this
function printDiv(divName) {
var elem = document.getElementById(divName)
var domClone = elem.cloneNode(true);
var $printSection = document.getElementById("printSection");
if (!$printSection) {
var $printSection = document.createElement("div");
$printSection.style = "width: 100%;";
$printSection.id = "printSection";
document.body.appendChild($printSection);
}
$printSection.innerHTML = "";
$printSection.appendChild(domClone);
window.print();
}
I am trying to stop autoslide from the bootstrap carousel corresponding to this jsfiddle example.
Whereas
$('.carousel').carousel({
interval: false
});
stops the main carousel, I dident find the way to stop the autosliding from the thumbnail part.
$(document).ready(function() {
var totalItems = $('#carousel .item').length;
var thumbs = 3;
var currentThumbs = 0;
var to = 0;
var thumbActive = 1;
function toggleThumbActive (i) {
$('#carousel-thumbs .item>div').removeClass('active');
$('#carousel-thumbs .item.active>div:nth-child(' + i +')').addClass('active');
}
$('#carousel').on('slide.bs.carousel', function(e) {
//var active = $(e.target).find('.carousel-inner > .item.active');
//var from = active.index();
var from = $('#carousel .item.active').index()+1;
var next = $(e.relatedTarget);
to = next.index()+1;
var nextThumbs = Math.ceil(to/thumbs) - 1;
if (nextThumbs != currentThumbs) {
$('#carousel-thumbs').carousel(nextThumbs);
currentThumbs = nextThumbs;
}
thumbActive = +to-(currentThumbs*thumbs);
//console.log(from + ' => ' + to + ' / ' + currentThumbs);
});
$('#carousel').on('slid.bs.carousel', function(e) {
toggleThumbActive(thumbActive);
});
$('#carousel-thumbs').on('slid.bs.carousel', function(e) {
toggleThumbActive(thumbActive);
});
$("#carousel").on("swiperight",function(){
$('#carousel').carousel('prev');
});
$("#carousel").on("swipeleft",function(){
$('#carousel').carousel('next');
});
$("#carousel-thumbs").on("swiperight",function(){
$('#carousel-thumbs').carousel('prev');
});
$("#carousel-thumbs").on("swipeleft",function(){
$('#carousel-thumbs').carousel('next');
});
});
$('.carousel').carousel({
interval: false
});
#carousel,
#carousel-thumbs {
max-width: 800px;
margin: 15px auto;
}
#carousel-thumbs .item img {
opacity: 0.5;
}
#carousel-thumbs .item.active div.active img {
opacity: 1;
border: 2px solid #000;
}
#carousel-thumbs .item.active div:not(.active) img {
cursor:pointer;
}
#carousel-thumbs .carousel-control {
background-image: none;
}
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">1</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">2</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">3</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">4</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">5</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">6</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">7</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">8</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">9</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control hiden-xs" href="#carousel" 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 hiden-xs" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id="carousel-thumbs" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-xs-4 active"onclick="$('#carousel').carousel(0);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4"onclick="$('#carousel').carousel(1);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4"onclick="$('#carousel').carousel(2);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4"onclick="$('#carousel').carousel(3);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(4);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4" onclick="$('#carousel').carousel(6);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(7);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(8);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control hidden-xs" href="#carousel-thumbs" 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 hidden-xs" href="#carousel-thumbs" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Get rid of data-ride="carousel", give your .carousel data-interval="false" attribute.
Quoting W3S
The data-ride="carousel" attribute tells Bootstrap to begin animating
the carousel immediately when the page loads.
If you want it to stop animating, remove .slide class from your your .carousel selector.
The .slide class adds a CSS transition and animation effect, which
makes the items slide when showing a new item. Omit this class if you
do not want this effect.
$(document).ready(function() {
var totalItems = $('#carousel .item').length;
var thumbs = 3;
var currentThumbs = 0;
var to = 0;
var thumbActive = 1;
function toggleThumbActive (i) {
$('#carousel-thumbs .item>div').removeClass('active');
$('#carousel-thumbs .item.active>div:nth-child(' + i +')').addClass('active');
}
$('#carousel').on('slide.bs.carousel', function(e) {
//var active = $(e.target).find('.carousel-inner > .item.active');
//var from = active.index();
var from = $('#carousel .item.active').index()+1;
var next = $(e.relatedTarget);
to = next.index()+1;
var nextThumbs = Math.ceil(to/thumbs) - 1;
if (nextThumbs != currentThumbs) {
$('#carousel-thumbs').carousel(nextThumbs);
currentThumbs = nextThumbs;
}
thumbActive = +to-(currentThumbs*thumbs);
//console.log(from + ' => ' + to + ' / ' + currentThumbs);
});
$('#carousel').on('slid.bs.carousel', function(e) {
toggleThumbActive(thumbActive);
});
$('#carousel-thumbs').on('slid.bs.carousel', function(e) {
toggleThumbActive(thumbActive);
});
$("#carousel").on("swiperight",function(){
$('#carousel').carousel('prev');
});
$("#carousel").on("swipeleft",function(){
$('#carousel').carousel('next');
});
$("#carousel-thumbs").on("swiperight",function(){
$('#carousel-thumbs').carousel('prev');
});
$("#carousel-thumbs").on("swipeleft",function(){
$('#carousel-thumbs').carousel('next');
});
});
$('.carousel').carousel({
interval: false
});
#carousel,
#carousel-thumbs {
max-width: 800px;
margin: 15px auto;
}
#carousel-thumbs .item img {
opacity: 0.5;
}
#carousel-thumbs .item.active div.active img {
opacity: 1;
border: 2px solid #000;
}
#carousel-thumbs .item.active div:not(.active) img {
cursor:pointer;
}
#carousel-thumbs .carousel-control {
background-image: none;
}
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel" class="carousel" data-interval="false" >
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">1</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">2</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">3</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">4</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">5</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">6</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">7</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">8</div>
</div>
<div class="item">
<img src="http://placehold.it/800x600" class="img-responsive">
<div class="carousel-caption">9</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control hiden-xs" href="#carousel" 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 hiden-xs" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id="carousel-thumbs" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-xs-4 active"onclick="$('#carousel').carousel(0);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4"onclick="$('#carousel').carousel(1);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4"onclick="$('#carousel').carousel(2);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4"onclick="$('#carousel').carousel(3);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(4);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(5);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4" onclick="$('#carousel').carousel(6);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(7);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
<div class="col-xs-4" onclick="$('#carousel').carousel(8);">
<img src="http://placehold.it/400x200" class="img-responsive">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control hidden-xs" href="#carousel-thumbs" 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 hidden-xs" href="#carousel-thumbs" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
i used two different menu for desktop and mobile. when i go in mobile view collapse menu is not working.I use:
$(".navbar-collapse").collapse('hide');
After using this on page load it shows first then hide.
Here is my mobile menu code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="top-header">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header pull-left" style="margin-left:5px">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a href="http://localhost/eboighar/" class="logo-mini">
<img src="http://localhost/eboighar/img/eboi-s-logo.png" alt="Eboighar Small Logo">
</a>
<div class="pull-right cart-mview-top">
<a id="cart_at_head2" class="pull-right">
<div class="total" style="margin-top:10px;">
<span style="color: #666666;font-size: 14px;margin-top: 13px;padding-right: 5px;" id="headeritems3">0</span>
</div>
<img src="http://localhost/eboighar/img/cart.png" style="margin-right:5px;border-left: 1px solid #b3b3b3; margin-top: 0px;padding-left: 5px;" alt="cart">
</a>
<!-- <img class="header-busket" src="asset/busket.png"/> -->
<div id="cart-sumary2" class=" col-xs-12 m-tab-view" style="display : none;background:#fafafa;">
<div class="cart-sumary2-mobile" style="background:#fafafa;">
<h4 class="txt-blue" style="text-align:center">Cart Summary</h4>
<img id="close_cart_up2" class="close-cart" src="http://localhost/eboighar/img/minus.png" alt="eboighar Ico" style="position: absolute;top:15px; right:15px; height:16px;">
<div>
<div class="padding-10" id="cart_item_holder2">
<div class="bg-fa">
<div id="cart_product_list2" class="mCustomScrollbar _mCS_2 mCS-autoHide mCS_no_scrollbar"><div id="mCSB_2" class="mCustomScrollBox mCS-dark mCSB_vertical mCSB_inside" style="max-height: 300px;" tabindex="0"><div id="mCSB_2_container" class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" style="position:relative; top:0; left:0;" dir="ltr"><div class="btm-border-sum no_item"><strong>You Cart is empty</strong>
<div class="clear_both"></div>
</div></div><div id="mCSB_2_scrollbar_vertical" class="mCSB_scrollTools mCSB_2_scrollbar mCS-dark mCSB_scrollTools_vertical" style="display: none;"><div class="mCSB_draggerContainer"><div id="mCSB_2_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 30px; top: 0px;" oncontextmenu="return false;"><div class="mCSB_dragger_bar" style="line-height: 30px;"></div></div><div class="mCSB_draggerRail"></div></div></div></div></div>
<div id="price_and_button2" style="display: none;">
<div class="pull-right" style="font-size:18px;">Total : Tk <font id="cart_list_total2" class="text-red">0.00</font></div>
<div class="clear_both"></div>
<div class="crt_btn_con ">
</div>
</div>
</div>
</div>
</div>
</div><!-- End of Cart Summery. -->
</div>
<div class="clearfix"> </div>
</div>
</div>
<div stylle="clear:both; margin:0 5px;">
<form class="menu-search-frm" role="search" action="http://localhost/eboighar/index.php/index/searchbookview_m/" method="post" onsubmit="return submfrom_2(0)" name="searchForm_2" id="searchForm_2">
<div class="form-group menu-top-search">
<div class="input-group" style="padding:0 6px;">
<input class="form-control" style="border:1px solid #ccc;background:#fff;" id="search2" name="search2" autocomplete="off" onkeyup="lookup_2(this.value,event);" value="" placeholder="Enter Book Title, Author or Publisher" type="text">
<div class="suggestionsBox" id="suggestions_2" style="display: none; position:absolute; z-index:999999999999999999;background:#fff;left: 27%;top:30px;">
<!-- <img src="http://localhost/eboighar/images/view/upArrow.png" style="position: relative; top: -10px; left: 30px;" alt="upArrow" /> -->
<div class="suggestionList" id="autoSuggestionsList_2" style="max-height:300px; overflow:auto">
</div>
</div>
<div class="input-group-btn">
<a style="border:0px;" class="btn btn-default add_serch glyphicon glyphicon-search" id="basic-addon2" href="javascript:submfrom_2(1); "> </a>
</div>
</div>
</div>
</form>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="m_menu_top_con" class="navbar-collapse collapse mobile-menu-top" aria-expanded="false">
<div style="clear:both"></div>
<a id="close_mobile_menu" class="close_mobile_menu btn pull-right" style=" margin: -6px -10px -3px;padding: 0;border:none !important"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
<div style="clear:both"></div>
<ul class="nav navbar-nav ">
<li class="active">
<i class="glyphicon glyphicon-home ico-danger"></i> Home
</li>
<li>
<i class="glyphicon glyphicon-user ico-success"></i> About eBoighar
</li>
<li><span><img class="nav-2-ico_ac" src="http://localhost/eboighar/img/howtobuy.PNG" alt="Eboighar How to Buy"></span>How to buy books</li>
<li><i class=" glyphicon glyphicon-tasks ico-warning"></i> Order unlisted books</li>
<!-- <li><i class="glyphicon glyphicon-file ico-info"></i> Tutorials</li> -->
<li><i class="glyphicon glyphicon-gift ico-danger"></i> Bulk order</li>
<li><i class="glyphicon glyphicon-briefcase ico-success"></i> Medical equipment</li>
<li><i class="glyphicon glyphicon-print ico-info"></i> Printing & Binding </li>
<li>
<i class="glyphicon glyphicon-globe ico-warning"></i> News
</li>
<li>
<i class="glyphicon glyphicon-earphone ico-info"></i> Contact Us
</li>
</ul>
<div style="clear:both"></div>
<p class="log pull-right" style="margin-bottom:10px;">
<a class="" href="http://localhost/eboighar/index.php/index/login" style="font-size:12px; color:#000000; padding: 5px 7px;"><i class="glyphicon glyphicon-lock"></i>Login</a>
<a class="" href="http://localhost/eboighar/index.php/index/signup/" style="font-size:12px; color:#000000; padding: 5px 7px;"><i class="glyphicon glyphicon-user"></i>Signup</a>
</p>
</div><!-- /.navbar-collapse -->
</nav>
You can see problem Here : http://eboighar.com/
Some one help to solve this...
I'm making a web application for mp3 music. But i get stuck at one condition.
I'm using Jplayer open source plugin for mp3 music.
This below script is used to play music:
$(document).ready(function () {
var myPlaylist = new jPlayerPlaylist({
jPlayer: "#jplayer_N",
cssSelectorAncestor: "#jp_container_N"
},
[
{
title: "Lat lg gyi",
artist: "Race 2",
mp3: "Music/Lat Lag Gayi (Race 2)-(FreshMaza.co).mp3",
poster: "images/m0.jpg"
}
], {
playlistOptions: {
enableRemoveControls: true,
autoPlay: false
},
swfPath: "js/jPlayer",
supplied: "webmv, ogv, m4v, oga, mp3",
smoothPlayBar: true,
keyEnabled: true,
audioFullScreen: false
});
$(document).on($.jPlayer.event.pause, myPlaylist.cssSelector.jPlayer, function () {
$('.musicbar').removeClass('animate');
$('.jp-play-me').removeClass('active');
$('.jp-play-me').parent('li').removeClass('active');
});
$(document).on($.jPlayer.event.play, myPlaylist.cssSelector.jPlayer, function () {
$('.musicbar').addClass('animate');
});
$(document).on('click', '.jp-play-me', function (e) {
e && e.preventDefault();
var $this = $(e.target);
if (!$this.is('a')) $this = $this.closest('a');
$('.jp-play-me').not($this).removeClass('active');
$('.jp-play-me').parent('li').not($this.parent('li')).removeClass('active');
$this.toggleClass('active');
$this.parent('li').toggleClass('active');
if (!$this.hasClass('active')) {
myPlaylist.pause();
} else {
var i = Math.floor(Math.random() * (1 + 7 - 1));
myPlaylist.play(i);
}
});
});
And here is HTML codes.
<footer class="footer bg-dark">
<div id="jp_container_N">
<div class="jp-type-playlist">
<div id="jplayer_N" class="jp-jplayer hide"></div>
<div class="jp-gui">
<div class="jp-video-play hide">
<a class="jp-video-play-icon">play</a>
</div>
<div class="jp-interface">
<div class="jp-controls">
<div>
<a class="jp-previous"><i class="icon-control-rewind i-lg"></i>
</a>
</div>
<div>
<a class="jp-play">
<i class="icon-control-play i-2x"></i>
</a>
<a class="jp-pause hid">
<i class="icon-control-pause i-2x"></i>
</a>
</div>
<div>
<a class="jp-next">
<i class="icon-control-forward i-lg"></i>
</a>
</div>
<div class="hide">
<a class="jp-stop">
<i class="fa fa-stop"></i>
</a>
</div>
<div>
<a class="" data-toggle="dropdown" data-target="#playlist">
<i class="icon-list"></i>
</a>
</div>
<div class="jp-progress hidden-xs">
<div class="jp-seek-bar dk">
<div class="jp-play-bar bg-info">
</div>
<div class="jp-title text-lt">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
<div class="hidden-xs hidden-sm jp-current-time text-xs text-muted"></div>
<div class="hidden-xs hidden-sm jp-duration text-xs text-muted"></div>
<div class="hidden-xs hidden-sm">
<a class="jp-mute" title="mute">
<i class="icon-volume-2"></i>
</a>
<a class="jp-unmute hid" title="unmute">
<i class="icon-volume-off"></i>
</a>
</div>
<div class="hidden-xs hidden-sm jp-volume">
<div class="jp-volume-bar dk">
<div class="jp-volume-bar-value lter"></div>
</div>
</div>
<div>
<a class="jp-shuffle" title="shuffle">
<i class="icon-shuffle text-muted"></i>
</a>
<a class="jp-shuffle-off hid" title="shuffle off">
<i class="icon-shuffle text-lt"></i>
</a>
</div>
<div>
<a class="jp-repeat" title="repeat">
<i class="icon-loop text-muted"></i>
</a>
<a class="jp-repeat-off hid" title="repeat off">
<i class="icon-loop text-lt"></i>
</a>
</div>
<div class="hide">
<a class="jp-full-screen" title="full screen">
<i class="fa fa-expand"></i>
</a>
<a class="jp-restore-screen" title="restore screen">
<i class="fa fa-compress text-lt"></i>
</a>
</div>
</div>
</div>
</div>
<div class="jp-playlist dropup" id="playlist">
<ul class="dropdown-menu aside-xl dker"> <!-- The method Playlist.displayPlaylist() uses this unordered list -->
<li class="list-group-item"></li>
</ul>
</div>
<div class="jp-no-solution hide">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your
Flash plugin.
</div>
</div>
</div>
</footer>
Which looks like this:
QUESTION
As you see above into my screenshot some labels.
As i click into label it must suppose to play mp3 but the problem is my Javascript code(see above my code for javascript code) is used a particular id which play mp3 on the basis of this.
Here is my label code:
<!--Music working here-->
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" id="jp_container_N"> <!---->
<div class="item jp-type-playlist"> <!---->
<div class="pos-rlt">
<div class="item-overlay opacity r r-2x bg-black">
<div class="text-info padder m-t-sm text-sm">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o text-muted"></i>
</div>
<div class="center text-center m-t-n">
<div id="jplayer_N" class="jp-jplayer hide"></div> <!---->
<a href="#" class="jp-play">
<i class="icon-control-play i-2x"></i>
</a>
<a href="#" class="jp-pause hid">
<i class="icon-control-pause i-2x"></i>
</a>
</div>
<div class="bottom padder m-b-sm">
<a href="#" class="pull-right">
<i class="fa fa-heart-o"></i>
</a>
<a href="#">
<i class="fa fa-plus-circle"></i>
</a>
</div>
</div>
<a href="#">
<img src="images/p1.jpg" alt="" class="r r-2x img-full">
</a>
</div>
<div class="padder-v">
Lat lag gyi
Race 2
</div>
</div>
</div>
<!--Music working here //END-->
<!--///////////////////////////////END/////////////////////////////-->
As you see into my codes, i can't use a particular same id to play mp3. I get stuck here. Please help!! :(
HELP WOULD BE APPRECIATED!