This is what i'm trying:
As you will see, the collapse works well (I did it on html, using button classes), but now the thing is; for example, when I click the buttons of Jimi Hendrix div sound the other songs too, because they have the same Bootstrap class.
I tried to name the buttons of the different div's with different id's but doesn't work. The code:
//HTML
<body>
<div class="container">
<h2>Songs</h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Creedence Clearwater Revival<small> I Heard it Through the Grapevine</small></a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<div class="buttons">
<button type="button" class="btn btn-default btn-lg button-skip-backward">
<span class="glyphicon glyphicon-fast-backward"></span>
</button>
<button type="button" class="btn btn-default btn-lg button-pause">
<span class="glyphicon glyphicon-pause"></span>
</button>
<button type="button" class="btn btn-default btn-lg button-stop">
<span class="glyphicon glyphicon-stop"></span>
</button>
<button type="button" class="btn btn-default btn-lg button-play">
<span class="glyphicon glyphicon-play"></span>
</button>
<button type="button" class="btn btn-default btn-lg button-skip-forward">
<span class="glyphicon glyphicon-fast-forward"></span>
</button>
</div>
<audio src="CCRGrapevine.mp3" id="ccr"></audio></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Jimi Hendrix <small> Hey Joe</small></a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div class="buttons">
<button type="button" id= "enrera" class="btn btn-default btn-lg button-skip-backward">
<span class="glyphicon glyphicon-fast-backward"></span>
</button>
<button type="button" id= "pausa" class="btn btn-default btn-lg button-pause">
<span class="glyphicon glyphicon-pause"></span>
</button>
<button type="button" id= "stop" class="btn btn-default btn-lg button-stop">
<span class="glyphicon glyphicon-stop"></span>
</button>
<button type="button" id="play" class="btn btn-default btn-lg button-play">
<span class="glyphicon glyphicon-play"></span>
</button>
<button type="button" id="endavant" class="btn btn-default btn-lg button-skip-forward">
<span class="glyphicon glyphicon-fast-forward"></span>
</button>
</div>
<audio src="heyjoe.mp3" id="jimi"></audio></div>
</div>
</div>
</div>
Note that I tried to do this with the id's:
//JQuery and JS
$(document).ready(function() {
console.log("ready!");
var audioElement = $("#ccr")[0];
var audioElement2 = $("#jimi")[0];
$(".button-pause").on("click", function() {
$(".button-pause").blur();
$(".button-pause").addClass("active");
$(".button-play").removeClass("active");
audioElement.pause();
});
$(".button-play").on("click", function() {
$(".button-play").blur();
$(".button-play").addClass("active");
$(".button-pause").removeClass("active");
audioElement.play();
});
$(".button-stop").on("click", function() {
$(".button-stop").blur();
$(".button-play").removeClass("active");
$(".button-pause").removeClass("active");
audioElement.pause();
audioElement.currentTime = 0;
});
$(".button-skip-forward").on("click", function() {
$(".button-skip-fastword").blur();
audioElement.currentTime += 5;
});
$(".button-skip-backward").on("click", function() {
$(".button-skip-backward").blur();
audioElement.currentTime -= 5;
});
});
I tried to do this but all the songs are playing:
$("#pausa").on("click", function() {
$("#pausa").blur();
$("#pausa").addClass("active");
$("#play").removeClass("active");
audioElement.pause();
My question is, how can I disable, for example, the buttons of the first div when I click on another div, in order to play just the song i want?
You should be using $(this) to refer to a specific button
Try the following
$(".button-pause").on("click", function() {
$(this).blur();
$(this).addClass("active");
$(this).siblings(".button-play").removeClass("active");
var audioElement = $(this).siblings('audio');
audioElement.pause();
});
Then modify the other click handler accordingly
Hope it works
You can access the parent of the button that is clicked and use the id of that parent div element which is in your case collapse1 , collapse2 etc.
.parent() gives you the immediate parent element. Care must be taken while nesting and calling the .parent() function.
An example based on your submitted code:
$(".button-pause").on("click", function() {
var id = this.parent().parent().parent().attr('id');
$("#"+ id +" .button-pause").blur();
$("#"+ id +" .button-pause").addClass("active");
$("#"+ id +" .button-play").removeClass("active");
audioElement.pause();
});
You should apply the following code on all jquery .on() events.
Related
I am using the following code:
Here is the HTML for the navigation:
<li>Open... <p class="shortcut">(Ctrl + O)</p></li>
Here is the window that has the button:
<div class="panel panel-default ui-draggable" style="visibility: hidden" id="openDocument">
<div class="panel-heading ui-draggable-handle" id="openDocumentHandle">Open File <button class="btn btn-default btn btn-default btn-sm windowButtons" id="openDocumentClose"><i class="fa fa-close"></i></button></div>
<div class="panel-body">
<form>
<div class="form-group">
<label for="filesToOpen">Choose File to Open</label>
<select class="form-control" id="filesToOpen"></select>
</div>
<button type="button" class="btn btn-default btn-block" id="openBtn" onclick="filesystem.loadFloorplan()">Open File</button>
</form>
</div>
Here is the JS section:
var ui = new fp.FloorplanUI(myFloorplan, "ui", "myFloorplan", fp.GUI_STATE);
function floorplanUIHideShow(id, div) {
document.getElementById(id).addEventListener('click', function(e) {
ui.hideShow(div);
e.preventDefault();
});
}
floorplanUIHideShow('showOpenWindow', 'openDocument', 'openDocumentClose');
Each id has a button that needs to use the same ui.HideShow(); function.
I am unable to get this to work..
Any help would be great.
Thanks-
I have this code :
<div class="nav navbar-nav" id="filters">
<button class="btn btn-default navbar-btn active" data-filter="*">Tous</button>
<button class="btn btn-default navbar-btn" data-filter=".image">Photos</button>
<button class="btn btn-default navbar-btn" data-filter=".movie">Vidéos</button>
<button class="btn btn-default navbar-btn" data-filter=".text">Text Seulement</button>
<button class="btn btn-default navbar-btn" id="sort" data-sort-value="likes">Likes</button>
</div>
I would like select all buttons from div #filters except the only one with #sort, using jQuery's selector.
Currently I have tried to achieve this by following code.
$('#filters').not('#sort').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button:not("#sort")', function() {
$buttonGroup.find('.active').removeClass('active');
$( this ).addClass('active');
});
});
Can you help me ?
Any help in this would be greatly appreciated.
Use .not() in your selector and find buttons as $('#filters > button') by using Child Selector (“parent > child”)
Your question and code is bit confusing but It says that you want to apply the active class on button when it clicked and removed from other buttons.
The following click event will work on all the buttons except #sort.
$('#filters > button').not($('#sort')).click(function(){
$('#filters > button').removeClass('active');
$(this).addClass('active');
});
$('#filters > button').not($('#sort')).click(function(){
$('#filters > button').removeClass('active');
$(this).addClass('active');
});
.active{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav navbar-nav" id="filters">
<button class="btn btn-default navbar-btn active" data-filter="*">Tous</button>
<button class="btn btn-default navbar-btn" data-filter=".image">Photos</button>
<button class="btn btn-default navbar-btn" data-filter=".movie">Vidéos</button>
<button class="btn btn-default navbar-btn" data-filter=".text">Text Seulement</button>
<button class="btn btn-default navbar-btn" id="sort" data-sort-value="likes">Likes</button>
</div>
Use $("#filters *").not("#sort") selector.
Please check below snippet for more understanding.
$("#filters button").on("click",function(){
$("#filters *").not("#sort").removeClass('active');
$(this).not("#sort").addClass('active');
});
.active{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav navbar-nav" id="filters">
<button class="btn btn-default navbar-btn active" data-filter="*">Tous</button>
<button class="btn btn-default navbar-btn" data-filter=".image">Photos</button>
<button class="btn btn-default navbar-btn" data-filter=".movie">Vidéos</button>
<button class="btn btn-default navbar-btn" data-filter=".text">Text Seulement</button>
<button class="btn btn-default navbar-btn" id="sort" data-sort-value="likes">Likes</button>
</div>
You could use a css :not selector like this:
$("#filters button:not('#sort')")
I have wrote a jQuery to change the button colour to red when some one clicks on it. But that is only work with the first panel but its not working for the rest of the panels. In the first set of button it works but not only for everything. This is the jQuery part.
function DurationOnClick(element){
var buttonId = element.id;
var buttonName = element.name;
var buttonIds = ["1Hour", "30Min", "1Day" , "1Week", "1Month"];
var chartType = $('#chartType').val();
var idValue = $('#IdValue').val();
//after user click the option here we are changing the option black to red.
$(buttonIds).each(function(i, e) {
$('#'+e+'[name='+buttonName+']').css("color", "");
});
$('#'+buttonId+'[name='+buttonName+']').css("color", "Blue"); `
The html code is like this :
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Memory Consumption Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="30Min" onclick="return DurationOnClick(this)">30 mins</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Hour" style="color:Red" onclick="return DurationOnClick(this)">1 hour</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Day" onclick="return DurationOnClick(this)">1 day</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Week" onclick="return DurationOnClick(this)">1 week</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Month" onclick="return DurationOnClick(this)">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart3">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Load Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs" name="LoadAverage" id="30Min" onclick="return DurationOnClick(this)">30 mins</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Hour" style="color:Red" onclick="return DurationOnClick(this)">1 hour</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Day" onclick="return DurationOnClick(this)">1 day</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Week" onclick="return DurationOnClick(this)">1 week</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Month" onclick="return DurationOnClick(this)">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart2">
</div>
</div>
</div>
</div>
</div>
</div>
After removing the first panel the colour changing will happen for the next immediate chart but the charts below that one the changing colour is not happening. Any help to figure out the issue will be really appreciated.
Please use the below code. This will work perfect with your case:-
function DurationOnClick(ref) {
var buttonName = $(ref).attr("name");
$("button[name=" + buttonName + "]").each(function () {
$(this).css("color", "");
});
$(ref).css("color", "Blue");
}
As already explained the problem is you have duplicate IDs, the id-selector will select only the first element with the id so your code will always select the first set of elements.
But a more jQuery-ish solution will be use jQuery event handlers along with class(duration) to group them like
$('button.duration').click(function() {
$(this).addClass('selected').siblings('.selected').removeClass('selected');
})
.btn.btn-default.selected {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Memory Consumption Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="30Min">30 mins</button>
<button class="btn btn-default btn-xs duration selected" name="MemoryConsumption" data-id="1Hour">1 hour</button>
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="1Day">1 day</button>
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="1Week">1 week</button>
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="1Month">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart3">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Load Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="30Min">30 mins</button>
<button class="btn btn-default btn-xs duration selected" name="LoadAverage" data-id="1Hour">1 hour</button>
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="1Day">1 day</button>
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="1Week">1 week</button>
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="1Month">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart2">
</div>
</div>
</div>
</div>
</div>
</div>
You have duplicated ID. Your code is ok, but you did it wrong.
id attribute is considered unique.
classattribute is considered multiple.
You have put several same id, but CSS and JS are looking only for ONE, so they process the first (only) and leave.
Change id to class.
Example: class="30mins" will turn redall the "30mins" buttons.
Do it for every group you want to turn red on click.
You should not have duplicate ID in the HTML form. Consider using the first set of IDs only.
Apparently you cant have numbers as the first character of an ID or class for your css to apply. If you#re applying style to your 30min 1hour etc, you should consider renaming them. I'm not sure if this conflicts with JS as well. See this example:
<div class="char">char</div>
<div class="char1">char1</div>
<div class="1char">1char</div>
<div class="1111">1111</div>
JSFiddle
I want to expand and collapse div elements with same id seperately when i click different buttons.
here is my HTML code
<body>
<button id="button" type="button" class="btn btn-primary btn-block hidden-md hidden-sm hidden-lg" data-toggle="collapse" data-target="#dem">
<span class="glyphicon glyphicon-collapse-down"></span> Show Status
</button>
<div class="collapse" id="dem">
<p>This is first</p>
</div>
<button id="button" type="button" class="btn btn-primary btn-block hidden-md hidden-sm hidden-lg" data-toggle="collapse" data-target="#dem">
<span class="glyphicon glyphicon-collapse-down"></span> Show Status
</button>
<div class="collapse" id="dem">
<p>This is Second</p>
</div>
<button id="button" type="button" class="btn btn-primary btn-block hidden-md hidden-sm hidden-lg" data-toggle="collapse" data-target="#dem">
<span class="glyphicon glyphicon-collapse-down"></span> Show Status
</button>
<div class="collapse" id="dem">
<p>This is Third</p>
</div>
</body>
Here is my script
$(function(){
$('#dem').on('show.bs.collapse', function () {
$('#button').html('<span class="glyphicon glyphicon-collapse-up"></span> Hide Status');
})
$('#dem').on('hide.bs.collapse', function () {
$('#button').html('<span class="glyphicon glyphicon-collapse-down"></span> Show Status');
})
})
When I click the first button it expands and when I click second or third button the content of first button collapses.The content is not expanding for other buttons.I know I am missing some script code but i don't know what the code is.
IDs should always be DISTINCT.
Change these to classes ... since you are using jQuery, you can do something like this inside the click events ...
$(".className").hide()
$(".className").show()
$(".className").toggle()
Assuming they have different ID, the change would simply be something like ...
$("#button1").on('click', function() {
if ($(this).is(":visible")) {
$(".className").hide()
} else {
$(".className").show()
}
});
Can you please take a look at this demo and let me know why the
$(".onealert").on("click",function(){
alert("You clicked on A");
});
is not functioning?
here is the code I have :
<div class="the-box">
<div class="pull-right btn-group btn-group-sm" id="downloadSelect">
<button type="button" class="btn btn-default">1</button>
<button href="#" class="trigger btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
</div>
<div class="head hide">Alphabet Select</div>
<div class="content hide">
<div class="form-group">
<div class="btn-group btn-group-sm">
<button type="button" id="1Download" class="btn btn-default onealert">A</button>
<button type="button" id="2Download" class="btn btn-default">B</button>
<button type="button" id="3Download" class="btn btn-default">C</button>
</div>
</div>
</div>
</div>
I am not getting any error message too!
Thanks
That's because Bootstrap builds new markup for the little dialog as it appears, using the hidden markup as a template only, which means it's dynamic content that didn't exist when you added the event handler, and you'll need a delegated handler
$('.the-box').on("click", ".onealert", function(){
alert("You clicked on A");
});
FIDDLE