Is it possible to differentiate between a group of buttons? Given the following buttons.
<div id="slideout_inner">
<h2>Select Size</h2>
<p id="group1">
<button type="button" class="btn btn-primary btn-lg">Small $2.50</button>
<button type="button" class="btn btn-default btn-lg">Medium $3.50</button>
<button type="button" class="btn btn-default btn-lg">Large $4.50</button>
</p>
<h2>Select Milk</h2>
<p>
<button type="button" class="btn btn-default btn-lg">Full</button>
<button type="button" class="btn btn-default btn-lg">Trim</button>
<button type="button" class="btn btn-default btn-lg">Soy</button>
</p>
<button type="button" class="btn btn-primary btn-lg btn-block">Done</button>
<button type="button" class="btn btn-danger btn-lg btn-block cancelOrder">Cancel</button>
</div>
</div>
If I do the following I can highlight the selected button in group1
$('#group1 button').on("click", function(){
$('#group1 button').removeClass("btn-primary").addClass("btn-default");
$(this).removeClass("btn-default").addClass('btn-primary');
})
I expect the button list to be dynamic so I want to select buttons with <p> to highlight separately so remove the #group selector and just highlight buttons within each <p>.
So in this example I could highlight Medium $3.50 and then highlight Soy independently.
Try this code:
$(document).ready(function () {
$("button").on("click", function () {
$(this).siblings("button").removeClass("btn-primary").addClass("btn-default");
$(this).removeClass("btn-default").addClass('btn-primary');
});
});
Try selecting only children of the parent <p> instead of all #group1 buttons.
$(this).parent().find("button").removeClass("btn-primary").addClass("btn-default");
This way you are only accessing a subset of buttons within the parent element, instead of running the query on the entire DOM.
You can use .siblings to select all sibling elements so you can find all sibling elements of the clicked .btn element:
$("p .btn").on("click", function() {
$(this).siblings(".btn").removeClass("btn-primary").addClass("btn-default");
$(this).removeClass("btn-default").addClass('btn-primary');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideout_inner">
<h2>Select Size</h2>
<p id="group1">
<button type="button" class="btn btn-primary btn-lg">Small $2.50</button>
<button type="button" class="btn btn-default btn-lg">Medium $3.50</button>
<button type="button" class="btn btn-default btn-lg">Large $4.50</button>
</p>
<h2>Select Milk</h2>
<p>
<button type="button" class="btn btn-default btn-lg">Full</button>
<button type="button" class="btn btn-default btn-lg">Trim</button>
<button type="button" class="btn btn-default btn-lg">Soy</button>
</p>
<button type="button" class="btn btn-primary btn-lg btn-block">Done</button>
<button type="button" class="btn btn-danger btn-lg btn-block cancelOrder">Cancel</button>
</div>
</div>
You can use :contains() selector to identify which button is clicked. and then use the siblings() selector.
$( "button:contains('Small $2.50')" ).siblings()
Better approach would be to use different classes for each group. But the above should get you going.
Related
How do I coding overflow-y: visible with overflow-x: scroll?
The number of buttons can vary and when there are too many of them, they scroll horizontally. If I clicked Dropdown button, then I want to make overflow-y: visible in div. But now, dropdown lists are hidden in div.
How do I change?
My Code part
html
<div class="container-fluid fill-height">
<div class="navbar navbar-expand scroll" role="group">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" id="testDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu" aria-labelledby="testDropdown">
<a class="dropdown-item" href="#">Menu</a>
</div>
</div>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
</div>
</div>
css
.scroll {
overflow-x: scroll;
overflow-y: visible;
}
Codepen live sample here
One last thing:
From the bootstrap official doc (http://getbootstrap.com/components/#dropdowns-alignment):
May require additional positioning
Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain overflow properties or appear out of bounds of the viewport. Address these issues on your own as they arise.
https://github.com/davidstutz/bootstrap-multiselect/issues/411
https://www.bootply.com/YvePJTDzI0
jquery-confirm version: v3.3.0 git:craftpip/jquery-confirm
jsfiddle for tests https://jsfiddle.net/bdtx2ub2/
<div class="jconfirm-buttons">
<button type="button" class="btn btn-info btn-block">Update</button>
<button type="button" class="btn btn-danger btn-block">Delete</button>
<button type="button" class="btn btn-default btn-block">Cancel</button>
</div>
Can you help me... how can I add to div with class jconfirm-buttons my class? Is there are any solution like columnClass or btnClass for this div?
I want to justify my buttons in this div by adding bootstrap class btn-block to make div justified
<div class="jconfirm-buttons btn-block">
<button type="button" class="btn btn-info btn-block">Update</button>
<button type="button" class="btn btn-danger btn-block">Delete</button>
<button type="button" class="btn btn-default btn-block">Cancel</button>
</div>
Before
What I want to do
How can I do this? Is there are any solution without javascript? Or how can I do it with js (thinking that I can justify them binding this javascript on event "onOpen")?
Here jsfiddle link. This solution not good but still work.
onOpenBefore:function(){
this.buttons.close.el[0].parentNode.className+=" btn-block";
},
In this plunk I have an Angular UI Datepicker that uses a template. I need to change the colors of the "Today", "Clear" and "Close" buttons but changing them in popup.html doesn't work. It should show gray, orange and blue buttons.
I changed from
<li ng-if="showButtonBar" class="uib-button-bar">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-info uib-datepicker-current" ng-click="select('today', $event)" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
<button type="button" class="btn btn-sm btn-danger uib-clear" ng-click="select(null, $event)">{{ getText('clear') }}</button>
</span>
<button type="button" class="btn btn-sm btn-success pull-right uib-close" ng-click="close($event)">{{ getText('close') }}</button>
</li>
to
<li ng-if="showButtonBar" class="uib-button-bar">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-default uib-datepicker-current" ng-click="select('today', $event)" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
<button type="button" class="btn btn-sm btn-warning uib-clear" ng-click="select(null, $event)">{{ getText('clear') }}</button>
</span>
<button type="button" class="btn btn-sm btn-primary pull-right uib-close" ng-click="close($event)">{{ getText('close') }}</button>
</li>
Note that I changed the button class names to change the color, but when I inspect in the browser, the datepicker is still using the old classes. How to fix this?
To set a custom popup template use datepicker-popup-template-url attribute, for example:
<input datepicker-popup-template-url="popup.html" type="text" class="form-control" is-open="true" ng-model="dt" uib-datepicker-popup="MM-dd-yyyy"
datepicker-options="dateOptions" close-text="Close" popup-placement="bottom-left" on-open-focus="false" />
Demo
Im new in JS and Jquery.
I have been trying to set an event to all buttons in the same class, meanwhile I'm tryinh to get the value of each button.
In my HTML I got:
<div id="highlightButtons">
<button type="button" class="btn btn-primary" value="1">1</button>
<button type="button" class="btn btn-primary" value="2">2</button>
<button type="button" class="btn btn-primary" value="3">3</button>
<button type="button" class="btn btn-primary" value="4">4</button>
<button type="button" class="btn btn-primary" value="5">5</button>
<button type="button" class="btn btn-primary" value="6">6</button>
<button type="button" class="btn btn-primary" value="7">7</button>
<button type="button" class="btn btn-primary" value="8">8</button>
<button type="button" class="btn btn-primary" value="9">9</button>
</div>
And in my JS I tried this:
(function() {
'use strict'
var all_hl_btns = $('#highlightButtons');
all_hl_btns.click(function(){
var value = $(this).text();
alert(value);
});
}());
At this point, I'm just trying get the value of each button that I click, but when I click in any button, I got a text of numbers (1 to 9) in a Column.
I would appreciate any kind of help.
Thank you in advance!
You trying to add click event to #highlightButtons and when you click on it, javascript get text of it that is 123456789. You need to add click event to buttons. In the case, your selector changed to $('#highlightButtons > button')
(function() {
'use strict'
var all_hl_btns = $('#highlightButtons > button');
all_hl_btns.click(function(){
var value = $(this).text();
alert(value);
});
}());
var all_hl_btns = $('#highlightButtons > button');
all_hl_btns.click(function(){
var value = $(this).text();
console.log(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="highlightButtons">
<button type="button" class="btn btn-primary" value="1">1</button>
<button type="button" class="btn btn-primary" value="2">2</button>
<button type="button" class="btn btn-primary" value="3">3</button>
<button type="button" class="btn btn-primary" value="4">4</button>
<button type="button" class="btn btn-primary" value="5">5</button>
<button type="button" class="btn btn-primary" value="6">6</button>
<button type="button" class="btn btn-primary" value="7">7</button>
<button type="button" class="btn btn-primary" value="8">8</button>
<button type="button" class="btn btn-primary" value="9">9</button>
</div>
I am using Bootstrap 3.3.7.
I have used and to add content to the page.
When I use container-fluid, it will not span the content across the page but will limit the size to the page center area.
The same thing happened when I used container. It spans to the outside of the page> My screen resolution is 1366 x 768.
This is the code I have used
<div class="container">
<h4>Bootstrap Buttons</h4>
<!-- The Large size buttons -->
<p>
<button type="button" class="btn btn-default btn-lg">Default</button>
<button type="button" class="btn btn-primary btn-lg">Primary</button>
<button type="button" class="btn btn-success btn-lg">Success</button>
<button type="button" class="btn btn-info btn-lg">Info</button>
<button type="button" class="btn btn-warning btn-lg">Warning</button>
<button type="button" class="btn btn-danger btn-lg">Danger</button>
<button type="button" class="btn btn-link btn-lg">Link</button>
</p>
<!-- The default size buttons -->
<p>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</p>
<!-- The small size buttons -->
<p>
<button type="button" class="btn btn-default btn-sm">Default</button>
<button type="button" class="btn btn-primary btn-sm">Primary</button>
<button type="button" class="btn btn-success btn-sm">Success</button>
<button type="button" class="btn btn-info btn-sm">Info</button>
<button type="button" class="btn btn-warning btn-sm">Warning</button>
<button type="button" class="btn btn-danger btn-sm">Danger</button>
<button type="button" class="btn btn-link btn-sm">Link</button>
</p>
<!-- The small size buttons -->
<p>
<button type="button" class="btn btn-default btn-xs">Default</button>
<button type="button" class="btn btn-primary btn-xs">Primary</button>
<button type="button" class="btn btn-success btn-xs">Success</button>
<button type="button" class="btn btn-info btn-xs">Info</button>
<button type="button" class="btn btn-warning btn-xs">Warning</button>
<button type="button" class="btn btn-danger btn-xs">Danger</button>
<button type="button" class="btn btn-link btn-xs">Link</button>
</p>
<!-- Bootstrap container & container-fluid -->
<!-- Bootstrap container example -->
<div class="container bootcontainer">
<h1>Hello, world! - Using Container</h1>
</div>
<!-- Bootstrap container-fluid example -->
<div class="container-fluid bootcontainerfluid">
<h1>Hello, world! - Using Container Fluid</h1>
</div>
This is the container that contains the other ones, so:
<!--Bootstrap Modal (Dialog Box / Pop-up Window) Example-->
<div class="container-fluid">
...
Then replace container with container-fluid everywhere you need it, worked for me.
I found the answer. Actually it's an HTML break. I hadn't put the <div> tag after declaring the 'Bootstrap Button Example'.
Thanks anyway!
Regards,
Chiranthaka