I have <div> which should be opened on button click and closed again on same button click.
Someone marked it as duplicate,I know theme is same but the way of solving that question os different.I need in two different ways.
Here is my fiddle link https://jsfiddle.net/rojaHema/nhwyowcv/4/
As an example i need like whatsApp, how we get pop up options when clicked on attachments
Button
<a class = "tab-item" ng-click="showDetails = ! showDetails">
<i class = "icon ion-paperclip"></i>
Attach
</a>
Div
<div class ="bar bar-footer" ng-if="showDetails" >
<div class = "tabs tabs-icon-bottom tabs-striped tabs-color-gray hide-on-keyboard-open" style="background-color: white;" >
<a class = "tab-item" ng-click="myCam()">
<i class = "icon ion-camera"></i>camera</a>
<a class = "tab-item" ng-click="pdfUpload()">
<i class = "icon ion-upload"></i>
Pdf
</a>
</div>
</div>
Link For the Updated fiddle
Updated Fiddle
Controller code
var SampleApp;
(function (SampleApp) {
var app = angular.module('sampleApp', ['ionic']);
app.controller('MainCtrl', function ($scope) {
$scope.toggleStretchedMode = function() {
$scope.showDetails= !$scope.showDetails;
}
});
})(SampleApp || (SampleApp = {}));
Html Code
<div>
<div ng-app="sampleApp" ng-controller="MainCtrl">
<ion-content style="display:block">
<div class="row" ng-if="showDetails" style="padding-left: 205px;padding-top: 128px;">
<div class="col col-33" style="text-align:center;">
<ul class="row" >
<li class="col" style=" display:inline;padding: 10px 15px;">
<a class = "tab-item" ng-click="myCam()">
<i class = "icon ion-camera"></i>
Camera
</a></li>
<li class="col" style=" display:inline;padding: 10px 15px;" >
<a class = "tab-item" ng-click="myCam()">
<i class = "icon ion-camera"></i>
Gallery
</a></li>
<li class="col" style=" display:inline;padding: 10px 15px;">
<a class = "tab-item" ng-click="pdfUpload()">
<i class = "icon ion-upload"></i>
Pdf
</a></li>
</ul>
</div>
</div>
</ion-content>
<div class ="bar bar-footer">
<div class = "tabs tabs-icon-bottom tabs-striped tabs-color-gray hide-on-keyboard-open" style="background-color: #11c1f3;">
<a class = "tab-item" ui-sref="app.homeApp">
<i class = "icon ion-home"></i>
Home
</a>
<a class = "tab-item" ng-click="myCam()">
<i class = "icon ion-camera"></i>
Camera
</a>
<a class = "tab-item" ng-click="toggleStretchedMode()">
<i class = "icon ion-paperclip"></i>
Attach
</a>
</div>
</div>
</div>
</div>
Hope It helps
Please try the following solution.
Everything was perfect in your fiddle code, I have just added ng-app and ng-controller. And then it worked.
var SampleApp;
(function (SampleApp) {
var app = angular.module('sampleApp', ['ionic']);
app.controller('MainCtrl', function (
$scope,
$ionicScrollDelegate,
$location
) {
});
})(SampleApp || (SampleApp = {}));
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://code.ionicframework.com/1.0.0-beta.9/css/ionic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://code.ionicframework.com/1.0.0-beta.9/js/ionic.bundle.min.js"></script>
</head>
<body ng-app="sampleApp" ng-controller="MainCtrl">
<ion-view hide-back-button="true">
<ion-content scroll="false" style="top:0px;margin-top: 45px;">
<div class="row" ng-show="showDetails">
<div class="col col-33" style="text-align:center;">
<ul class="row">
<li class="col" style=" display:inline;padding: 10px 15px;">
<a class="tab-item" ng-click="myCam()">
<i class="icon ion-camera"></i>
Camera
</a>
</li>
<li class="col" style=" display:inline;padding: 10px 15px;">
<a class="tab-item" ng-click="myCam()">
<i class="icon ion-camera"></i>
Gallery
</a>
</li>
<li class="col" style=" display:inline;padding: 10px 15px;">
<a class="tab-item" ng-click="pdfUpload()">
<i class="icon ion-upload"></i>
Pdf
</a>
</li>
</ul>
</div>
</div>
</ion-content>
<div class="bar bar-footer">
<div class="tabs tabs-icon-bottom tabs-striped tabs-color-gray hide-on-keyboard-open" style="background-color: #11c1f3;">
<a class="tab-item" ui-sref="app.homeApp">
<i class="icon ion-home"></i>
Home
</a>
<a class="tab-item" ng-click="myCam()">
<i class="icon ion-camera"></i>
Camera
</a>
<a class="tab-item" ng-click="showDetails = !showDetails">
<i class="icon ion-paperclip"></i>
Attach
</a>
</div>
</div>
</ion-view>
</body>
</html>
Related
I have a problem with the Bulma framework. I have a small navbar for desktop and want to add a navbar burger. But it doesn't work. I tried the js script created by Bulma as an example and one from a yt video. Both didn't work. Can somebody Please help me? Down will find the html part and the js script:
js/index.js
document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Add a click event on each of them
$navbarBurgers.forEach( el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
});
index.html
<script src="js/index.js"></script>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="index.html">
<h1 class="title">10.8</h1>
</a>
<a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
<div class="navbar-menu" id="navMenu">
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<!-- navbar items -->
</div>
</div>
</div>
</nav>
Well if watched a small video produced from Bulma, tried the code from theire website and watched another video. I also tried to write my own script but it also does'nt work.
I hope sb can help me to fix it cause this must be successfully really quick.
You have a div that doesn't close in the right place.
There is a div with duplicate className.
Properly closing and removing that div everything works as expected.
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Add a click event on each of them
$navbarBurgers.forEach(el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css" rel="stylesheet"/>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="index.html">
<h1 class="title">10.8</h1>
</a>
<a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu" id="navMenu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<!-- navbar items -->
</div>
</div>
</nav>
</body>
Currently i am building a storytelling website, where the client can iterate through several videos. However, there is also a page with chapters on the website. So when the client clicks on the next or previous button, the chapters should be lighten up on the chapter he currently is on.
At the moment i build a click counter, so the counter is counting up, when he clicked on next and counting down, when clicked on previous. I have 11 chapters, so 11 video's. I am checking the chapters by index. They are going from 0 to 11. When the client hits the next button, he's going to the next video and the click counter goes up with one.
At the moment i have trouble to connect this click counter to the current index of the chapter. So if the click counter goes to two for instance, the background of only chapter 2 (index 2) should be lighten up.
At the moment i have this:
<a href="#" class="vorige prev-rew button-sound">
<svg>icon</svg>
</a>
<a href="#" class="next prev-rew button-sound">
<svg> icon</svg>
</a>
<div class="marketing-chapter job-chapter">
<a href="#">
<div class="anchor-point chapter-1">
<p>1</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-2">
<p>2</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-3">
<p>3</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-4">
<p>4</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-5">
<p>5</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-6">
<p>6</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-7">
<p>7</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-8">
<p>8</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-9">
<p>9</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-10">
<p>10</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-11">
<p>11</p>
</div>
</a>
</div>
// Anchorpoint loop
var set = $(".anchor-point");
var length = set.length;
var ViewportCount = 1;
$('.prev-rew').on("click", function() {
if ($(this).hasClass('next')) {
console.log('klikkert next');
ViewportCount = ViewportCount + 1;
} else if ($(this).hasClass('vorige')) {
console.log('klikkert vorige');
ViewportCount = ViewportCount - 1;
}
set.each(function(index) {
index = ViewportCount;
console.log(index);
console.log(ViewportCount);
if(index == ViewportCount){
// Change the background-color of the number, connected to the index. So
current chapter will light up
}
});
});
To do what you require you can use the eq() method to directly select the element in the collection without a loop:
var set = $(".anchor-point");
var ViewportCount = 0;
$('.prev-rew').on("click", function() {
if ($(this).hasClass('next')) {
ViewportCount = ViewportCount + 1;
} else if ($(this).hasClass('vorige')) {
ViewportCount = ViewportCount - 1;
}
set.removeClass('active').eq(ViewportCount % set.length).addClass('active');
});
.active { background-color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Previous
Next
<div class="marketing-chapter job-chapter">
<a href="#">
<div class="anchor-point chapter-1 active"><p>1</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-2"><p>2</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-3"><p>3</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-4"><p>4</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-5"><p>5</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-6"><p>6</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-7"><p>7</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-8"><p>8</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-9"><p>9</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-10"><p>10</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-11"><p>11</p></div>
</a>
</div>
However, you can avoid the need for the counter variable and instead move the active class based on its current position in the DOM. The <a> elements wrapping the div can also be removed as it's invalid HTML, it makes the JS more straightforward and it's also not necessary in this case
$('.prev-rew').on("click", function() {
let $current = $('.active');
let $target = $current[$(this).data('action')]();
if ($target.length) {
$current.removeClass('active');
$target.addClass('active');
}
});
.active {
background-color: #C00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Previous
Next
<div class="marketing-chapter job-chapter">
<div class="anchor-point chapter-1 active"><p>1</p></div>
<div class="anchor-point chapter-2"><p>2</p></div>
<div class="anchor-point chapter-3"><p>3</p></div>
<div class="anchor-point chapter-4"><p>4</p></div>
<div class="anchor-point chapter-5"><p>5</p></div>
<div class="anchor-point chapter-6"><p>6</p></div>
<div class="anchor-point chapter-7"><p>7</p></div>
<div class="anchor-point chapter-8"><p>8</p></div>
<div class="anchor-point chapter-9"><p>9</p></div>
<div class="anchor-point chapter-10"><p>10</p></div>
<div class="anchor-point chapter-11"><p>11</p></div>
</div>
I have two divs of the same size, and when I click a button on one of the divs, it will get larger. I want to move the smaller div into the bottom-right corner of the larger div, and when I click the button again the divs will return to their original size and position.
Before:
--- ---
| 1 | | 2 |
--- ---
After:
---------
| 2 |
| ---|
| | 1 |
---------
Here's my javascript for resizing so far:
function resizeSubscriber() {
var subscriberPanel = document.getElementById('dvOtherPerson');
var publisherPanel = document.getElementById('dvYou');
var classSetting = subscriberPanel.getAttribute('class');
if (classSetting == 'col-xl-4') {
subscriberPanel.setAttribute('class', 'col-xl-12');
}
else {
subscriberPanel.setAttribute('class', 'col-xl-4');
}
}
here is my asp code
<div id="dvOtherPerson" class="col-xl-4">
<div>
<div class="m-portlet__head">
<div class="m-portlet__head-caption">
<div class="m-portlet__head-title">
<h3 class="m-portlet__head-text">
Rachel Hawkins
</h3>
</div>
</div>
<div class="m-portlet__head-tools">
<ul class="m-portlet__nav">
<li class="m-portlet__nav-item">
<a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
<a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
<i class="fa fa-volume-up text-success"></i>
</a>
<a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
<i class="fa fa-refresh"></i>
</a>
<a onclick="resizeSubscriber();" href="#" class="m-portlet__nav-link m-portlet__nav-link--icon">
<i class="fa fa-expand"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="m-portlet__body">
<img src="./img/temp/users/video_rachel.jpg" class="img-fluid" />
</div>
</div>
<%-- <div id="videos">
<div id="subscriber"></div>
</div>--%>
</div>
<div id="dvYou" class="col-xl-4">
<div class="m-portlet m-portlet--fit">
<div class="m-portlet__head">
<div class="m-portlet__head-caption">
<div class="m-portlet__head-title">
<h3 class="m-portlet__head-text">
Me
</h3>
</div>
</div>
<div class="m-portlet__head-tools">
<ul class="m-portlet__nav">
<li class="m-portlet__nav-item">
<a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
<i class="fa fa-microphone-slash text-danger"></i>
</a>
<a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
<i class="fa fa-refresh"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="m-portlet__body">
<div id="publisher"></div>
</div>
</div>
</div>
Use appendChild, and it will move the source element to a target element, e.g.
target_element.appendChild(source_element)
As commented, to apply different CSS style, do like this and the source_element will automatically change when inside the target_element
source_element {...}
target_element source_element {...}
If you can use jQuery, you can use the method append():
$(<OUTER_SELECTOR>).append($(<INNER_SELECTOR>));
I need to add the class 'active' to links depending on it matching the current URL. I made that work using this answer but i need to make it work also for dropdown links. This is the markup I'm using:
var full_path = location.href.split("#")[0];
$("#nav a").each(function() {
var $this = $(this);
if ($this.prop("href").split("#")[0] == full_path) {
$this.addClass("active");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="nav" class="ui large secondary inverted pointing menu">
<a class="toc item">
<i class="sidebar icon"></i>
</a>
Home
Server information
<div class="ui pointing dropdown link item">
<span class="text">Community</span>
<i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="forum.php">Forum</a>
<a class="item" href="market.php">Item Market</a>
<a class="item" href="gallery.php">Gallery</a>
<a class="item" href="support.php">Support</a>
<a class="item" href="helpdesk.php">Helpdesk</a>
<a class="item" href="houses.php">Houses</a>
<a class="item" href="deaths.php">Deaths</a>
<a class="item" href="killers.php">Killers</a>
</div>
</div>
<div class="ui pointing dropdown link item">
<span class="text">Shop</span>
<i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="buypoints.php">Buy points</a>
<a class="item" href="shop.php">Shop offers</a>
</div>
</div>
<div class="ui pointing dropdown link item">
<span class="text">Guilds<?php if ($config['guildwar_enabled'] === true) { ?> & Wars<?php } ?></span>
<i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="guilds.php">Guilds</a>
<?php if ($config[ 'guildwar_enabled']===t rue) { ?>
<a class="item" href="guildwar.php">Guild Wars</a>
<?php } ?>
</div>
</div>
<div class="ui pointing dropdown link item">
<span class="text">Library</span>
<i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="downloads.php">Downloads</a>
<a class="item" href="changelog.php">Changelog</a>
</div>
</div>
<div class="right item">
<a id="loginButton" class="ui blue inverted button">
<?php if (user_logged_in()===t rue) { echo 'Account'; } else { echo 'Log in';}?>
</a>
<div class="ui fluid transition login popup">
<?php if (user_logged_in()===t rue) { include 'layout/widgets/loggedin.php'; } else { include 'layout/widgets/login.php'; } ?>
</div>
<?php if (user_logged_in()===f alse) { echo '<a class="ui green inverted button" href="register.php">Register</a>'; } ?>
</div>
</div>
As you can see, dropdowns are using <span> tags, and they are showing the text of the dropdown. Is there a way to put the "name" of the link into that span when it's active ?
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!