Keypress function not printing console.log statement and allowing illegal chars - javascript

Is there any reason why this would not print the desired console.log statement to my console & allow illegal characters (i.e., any characters that are not the numbers 0-9) to be logged to the console? Right now, I'm getting every button press logged to the console, even the ones I don't want, and not the console.log statement I do want. The behaviour of this code has been so inconsistent I have questioned whether or not there was something wrong with my IDE or Chrome. Note, I have also used keyup and have had the same problems.
$(document).ready(function () {
// declare empty infix string
// declare empty infix string
let infix = "";
// get input from user on key press (separate function)
(function getInput() {
$(window).keypress(function(e) {
if("1234567890".includes(e.key)) {
infix += e.key;
console.log("infix" + e.key);
}
});
})();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
body {
background-color: #000000;
}
.container {
width: 420px;
height: 500px;
background-color: #c8c8c8;
}
.btn-group {
margin: 5px;
}
.btn.btn-primary {
width: 59px;
height: 34px;
}
#title {
background-color: #c8c8c8;
}
#screen {
width: 300px;
height: 35px;
border-radius: 15px;
margin: 5px 0px 10px 0px;
/* take care of cursor's right alignment */
color:black;
font-size: 15px;
text-align:right;
padding-bottom:0;
font-family: helvetica;
}
</style>
<script>
$(document).ready(function () {
// declare empty infix string
// declare empty infix string
let infix = "";
// get input from user on key press (separate function)
(function getInput() {
$(window).on("keyup", function(e) {
if("1234567890".includes(e.key)) {
infix += e.key;
console.log("infix" + e.key);
}
});
})();
// It's IIFE, not jQuery
// display input on screen (separate function)
// assign input to string (separate function)
// get operator from user and add to infix
// if equals pressed
// eval infix string
// if clear pressed
// reset to empty string
// display blank screen
});
</script>
<title>Calculator</title>
</head>
<body>
<div class="container">
<div class="row text-center">
<div id="title" class="col-md-12 text-center">
<h4>Business Analyst</h4>
</div>
<div class="col-md-12 body text-center">
<input id="screen" type=text>
</div>
<div class="col-md-12 body text-center">
<div class="btn-group">
<button id="enter" class="btn btn-primary">Enter</button>
</div>
<div class="btn-group">
<button id="compute" class="btn btn-primary">CPT</button>
</div>
<div class="btn-group">
<button id="clear-cash-flow" class="btn btn-primary">CCF</button>
</div>
<div class="btn-group">
<button id="analyst-mode" class="btn btn-primary">AM</button>
</div>
</div>
<div class="col-md-12 body text-center">
<div class="btn-group">
<button id="fut-val" class="btn btn-primary">FV</button>
</div>
<div class="btn-group">
<button id="cash-flow" class="btn btn-primary">CF</button>
</div>
<div class="btn-group">
<button id="net-pv" class="btn btn-primary">NPV</button>
</div>
<div class="btn-group">
<button id="irr" class="btn btn-primary">IRR</button>
</div>
</div>
<div class="col-md-12 body text-center">
<div class="btn-group">
<button id="period" class="btn btn-primary">N</button>
</div>
<div class="btn-group">
<button id="int-rate" class="btn btn-primary">I|Y</button>
</div>
<div class="btn-group">
<button id="pres-val" class="btn btn-primary">PV</button>
</div>
<div class="btn-group">
<button id="payment" class="btn btn-primary">PMT</button>
</div>
</div>
<div class="col-md-12 body text-center">
<div class="btn-group">
<button id="clear" class="btn btn-primary">C</button>
</div>
<div class="btn-group">
<button id="percent" class="btn btn-primary">%</button>
</div>
<div class="btn-group">
<button id="lftparen" class="btn btn-primary">(</button>
</div>
<div class="btn-group">
<button id="rtparen" class="btn btn-primary">)</button>
</div>
</div>
<div class="col-md-12 body text-center">
<div class="btn-group">
<button id="seven" class="btn btn-primary">7</button>
</div>
<div class="btn-group">
<button id="eight" class="btn btn-primary">8</button>
</div>
<div class="btn-group">
<button id="nine" class="btn btn-primary">9</button>
</div>
<div class="btn-group">
<button id="division" class="btn btn-primary"><span>÷</span></button>
</div>
</div>
<div class="col-md-12 body text-center">
<div class="btn-group">
<button id="four" class="btn btn-primary">4</button>
</div>
<div class="btn-group">
<button id="five" class="btn btn-primary">5</button>
</div>
<div class="btn-group">
<button id="six" class="btn btn-primary">6</button>
</div>
<div class="btn-group">
<button id="division" class="btn btn-primary">X</button>
</div>
</div>
<div class="col-md-12 body text-center">
<div class="btn-group">
<button id="one" class="btn btn-primary">1</button>
</div>
<div class="btn-group">
<button id="two" class="btn btn-primary">2</button>
</div>
<div class="btn-group">
<button id="three" class="btn btn-primary">3</button>
</div>
<div class="btn-group">
<button id="subtraction" class="btn btn-primary">-</button>
</div>
</div>
<div class="col-md-12 body text-center">
<div class="btn-group">
<button id="zero" class="btn btn-primary">0</button>
</div>
<div class="btn-group">
<button id="decimal" class="btn btn-primary">.</button>
</div>
<div class="btn-group">
<button id="equal" class="btn btn-primary">=</button>
</div>
<div class="btn-group">
<button id="addition" class="btn btn-primary">+</button>
</div>
</div>
</div>
</div>
</body>
</html>

Related

How do I add the appropriate parentheses " '(' or ')' " to the JavaScript calculator display screen

This is the button I have created for the parentheses.
<div class="col">
<button class="parentheses rounded-pill btn-outline-primary btn btn-lg" id="keyButton" data-key="operator">()</button>
</div>
I am trying to only show "(" if there is not a number on the calculator display. If there is a number on the calculator display I want to add ")" to the calculator display.
This is the JavaScript code.
for (let i = 0; i < keyButton.length; i++) { // Loops through keyButton to get values
// console.log(keyButton[i].textContent); // and console.log all keyButton values
keyButton[i].addEventListener('click', function () {
// console.log(keyButton[i].textContent);
if (mathOperators.includes(keyButton[i].textContent)){
console.log('operator');
}
if (keyNumbers.includes(keyButton[i].textContent)) {
console.log('number');
}
if (keyButton[i].textContent === '=') {
count = eval(assigned);
}
if (keyButton[i].textContent === 'C') {
// clear entire screen
}
if (keyButton[i].textContent === '<-') {
// clear one value
}
if (keyButton[i].textContent === '(') {
console.log("(")
} else
if (keyButton[i].textContent !== "(") {
console.log(")")
}
updateScreen(keyButton[i].textContent);
});
}
function updateScreen (kb) {
displayNum.textContent = assigned+=kb; // Displays the current number on the calculator
answer.textContent = count;
backspace.removeAttribute('disabled');
}
const mathOperators = ['+', '*', '/', '-', '=', 'C', '+/-', '%', '()', '(-', '.', '<-'];
When I tested it, it only gives me "()" everytime I press the button, instead of "(" or ")".

I just fixed what you wanted. when the button () is clicked you will get ( or ) based on the display value.
const displayNum = document.querySelector('.displayValue');
const keyButton = document.querySelectorAll('#keyButton');
const backspace = document.querySelector('.backSpace');
const answer = document.querySelector('.autoUpdatedAnswer');
// Variable lib
let count = "",
result, assigned = "",
operator = "";
const mathOperators = ['+', '*', '/', '-', '=', 'C', '+/-', '%', '()', '(-', '.', '<-'];
const keyNumbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
for (let i = 0; i < keyButton.length; i++) { // Loops through keyButton to get values
// console.log(keyButton[i].textContent); // and console.log all keyButton values
keyButton[i].addEventListener('click', function() {
// console.log(keyButton[i].textContent);
var keyboardValue = keyButton[i].textContent;
if (mathOperators.includes(keyButton[i].textContent)) {
console.log('operator');
}
if (keyNumbers.includes(keyButton[i].textContent)) {
console.log('number');
}
if (keyButton[i].textContent === '=') {
count = eval(assigned);
}
if (keyButton[i].textContent === 'C') {
// clear entire screen
}
if (keyButton[i].textContent === '<-') {
// clear one value
}
if (keyButton[i].textContent === '(') {
console.log("(")
} else
if (keyButton[i].textContent !== "(") {
console.log(")")
}
if (keyboardValue === '()') {
if (/\w*\d{1,}\w*/g.test(assigned)) {
keyboardValue = ')'
} else {
keyboardValue = '('
}
}
updateScreen(keyboardValue);
});
}
function updateScreen(kb) {
displayNum.textContent = assigned += kb; // Displays the current number on the calculator
answer.textContent = count;
backspace.removeAttribute('disabled');
}
.screen {
text-align: right;
}
.c1, .c2 {
background-color: white;
border: 2px solid blue;
}
#keys {
display: grid;
align-items: center;
}
button:hover {
background-color: #6495ED;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- CSS -->
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<title>JavaScript Calculator</title>
</head>
<body>
<div class="container c1 mt-5 w-50 border-bottom p-5 rounded-top">
<div class="row">
<div class="col">
<div class="screen">
<h1 class="displayValue">0</h1>
<h2 class="autoUpdatedAnswer"></h2>
</div>
</div>
</div>
<div class="row">
<div class="col">
<button class="backSpace rounded-pill btn btn-outline-primary btn-lg" id="keyButton" data-key="operator" disabled value="backspace"><-</button>
</div>
</div>
</div>
<div class="container c2 w-50 rounded-bottom" style="height: 400px; text-align: center;" id="keys">
<div class="row">
<div class="col">
<button class="clear rounded-pill btn btn-danger btn-lg" id="keyButton" data-key="operator" >C</button>
</div>
<div class="col">
<button class="parentheses rounded-pill btn-outline-primary btn btn-lg" id="keyButton" data-key="operator">()</button>
</div>
<div class="col">
<button class="percent rounded-pill btn btn-outline-primary btn-lg" id="keyButton" data-key="operator">%</button>
</div>
<div class="col">
<button class="division rounded-pill btn btn-outline-primary btn-lg" id="keyButton" data-key="operator">/</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="seven rounded-pill btn btn-secondary btn-lg" id="keyButton">7</button>
</div>
<div class="col">
<button class="eight rounded-pill btn btn-secondary btn-lg" id="keyButton">8</button>
</div>
<div class="col">
<button class="nine rounded-pill btn btn-secondary btn-lg" id="keyButton">9</button>
</div>
<div class="col">
<button class="multiply rounded-pill btn-outline-primary btn btn-lg" id="keyButton" data-key="operator">*</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="four rounded-pill btn btn-secondary btn-lg" id="keyButton">4</button>
</div>
<div class="col">
<button class="five rounded-pill btn btn-secondary btn-lg" id="keyButton">5</button>
</div>
<div class="col">
<button class="six rounded-pill btn btn-secondary btn-lg" id="keyButton">6</button>
</div>
<div class="col">
<button class="subtract rounded-pill btn btn-outline-primary btn-lg" id="keyButton" data-key="operator">-</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="one rounded-pill btn btn-secondary btn-lg" id="keyButton">1</button>
</div>
<div class="col">
<button class="two rounded-pill btn btn-secondary btn-lg" id="keyButton">2</button>
</div>
<div class="col">
<button class="three rounded-pill btn btn-secondary btn-lg" id="keyButton">3</button>
</div>
<div class="col">
<button class="addition rounded-pill btn btn-outline-primary btn-lg" id="keyButton" data-key="operator">+</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="plusNegative rounded-pill btn-secondary btn btn-lg" id="keyButton" data-key="operator">+/-</button>
</div>
<div class="col">
<button class="zero rounded-pill btn btn-secondary btn-lg" id="keyButton">0</button>
</div>
<div class="col">
<button class="decimal rounded-pill btn btn-secondary btn-lg" id="keyButton" data-key="operator">.</button>
</div>
<div class="col">
<button class="equal rounded-pill btn btn-primary btn-lg" id="keyButton" data-key="operator">=</button>
</div>
</div>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<script src="script.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

function setInterval() not working properly while on second call

I have a button name Assign agent button when i click on button a loader will appear for 3 second(with timeInterval function) and then after 3 second a modal will appear.
The issue is when i click on assign button the loader appear and then disappear after 3 second but on second time when I click on assign button the loader appear but suddenly disappear in 1 or 2 second.
Why the loader is not taking 3 second same as first click?
<button type="button" value="edit" name="edit-btn" class="spin-modal clear-cookie"
onclick="spiner();"> Assign
Agent</button> <div class="loader-spiner-outer class-none-view">
<div class="loader-box">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div> <div class="modal" id="myModal" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Assign Lead</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<form action="#" class="custom-add-form" method="post" style="padding:22px 0px 5px 0px;">
<div class="col-12">
<div class="form-group custom-form-group" style="width: 100%;">
<label for="name">Assign Agent</label>
<select class="form-control" id="sel1">
<option>First</option>
<option>Second</option>
<option>Third</option>
<option>Four</option>
</select>
</div>
<div class="form-group custom-form-group" style="width: 100%;">
<label for="name">Other</label>
<input type="text" class="form-control" id="name">
</div>
<div class="col-12 no-pad-left-right">
<div class="form-group text-right">
<div class="submit-m-div">
<input type="submit" value="Submit" name="submit" class="add-cm-btn no-margin-top-btm">
<span class="skip-icon" style="bottom: 0px;"><i class="fas fa-angle-double-right"></i></span>
</div>
</div>
</div>
</div>
</form>
<!-- Modal footer -->
<!-- <div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div> -->
</div>
</div>
</div>
javascript/jquery code
function spiner() {
$(".loader-spiner-outer.class-none-view").removeClass("class-none-view");
setInterval(function() {
$(".loader-spiner-outer").addClass("class-none-view");
}, 800);
setTimeout(function() {
$("#myModal").show();
}, 900);
};
$(".close").click(function() {
$("#myModal").hide();
});

Try this:
$(".close").click(function ()
{
$("#myModal").hide();
});
function spiner()
{
$(".loader-spiner-outer").addClass("class-none-view");
setTimeout(function ()
{
$(".loader-spiner-outer").removeClass("class-none-view");
setTimeout(function ()
{
$("#myModal").show();
}, 3000);
}, 3000);
}
.loader-spiner-outer
{
display: none;
}
.loader-spiner-outer.class-none-view
{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" value="edit" name="edit-btn" class="spin-modal clear-cookie"
onclick="spiner();"> Assign
Agent</button> <div class="loader-spiner-outer">
<div class="loader-box">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div> <div class="modal" id="myModal" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Assign Lead</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<form action="#" class="custom-add-form" method="post" style="padding:22px 0px 5px 0px;">
<div class="col-12">
<div class="form-group custom-form-group" style="width: 100%;">
<label for="name">Assign Agent</label>
<select class="form-control" id="sel1">
<option>First</option>
<option>Second</option>
<option>Third</option>
<option>Four</option>
</select>
</div>
<div class="form-group custom-form-group" style="width: 100%;">
<label for="name">Other</label>
<input type="text" class="form-control" id="name">
</div>
<div class="col-12 no-pad-left-right">
<div class="form-group text-right">
<div class="submit-m-div">
<input type="submit" value="Submit" name="submit" class="add-cm-btn no-margin-top-btm">
<span class="skip-icon" style="bottom: 0px;"><i class="fas fa-angle-double-right"></i></span>
</div>
</div>
</div>
</div>
</form>
<!-- Modal footer -->
<!-- <div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div> -->
</div>
</div>
</div>
And don't use setInterval(() => {}), because it is a repeating timer.
Use setTimeout(() => {}), because this will only run once.
'setInterval' vs 'setTimeout'

Bootstrap Modal Does Not Re-Open By Key After Closing

So i currently have the following code for a twitter bootstrap modal:
<!-- Button trigger modal -->
<button type="button" class="btn btn-success btn-lg btn-block" id="confirm" data-toggle="modal" data-target="#myModal" style="margin: auto; margin-top: 60px; cursor: pointer;">
Confirm
</button>
<!-- Modal -->
<div class="modal" id="myModal" role="dialog">
<div class="modal-dialog modal-dialog-centered w3-animate-bottom" style="max-width: 1000px !important;">
<div class="modal-content" style="border-radius: 10px; padding: 20px;">
<div class="modal-header" style="background-color: white; color: black; text-align: center;">
<h3 style="padding: 8px;"><strong>Confirm Credentials</strong></h3>
<button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-5">
<strong>Borrower ID:</strong>
</div>
<div class="col-sm-5">
</div>
<div class="w-100"></div>
</div>
</div>
<div class="modal-footer" style="background-color: white; color: black;">
<div class="text-center" id="footmsg" style="float: left; text-align: left;">
<p>Are you sure you want to submit?</p>
</div>
<span style="width: 20px;"></span>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button submit" class="btn btn-success" id="submitter" style="cursor: pointer;">Submit</button>
</div>
</div>
</div>
</div>
and I tried to handle the part where I can launch the modal via the enter key by JQuery. This is the code:
$(document).on('keydown', function(event) {
var key=event.which;
if (key==13) {
$('#confirm').click();
}
});
what it basically does is that it clicks the button that is supposed to launch the supposed modal. So I tried it and it worked the first time. However, when I clicked on the buttons inside the modal that would dismiss the modal, upon trying to press enter again, nothing happens. What should I do?

I have solved it. Apparently, based on https://getbootstrap.com/docs/3.3/javascript/ there is a .modal('show') function that gets things done how I wanted it.

CSS/JQuery | When filtering elements, one part of the last element won't disappear

On my HTML page, I have a list of elements I'm filtering (see image):
Problem is, when I search for some value (as shown in next image), the div with last button won't dissappear.
It is the div from the last element (last car in the list for this example). So the link with the last car dissappears, but the div with the button stays there. When I search for the last car, everything is OK. Here I attach my code via snippet (with only necessary CSS):
//Filtering
$(document).ready(function(){
$("#searchBuilding").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".buildings a,.rooms a").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
.around_link_div {
position: relative;
}
.button_today_div{
position: absolute;
right: 0;
top: 5px;
z-index: 1;
}
.button_today_div button{
background-color: #2b542c;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<input class="form-control" id="searchBuilding" type="text" placeholder="Search...">
</div>
</div>
<div id="building" class="list-group text-center col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2 buildings">
<div class="around_link_div">
<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
Porsche
</div>
<div class="around_link_div">
<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
Audi
</div>
<div class="around_link_div">
<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
BMW
</div>
<div class="around_link_div">
<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
Traktor
</div>
<div class="around_link_div">
<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
Mercedes
</div>
<div class="around_link_div">
<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
Volvo
</div>
<div class="around_link_div">
<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
Volkswagen
</div>
<div class="around_link_div">
<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
Chevrolet
</div>
<div class="around_link_div">
<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
Opel
</div>
</div>
</div>
Excuse my lack of knowledge (still studying and front-end is not my strongest point).
Thank you for your replies.

Your filtering selector ($(".buildings a,.rooms a")) only selects the anchors (<a ...), not the div that contains your button. Use $(".buildings .around_link_div,.rooms a") instead, i.e.:
$(document).ready(function(){
$("#searchBuilding").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".buildings .around_link_div,.rooms a").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
Also, in the code you posted, ".rooms a" is redundant.

Hide the wrapping <div class="around_link_div"> instead of the <a> by traversing up using closest()
//Filtering
$(document).ready(function() {
$("#searchBuilding").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".buildings a,.rooms a").filter(function() {
$(this).closest('.around_link_div').toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
.around_link_div {
position: relative;
}
.button_today_div {
position: absolute;
right: 0;
top: 5px;
z-index: 1;
}
.button_today_div button {
background-color: #2b542c;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<input class="form-control" id="searchBuilding" type="text" placeholder="Search...">
</div>
</div>
<div id="building" class="list-group text-center col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2 buildings">
<div class="around_link_div">
<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
Porsche
</div>
<div class="around_link_div">
<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
Audi
</div>
<div class="around_link_div">
<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
BMW
</div>
<div class="around_link_div">
<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
Traktor
</div>
<div class="around_link_div">
<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
Mercedes
</div>
<div class="around_link_div">
<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
Volvo
</div>
<div class="around_link_div">
<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
Volkswagen
</div>
<div class="around_link_div">
<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
Chevrolet
</div>
<div class="around_link_div">
<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
Opel
</div>
</div>
</div>

you need an overflow hidden in the css on the list-group element
CSS
.list-group {
overflow: hidden;
}

filter is to narrow selection. I think you have to use each in this case too loop through objects:
$(".buildings a,.rooms a").each(function() {
$(this).toggle((this).text().toLowerCase().indexOf(value) > -1)
});

Align four buttons evenly stacked with Bootstrap?

I'm trying have have two rows of two buttons stacked on top of each other like below:
[button][button]
[button][button]
These buttons need to be in the center of the screen and evenly take up the space below the picture. I am very close with the code below but cannot get them centered correctly. How would I change my code to accomplish this:
[ Image ]
[button][button]
[button][button]
Also I feel like I'm making this overly complicated. Is there an easier way to stack buttons evenly in the center? Thank you!
/*Four Button Set-up*/
.buttonAnswerLeft{
width: 25%;
max-width: 800px;
font-size: 25px;
display: inline-block;
text-align:center;
}
.buttonAnswerRight{
width: 25%;
max-width: 800px;
font-size: 25px;
display: inline-block;
text-align:center;
float: left;
}
<img class='image center-block' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'>
</div>
<div class="button-box col-lg-12 col-xs-12">
<button id='' type="button" class='buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info '> Absolutely sure, I'm not going.</button>
<button id='' type="button" class='buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info '> Pretty sure I'm not going. </button>
</div>
<div class="button-box col-lg-12 col-xs-12">
<button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info '> It's doubtful. </button>
<button id='' type="button" class='buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info '> It's a maybe. </button>
</div>
</div>
</div>

I know you have accepted an answer already but it doesn't seem to answer your question
First, whatever contains the following code must have text-align:center on it (in the example bootply, I have put this on the body tag).
Second, I have assumed you are using bootstrap because of the classes - this makes no difference but that's why I have done the example in bootply.
Third, wrap all elements in an inline element that has a max width of 100%;
Fourth, make image block and max-width of 100%
4th as your buttons seem to be inline-block elements, you can add box-sizing and 50% width to them and then comment out the space inbetween, then you should achieve what you are after
body {
text-align: center;
}
.image-container {
display: inline-block;
max-width: 100%;
}
.image-container .image {
display: block;
max-width: 100%;
}
button {
width: 50%;
box-sizing: border-box;
}
<div class="image-container">
<img class="image center-block" id="image6" src="http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg">
<div class="button-box col-lg-12 col-xs-12"><!--
--><button id="" type="button" class="buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info "> Absolutely sure, I'm not going.</button><!--
--><button id="" type="button" class="buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info "> Pretty sure I'm not going. </button><!--
--></div>
<div class="button-box col-lg-12 col-xs-12"><!--
--><button id="" type="button" class="buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info "> It's doubtful. </button><!--
--><button id="" type="button" class="buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info "> It's a maybe. </button><!--
--></div>
</div>
Example bootply
The above is fully responsive up to the max width of the image

Are you expecting result something like this?
You can use bootstrap text-centerclass to make the buttons center
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<img class='image center-block col-lg-12 col-xs-12 col-md-12' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'>
</div>
<div class="button-box col-lg-12 col-xs-12 col-md-12 text-center">
<button id='' type="button" class='buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info '>Absolutely sure, I'm not going.</button>
<button id='' type="button" class='buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info '>Pretty sure I'm not going.</button>
</div>
<div class="button-box col-lg-12 col-xs-12 text-center">
<button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info '>It's doubtful.</button>
<button id='' type="button" class='buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info '>It's a maybe.</button>
</div>
</div>
</div>

Here's my solution:
you can use the grid system of Bootstrap. The idea is that the class "row" spans for the full width of the parent, and then tell each button to stretch for 25% of its parent (col-xs-3). The first button in each row also needs an offset of 25% (col-xs-offset-3).
I recommend to read about the grid system: http://getbootstrap.com/css/#grid
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<div >
<div>
<div>
<img class='image center-block img-responsive' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'>
</div>
<div class="button-box row">
<button id='' type="button" class='buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info col col-xs-3 col-xs-offset-3 '> Absolutely sure, I'm not going.</button>
<button id='' type="button" class='buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info col col-xs-3'> Pretty sure I'm not going. </button>
</div>
<div class="button-box row">
<button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info col col-xs-3 col-xs-offset-3 '> It's doubtful. </button>
<button id='' type="button" class='buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info col col-xs-3'> It's a maybe. </button>
</div>
</div>
</div>

You should take advantage of the Bootstrap grid layout, even for your buttons :)
Example : http://codepen.io/anon/pen/MJoavP
I have made two different buttons rows, so you can check the differences
<div class="container">
<div class="row">
<img class='image center-block' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'>
</div>
<hr>
<div class="row">
<button id='' type="button" class='buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info col-md-5 pull-left'> Absolutely sure, I'm not going.</button>
<button id='' type="button" class='buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info col-md-5 pull-right'> Pretty sure I'm not going. </button>
</div>
<div class="row">
<button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info col-md-6'> It's doubtful. </button>
<button id='' type="button" class='buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info col-md-6'> It's a maybe. </button>
</div>
</div>

Add some row classes and then make the buttons their own columns.
/*Four Button Set-up*/
.buttonAnswerLeft{
width: 100%;
max-width: 800px;
font-size: 50px;
display: inline-block;
text-align:center;
}
.buttonAnswerRight{
width: 100%;
max-width: 800px;
font-size: 25px;
display: inline-block;
text-align:center;
float: left;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-lg-12 col-xs-12">
<img class='image center-block' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg' width="100%">
</div>
</div>
<div class="row">
<div class="button-box col-lg-6 col-xs-6">
<button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info '> It's doubtful. </button>
</div>
<div class="button-box col-lg-6 col-xs-6">
<button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info '> It's doubtful. </button>
</div>
</div>
<div class="row">
<div class="button-box col-lg-6 col-xs-6">
<button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info '> It's doubtful. </button>
</div>
<div class="button-box col-lg-6 col-xs-6">
<button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info '> It's doubtful. </button>
</div>
</div>

If you are using bootstrap then use the grid system to create a simple layour for the buttons:
<div class="row">
<div class="col-xs-4 col-xs-offset-4"> <!-- set this to the required width and offset -->
<img class='image' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-4"> <!-- Set this to your required width and offset -->
<div class="row">
<div class="col-xs-6">
<button class="btn btn-block" type="button">Button 1</button>
</div>
<div class="col-xs-6">
<button class="btn btn-block" type="button">Button 2</button>
</div>
</row>
<div class="row">
<div class="col-xs-6">
<button class="btn btn-block" type="button">Button 3</button>
</div>
<div class="col-xs-6">
<button class="btn btn-block" type="button">Button 4</button>
</div>
</div>
</div>
</div>
http://getbootstrap.com/css/#grid

I tried something for you:
Fiddle:
JSFiddle
HTML:
<div id="img-div" class="col-xs-12">
</div>
<div class="row">
<!-- Set this to your required width and offset -->
<div class="row">
<div class="col-xs-6">
<button class="btn btn-block" type="button">A</button>
</div>
<div class="col-xs-6">
<button class="btn btn-block" type="button">B</button>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<button class="btn btn-block" type="button">C</button>
</div>
<div class="col-xs-6">
<button class="btn btn-block" type="button">D</button>
</div>
</div>
</div>
CSS:
.btn {
width: 100%;
}
#img-div
{
width: 100%;
height: 600px;
background-size: cover;
background-image: url('http://i.dailymail.co.uk/i/pix/2013/10/22/article-2471794-18E82E4300000578-360_638x405.jpg');
}

Categories

Resources