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!
Related
By using SWIPER JS API I created an about us page that contains the details of our team. This is a slider actually, and this slider contains five slides and I want the third slide to be shown in the center and the two on the right side and two on left but by default first is shown remaining are below it.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<script src="../js/swiper.min.js" defer></script>
<script src="../js/js.js" defer></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Pacifico&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<title>About us</title>
</head>
<body>
<header>
<nav class="container-fluid navbar navbar-expand-lg navbar-light border-bottom border-secondary">
<a class="navbar-brand p-0" href="home.html"><img src="../img/bloodbucketLogo.png" width="150" height="65" class="mr-5"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav" style="margin: auto" id="menuBar">
<li class="nav-item active">
<a class="nav-link" href="home.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutUS.html">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faqs.html">FAQ's</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Articles
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">When to donate blood?</a>
<a class="dropdown-item" href="#">Blood diseases</a>
<a class="dropdown-item" href="#">Benefits of donating blood?</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contactUs.html">Contact us</a>
</li>
</ul>
<div class="text-center">
<button type="button" class="btn btn-outline-secondary mr-1"> Login </button>
<button type="button" class="btn btn-secondary">Sign up</button>
</div>
</div>
</nav>
</header>
<main>
<div class="container-fluid ">
<div class="row">
<div class="col-md-12 text-center">
<h1 style="font-family: Oxanium;" class="mt-2">Our Team</h1>
</div>
</div>
</div>
<div class="container-fluid" id="aboutUs">
<div class="row team">
<div class="col-md-12 text-center" title="Swipe right!">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card bg-light" style="width: 18rem;">
<div class="text-center">
<img class="" src="../img/donarsAvatars/4.png" style="margin-top: -25px;" width="95" height="85" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title text-center">Ehtisham Ul Haq</h5>
<h6 class="text-primary text-center">Founder</h6>
<hr>
<p class="card-text" style="font-size: 12px;">Java Desktop Developer <i class="fa fa-laptop" aria-hidden="true"></i> </p>
<p class="card-text" style="font-size: 12px;">Full Stack Web Developer(PHP Laravel) </p>
<p class="card-text" style="font-size: 12px;">Mobile Application Developer(Android) <i class="fa fa-android" aria-hidden="true"></i> </p>
</div>
<hr>
<div class="card-body text-center">
<i class="fa fa-facebook-official" aria-hidden="true"></i> |
<i class="fa fa-instagram"></i> |
<i class="fa fa-twitter-square"></i> |
<i class="fa fa-linkedin-square"></i>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card bg-light" style="width: 18rem;">
<div class="text-center">
<img class="" src="../img/donarsAvatars/1.png" style="margin-top: -25px;" width="95" height="85" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title text-center">Mohammad Moazam</h5>
<h6 class="text-primary text-center">Co-Founder</h6>
<hr>
<p class="card-text" style="font-size: 12px;">Java Desktop Developer <i class="fa fa-laptop" aria-hidden="true"></i> </p>
<p class="card-text" style="font-size: 12px;">Full Stack Web Developer(PHP Laravel) </p>
<p class="card-text" style="font-size: 12px;">Mobile Application Developer(Android) <i class="fa fa-android" aria-hidden="true"></i> </p>
</div>
<hr>
<div class="card-body text-center">
<i class="fa fa-facebook-square"></i> |
<i class="fa fa-instagram"></i> |
<i class="fa fa-twitter-square"></i> |
<i class="fa fa-linkedin-square"></i>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card bg-light" style="width: 18rem;">
<div class="text-center">
<img class="" src="../img/donarsAvatars/1.png" style="margin-top: -25px;" width="95" height="85" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title text-center">Abdul Rab</h5>
<h6 class="text-primary text-center">Co-Founder</h6>
<hr>
<p class="card-text" style="font-size: 12px;">Java Desktop Developer <i class="fa fa-laptop" aria-hidden="true"></i> </p>
<p class="card-text" style="font-size: 12px;">Full Stack Web Developer(PHP Laravel) </p>
<p class="card-text" style="font-size: 12px;">Mobile Application Developer(Android) <i class="fa fa-android" aria-hidden="true"></i> </p>
</div>
<hr>
<div class="card-body text-center">
<i class="fa fa-facebook-square"></i> |
<i class="fa fa-instagram"></i> |
<i class="fa fa-twitter-square"></i> |
<i class="fa fa-linkedin-square"></i>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card bg-light" style="width: 18rem;">
<div class="text-center">
<img class="" src="../img/donarsAvatars/4.png" style="margin-top: -25px;" width="95" height="85" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title text-center">Hamza Muzaffar</h5>
<h6 class="text-primary text-center">Co-Founder</h6>
<hr>
<p class="card-text" style="font-size: 12px;">Java Desktop Developer <i class="fa fa-laptop" aria-hidden="true"></i> </p>
<p class="card-text" style="font-size: 12px;">Full Stack Web Developer(PHP Laravel) </p>
<p class="card-text" style="font-size: 12px;">Mobile Application Developer(Android) <i class="fa fa-android" aria-hidden="true"></i> </p>
</div>
<hr>
<div class="card-body text-center">
<i class="fa fa-facebook-square"></i> |
<i class="fa fa-instagram"></i> |
<i class="fa fa-twitter-square"></i> |
<i class="fa fa-linkedin-square"></i>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card bg-light" style="width: 18rem;">
<div class="text-center">
<img class="" src="../img/donarsAvatars/4.png" style="margin-top: -25px;" width="95" height="85" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title text-center">Khalil Ahmed</h5>
<h6 class="text-primary text-center">Co-Founder</h6>
<hr>
<p class="card-text" style="font-size: 12px;">Java Desktop Developer <i class="fa fa-laptop" aria-hidden="true"></i> </p>
<p class="card-text" style="font-size: 12px;">Full Stack Web Developer(PHP Laravel) </p>
<p class="card-text" style="font-size: 12px;">Mobile Application Developer(Android) <i class="fa fa-android" aria-hidden="true"></i> </p>
</div>
<hr>
<div class="card-body text-center">
<i class="fa fa-facebook-square"></i> |
<i class="fa fa-instagram"></i> |
<i class="fa fa-twitter-square"></i> |
<i class="fa fa-linkedin-square"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="container-fluid bg">
<div class="row bg">
<div class="col-md-12">
<div class="fixed-bottom border-top border-dark bg">
<div class="bg">
<div class="mr-4 text-center bg">
<i class="fa fa-facebook-official" aria-hidden="true"></i> |
<i class="fa fa-twitter" aria-hidden="true"></i> |
<i class="fa fa-instagram" aria-hidden="true"></i> |
<i class="fa fa-linkedin" aria-hidden="true"></i> |
<i class="fa fa-whatsapp" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
API LINK
https://swiperjs.com/demos/240-effect-coverflow.html
The way it shows right now
But, I want to look like this when page reloads
IF NEED any thing or have any confusion please ask, but help me to solve this.
Before
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 300,
modifier: 1,
slideShadows : false,
},
pagination: {
el: '.swiper-pagination',
},
});
After
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: true,
initialSlide:2, //Added this
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 300,
modifier: 1,
slideShadows : false,
},
pagination: {
el: '.swiper-pagination',
},
});
dear friends.
I've found some case i cant understand.
Here is an example - whenether you choose 1,2,3,4 or 5 button, betPrice takes normally 1 value.
But if you press PUT button it will tell, betPrice variable has as many values inside, as you had pressed before! Why?
If you press 1,2,3,4 or 5 button again, it will be one value again.
Heading
$('.single-place-to-bet').find('a').on('click', function() {
var betPrice;
betPrice = $(this).find("span[class^='bet-price']").attr('class');
console.log(betPrice);
$("#sendnumber").click(
function() {
console.log(betPrice);
}
);
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- bet modal begin -->
</head>
<body>
<button id="sendnumber" name="sendnumber">Put</button>
<!-- bet modal end -->
<hr>
<div class="single-place-to-bet col-xl-2 col-lg-2">
<a href="#">
<span class="result-for-final" data-numberid="choice1">
1
</span>
<span class="bet-price-1">???</span>
</a>
</div>
<div class="single-place-to-bet col-xl-2 col-lg-2">
<a href="#">
<span class="result-for-final" data-numberid="choice2">
2
</span>
<span class="bet-price-2">???</span>
</a>
</div>
<div class="single-place-to-bet col-xl-2 col-lg-2">
<a href="#">
<span class="result-for-final" data-numberid="choice3">
3
</span>
<span class="bet-price-3">???</span>
</a>
</div>
<div class="single-place-to-bet col-xl-2 col-lg-2">
<a href="#">
<span class="result-for-final" data-numberid="choice4">
4
</span>
<span class="bet-price-4">???</span>
</a>
</div>
<div class="single-place-to-bet col-xl-2 col-lg-2">
<a href="#">
<span class="result-for-final" data-numberid="choice5">
5
</span>
<span class="bet-price-5">???</span>
</a>
</div>
</body>
</html>
Each time the function runs, your set an additionnal event listener.
For your case you can't move the event listener out of the function, so you can une jQuery off() to remove any event listener on the button then set it again.
$('.single-place-to-bet').find('a').on('click', function() {
var betPrice;
betPrice = $(this).find("span[class^='bet-price']").attr('class');
console.log(betPrice);
$("#sendnumber").off().on('click',
function() {
console.log(betPrice);
}
);
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- bet modal begin -->
</head>
<body>
<button id="sendnumber" name="sendnumber">Put</button>
<!-- bet modal end -->
<hr>
<div class="single-place-to-bet col-xl-2 col-lg-2">
<a href="#">
<span class="result-for-final" data-numberid="choice1">
1
</span>
<span class="bet-price-1">???</span>
</a>
</div>
<div class="single-place-to-bet col-xl-2 col-lg-2">
<a href="#">
<span class="result-for-final" data-numberid="choice2">
2
</span>
<span class="bet-price-2">???</span>
</a>
</div>
<div class="single-place-to-bet col-xl-2 col-lg-2">
<a href="#">
<span class="result-for-final" data-numberid="choice3">
3
</span>
<span class="bet-price-3">???</span>
</a>
</div>
<div class="single-place-to-bet col-xl-2 col-lg-2">
<a href="#">
<span class="result-for-final" data-numberid="choice4">
4
</span>
<span class="bet-price-4">???</span>
</a>
</div>
<div class="single-place-to-bet col-xl-2 col-lg-2">
<a href="#">
<span class="result-for-final" data-numberid="choice5">
5
</span>
<span class="bet-price-5">???</span>
</a>
</div>
</body>
</html>
Everytime any number is pressed, it is registering a new click listener for sendnumber button element. Place the button click listener outside the callback function of .single-place-to-bet listener
var betPrice;
$('.single-place-to-bet').find('a').on('click', function() {
betPrice = $(this).find("span[class^='bet-price']").attr('class');
console.log(betPrice);
});
$("#sendnumber").click(
function() {
if (betPrice) {
console.log(betPrice);
}
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="sendnumber" name="sendnumber">Put</button>
<!-- bet modal end -->
<hr>
<div class="single-place-to-bet col-xl-2 col-lg-2">
<a href="#">
<span class="result-for-final" data-numberid="choice1">
1
</span>
<span class="bet-price-1">???</span>
</a>
</div>
<div class="single-place-to-bet col-xl-2 col-lg-2">
<a href="#">
<span class="result-for-final" data-numberid="choice2">
2
</span>
<span class="bet-price-2">???</span>
</a>
</div>
<div class="single-place-to-bet col-xl-2 col-lg-2">
<a href="#">
<span class="result-for-final" data-numberid="choice3">
3
</span>
<span class="bet-price-3">???</span>
</a>
</div>
<div class="single-place-to-bet col-xl-2 col-lg-2">
<a href="#">
<span class="result-for-final" data-numberid="choice4">
4
</span>
<span class="bet-price-4">???</span>
</a>
</div>
<div class="single-place-to-bet col-xl-2 col-lg-2">
<a href="#">
<span class="result-for-final" data-numberid="choice5">
5
</span>
<span class="bet-price-5">???</span>
</a>
</div>
There are actually multiple betPrice variables printing themselves with console.log().
This happens because you put ("#sendnumber")... inside your .on event handler, creating a new event handler everytime you click the Put button.
Move the second event handler creator outside the first one, like below, and you should be fine:
$('.single-place-to-bet').find('a').on('click', function() {
var betPrice;
betPrice = $(this).find("span[class^='bet-price']").attr('class');
console.log(betPrice);
$("#sendnumber").click(
function() {
console.log(betPrice);
}
);
});
I have a store website in which while clicking the eye icon or expand icon in some images, the quick box shows up with some description.
<div class="ImageWrapper">
<div class="product-button">
<a href="javascript:void(0)" id="promise-solitaire-ring-mount" class="quick-view-text">
<i class="zmdi zmdi-eye"></i>
</a>
<a href="products\promise-solitaire-ring-mount.html">
<i class="zmdi zmdi-link"></i>
</a>
<div class="add-to-wishlist">
<div class="show">
<div class="default-wishbutton-promise-solitaire-ring-mount loading">
<a class="add-in-wishlist-js btn" href="promise-solitaire-ring-mount">
<i class="fa fa-heart-o"></i>
<span class="tooltip-label">
Add to wishlist
</span>
</a>
</div>
<div class="loadding-wishbutton-promise-solitaire-ring-mount loading btn" style="display: none; pointer-events: none">
<a class="add_to_wishlist" href="promise-solitaire-ring-mount">
<i class="fa fa-circle-o-notch fa-spin"></i>
</a>
</div>
<div class="added-wishbutton-promise-solitaire-ring-mount loading" style="display: none;">
<a class="added-wishlist btn add_to_wishlist" href="pages\wishlist.html">
<i class="fa fa-heart"></i>
<span class="tooltip-label">
View Wishlist
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-detail">
<div class="product_left">
<a href="collections\new-arrivals\products\promise-solitaire-ring-mount.html" class="grid-link__title">
Let Promise Solitaire Ring Mount
</a>
<div class="grid-link__meta">
<div class="product_price">
<div class="grid-link__org_price">
<span class="money">$590.00</span>
</div>
</div>
<span class="shopify-product-reviews-badge" data-id="10109315278"></span>
</div>
The complete files are here.
When I click the icon, the popup is not shown, instead, a light-black shade is shown:
What could be the problem?
I am trying to load my dynamic categories with owl carousel but it shows items closed.
Screenshots
first category **Notebook** is opened and others are closed
second category **PC** is opened and others are closed
I need all of them to be open and show items when page loads. it's working fine if i use html version but when i add my dynamic codes it broke as you see in images above.
Code
<div class="category-module" id="latest_category">
<h3 class="subtitle">{{$kis->title}} - <a class="viewall" href="category.tpl">view all</a></h3>
<div class="category-module-content">
<!-- tabs -->
<ul id="sub-cat" class="tabs">
#foreach($kis->childs->take(6) as $child)
<li>{{$child->title}}</li>
#endforeach
</ul>
<!-- items -->
#foreach($kis->childs->take(6) as $child)
<div id="tab-cat{{$child->id}}" class="tab_content">
<div class="owl-carousel latest_category_tabs">
#foreach($child->products->take(10) as $ki)
<div class="product-thumb">
<div class="image"><img src="image/product/samsung_tab_1-200x200.jpg" alt="Aspire Ultrabook Laptop" title="Aspire Ultrabook Laptop" class="img-responsive" /></div>
<div class="caption">
<h4>{{$ki->title}}</h4>
<p class="price"> <span class="price-new">{{number_format($ki->price,0)}}</span> <span class="price-old">$241.99</span> <span class="saving">-5%</span> </p>
</div>
</div>
#endforeach
</div>
</div>
#endforeach
</div>
</div>
Can anyone help me to find the issue?
PS: in case you wonder why my PHP codes are the way you see in my code
I am using laravel blade templates.
Update
here i share my full html version of code above maybe you can find some differences which i couldn't
<div class="category-module" id="latest_category">
<h3 class="subtitle">Electronics - <a class="viewall" href="category.tpl">view all</a></h3>
<div class="category-module-content">
<ul id="sub-cat" class="tabs">
<li>Laptops</li>
<!-- and more -->
</ul>
<div id="tab-cat1" class="tab_content">
<div class="owl-carousel latest_category_tabs">
<div class="product-thumb">
<div class="image"><img src="image/product/samsung_tab_1-200x200.jpg" alt="Aspire Ultrabook Laptop" title="Aspire Ultrabook Laptop" class="img-responsive" /></div>
<div class="caption">
<h4>Aspire Ultrabook Laptop</h4>
<p class="price"> <span class="price-new">$230.00</span> <span class="price-old">$241.99</span> <span class="saving">-5%</span> </p>
<div class="rating"> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span> </div>
</div>
<div class="button-group">
<button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
<div class="add-to-links">
<button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
<div class="product-thumb">
<div class="image"><img src="image/product/macbook_pro_1-200x200.jpg" alt=" Strategies for Acquiring Your Own Laptop " title=" Strategies for Acquiring Your Own Laptop " class="img-responsive" /></div>
<div class="caption">
<h4> Strategies for Acquiring Your Own Laptop </h4>
<p class="price"> <span class="price-new">$1,400.00</span> <span class="price-old">$1,900.00</span> <span class="saving">-26%</span> </p>
</div>
<div class="button-group">
<button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
<div class="add-to-links">
<button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
<div class="product-thumb">
<div class="image"><img src="image/product/macbook_air_1-200x200.jpg" alt="Laptop Silver black" title="Laptop Silver black" class="img-responsive" /></div>
<div class="caption">
<h4>Laptop Silver black</h4>
<p class="price"> <span class="price-new">$1,142.00</span> <span class="price-old">$1,202.00</span> <span class="saving">-5%</span> </p>
</div>
<div class="button-group">
<button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
<div class="add-to-links">
<button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
<div class="product-thumb">
<div class="image"><img src="image/product/macbook_1-200x200.jpg" alt="Ideapad Yoga 13-59341124 Laptop" title="Ideapad Yoga 13-59341124 Laptop" class="img-responsive" /></div>
<div class="caption">
<h4>Ideapad Yoga 13-59341124 Laptop</h4>
<p class="price"> $2.00 </p>
<div class="rating"> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span> </div>
</div>
<div class="button-group">
<button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
<div class="add-to-links">
<button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
<div class="product-thumb">
<div class="image"><img src="image/product/ipod_shuffle_1-200x200.jpg" alt="Hp Pavilion G6 2314ax Notebok Laptop" title="Hp Pavilion G6 2314ax Notebok Laptop" class="img-responsive" /></div>
<div class="caption">
<h4>Hp Pavilion G6 2314ax Notebok Laptop</h4>
<p class="price"> $122.00 </p>
</div>
<div class="button-group">
<button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
<div class="add-to-links">
<button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
<div class="product-thumb">
<div class="image"><img src="image/product/ipod_touch_1-200x200.jpg" alt="Samsung Galaxy S4" title="Samsung Galaxy S4" class="img-responsive" /></div>
<div class="caption">
<h4>Samsung Galaxy S4</h4>
<p class="price"> <span class="price-new">$62.00</span> <span class="price-old">$122.00</span> <span class="saving">-50%</span> </p>
</div>
<div class="button-group">
<button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
<div class="add-to-links">
<button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
</div>
</div>
<!-- and more -->
</div>
</div>
update 2
this is javascript of my carousels
$("#latest_category .owl-carousel.latest_category_tabs").owlCarousel({
itemsCustom : [[320, 2],[600, 2],[768, 3],[992, 5],[1199, 5]],
lazyLoad : true,
navigation : true,
navigationText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
scrollPerPage : true,
pagination: false,
});
$("#latest_category .tab_content").addClass("deactive");
$("#latest_category .tab_content:first").show();
//Default Action
$("#latest_category ul#sub-cat li:first").addClass("active").show(); //Activate first tab
//On Click Event
$("#latest_category ul#sub-cat li").on("click", function() {
$("#latest_category ul#sub-cat li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$("#latest_category .tab_content").hide();
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
If I understand you correctly, the issue is not with the carousel. It is with the tabs script.
So you are better off using a class as the selector.
It looks like you are using something like this https://gist.github.com/hong6/7372763 for your tabs.
Then you are better off removing the #latest_category and using a class. Then in your jquery, you can add a jquery context. Here is un-tested the code:
$(".category-module .owl-carousel.latest_category_tabs").owlCarousel({
itemsCustom : [[320, 2],[600, 2],[768, 3],[992, 5],[1199, 5]],
lazyLoad : true,
navigation : true,
navigationText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
scrollPerPage : true,
pagination: false,
});
$(".category-module").each(function() {
$(".tab_content", this).addClass("deactive");
$(".tab_content:first", this).show();
//Default Action
$("ul#sub-cat li:first", this).addClass("active").show(); //Activate first tab
});
//On Click Event
$(".category-module ul#sub-cat li").on("click", function() {
var parent = $(this).parents('.category-module')
$("ul#sub-cat li", parent).removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content", parent).hide();
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab, parent).fadeIn(); //Fade in the active content
return false;
});
Here is a fiddle that shows a similar situation.
I've come across a strange behavior of a $.post command.
I have an AJAX request by $.post(param,returned data), which loads pictures onto the page of the visitor.
This is the code, with a little bit of animation:
function showPicturesByCat(cat){
$('.local-overlay').fadeIn(200);
$('#picturesByCat').stop().animate({height: '0px' },200);
setTimeout(function(){
$.post('./ajax/populate.php',{operation:'show-pictures-on-front',cat:cat})
.done(function(data){
$('#picturesByCat').html(data);
setTimeout(function(){
var inaltime = $('#picturesByCat')[0].scrollHeight+20;
$('#picturesByCat').stop().animate({height: inaltime+'px' },500);
$('#picturesByCat').css({opacity: 1});
$('.local-overlay').delay(500).fadeOut(300);
},300);
$('html, body').delay(200).stop().animate({
scrollTop: $('#picturesByCat').offset().top
},300);
});
},200);
}
On the PHP side, it's just a loading of pictures with names inside a database, based on the chosen category (cat).
Code works perfectly ... on PC,s, but when it turns to mobile, both Chrome and Firefox do the same wierd thing.
When I choose a category, the pictures loads but not completely. If you scroll to the bottom, you'll see the thing. If I tap the second time on the same category, the pictures loads completely.
Here's the address
http://adrianmalancaphotography.com/en/fotografie
I can't figure this out, it's too wierd for me. Maybe some of you can spot or already know what it's wrong.
Edited:
this is the dump data, as requested in comments.
<hr class="hr-white">
Peisaj
<hr class="hr-white">
<div class="col-12">
<div class="card-columns">
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Maci 2</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-22.jpg" class="img-fluid" width="100%" alt="fotografie Maci 2" onClick="showImage(22)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Grau</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-17.jpg" class="img-fluid" width="100%" alt="fotografie Grau" onClick="showImage(17)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Apa incetosata</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-15.jpg" class="img-fluid" width="100%" alt="fotografie Apa incetosata" onClick="showImage(15)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Apus intunecat</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-14.jpg" class="img-fluid" width="100%" alt="fotografie Apus intunecat" onClick="showImage(14)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Nori cenusii</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/preview/AMP-IMG-13.jpg" class="img-fluid" width="100%" alt="fotografie Nori cenusii" onClick="showImage(13)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>La tara</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-12.jpg" class="img-fluid" width="100%" alt="fotografie La tara" onClick="showImage(12)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Ponton</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-10.jpg" class="img-fluid" width="100%" alt="fotografie Ponton" onClick="showImage(10)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Lebede</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-9.jpg" class="img-fluid" width="100%" alt="fotografie Lebede" onClick="showImage(9)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Apus pe apa</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-8.jpg" class="img-fluid" width="100%" alt="fotografie Apus pe apa" onClick="showImage(8)"> </div>
<div class="card card-block p-0 foto-card my-2">
<div class="img-over-info"> <span>Camp cu maci</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
<img src="./images/small/AMP-IMG-4.jpg" class="img-fluid" width="100%" alt="fotografie Camp cu maci" onClick="showImage(4)"> </div>
</div>
</div>
Hope it helps, although I can't see anything wrong.
The problem does not come from $.post. The problem is caused by:
var inaltime = $('#picturesByCat')[0].scrollHeight+20;
$('#picturesByCat').stop().animate({height: inaltime+'px' },500);
REASON:
Since the height is not properly calculated because, when your images start loading, its height is not calculated right, then your #picturesByCat is limited to your wrong calculated value, so it is not fully displayed, but the images are loaded correctly.
The second time you clicked on the category, those images are fully displayed and have right height, then the problem is gone.
RESOLUTION:
Set the height back to auto when your animation is finished:
$('#picturesByCat').stop().animate({height: inaltime+'px' },500, function(){
$('#picturesByCat').css('height', 'auto');
});