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');
}
Related
Here I have tried to show the buttons in a circular shape using bootstrap, CSS, and HTML5. I want it in exact circular shape. Friends, can you please fix it. Please try to help me I want it in responsive too. Below is my code kindly go through it. Here I have tried to show the buttons in a circular shape using bootstrap, CSS, and HTML5.
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Product
identification</i></button>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Cataloguing, listing <br> and pricing</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Cataloguing, listing <br> and pricing</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Front ending <br> end customers</i></button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="" style="font-size:17px;"><b>ZRPL</b></i></button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Enhance product <br> visibility and deals</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Returns and ARB management</i></button>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Logistical
support</i></button>
</div>
</div>
</div>
Add this css style in your button. It will make a circular shape on you button. you can give any width and height value on your button. just make sure that height and width should have same value.
width:170px;
height:170px;
border-radius:50%
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>
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)
});
I have some controls at the bottom of the div. I would like these controls to remain fixed when the user scrolls.
I tried:
1) Making the div fixed. The problem with that is that id destroys my bootstrap attributes and also because the height is generated dynamically.
<div id="timelineContainer">
<p class="mes">{{mes1}}</p>
<div id='chart_div' class="chart"></div>
<div class="row fixedcontrols">
<div class="fixed col-md-1 col-lg-1 col-xs-1 form-group-lg">
<button type="button" id="next1" class="btn btn-primary btn-block transback " ng-click="timeline.getPreviousData();"class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Load previous 100 records...">
<span id="nextdata1" class="glyphicon glyphicon-arrow-left"></span></button>
</div>
<div class="col-md-3 col-lg-3 col-xs-3 ">
<button type="button" class="btn btn-warning btn-block" class="tt" id="btn_ZoomIn" name="btn_ZoomIn" ng-click="timeline.zoomIn()"><span id="zoomin" class="glyphicon glyphicon-zoom-in"></span>
</button>
</div>
<div class="col-md-3 col-lg-3 col-xs-3 form-group-lg">
<button type="button" class="btn btn-primary btn-block" id="btn_ZoomOut" name ="btn_ZoomOut" ng-click="timeline.zoomOut()"> <span id="zoomout" class="glyphicon glyphicon-zoom-out"></span></button>
</div>
<div class="col-md-4 col-lg-4 col-xs-4 col-sm-4 form-group-md ff">
<button type="button" id="advanced1" ng-click="timeline.searchclick()" class="btn btn-default btn-block">Show Search</button>
</div>
<div class="col-md-1 col-lg-1 col-xs-1 form-group-lg pull-right">
<button type="button" id="next" class="btn btn-primary btn-block " ng-click="timeline.getNextData();"class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Load next 100 records..."> <span id="nextdata" class="glyphicon glyphicon-arrow-right"></span>
</button>
</div>
</div>
</div>
#timelineContainer {
overflow-x: scroll;
overflow-y: scroll;
white-space: nowrap; border: 13px solid #bed5cd;
width: 100%;
margin: 0 auto;
position: relative;
background-color: #5bc0de;
}
Thank you.
Update:
The controls move when user scrolls as shown below. I want them to be fixed.
update: said picture
What i can understand from your question is you want your div at the lower part of page to be fixed in position,
i hope a small change in css will solve your issue
position: fixed !important;
if its not what you meant then can you please explain more !!
set position of controls to absolute and make sure their ancestor is div with id timelineContainer. absolute will position the elements relative to its ancestor. no matter where you move they will be fixed to div.
I have wrote a jQuery to change the button colour to red when some one clicks on it. But that is only work with the first panel but its not working for the rest of the panels. In the first set of button it works but not only for everything. This is the jQuery part.
function DurationOnClick(element){
var buttonId = element.id;
var buttonName = element.name;
var buttonIds = ["1Hour", "30Min", "1Day" , "1Week", "1Month"];
var chartType = $('#chartType').val();
var idValue = $('#IdValue').val();
//after user click the option here we are changing the option black to red.
$(buttonIds).each(function(i, e) {
$('#'+e+'[name='+buttonName+']').css("color", "");
});
$('#'+buttonId+'[name='+buttonName+']').css("color", "Blue"); `
The html code is like this :
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Memory Consumption Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="30Min" onclick="return DurationOnClick(this)">30 mins</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Hour" style="color:Red" onclick="return DurationOnClick(this)">1 hour</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Day" onclick="return DurationOnClick(this)">1 day</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Week" onclick="return DurationOnClick(this)">1 week</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Month" onclick="return DurationOnClick(this)">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart3">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Load Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs" name="LoadAverage" id="30Min" onclick="return DurationOnClick(this)">30 mins</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Hour" style="color:Red" onclick="return DurationOnClick(this)">1 hour</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Day" onclick="return DurationOnClick(this)">1 day</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Week" onclick="return DurationOnClick(this)">1 week</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Month" onclick="return DurationOnClick(this)">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart2">
</div>
</div>
</div>
</div>
</div>
</div>
After removing the first panel the colour changing will happen for the next immediate chart but the charts below that one the changing colour is not happening. Any help to figure out the issue will be really appreciated.
Please use the below code. This will work perfect with your case:-
function DurationOnClick(ref) {
var buttonName = $(ref).attr("name");
$("button[name=" + buttonName + "]").each(function () {
$(this).css("color", "");
});
$(ref).css("color", "Blue");
}
As already explained the problem is you have duplicate IDs, the id-selector will select only the first element with the id so your code will always select the first set of elements.
But a more jQuery-ish solution will be use jQuery event handlers along with class(duration) to group them like
$('button.duration').click(function() {
$(this).addClass('selected').siblings('.selected').removeClass('selected');
})
.btn.btn-default.selected {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Memory Consumption Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="30Min">30 mins</button>
<button class="btn btn-default btn-xs duration selected" name="MemoryConsumption" data-id="1Hour">1 hour</button>
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="1Day">1 day</button>
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="1Week">1 week</button>
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="1Month">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart3">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Load Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="30Min">30 mins</button>
<button class="btn btn-default btn-xs duration selected" name="LoadAverage" data-id="1Hour">1 hour</button>
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="1Day">1 day</button>
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="1Week">1 week</button>
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="1Month">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart2">
</div>
</div>
</div>
</div>
</div>
</div>
You have duplicated ID. Your code is ok, but you did it wrong.
id attribute is considered unique.
classattribute is considered multiple.
You have put several same id, but CSS and JS are looking only for ONE, so they process the first (only) and leave.
Change id to class.
Example: class="30mins" will turn redall the "30mins" buttons.
Do it for every group you want to turn red on click.
You should not have duplicate ID in the HTML form. Consider using the first set of IDs only.
Apparently you cant have numbers as the first character of an ID or class for your css to apply. If you#re applying style to your 30min 1hour etc, you should consider renaming them. I'm not sure if this conflicts with JS as well. See this example:
<div class="char">char</div>
<div class="char1">char1</div>
<div class="1char">1char</div>
<div class="1111">1111</div>
JSFiddle