This the HTML Markup i used to Display Tracks . i Have some Jquery to accomplish some of requirements . But Most importantly i cant figure out a way to Play / Pause Multiple instance audio using Jquery .i have asked this every same question before . as you might notice from my code im Jquery Noob . Tried hours of googling . But no Luck
<div class="track-item">
<span>Track Uploaded by - DJ Hardwell</span>
<div class="track-default-options">
<audio src="http://195.154.217.103:8117/;mp3"></audio>
<div class="track-total-time">0.00 | 48.37</div>
<div class="track-seek-bar"></div>
<button class="play btn btn-xs btn-primary"><i class="fa fa-play"></i> Play</button>
<button id="pause" class="btn btn-xs btn-success"><i class="fa fa-download"></i> Download</button>
<button class="btn btn-xs btn-danger share"><i class="fa fa-share"></i> Share</button>
<div class="track-uploaded-date">
<p>Uploaded on 3 days ago</p>
</div>
</div>
<div class="track-share-options" style="display: none">
<button type="button" class="btn btn-xs btn-danger share-close"><i class="fa fa-minus"></i>
Show Less
</button>
<br/>
<button class="btn btn-xs btn-facebook"><i class="fa fa-facebook"></i> | Facebook</button>
<button class="btn btn-xs btn-twitter"><i class="fa fa-twitter"></i> | Twitter</button>
<button class="btn btn-xs btn-google-plus"><i class="fa fa-google-plus"></i> | Google+
</button>
</div>
</div>
This is Jquery code that i used to change some button states and to hide and show share buttons
// ****************************** //
// Track - Play / Share //
// ****************************** //
// Share Button
$(document).on('click' , '.share' , function(event){
event.preventDefault();
$(this).closest('.track-default-options').fadeOut('slow' , function(){
$(this).next().closest('.track-share-options').fadeIn('slow');
});
});
$(document).on('click' , '.share-close' , function(event) {
event.preventDefault();
$(this).closest('.track-share-options').fadeOut('slow' , function(){
$(this).prev().closest('.track-default-options').fadeIn('slow');
});
});
// Play Button
$(document).on('click' , '.play' , function(event){
event.preventDefault();
$(this).html('<i class="fa fa-pause"></i> Pause');
$(this).addClass('playing');
$(this).prev('.track-seek-bar').addClass('track-seek-bar-active');
$(this).prevAll('.track-total-time').css('visibility' , 'visible');
});
// Pause Button
$(document).on('click' , '.playing' , function(){
$(this).html('<i class="fa fa-play"></i> Play');
$(this).removeClass('playing');
$(this).prev('.track-seek-bar').removeClass('track-seek-bar-active');
$(this).prevAll('.track-total-time').removeAttr('style');
});
Right Now Everything Just works fine . Buttons hide and shows etc . What i really need is to only play one audio at a time .
As an Example if an audio is already playing in the browser , if the user chooses to play another track while previously selected music is still playing it need to be paused and start the new selected audio immediately.
This is Previously asked Question on the same topic . But it's Very different now .My Previous Question . I have Tried get it working the with new HTML .No luck with it though. That why i'm here .
i also have a FIDDLE Setup. you can really see what's my actual requirement and what i cannot understand to do.
Since i guess i have written a horrible Jquery Code , if you can and have time point me out an better way to do it
Please Suggest me an answer for this . ill really appreciate it ! . Thanks
This trick do the job, but you will need to change your code to display play/pause on .play or .pause
$('audio').on('play', function(){
$('audio').not(this).trigger('pause')
})
Related
I use bootstrap 5. I try open offcanvas, and dont hide when I click button again.
<button data-bs-toggle="offcanvas" role="button">Add to Cart</button>
when I click button agian offcanvas close i dont have.
<div class="offcanvas offcanvas-end w-5 #ViewData["Pokaz"]" tabindex="-1" id="offcanvas" data-bs-scroll="true" data-bs-keyboard="false" data-bs-backdrop="false">
<div class="offcanvas-header">
<h6 class="offcanvas-title d-none d-sm-block" id="offcanvas">Your Order</h6>
<button type="button" class="btn-close btn btn-success text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
How to setting button by click a button again dont hide offcanvas.
only show when is closed.
Help me guy.
You can realize this using JavaScript and when pressing the button always showing the offcanvas:
<button role="button" onclick="new bootstrap.Offcanvas(document.getElementById('offcanvas')).show();">Add to Cart</button>
Read more about this here.
Of course, you can also write a separate function and call it (or add some checks before, whether it is open):
<button role="button" onclick="showOffcanvas()">Add to Cart</button>
function showOffcanvas() {
var myOffcanvas = document.getElementById('offcanvas');
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas);
bsOffcanvas.show();
}
Good luck!
So I have a simple PHP share button fo facebook and I want to add pixel event code in it that tracks the button when it's clicked
Here is the code for the button:
<div class="row" style="margin-top: 10px;">
<div class="col-md-5 col-md-offset-1">
<a target="_blank" class="btn btn-block btn-social c-btn-square c-btn-uppercase btn-md btn-facebook" href="{{$facebook_link}}">
<i class="fab fa-facebook"></i> Share on Facebook
Where should I exactly put the code for the event which is:
<script>
fbq('track', 'SubmitApplication');
</script>
Welcome. You must handle event when button click.
Try this:
<script type="text/javascript">
var facebookButton = document.querySelector('a.btn-facebook');
facebookButton.addEventListener("click", () => {
fbq('track', 'SubmitApplication');
});
</script>
I'm working on small angular project, and there are 3 buttons on my form, I would like to receive their title when they are clicked. They are clicked normally one by one, what I've tried so far:
Here is my html:
<div class="extra-btns">
<button type="button" title="Title 1" (click)="getMyTitleOne($event)" class="btn xbutton-square" style="font-size: 16px;"><i class="fas fa-newspaper fa-fw"></i></button>
<button type="button" title="Title 2" (click)="getMyTitleTwo($event)" class="btn xbutton-square"><i class="fas fa-fw"></i></button>
</div>
My typescript code:
getMyTitleOne($event) {
console.log($event.target.title);
}
getMyTitleTwo($event) {
console.log($event.target.title);
}
But in my console sometimes I get values and sometimes I don't, very weird, but most of the time values are undefined:
Thanks guys
Cheers
use template variables :
<button #button1 (click)="log(button1.title)" title="Hello, world !">Click me !</button>
Stackblitz
I have a button:
<button
class="btn btn-animated btn-default ban-user-btn"
id="btn-ban-username" // the username is generated by twig
data-nick="username" // the username is generated by twig
data-toggle="modal"
data-target="#statusModal"
>
Ban user
<i class="fa fa-ban"></i>
</button>
I need to change the button class from "btn-default ban-user-btn" to "btn-success unlock-user-btn".
When I do following in my javascript:
var button = $('#btn-ban-username);
button.addClass("btn-default");
button.addClass("ban-user-btn");
button.removeClass("btn-success");
button.removeClass("unlock-user-btn");
button.attr('id', 'btn-unlock-'+nick);
button.html("Unlock user <i class='fa fa-check'></i>");
I get the following:
<button
class="btn btn-animated btn-default ban-user-btn"
id="btn-unlock-username"
data-nick="username"
data-toggle="modal"
data-target="#statusModal"
>
Unlock user
<i class="fa fa-check"></i>
</button>
As you can see, the ID changes and the button content changes. The classes however do not.
Some ideas?
Cheers
You're adding classes that the button has and removing classes that the button doesn't have.
Try this:
$("#btn-ban-username")
.addClass("btn-success unlock-user-btn")
.removeClass("btn-default ban-user-btn");
In your JavaScript code you have to reverse the order of your addClass and removeClass. addclass function is used to add class to your html control and removeclass for removing class from an html contol.
You have to do this
var button = $('#btn-ban-username');
button.removeClass("btn-default");
button.removeClass("ban-user-btn");
button.addClass("btn-success");
button.addClass("unlock-user-btn");
button.attr('id', 'btn-unlock-dev');
button.html("Unlock user <i class='fa fa-check'></i>");
How do I make a Bootstrap dropdown appear when an ajacent button is pressed?
I have tried every combination of:
$('#branchToggle').trigger('click.bs.dropdown').dropdown('toggle');
$('#branchToggle').parent().addClass('open')
$('#branchToggle').next().show()
But I can't get it to work.
My html is:
<div class="btn-group">
<button id="activeBranchFilterBtn" type="button" class="btn btn-default btn-sm btn-149">Branch</button>
<button id="branchToggle" type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="branchFilter" class="dropdown-menu" role="menu">
<?PHP foreach ($branchList as $branchData) { ?>
<li data-branch-id="<?PHP echo $branchData->id;?>" data-branch-name="<?PHP echo $branchData->name;?>"><?PHP echo $branchData->name;?></li>
<?PHP } ?>
</ul>
</div>
To clarify, I want the list to show if the "Branch" button is pressed, just like it would if I clicked the normal trigger button.
If you want the drop-down to open only on click of the "Branch" button, do something like this
$('#activeBranchFilterBtn').on("click", function(){
$('ul.dropdown-menu').toggle();
});
JSFIDDLE
If you would like to get the drop-down when clicked anywhere on the complete block(either of the buttons), do this
$('.btn-group').on("click", function(){
$('ul.dropdown-menu').toggle();
});
JSFIDDLE
I guess the second one is what you need.
UPDATE: class="open" will be toggled on your .btn-group when a dropdown trigger is given from the button with data-toggle="dropdown" attribute. just add this attribute to the first button(Branch) and you will be good to go. Check this fiddle. Hope this helps.