Hello guys I have some code:
<div class="a">
<div class="btn-group">
<button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
<button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
<button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>
</div>
</div>
<div class="b">
<div class="btn-group">
<button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
<button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
<button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>
</div>
</div>
When i use $("button.btn.approve").addClass("disabled"); the buttons from div a and div b are disabled. How to disabled button-approve only from div a?
If you click the button, you only want to add class to the buttons in the same group?
If so do this:
$('.btn-group .btn').click(function(){
$(this).parent().children('.btn').addClass('disabled');
});
.disabled {
color: #bbb;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="a">
<div class="btn-group">
<button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
<button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
<button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>
</div>
</div>
<div class="b">
<div class="btn-group">
<button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
<button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
<button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>
</div>
</div>
You just have to change your selector and make it more general to include your .a class:
$(".a > .btn-group > button.btn.approve").addClass("disabled");`
Select buttons only within the div has class a by updating the selector.
$("div.a button.btn.approve").addClass("disabled");
Try something like this :
$(".a button.btn.approve").addClass("disabled");
.b>.button.btn.approve
You need to define exact element because
button.btn.approve
Matches all buttons, you can add additional class or ID too
Related
I am trying to show a line of text under a row of buttons. The text shown depends on the button you hover over. I'm having trouble using .hover() and .show() with my buttons and my text. I want to have it so the text is on a line below the buttons and if you are not hovering on a button, no text is shown. Once you click the button, the text associated with it stays on the page. I'm using Bootstrap, and as of now I have the classes of the various text possibilities hidden using CSS display:none. When I tried to hide them using jQuery under the document.ready, I couldn't seem to hide them. Perhaps it is how I have the text set up in the html code? Below is a link to the JSFiddle. Thank you in advance!
HTML
<body>
<div class="container-fluid text-center">
<div class="row">
<h1>Title</h1>
</div>
<div class="row">
<div class="col-xs-5ths">
<button type="button" class="btn btn-primary btn-circle btn-1"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-info btn-circle btn-2"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-success btn-circle btn-3"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-warning btn-circle btn-4"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-danger btn-circle btn-5"></button>
</div>
</div>
<div class="row btn-text">
<div class="b-1-text b-text">
<h3>Button 1 Text</h3>
</div>
<div class="b-2-text b-text">
<h3>Button 2 Text</h3>
</div>
<div class="b-3-text b-text">
<h3>Button 3 Text</h3>
</div>
<div class="b-4-text b-text">
<h3>Button 4 Text</h3>
</div>
<div class="b-5-text b-text">
<h3>Button 5 Text</h3>
</div>
</div>
</div>
</body>
JavaScript
$('.btn-1').hover(function(){
$('.b-1-text').show();
});
$('.btn-2').hover(function(){
$('.b-2-text').show();
});
$('.btn-3').hover(function(){
$('.b-3-text').show();
});
$('.btn-4').hover(function(){
$('.b-4-text').show();
});
$('.btn-5').hover(function(){
$('.b-5-text').show();
});
CSS
.col-xs-5ths {
width: 20%;
float: left;
}
.b-1-text{
display: none;
}
.b-2-text{
display: none;
}
.b-3-text{
display: none;
}
.b-4-text{
display: none;
}
.b-5-text{
display: none;
}
https://jsfiddle.net/anbenya/h7fua94s/2/
You can simplify this quite a bit and just have a single $.hover(). Updated your code to reflect that with a data-id attribute on the buttons that will toggle the appropriate text box.
And you can toggle a .selected class to the text boxes when you click on a button that will make that text box always shown until you click the button again.
$(document).ready(function() {
$('.btn').hover(function() {
var id = $(this).attr('data-id');
$('.b-' + id + '-text').show();
}, function() {
$('.b-text').hide();
}).on('click',function() {
var id = $(this).attr('data-id');
$('.b-' + id + '-text').toggleClass('selected');
});
});
.col-xs-5ths {
width: 20%;
float: left;
}
.b-text {
display: none;
}
.selected {
display: block!important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container-fluid text-center">
<div class="row">
<h1>Title</h1>
</div>
<div class="row">
<div class="col-xs-5ths">
<button type="button" class="btn btn-primary btn-circle btn-1" data-id="1"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-info btn-circle btn-2" data-id="2"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-success btn-circle btn-3" data-id="3"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-warning btn-circle btn-4" data-id="4"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-danger btn-circle btn-5" data-id="5"></button>
</div>
</div>
<div class="row btn-text">
<div class="b-1-text b-text">
<h3>Button 1 Text</h3>
</div>
<div class="b-2-text b-text">
<h3>Button 2 Text</h3>
</div>
<div class="b-3-text b-text">
<h3>Button 3 Text</h3>
</div>
<div class="b-4-text b-text">
<h3>Button 4 Text</h3>
</div>
<div class="b-5-text b-text">
<h3>Button 5 Text</h3>
</div>
</div>
</div>
</body>
Firstly, there was a missing ( at the end and secondly JQuery wasn't selected in your JSFiddle.
$(document).ready(function() {
$('.btn-1').hover(function() {
$('.b-1-text').show();
});
$('.btn-2').hover(function() {
$('.b-2-text').show();
});
$('.btn-3').hover(function() {
$('.b-3-text').show();
});
$('.btn-4').hover(function() {
$('.b-4-text').show();
});
$('.btn-5').hover(function() {
$('.b-5-text').show();
});
})
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
I have four divs, the first is showing on load of the site. I am currently hiding the other three on load with CSS (display: none)
Within that first div that is showing, I have a button that on click, I want to hide the current div and then show the next div.
<div id="one">
<h3>Placeholder</h3>
<form>
<button id="next1" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes One-->
<div id="two">
<h3>Placeholder</h3>
<form>
<button id="next2" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes Two-->
<div id="three">
<h3>Placeholder</h3>
<form>
<button id="next3" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes Three-->
<div id="four">
<h3>Placeholder</h3>
</div><!--Closes Four-->
So im looking to create some Jquery to make this happen.
Here's the janky code I have that doesnt really work at all...
$("#next1").click(function(){
$("#two").show();
$("#one").hide();
});
$("#next2").click(function(){
$("#three").show();
$("#two").hide();
});
$("#next3").click(function(){
$("#four").show();
$("#three").hide();
});
Forgot CSS, my apologies!
#two, #three, #four {
display: none;
}
I assume I dont need to explicitly say to hide all three divs every time due to CSS already hiding two through four, and then altering one at a time through Jquery.
Thank you ahead of time!
This should do it:
(you used classes instead of ids for your elements)
$("#next1").click(function(){
$("#two").show();
$("#one").hide();
});
$("#next2").click(function(){
$("#three").show();
$("#two").hide();
});
$("#next3").click(function(){
$("#four").show();
$("#three").hide();
});
#two, #three, #four {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one">
<h3>Placeholder 1</h3>
<form>
<button id="next1" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes One-->
<div id="two">
<h3>Placeholder 2</h3>
<form>
<button id="next2" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes Two-->
<div id="three">
<h3>Placeholder 3</h3>
<form>
<button id="next3" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes Three-->
<div id="four">
<h3>Placeholder 4</h3>
</div><!--Closes Four-->
So this is the simple query which you are looking after
$(".btn-default").click(function(){
$(this).closest('div').hide(); //Gets the closest div associated with your button click
$(this).closest('div').next('div').show(); //hide the next div
});
try this
$("button.btn-default").click(function(){
$(this).closest('div').hide();
$(this).closest('div').next('div').show();
});
#two, #three, #four {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one">
<h3>Placeholder 1</h3>
<form>
<button id="next1" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes One-->
<div id="two">
<h3>Placeholder 2</h3>
<form>
<button id="next2" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes Two-->
<div id="three">
<h3>Placeholder 3</h3>
<form>
<button id="next3" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes Three-->
<div id="four">
<h3>Placeholder 4</h3>
</div><!--Closes Four-->
It's not necessary to give each div it's own class or ID.
You could give them all the same class and use the jQuery eq: filter to choose the correct div.
Example code:
$(".custom button").click(function(){
var nextDiv = $(this).attr('data-id'); // Usually a +1 for the next div, but since eq filter is zero based, it works in this case.
$('.custom').hide();
$('.custom:eq(' + nextDiv + ')').show();
});
Working example: https://jsfiddle.net/ore5h6tk/
Another example, hiding all but the first with CSS: https://jsfiddle.net/ore5h6tk/1/
Hope this helps.
Actually there is nothing wrong with your code .Just make the four divs looks difference.
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.
I have a main template to do some wizard like stepping through some templates:
<div ng-controller="StepController">
<div ng-switch="step">
<div ng-switch-when="1">
<div ng-controller="ImportController">
<div ng-include src="'static/javascripts/import/upload.html'">
</div>
<button type="button" class="btn btn-success btn-s" ng-click="setStep(2)"> Next Step</button>
</div>
<div ng-switch-when="2">
<div ng-include src="'static/javascripts/authentication/blank.html'">
<button type="button" class="btn btn-success btn-s" ng-click="setStep(3)"> Next Step</button>
</div>
<div ng-switch-when="3">
<div ng-include src="'static/javascripts/authentication/blank.html'">
<button ng-click="setStep(3)"></button>
</div>
</div>
However when I click on the first button to render the next template I get the error
Controller 'ngSwitch', required by directive 'ngSwitchWhen', can't be found
When I look at the source after clicking the button the ng-switch div tag is there so I am not sure why it is not working.
I'm pretty sure you're missing some closing elements. I reformatted the code as written.
<div ng-controller="StepController">
<div ng-switch="step">
<div ng-switch-when="1">
<div ng-controller="ImportController">
<div ng-include src="'static/javascripts/import/upload.html'">
</div>
<button type="button" class="btn btn-success btn-s" ng-click="setStep(2)"> Next Step</button>
</div>
<div ng-switch-when="2">
<div ng-include src="'static/javascripts/authentication/blank.html'">
<button type="button" class="btn btn-success btn-s" ng-click="setStep(3)"> Next Step</button>
</div>
<div ng-switch-when="3">
<div ng-include src="'static/javascripts/authentication/blank.html'">
<button ng-click="setStep(3)"></button>
</div>
</div>
With the missing elements
<div ng-controller="StepController">
<div ng-switch="step">
<div ng-switch-when="1">
<div ng-controller="ImportController">
<div ng-include src="'static/javascripts/import/upload.html'">
</div>
<button type="button" class="btn btn-success btn-s" ng-click="setStep(2)"> Next Step</button>
</div>
</div>
<div ng-switch-when="2">
<div ng-include src="'static/javascripts/authentication/blank.html'">
<button type="button" class="btn btn-success btn-s" ng-click="setStep(3)"> Next Step</button>
</div>
</div>
<div ng-switch-when="3">
<div ng-include src="'static/javascripts/authentication/blank.html'">
<button ng-click="setStep(3)"></button>
</div>
</div>
</div>
</div>
The issues is that in the incorrect code, the second and third ng-switch-when elements are not directly below the ng-switch element. ng-switch-when looks at it's parent element for the ng-switch statement, which is missing.