I dynamically generate content blocks that can have each individual number of lines. If they are within a 'record-row' ... I want the 'record-second' within that row to have the same height.
This is for example such a block:
<div class="row record-row">
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Name:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... /* Dynamic content LEFT */ ... </p>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Adress:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... /* Dynamic content RIGHT */ ... </p>
</div>
</div>
</div>
</form>
</div>
</div>
So for example in the following block ... the left 'record-second' has 2 lines and the right 'record-second' has 4 lines:
<div class="row record-row">
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Name:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... </p>
<p> ... </p>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Adress:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... </p>
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div>
</div>
</div>
</form>
</div>
</div>
How can I makes sure that the left 'record-second' has the same height as the right 'record-second' and vice versa?
Please keep in mind that they are numerous 'record-row' ... where each record row can have an different height.
Fiddle: https://jsfiddle.net/oLzq2vhs/
To try to help you I used only CSS. The solution I adopted involves the use of flexbox
Bootstrap has different classes to manage flexbox and you can see them here
Since using them would have added several classes to your divs, I decided to use only CSS, so it's easier for you to understand the various additions I've made.
Nothing prevents you from throwing away my CSS rules by managing them using Bootstrap classes (i.e. .d-flex, .h-100, .flex-column, m-0...). The important thing here is understand what's going on and, for my personal opinion, seeing the rules on CSS only is more understandible.
I didn't touch your layout. These are the rules I added:
.form-horizontal,
.record-second,
.record-group {
height: 100%; /*set these div to 100% to take full advantage of flexbox*/
}
.record-group {
display: flex; /* create a flexbox container */
flex-direction: column;
margin: 0;
}
.col-sm-4.record-col {
flex: 0 0 auto; /* the first div can't grow or shrink*/
}
.col-sm-8.record-col {
flex: 1 0 auto; /* the second div can grow to fill all the space*/
}
.row {
background: #f8f9fa;
margin-top: 20px;
padding-bottom: 20px;
/* I added also this line */
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.record-first {
padding-top: 12px;
padding-bottom: 7px;
padding-left: 15px;
padding-right: 15px;
border-top: #ffffff medium solid;
border-left: #ffffff 0px solid;
border-right: #ffffff 0px solid;
}
.record-second {
padding-top: 12px;
padding-bottom: 7px;
padding-left: 15px;
padding-right: 15px;
border-top: #ffffff medium solid;
border-left: #ffffff 4px solid;
border-right: #ffffff 4px solid;
}
/* --------------------------- */
/* I added these lines of code */
/* --------------------------- */
.form-horizontal,
.record-second,
.record-group {
height: 100%;
}
.record-group {
display: flex;
flex-direction: column;
margin: 0;
}
.col-sm-4.record-col {
flex: 0 0 auto;
}
.col-sm-8.record-col {
flex: 1 0 auto;
}
/* --------------------------- */
/* I added these lines of code */
/* --------------------------- */
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row record-row">
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Name:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... </p>
<p> ... </p>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Adress:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second ">
<p> ... </p>
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="row record-row">
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Name:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Adress:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... </p>
<p> ... </p>
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="row record-row">
<div class="col-md-6">
<form class="form-horizontal h-100">
<div class="form-group record-group h-100">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Name:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... </p>
<p> ... </p>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group record-group">
<div class="col-sm-4 record-col">
<div class="record-first">
<label>Adress:</label>
</div>
</div>
<div class="col-sm-8 record-col">
<div class="record-second">
<p> ... </p>
<p> ... </p>
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div>
</div>
</div>
</form>
</div>
</div>
Here's the updated fiddle; https://jsfiddle.net/a3eknLuf/
To achieve this you need to;
Loop through all the .record-rows
When inside, loop through all the .record-second
Check the height of each record second and assign it to a variable if it is greater than the previous.
Loop again through all the .record-second and assign their height.
$(document).ready(function(){
var tallestRecordSecond;
// loop through record rows
$(".record-row").each(function(){
tallestRecordSecond = 0;
// loop through record seconds in this row
$(this).find(".record-second").each(function(){
// assign the tallest record second
if($(this).height() > tallestRecordSecond){
tallestRecordSecond = $(this).height();
}
});
// loop again and assign the height for each
$(this).find(".record-second").each(function(){
$(this).height(tallestRecordSecond);
});
});
});
Related
I'm working with bootstraps cards. I have card-header and card-footer and they are working great. In the card-body I have a card-title. This title can take up 1 or 2 lines in the card-body. Also inside this card-body I have some information in a div. I want to align this informational div to the card-body bottom as I use row/col to align things nicely but because 1 card-title is 1 line and another is 2 lines when you look across cards in the page this additional information doesn't line up exactly between cards and bottom aligning would solve that I think.
So basically I want the orangered divs to line up at the bottom of their cards because then visually across cards they would look to line up.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<style>
.box {
position: relative;
display: inline-block;
width: 340px;
height: 300px;
background-color: #fff;
border-radius: 5px;
}
.box:hover {
/*-webkit-transform: scale(1.10, 1.10);
transform: scale(1.10, 1.10);*/
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}
</style>
<div class="container" style="margin-top: 25px;">
<div class="row">
<div class="col">
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header Stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a 1 line title</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2019
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2019
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
52
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff
</div>
</div>
</div>
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2020
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2020
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
10
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff here
</div>
</div>
</div>
</div>
</div>
</div>
I did a few things:
added position:absolute with some (24%) clearance from the bottom;
the container class implemented a width of 100%, which is why the box now went outside the boundary;
card-body class implemented a 20px padding
To get the exact styling, we removed the width 20px from the 100% width (from the cowntainer)
complete snippet below:
.box {
position: relative;
display: inline-block;
width: 340px;
height: 300px;
background-color: #fff;
border-radius: 5px;
}
.box:hover {
/*-webkit-transform: scale(1.10, 1.10);
transform: scale(1.10, 1.10);*/
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}
.orangeRedClass {
position: absolute;
bottom: 24%;
width: calc(100% - 40px) !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="margin-top: 25px;">
<div class="row">
<div class="col">
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header Stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a 1 line title</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container orangeRedClass" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2019
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2019
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
52
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff
</div>
</div>
</div>
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container orangeRedClass" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2020
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2020
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
10
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff here
</div>
</div>
</div>
</div>
</div>
</div>
I'm trying to create a footer with bootstrap rows and columns, and I want to make the footer smaller by reducing the space between rows. I've tried changing the margin and padding of the rows to no avail.
<footer class="footerClass">
<div class="row footerRow">
<div class="col-md-4">
<b>Content</b>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-4">
</div>
</div>
<div class="row footerRow">
<div class="col-md-4">
<p>Content</p>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-4">
<p> </p>
</div>
</div>
<div class="row footerRow">
<div class="col-md-4">
<p>Content</p>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-2">
<p><b>Content</b></p>
</div>
<div class="col-md-3">
<p><b>Content</b></p>
</div>
</div>
<div class="row footerRow table-condensed">
<div class="col-md-4">
<p> </p>
</div>
<div class="col-md-3">
<p>www.Content.org</p>
</div>
<div class="col-md-4">
<p> </p>
</div>
</div>
</footer>
It's likely that your additional classes have caused the spacing issues that you're seeing. I would rewrite your footer in the following way to see if it resolves your issue:
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<b>Content</b>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-4">
</div>
</div>
<div class="row">
<div class="col-md-4">
<p>Content</p>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-4">
<p> </p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<p>Content</p>
</div>
<div class="col-md-3">
<p>Content</p>
</div>
<div class="col-md-2">
<p><b>Content</b></p>
</div>
<div class="col-md-3">
<p><b>Content</b></p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<p> </p>
</div>
<div class="col-md-3">
<p>www.Content.org</p>
</div>
<div class="col-md-4">
<p> </p>
</div>
</div>
</div>
</footer>
Also, typically when using bootstrap grids, your column width would add up to 12 for each row. This may have been intentional.
I use the following classes to handle vertical spacing in my designs:
.voffset { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }
.boffset { margin-bottom: 2px; }
.boffset1 { margin-bottom: 5px; }
.boffset2 { margin-bottom: 10px; }
.boffset3 { margin-bottom: 15px; }
.boffset4 { margin-bottom: 30px; }
.boffset5 { margin-bottom: 40px; }
.boffset6 { margin-bottom: 60px; }
.boffset7 { margin-bottom: 80px; }
.boffset8 { margin-bottom: 100px; }
.boffset9 { margin-bottom: 150px; }
The minimum width of the media query "col-md-xx" is 992px , Try to apply class with "col-sm-xx". May be You are asking this.
I'm trying to make the navigation sidebar on my website move down with the browser view via Bootstrap's Affix plugin however it refuses to follow the view and just stays at the top.
This is the structure I have for my HTML:
<div id="page-wrapper">
<div class="container">
<div class="row">
<div id="navigation-affix" data-spy="affix" data-offset-top="20" data-offset-bottom="200">
<div class="col-xs-2" id="navigation-wrapper">
<div class="inner">
<div class="row">
<div class="col-xs-12">
<img src="images/me.png" alt="Liam Potter" id="picture-me" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div id="navigation">
Home
Portfolio
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-10" id="content-wrapper">
<div class="inner">
</div>
</div>
</div>
</div>
<div id="page-push"></div>
</div>
<footer>
<div class="container">
</div>
</footer>
Source: https://jsfiddle.net/tbejd5en/1/
Any thoughts?
You can just add a position:fixed to your id #navigation-affix and add col-xs-offset-2 to your id #content-wrapper
div#navigation-affix {
position: fixed !important;
}
Here is fiddle: https://jsfiddle.net/tbejd5en/5/
You can just add a position:fixed to your id #navigation
HTML
<div class="row">
<div class="col-xs-12">
<div id="navigation">
Home
Portfolio
</div>
</div>
</div>
CSS
div#navigation {
text-align: right;
padding-top: 10px;
position: fixed;
}
DEMO
https://jsfiddle.net/tbejd5en/2/
I'm looking for a way to change the background color of multiple columns based on a range of numeric values. I know of the Colorjizz PHP library but not sure if it's what I need for my purpose. I need the columns in the code below to change their background color to the respective shade of green/red/orange based on a range of numeric values. For example from 1-100 or 0.1 to 10.0.
.green-bg {
background-color: green!important;
color: white;
}
.red-bg {
background-color: red!important;
color: white;
}
.orange-bg {
background-color: orange!important;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well green-bg">1
</div>
</div>
<div class="col-md-12">
<div class="well red-bg">3
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well orange-bg">2
</div>
</div>
<div class="col-md-12">
<div class="well green-bg">4
</div>
</div>
</div>
</div>
</div>
</div>
You could try grabbing the innerHTML of each div with the "well" class and then assuming that is a number between 0 and 10, set the opacity of the div to be that number divided by 10. So if the innerHTML is 2, then the opacity is set to 0.2.
I've added some Javascript to your snippet to make this happen.
You could change the math in this to make it 1-100 or something else.
function wellColorShade() {
var wells = document.getElementsByClassName("well");
for(var i = 0; i < wells.length; i++) {
var well = wells[i];
well.style.opacity = (well.innerHTML / 10);
}
};
wellColorShade();
.green-bg {
background-color: green!important;
color: white;
}
.red-bg {
background-color: red!important;
color: white;
}
.orange-bg {
background-color: orange!important;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well green-bg">1
</div>
</div>
<div class="col-md-12">
<div class="well red-bg">3
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well orange-bg">2
</div>
</div>
<div class="col-md-12">
<div class="well green-bg">4
</div>
</div>
</div>
</div>
</div>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I have a requirement of toggling the color of a clicked <div> from red to green & green to red. I am using jquery in my page. Please suggest me the best possible code to fulfill the requirement.
My code is as follows:
<htmL>
<head>
<script src="jquery-1.10.2.js">
window.onload = initPage;
function initPage() {
}
function tileclick() {
}
</script>
<style>
div.table{
display: table;
}
div.row{
display: table-row;
border-style:solid;
border-color: black;
border-width:15px;
padding-top:35px;
padding-bottom:35px;
padding-right:50px;
padding-left:50px;
margin-top:25px;
margin-bottom:25px;
margin-right:50px;
margin-left:50px;
}
div.cell{
display: table-cell;
border-style: solid;
border-width:15px;
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
padding-bottom: 30px;
font-weight:5000;
font-size:200%;
background: #00FF00;
}
</style>
</head>
<body>
<div id="table" class="table">
<div id="r1" class="row">
<div id="sys55" class="cell">55
</div>
<div id="sys56" class="cell">56
</div>
<div id="sys57" class="cell">57
</div>
<div id="sys58" class="cell">58
</div>
<div id="sys59" class="cell">59
</div>
<div id="sys60" class="cell">60
</div>
<div id="sys61" class="cell">61
</div>
<div id="sys62" class="cell">62
</div>
<div id="sys63" class="cell">63
</div>
<div id="sys64" class="cell">64
</div>
<div id="sys65" class="cell">65
</div>
</div>
<div id="r2" class="row">
<div id="sys54" class="cell">54
</div>
<div id="sys53" class="cell">53
</div>
<div id="sys52" class="cell">52
</div>
<div id="sys51" class="cell">51
</div>
<div id="sys50" class="cell">50
</div>
<div id="sys49" class="cell">49
</div>
<div id="sys48" class="cell">48
</div>
<div id="sys47" class="cell">47
</div>
<div id="sys46" class="cell">46
</div>
<div id="sys45" class="cell">45
</div>
<div id="sys44" class="cell">44
</div>
</div>
<div id="r3" class="row">
<div id="sys33" class="cell">33
</div>
<div id="sys34" class="cell">34
</div>
<div id="sys35" class="cell">35
</div>
<div id="sys36" class="cell">36
</div>
<div id="sys37" class="cell">37
</div>
<div id="sys38" class="cell">38
</div>
<div id="sys39" class="cell">39
</div>
<div id="sys40" class="cell">40
</div>
<div id="sys41" class="cell">41
</div>
<div id="sys42" class="cell">42
</div>
<div id="sys43" class="cell">43
</div>
</div>
<div id="r4" class="row">
<div id="sys32" class="cell">32
</div>
<div id="sys31" class="cell">31
</div>
<div id="sys30" class="cell">30
</div>
<div id="sys29" class="cell">29
</div>
<div id="sys28" class="cell">28
</div>
<div id="sys27" class="cell">27
</div>
<div id="sys26" class="cell">26
</div>
<div id="sys25" class="cell">25
</div>
<div id="sys24" class="cell">24
</div>
<div id="sys23" class="cell">23
</div>
<div id="sys22" class="cell">22
</div>
</div>
<div id="r5" class="row">
<div id="sys11" class="cell">11
</div>
<div id="sys12" class="cell">12
</div>
<div id="sys13" class="cell">13
</div>
<div id="sys14" class="cell">14
</div>
<div id="sys15" class="cell">15
</div>
<div id="sys16" class="cell">16
</div>
<div id="sys17" class="cell">17
</div>
<div id="sys18" class="cell">18
</div>
<div id="sys19" class="cell">19
</div>
<div id="sys20" class="cell">20
</div>
<div id="sys21" class="cell">21
</div>
</div>
<div id="r6" class="row">
<div id="sys10" class="cell">10
</div>
<div id="sys09" class="cell">09
</div>
<div id="sys08" class="cell">08
</div>
<div id="sys07" class="cell">07
</div>
<div id="sys06" class="cell">06
</div>
<div id="sys05" class="cell">05
</div>
<div id="sys04" class="cell">04
</div>
<div id="sys03" class="cell">03
</div>
<div id="sys02" class="cell">02
</div>
<div id="sys01" class="cell">01
</div>
</div>
</div>
</body>
</html>
My initial page should appear green in color as shown below.
Each block should toggle green to red when clicked & vice-versa.
Please help me achieve this requirement.
You can use a start with selector to match all you divs that id starts with sys and then use toggleClass to switch the classes.
Code:
$("div[id^='sys']").click(function(){
$(this).toggleClass("cell cell2");
});
Demo: http://jsfiddle.net/IrvinDominin/tsL8a/
Use toggleClass() in jquery
<style>
.red{
background : red;
}
</style>
$(function() {
$(".cell").on("click" , function(e) {
$(this).toggleClass("cell red");
});
});
You can use jQuery toggleClass method (See the doc).
Add a class for red cells like :
.red_cell {
background-color: red;
}
Then something like :
$('.cell').click(function() {
$(this).toggleClass('red_cell');
});
use:
$(".cell").click(function(){
var clr = $( this ).css("background-color").toString();
var clr = (clr == "rgb(0, 255, 0)" ? "rgb(255,0,0)" : "rgb(0, 255, 0)");
$(this).css({
"background":""+clr+""
});
});
without changing css markup.
DEMO. hope it'll help you. cheers !
$(".cell").click(function(){
if($(this).hasClass('red')) {
$(this).removeClass('red');
}else{
$(this).addClass('red');
}
});
and simply add a class to CSS.