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
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-
Here I have tried to show the buttons in a circular shape using bootstrap, CSS, and HTML5. I want it in exact circular shape. Friends, can you please fix it. Please try to help me I want it in responsive too. Below is my code kindly go through it. Here I have tried to show the buttons in a circular shape using bootstrap, CSS, and HTML5.
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Product
identification</i></button>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Cataloguing, listing <br> and pricing</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Cataloguing, listing <br> and pricing</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Front ending <br> end customers</i></button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="" style="font-size:17px;"><b>ZRPL</b></i></button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Enhance product <br> visibility and deals</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Returns and ARB management</i></button>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Logistical
support</i></button>
</div>
</div>
</div>
Add this css style in your button. It will make a circular shape on you button. you can give any width and height value on your button. just make sure that height and width should have same value.
width:170px;
height:170px;
border-radius:50%
The main idea:
Vertical buttons group list where each button fully fills parent by itself.
Problem:
split button dropdown don't do what I need. Adding .btn-block to button/button-group didn't resolve problem (dropdown moves to new line as separated button).
What I have:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="btn-group">
<button type="button" class="btn btn-info">
Button 1
</button>
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
1
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 2
</button>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 3
</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Problem:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="btn-group btn-block">
<button type="button" class="btn btn-block btn-info">
Button 1
</button>
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
1
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 2
</button>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 3
</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
What need to do, to solve problem with splitted dropdown button? Like that:
You can do it by adding btn-block to the btn group. and also to the button itself. but it will move the menu opener to a new line. so I made a little trick you can see here:
jsfiddle.net/u753bbsg/
<div class="row">
<div class="col-md-8">
<h3 >
<button type=submit class="btn btn-primary btn-lg btn-block" .button><a href = "mrequest.php">make a request</button>
</h3>
</div>
</div>
<div class="row">
<div class="col-md-8"> <h3>
<button type=submit class="btn btn-primary btn-lg btn-block" .button><a href = "mviewreq.php">view requests</button>
</h3>
</div>
</div>
<div class="row">
<div class="col-md-8"> <h3>
<button type=submit class="btn btn-primary btn-active btn-lg btn-block" .button><a href = "mviewstaff.php">Quotation requests</button>
</h3>
</div>
How can I change the button to active when some particular button is clicked , and i also want to use same thing on the navigation tabs too. and make it active too, please can some post any jquery or some thing like that so I can use it. I have searched on internet about it but i am unable to understand it
Add a bootstrap Active class using jquery
<button id="btn1" type=submit class="btn btn-primary btn-lg btn-block" .button>
$('#btn1').on('click', function (e) {
$('#btn1').each(function () {
$(this).addClass('active');
})
});
This works well with the navigation , if you replace the ElementId with li.
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.