i have the following code
<div class="form-horizontal" >
<div class="form-actions" id="sub" >
<button type="button" class="btn btn-primary" id="Schedulem" value="Schedule," name="Schedulem" > Schedule Maintenance </button>
<button type="button" class="btn" onclick="cancel()" > Cancel </button>
</div>
</div>
<div class="form-horizontal" >
<div class="form-actions" id="sub1" style="display :none" >
<button type="button" class="btn btn-primary" id="Schedule1" value="Schedule1" name="Schedule1" onclick="Schedule1()"> Schedule Maintenance </button>
<button type="button" class="btn" onclick="cancel()" > Cancel </button>
</div>
</div>
The problem is since i am using style="display :none" on the second Div class the schedule1 button and Cancel button are showing in different line. if we remove the style from the Div tag it will be inline. Any idea how to solve this?
am using the java script and based on certain conditions i will make the seconf DIV as visible
use
visibility:hidden
it will make then invisible but they will still keep their place in the document and you keep the formatting. display will make it vanish and no keep it place in the document flow, viability makes it invisible but still keeps its place in the flow.
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification:
The 'visibility' property specifies whether the boxes generated by an
element are rendered. Invisible boxes still affect layout (set the
'display' property to 'none' to suppress box generation altogether).
Here is a jsFiddle example (Scroll over the text box)
http://jsfiddle.net/joshnh/7JyRH/
good article on the topic:
http://joshnh.com/2011/07/30/display-none-vs-visibility-hidden/
You can do this as well, using style="display:inline-block":
<div class="form-horizontal" style="display:inline-block" >
<div class="form-actions" id="sub" style="display:inline-block" >
<button type="button" class="btn btn-primary" id="Schedulem" value="Schedule," name="Schedulem" > Schedule Maintenance </button>
<button type="button" class="btn" onclick="cancel()" > Cancel </button>
</div>
</div>
<div class="form-horizontal" style="display:inline-block" >
<div class="form-actions" id="sub1" style="display:inline-block" >
<button type="button" class="btn btn-primary" id="Schedule1" value="Schedule1" name="Schedule1" onclick="Schedule1()"> Schedule Maintenance </button>
<button type="button" class="btn" onclick="cancel()" > Cancel </button>
</div>
</div>
http://jsfiddle.net/6bFFf/1/
Related
I have problem as below:
<div class="btn-choice">
<button type="button" class="btn" id="active-all">All</button>
<button type="button" class="btn active" id="btn-a">A</button>
<button type="button" class="btn" id="btn-a">B</button>
<button type="button" class="btn" id="btn-a">C</button>
<button type="button" class="btn btn-default" id="btn-a">D</button>
</div>
$("#active-all").click(function(){
$('.btn').toggleClass('active');
});
I have added active class to button whenever I click active-all button. I found this active class still exist to every tab that I have those HTML button. So that I want refresh that div every time I clicked tab.
I try with jQuery load() and reload() but this seems not solving my problem.
UDATE
I have added active class to button when I clicked active-all button. I found this active class still exist even I go forward or backward to another page. So that I want to find a way refresh that div every time I go forward or backward to another page.
Need something like this?
$(".btn").click(function(){
if (this.id === 'active-all') {
$(".btn", $(this).parent()).toggleClass('active');
}
});
.active {
background-color: #4CAF50;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="firstTab">
<div class="btn-choice">
<button type="button" class="btn" id="active-all">All</button>
<button type="button" class="btn" id="btn-a">A</button>
<button type="button" class="btn" id="btn-a">B</button>
<button type="button" class="btn" id="btn-a">C</button>
<button type="button" class="btn btn-default" id="btn-a">D</button>
</div>
</div>
<div id="secondTab">
<div class="btn-choice">
<button type="button" class="btn" id="active-all">All</button>
<button type="button" class="btn" id="btn-a">A</button>
<button type="button" class="btn" id="btn-a">B</button>
<button type="button" class="btn" id="btn-a">C</button>
<button type="button" class="btn btn-default" id="btn-a">D</button>
</div>
</div>
I'm having trouble showing more than one button active to the user when using the bootstrap button class. I have two rows of buttons - I want the user to be able to select one value from each of the rows, and I want both selected buttons to show as active so that user can easily see the choices they selected. Currently, if the user selects one button, it becomes highlighted, but once they select another button from another row, the second button is then highlighted, but the first button no longer displays as active to the user.
So I have:
<div class="btn-group text-center">
<button type="button" class="btn btn-primary" value="row 1 choice 1" />
<button type="button" class="btn btn-primary" value="row 1 choice 2" />
</div>
<div class="btn-group text-center">
<button type="button" class="btn btn-primary" value="row 2 choice 1" />
<button type="button" class="btn btn-primary" value="row 2 choice 2" />
</div>
The user is directed to select one option from the first and second row and I just want both buttons to show they are active (by being indicating the darker color) once they are selected, instead of just one being able to be active at a time.
You first have to remove the class "active" from all the buttons and then add the "active" class to the pushed button:
<script>
$(".btn-primary").click(function () {
$(btn-primary").removeClass("active");
$(this).addClass("active");
});
</script>
You could just set the active class on them when they are clicked like this:
/* Latest compiled and minified CSS included as External Resource*/
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
body {
margin: 10px;
}
<div class="btn-group text-center">
<button type="button" class="btn btn-primary active" value="row 1 choice 1" />
<button type="button" class="btn btn-primary" value="row 1 choice 2" />
</div>
<div class="btn-group text-center">
<button type="button" class="btn btn-primary" value="row 2 choice 1" />
<button type="button" class="btn btn-primary active" value="row 2 choice 2" />
</div>
You need to toggle an active class on your buttons. Also there are problem around using a button element becuase they have default behavior when clicking them which messes the styling up. I have changed them to anchor tags and it works perfectly.
<div class="btn-group text-center">
<a class="btn btn-primary" data-value="row 1 choice 1"></a>
<a class="btn btn-primary" data-value="row 1 choice 2"></a>
</div>
<div class="btn-group text-center">
<a class="btn btn-primary" data-value="row 2 choice 1"></a>
<a class="btn btn-primary" data-value="row 2 choice 2"></a>
</div>
<script>
$(".btn-primary").click(function () {
$(this).toggleClass("active")
});
</script>
If you need to retrieve values from your anchor tags with javascript you can use html 5 data attribute as I have done:
html:
<a id="btn4" class="btn btn-primary" data-value="row 2 choice 2"></a>
Js:
$("#btn4").data("value")
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
<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.
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