I have a list of options the user can choose, and when the user clicks a button for the option, there is a jquery implementation that removes the button and appends a tag at the top of the page, the user has the option to remove this tag by clicking the 'X' on the tag and it will then be removed, and the button is place (append) back to where it came from. Everything is working except on page load, the buttons are all spaced apart appropriately, but if the user clicks the button and then decides to remove the tag from their selections, when the button is appended back to its original div, it touches the other buttons:
And if the user decides they don't want option any more, and remove it, the button is appended back to the original div, like this:
There is no margins or padding on the original images CSS, so I can't figure out what's causing this.
The HTML for the buttons is as follows:
<div id="skills-selection">
<h4>Skills:</h4>
<div id="skill-row">
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 1</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 2</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 3</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 4</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 5</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 6</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 6</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 7</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 8</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 9</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 10</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 11</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 12</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 13</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 14</button>
</div>
</div><!--skills selection-->
The jquery is as follows :
$(document).on('click', '.skilltag', function() {
var txt = $(this).text();
$(".chosen-tags").append("<span class='tag label label-info choice-tag'>" + txt + "<span class='remove-skilltag' data-role='remove'>   x   </span></span>");
$(this).remove(); });
$(document).on('click', '.remove-skilltag', function() {
var txt = $(this).parent().clone().children().remove().end().text();
$(this).parent().remove();
$("#skill-row").append("<button type='button' class='btn btn-primary skilltag' data-toggle='button' aria-pressed='false' autocomplete='off'>" + txt + "</button>"); });
and the CSS that is style the buttons is:
.skilltag {
width: 80px;
line-height: .5;
height: 20px;
text-align: center;
display: inline-block; }
Does anyone know why this is happening?
White space is your issue, items horizontally aligned with display:inline-block take into account whitespace/linebreaks between elements.
Your markup starts like:
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 9</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 10</button>
but after appending your markup won't have the linebreak like so:
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 9</button><button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 10</button>
You can either start your markup without the whitespace/linebreaks
or swap to floats to override display:inline-block
.skilltag {
float:left;
margin:2px;
...
}
Or change your append code to include whitespace
Because the buttons elements are inline-block when you're appending them there's no white space, whereas in your HTML there is white space.
If you add a space after the append tag it should resolve the issue. However it might be preferable to alter the CSS to space the buttons.
$(document).on('click', '.skilltag', function () {
var txt = $(this).text();
$(".chosen-tags").append("<span class='tag label label-info choice-tag'>" + txt + "<span class='remove-skilltag' data-role='remove'>   x   </span></span>");
$(this).remove();
});
$(document).on('click', '.remove-skilltag', function () {
var txt = $(this).parent().clone().children().remove().end().text();
$(this).parent().remove();
$("#skill-row").append("<button type='button' class='btn btn-primary skilltag' data-toggle='button' aria-pressed='false' autocomplete='off'>" + txt + "</button> ");
});
Jsfiddle with it working: http://jsfiddle.net/juy2wknd/1/
There is break after each button in your html tag so which is why you see some space between the buttons. But when the button is appended back to its place there is not any brake between it and the last button before it so it will leave no space. Another thing is you did'nt give them some margin in your css.
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>
For a javascript project, I need to be able to interact with three bootstrap buttons.
The code for the buttons goes as follows:
<a data-id="0" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="1" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="2" class="btn btn-light btn-block btn-add" href="#">Buy</a>
I am not allowed to modify this line, so simply adding an id to the button is out of the question.
That being said, how can I add an click listener to these buttons and interact with them?
Thank you for your time.
You can use querySelector, see example below:
var button1 = document.querySelector('[data-id="0"]')
var button2 = document.querySelector('[data-id="1"]')
var button3 = document.querySelector('[data-id="2"]')
button1.addEventListener("click", () => {
console.log("button1");
});
button2.addEventListener("click", () => {
console.log("button2");
});
button3.addEventListener("click", () => {
console.log("button3");
});
<a data-id="0" class="btn btn-light btn-block btn-add" href="#">Buy</a> <a data-id="1" class="btn btn-light btn-block btn-add" href="#">Buy</a> <a data-id="2" class="btn btn-light btn-block btn-add" href="#">Buy</a>
They already seem to have ids that you can query for using querySelector along with attribute selectors.
document.querySelector("a[data-id='0']").addEventListener("click", () => {
console.log("You clicked data id 0");
});
<a data-id="0" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="1" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="2" class="btn btn-light btn-block btn-add" href="#">Buy</a>
Try to use the classname:
var elements = document.getElementsByClassName("btn");
var myFunction = function() {
console.log("Button with data-id", this.getAttribute("data-id"), "clicked");
};
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', myFunction, false);
}
<a data-id="0" class="btn btn-light btn-block btn-add" href="#">Buy</a> <a data-id="1" class="btn btn-light btn-block btn-add" href="#">Buy</a> <a data-id="2" class="btn btn-light btn-block btn-add" href="#">Buy</a>
Simply use data-id as selector.
see example
let elem = document.querySelector('[data-id="0"]');
console.log(elem)
elem.click();
<a data-id="0" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="1" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="2" class="btn btn-light btn-block btn-add" href="#">Buy</a>
I'm using Bootstrap 4.3.1 if that makes any difference.
I have a button group that looks like this:
<div class="row mt-3">
<div class="col text-center">
<div id="alphabetGroup" class="btn-group flex-wrap" role="group">
<button id="btnHash" type="button" class="btn btn-outline-dark">#</button>
<button id="btnA" type="button" class="btn btn-outline-dark">A</button>
<button id="btnB" type="button" class="btn btn-outline-dark">B</button>
<button id="btnC" type="button" class="btn btn-outline-dark">C</button>
<button id="btnD" type="button" class="btn btn-outline-dark">D</button>
<button id="btnE" type="button" class="btn btn-outline-dark">E</button>
<button id="btnF" type="button" class="btn btn-outline-dark">F</button>
<button id="btnG" type="button" class="btn btn-outline-dark">G</button>
<button id="btnH" type="button" class="btn btn-outline-dark">H</button>
<button id="btnI" type="button" class="btn btn-outline-dark">I</button>
<button id="btnJ" type="button" class="btn btn-outline-dark">J</button>
<button id="btnK" type="button" class="btn btn-outline-dark">K</button>
<button id="btnL" type="button" class="btn btn-outline-dark">L</button>
<button id="btnM" type="button" class="btn btn-outline-dark">M</button>
<button id="btnN" type="button" class="btn btn-outline-dark">N</button>
<button id="btnO" type="button" class="btn btn-outline-dark">O</button>
<button id="btnP" type="button" class="btn btn-outline-dark">P</button>
<button id="btnQ" type="button" class="btn btn-outline-dark">Q</button>
<button id="btnR" type="button" class="btn btn-outline-dark">R</button>
<button id="btnS" type="button" class="btn btn-outline-dark">S</button>
<button id="btnT" type="button" class="btn btn-outline-dark">T</button>
<button id="btnU" type="button" class="btn btn-outline-dark">U</button>
<button id="btnV" type="button" class="btn btn-outline-dark">V</button>
<button id="btnW" type="button" class="btn btn-outline-dark">W</button>
<button id="btnX" type="button" class="btn btn-outline-dark">X</button>
<button id="btnY" type="button" class="btn btn-outline-dark">Y</button>
<button id="btnZ" type="button" class="btn btn-outline-dark">Z</button>
</div>
</div>
</div>
When looking on desktop, or any device that has a wide enough screen, it looks like this:
Alphabet Button Group
Now, when you go to a smaller screen, or mobile, it wraps around and instead looks like this:
Wrapped Button Group
I'm fine with how this looks, however there is something I would like to change:
I can make the top-left (first button) and bottom-right (last button) have the proper rounded corners, but how would I do this to the bottom-left and top-right buttons? Depending on the width of the window, the buttons themselves are not always the same, and I don't want to force group splitting (multiple groups at set breakpoints, etc).
Here's a JSFiddle you can play around with. For some reason it doesn't justify the buttons like in my own code, but it doesn't really matter - if you make the results pane thinner you can see the button group wrap, and the left side should be justified with the top line. If you can make that first line have border-bottom-left-radius then something similar should be able to be applied to the top right as well.
https://jsfiddle.net/cglatot/yu6w4rkv/1/
#alphabetGroup button:first-child
{
border-radius: 8px 0 0 8px;
}
#alphabetGroup button:last-child
{
border-radius: 0 8px 8px 0;
}
try something like this..
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 3 years ago.
I have one button group with 5 button, I need to set color to button group with focus on one of theme, for example if I hover on third button I need change first there will be change color, I try to do it with this button group code :
<div class="btn-group">
<button type="button" class="btn btn-default"><i class="far fa-star"></i></button>
<button type="button" class="btn btn-default"><i class="far fa-star"></i></button>
<button type="button" class="btn btn-default"><i class="far fa-star"></i></button>
<button type="button" class="btn btn-default"><i class="far fa-star"></i></button>
<button type="button" class="btn btn-default"><i class="far fa-star"></i></button>
</div>
I am not really sure what you are asking for, but I have prepared a simple snippet showing you pretty much everything you need so that you can modify it to your needs.
$(document).ready(function(){
$(".btn",".btn-group").hover(function(){
let current_button_index = $(this).index();
$(".btn",".btn-group").removeAttr("style");
$(".btn:not(:eq("+current_button_index+"))", ".btn-group").css("background-color","red");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group">
<button type="button" class="btn btn-default"><i class="far fa-star"></i>X</button>
<button type="button" class="btn btn-default"><i class="far fa-star"></i>X</button>
<button type="button" class="btn btn-default"><i class="far fa-star"></i>X</button>
<button type="button" class="btn btn-default"><i class="far fa-star"></i>X</button>
<button type="button" class="btn btn-default"><i class="far fa-star"></i>X</button>
</div>
I'm setting up a registration form and using JQuery to change a button type after pressing 'next'.
This currently works but I would like the button to revert in the case 'back' is pressed.
My code is below.
$(function () {
$('#next').on('click', function () {
$('.reg-page-1').animate({'left': '-105%'});
$('.reg-page-2').animate({'left': '0px'});
$('.btn-next-1').html('<button type="submit" class="btn btn-submit-1 btn-success btn-lg btn-block"><span class="glyphicon glyphicon-flash"></span> Submit!</button>');
});
$('#back').on('click', function () {
$('.reg-page-1').animate({'left': '10%'});
$('.reg-page-2').animate({'left': '115%'});
$('btn-submit-1').html('<button id="next" type="button" class="btn btn-primary btn-lg btn-block" aria-expanded="false">Next </button>');
});
});
And the block of HTML in question is below.
<div class="btn-toolbar" style="width:100%;">
<div class="btn-back-1" style="width:49%;float:left;">
<button id="back" type="button" class="btn btn-default btn-lg btn-block" aria-expanded="false">Back </button>
</div>
<div class="btn-next-1" style="width:49%;float:right;">
<button id="next" type="button" class="btn btn-primary btn-lg btn-block" aria-expanded="false">Next </button>
</div>
</div>
UPDATE
I've updated the JS to the below
$(function () {
$('#next').on('click', function () {
$('.reg-page-1').animate({'left': '-105%'});
$('.reg-page-2').animate({'left': '0px'});
$('.btn-next-1').html('<button type="submit" class="btn btn-submit-1 btn-success btn-lg btn-block"><span class="glyphicon glyphicon-flash"></span> Submit!</button>');
});
$('#back').on('click', function () {
$('.reg-page-1').animate({'left': '10%'});
$('.reg-page-2').animate({'left': '115%'});
$('.btn-next-1').html('<button id="next" type="button" class="btn btn-primary btn-lg btn-block" aria-expanded="false">Next </button>');
});
});
However, I am now finding myself in a strange issue.
The button indeed works, it changes the state of my application.
But once "back" is clicked and the button switches back to "next". the "next" button does not seem to function or switch again to a "submit" button.
In other words, it seems these functions are only capable of working once each.
Everything seems to be ok, but you dont have any selector with 'btn-submit-1', with the corrections your code for back button must be like this:
$('#back').on('click', function () {
$('.reg-page-1').animate({'left': '10%'});
$('.reg-page-2').animate({'left': '115%'});
$('.btn-next-1').html('<button id="next" type="button" class="btn btn-primary btn-lg btn-block" aria-expanded="false">Next </button>');
});
You should change the second selector to be the same as the first one.
Because with the .html() you are changing the content of the container div of the nex, but that div is still there.
If you use:
$('#back').on('click', function () {
$('.reg-page-1').animate({'left': '10%'});
$('.reg-page-2').animate({'left': '115%'});
$('.btn-next-1').html('<button id="next" type="button" class="btn btn-primary btn-lg btn-block" aria-expanded="false">Next </button>');
});
it will return to the original state.