<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.
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-
How can I use jquery to swap div , I want to if i click botton it'll desplay lay-out-sw and if I click en it should swap
In my html
<div class="layout-sw">
sw
</div>
<div class="layout-en">
en
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-info btn-language btn-sw">SW</button>
<button type="button" class="btn btn-default btn-language btn-en">EN</button>
</div>
I use this jquery but i got some error
<script type="text/javascript">
$(function() {
$('.layout-en').hide();
$('.btn-language').on('click',function(e){
$('.btn-language').removeClass('btn-info').addClass('btn-default');
$(this).removeClass('btn-default').addClass('btn-info');
$('.layout-sw,.layout-en').hide();
($(this).text()=='SW') ? $('.layout-sw').show() : $('.layout-en').show();
})
$('.btn-on-off').on('click',function(e){
$(this).closest('.btn-on-off-widget').find('.btn-value').val($(this).attr('value'));
$(this).next('.btn-on-off').removeClass('btn-primary btn-gray').addClass('btn-default');
$(this).prev('.btn-on-off').removeClass('btn-primary btn-gray').addClass('btn-default');
if($(this).attr('value')==0){
$(this).removeClass('btn-default').addClass('btn-gray');
}else{
$(this).removeClass('btn-default').addClass('btn-primary');
}
})
});
</script>
You can simply use show() and hide() function of jQuery as below.
$(document).ready(function() {
$('.layout-en').hide();
$('.btn-sw').click(function() {
$('.layout-sw').show();
$('.layout-en').hide();
});
$('.btn-en').click(function() {
$('.layout-en').show();
$('.layout-sw').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="layout-sw">
sw
</div>
<div class="layout-en">
en
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-info btn-language btn-sw">SW</button>
<button type="button" class="btn btn-default btn-language btn-en">EN</button>
</div>
This is my HTML code:
<div class="panel panel-default">
<div class="panel-heading">
Datensätze
<button type="button" class="btn btn-xs btn-success pull-right" id="command-add" data-row-id="1">
<span class="glyphicon glyphicon-plus"></span> bla</button>
<button type="button" class="btn btn-xs btn-info pull-right" id="command-import" data-row-id="1">
<span class="glyphicon glyphicon-hdd" href="javascript:void(0);" onclick="$('#importFrm').slideToggle();" </span> blu</button>
<div class="clearfix"></div>
</div>
<div class="panel-body">
<form action="script.php" method="post" enctype="multipart/form-data" id="importFrm">
<input type="file" name="file" />
<input type="submit" class="btn btn-primary" name="importSubmit" value="go!">
</form>
</div>
</div>
</div>
Fiddle: https://jsfiddle.net/ddt3skr6/
As you can see, I want to show the import option only after clicking the import button. I set the link, but now the font of this button is very ugly...
Maybe someone could help me finding a solution for the correct function and font of this button.
You didn't close your <span> tag after the button that has id="command-import".
Also in your case you only need to slide it down, so firstly it has to be slide up then, on click you can slide it down.
You can check this demo you will have to click the HDD icon "Datensätze importieren" for toggle.
This tag <span class="glyphicon glyphicon-hdd" href="javascript:void(0);" onclick="$('#importFrm').slideToggle();" There was no end character >
And Last div in last line is useless.
Demo
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
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