How to make html page text and table responsive (with javascript) - javascript

I am trying to make a responsive webpage. I tried with height,style.height, style.OffsetHeight, etc. but I am not able to make a square table dynamically.
The below code changes the height but the table height and width do not match.
var width = table.offsetWidth;
table.setAttribute("style","height:"+ width + "px;");
Should I apply the logic on cells or on table?
How do I make the text(font-size) and other elements responsive?
How to find 60% of screen height so that I calculate the minimum of width and height to set them as table parameters?
Design Pattern : Design
Code : jsfiddle
Many Thanks.

1.You can apply the logic on table. The below code will work for dynamic resizing:
window.addEventListener('resize',handlersize);
function handlersize(){
width = table.offsetWidth;
table.setAttribute("style", "height:" + width + "px;")
}
To change the font size, use css style font-size:3vw; or so depending upon requirement.
3.To get the 60% of screen height:
var element = document.getElementsByTagName("BODY")[0];
height = element.offsetHeight;
height = height * 0.6;

Check this JSFiddle link
You need to add resize event listener on window.
When window is resized, the function , handlersize will be called.
This will updated your tables height, everytime your window resizes
window.addEventListener('resize',handlersize);
function handlersize(){
width = table.offsetWidth;
table.setAttribute("style", "height:" + width + "px;")
}

I might be thinking that you need to implement a separate div based HTML structure for the mobile views.
As tables can't be that much responsive and you can display div based HTML structure using media queries.
Here's the Example of it.
https://codepen.io/amwill04/pen/QNPpqx
Code example:
HTML:
<div class="table" id="results">
<div class='theader'>
<div class='table_header'>Header One</div>
<div class='table_header'>Header Two</div>
<div class='table_header'>Header Three</div>
<div class='table_header'>Header Four</div>
</div>
<div class='table_row'>
<div class='table_small'>
<div class='table_cell'>Header One</div>
<div class='table_cell'>-1.2726</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Two</div>
<div class='table_cell'>0.1311</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Three</div>
<div class='table_cell'>-0.4782</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Four</div>
<div class='table_cell'>-0.9919</div>
</div>
</div>
<div class='table_row'>
<div class='table_small'>
<div class='table_cell'>Header One</div>
<div class='table_cell'>-0.89</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Two</div>
<div class='table_cell'>0.7986</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Three</div>
<div class='table_cell'>0.876</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Four</div>
<div class='table_cell'>0.498</div>
</div>
</div>
<div class='table_row'>
<div class='table_small'>
<div class='table_cell'>Header One</div>
<div class='table_cell'>-1.1669</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Two</div>
<div class='table_cell'>0.4949</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Three</div>
<div class='table_cell'>-0.7113</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Four</div>
<div class='table_cell'>0.434</div>
</div>
</div>
<div class='table_row'>
<div class='table_small'>
<div class='table_cell'>Header One</div>
<div class='table_cell'>0.1996</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Two</div>
<div class='table_cell'>-0.7693</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Three</div>
<div class='table_cell'>1.974</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Four</div>
<div class='table_cell'>-0.959</div>
</div>
</div>
<div class='table_row'>
<div class='table_small'>
<div class='table_cell'>Header One</div>
<div class='table_cell'>-1.5998</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Two</div>
<div class='table_cell'>-0.1149</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Three</div>
<div class='table_cell'>1.3888</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Four</div>
<div class='table_cell'>-0.0689</div>
</div>
</div>
</div>
CSS :
.table {
display: table;
text-align: center;
width: 60%;
margin: 10% auto 0;
border-collapse: separate;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
.table_row {
display: table-row;
}
.theader {
display: table-row;
}
.table_header {
display: table-cell;
border-bottom: #ccc 1px solid;
border-top: #ccc 1px solid;
background: #bdbdbd;
color: #e5e5e5;
padding-top: 10px;
padding-bottom: 10px;
font-weight: 700;
}
.table_header:first-child {
border-left: #ccc 1px solid;
border-top-left-radius: 5px;
}
.table_header:last-child {
border-right: #ccc 1px solid;
border-top-right-radius: 5px;
}
.table_small {
display: table-cell;
}
.table_row > .table_small > .table_cell:nth-child(odd) {
display: none;
background: #bdbdbd;
color: #e5e5e5;
padding-top: 10px;
padding-bottom: 10px;
}
.table_row > .table_small > .table_cell {
padding-top: 3px;
padding-bottom: 3px;
color: #5b5b5b;
border-bottom: #ccc 1px solid;
}
.table_row > .table_small:first-child > .table_cell {
border-left: #ccc 1px solid;
}
.table_row > .table_small:last-child > .table_cell {
border-right: #ccc 1px solid;
}
.table_row:last-child > .table_small:last-child > .table_cell:last-child {
border-bottom-right-radius: 5px;
}
.table_row:last-child > .table_small:first-child > .table_cell:last-child {
border-bottom-left-radius: 5px;
}
.table_row:nth-child(2n+3) {
background: #e9e9e9;
}
#media screen and (max-width: 900px) {
.table {
width: 90%
}
}
#media screen and (max-width: 650px) {
.table {
display: block;
}
.table_row:nth-child(2n+3) {
background: none;
}
.theader {
display: none;
}
.table_row > .table_small > .table_cell:nth-child(odd) {
display: table-cell;
width: 50%;
}
.table_cell {
display: table-cell;
width: 50%;
}
.table_row {
display: table;
width: 100%;
border-collapse: separate;
padding-bottom: 20px;
margin: 5% auto 0;
text-align: center;
}
.table_small {
display: table-row;
}
.table_row > .table_small:first-child > .table_cell:last-child {
border-left: none;
}
.table_row > .table_small > .table_cell:first-child {
border-left: #ccc 1px solid;
}
.table_row > .table_small:first-child > .table_cell:first-child {
border-top-left-radius: 5px;
border-top: #ccc 1px solid;
}
.table_row > .table_small:first-child > .table_cell:last-child {
border-top-right-radius: 5px;
border-top: #ccc 1px solid;
}
.table_row > .table_small:last-child > .table_cell:first-child {
border-right: none;
}
.table_row > .table_small > .table_cell:last-child {
border-right: #ccc 1px solid;
}
.table_row > .table_small:last-child > .table_cell:first-child {
border-bottom-left-radius: 5px;
}
.table_row > .table_small:last-child > .table_cell:last-child {
border-bottom-right-radius: 5px;
}
}
Hope you got the point.

Related

How to make table rows take up full width of table and be underneath table headers

I'm struggling to get my table data to be directly underneath my table headers it's currently looking like this on inspection:
enter image description here
this is what it looks like with a space around
, but how can I make it more centered?
I give you an example for your reference:
/* DivTable.com */
.divTable {
display: table;
width: 100%;
}
.divTableRow {
display: table-row;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
}
.divTableCell,
.divTableHead {
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"> cxvv</div>
<div class="divTableCell"> xcvxcv</div>
<div class="divTableCell"> xcvx</div>
</div>
<div class="divTableRow">
<div class="divTableCell"> vxvx</div>
<div class="divTableCell"> wewrwe</div>
<div class="divTableCell"> xcvxv</div>
</div>
<div class="divTableRow">
<div class="divTableCell"> xxcvxcv</div>
<div class="divTableCell"> dsf</div>
<div class="divTableCell"> sdf</div>
</div>
<div class="divTableRow">
<div class="divTableCell"> vfsdf</div>
<div class="divTableCell"> sdfsf</div>
<div class="divTableCell"> dsfsdf</div>
</div>
<div class="divTableRow">
<div class="divTableCell"> cxvxcv</div>
<div class="divTableCell"> sdfsf</div>
<div class="divTableCell"> sdf</div>
</div>
</div>
</div>
You can browse the web site to generate the div table.
This is a pure flexbox example:
.cell,
.cellEnd,
.cellTail,
.container,
.headerRow,
.row {
display: flex;
flex-grow: 1;
}
.cell,
.cellEnd,
.cellTail {
border-top: 1px solid black;
border-left: 1px solid black;
}
.cellBottom {
border-bottom: 1px solid black;
}
.cellEnd {
border-bottom: 1px solid black;
}
.cellEnd,
.cellTail {
border-right: 1px solid black;
}
.container {
flex-direction: column;
}
.headerRow .cell,
.headerRow .cellTail {
font-weight: bold;
justify-content: center;
}
.row .cell,
.row .cellEnd {
padding: 3px;
}
<div class="container">
<div class="headerRow">
<div class="cell">
1
</div>
<div class="cell">
2
</div>
<div class="cellTail">
3
</div>
</div>
<div class="row">
<div class="cell cellBottom">
1000
</div>
<div class="cell cellBottom">
2000
</div>
<div class="cellEnd">
3000
</div>
</div>
</div>

Sort and append content based on value difference of specific data attribute

I'm attempting to create a function that sorts elements based on their numerical separation from the data-attribute value of a designated "leader."
Here's what I'm trying to achieve:
If the participant data-title value is less than or equal to 4 from the data-title of the "leader" then they are appended to playoffs
If the data-title value is greater than 4 from the data-title of the "leader" than they are appended to out.
I'm hoping to keep the leader in place and only sort/append the elements that are equal to or larger than the leader data-title into their respective categories. How can I adjust the code below to facilitate something like this?
var participant = $('.participant')
var leader = $('#leader')
$(participant).sort(function (a, b) {
var contentA = parseInt( $('.participant').data('title'));
var contentB = parseInt( $(leader).data('title'));
if (contentA - contentB <= 4) {
$(participant).appendTo('#in-race');
}
else {
$(participant).appendTo('#out');
}
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.section-hold {
margin: 2em 0;
min-height: 40px;
padding: 15px;
display: block;
}
.participant{
background-color: #EEE;
padding: 20px;
width: 70vw;
margin: 10px auto;
display: inline-block;
}
.name{
float: left;
}
.score{
float: right;
}
.section-title{
margin: 10px 0;
color: #FFF;
}
#participant-hold{
outline: solid 1px grey;
}
#in-race{
outline: solid 1px yellow;
}
#out{
outline: solid 1px red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section-hold" id="participant-hold">
<h3 class="section-title">PARTICIPANTS</h3>
<div class="participant">
<div class="name">LEADER</div>
<div class="score" id="leader" data-title="18"><em>18</em></div>
</div>
<div class="participant">
<div class="name">TEST 1</div>
<div class="score" data-title="21.5"><em>21.5</em></div>
</div>
<div class="participant">
<div class="name">TEST 2</div>
<div class="score" data-title="28"><em>28</em></div>
</div>
</div>
<div class="section-hold" id="in-race">
<h3 class="section-title">PLAYOFFS</h3>
</div>
<div class="section-hold" id="out">
<h3 class="section-title">OUT</h3>
</div>
To keep the leader in place and only sort the other participants you can do this:
var participant = $('.participant:not(:has(#leader))');
var leader = $('#leader')
participant.each(function() {
var contentA = parseInt($(this).find(".score").data("title"));
var contentB = parseInt(leader.data("title"));
if (contentA - contentB <= 4) {
$(this).appendTo('#in-race');
} else {
$(this).appendTo('#out');
}
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.section-hold {
margin: 2em 0;
min-height: 40px;
padding: 15px;
display: block;
}
.participant{
background-color: #EEE;
padding: 20px;
width: 70vw;
margin: 10px auto;
display: inline-block;
}
.name{
float: left;
}
.score{
float: right;
}
.section-title{
margin: 10px 0;
color: #FFF;
}
#participant-hold{
outline: solid 1px grey;
}
#in-race{
outline: solid 1px yellow;
}
#out{
outline: solid 1px red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section-hold" id="participant-hold">
<h3 class="section-title">PARTICIPANTS</h3>
<div class="participant">
<div class="name">LEADER</div>
<div class="score" id="leader" data-title="18"><em>18</em></div>
</div>
<div class="participant">
<div class="name">TEST 1</div>
<div class="score" data-title="21.5"><em>21.5</em></div>
</div>
<div class="participant">
<div class="name">TEST 2</div>
<div class="score" data-title="28"><em>28</em></div>
</div>
</div>
<div class="section-hold" id="in-race">
<h3 class="section-title">PLAYOFFS</h3>
</div>
<div class="section-hold" id="out">
<h3 class="section-title">OUT</h3>
</div>

Get div value by ID

I am new to JavaScript, I am trying to get the value of div on click in JavaScript.
Here is my code:
HTML
<div class="divTable">
<div class="divTableHeading">
<div class="divTableRow">
<div class="divTableCell" >DEPARTURE TIME</div>
<div class="divTableCell">ARRIVAL TIME</div>
<div class="divTableCell">FARE</div>
<div class="divTableCell">BUS TYPE</div>
<div class="divTableCell">AVAILABLE SEATS</div>
<div class="divTableCell">STATUS</div>
</div>
</div>
<div class="divTableBody" id="divTableBody">
<div class="divTableRow" onclick="hey();">
<div class="divTableCell1" id="departure_time">1200</div>
<div class="divTableCell1" id="arrival_time">1615</div>
<div class="divTableCell1">1600</div>
<div class="divTableCell1">VOLVO</div>
<div class="divTableCell1">8</div>
<div class="divTableCell1">OK</div>
</div>
<div class="divTableRow" onclick="hey();">
<div class="divTableCell1" id="departure_time">8888</div>
<div class="divTableCell1" id="arrival_time">9999</div>
<div class="divTableCell1">1600</div>
<div class="divTableCell1">VOLVO</div>
<div class="divTableCell1">8</div>
<div class="divTableCell1">OK</div>
</div>
</div>
</div>
CSS
.divTable{
display: table;
width: 100%;
margin-top:20px;
}
.divTableRow {
display: table-row;
text-align: -webkit-center;
}
.divTableHeading {
background-color: rgba(0, 102, 179, 0.6) !important;
color: #fff;
display: table-header-group;
white-space: nowrap;
}
.divTableCell, .divTableHead {
border: 1px solid #e3e3e3;
display: table-cell;
padding: 3px 10px;
width:30%;
white-space: nowrap;
}
.divTableCell1, .divTableHead {
border: 1px solid #e3e3e3;
display: table-cell;
padding: 3px 10px;
white-space: nowrap;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
JavaScript
function hey() {
alert("sdsdsd");
var departure = document.getElementById("departure_time").innerHTML;
alert(departure);
var arrival = document.getElementById("arrival_time").innerHTML;
alert(arrival);
}
Basically, its a table created in DIV tags, and the data shown here is from web service response.
When I click on any divTableRow it only gives me the result of first row, But what I want is if user click on second row it should alert the second row data.
Here is the link to JSFiddle
Do not use the same ID multiple times, change thm to classes. Thereafter if you want to do this with vanilla javascript use pass a reference to the row in your method call hey and use getElementsByClassName:
window.hey = function(div){
var departure = div.getElementsByClassName("departure_time")[0].innerHTML;
alert(departure);
var arrival = div.getElementsByClassName("arrival_time")[0].innerHTML;
alert(arrival);
};
.divTable{
display: table;
width: 100%;
margin-top:20px;
}
.divTableRow {
display: table-row;
text-align: -webkit-center;
}
.divTableHeading {
background-color: rgba(0, 102, 179, 0.6) !important;
color: #fff;
display: table-header-group;
white-space: nowrap;
}
.divTableCell, .divTableHead {
border: 1px solid #e3e3e3;
display: table-cell;
padding: 3px 10px;
width:30%;
white-space: nowrap;
}
.divTableCell1, .divTableHead {
border: 1px solid #e3e3e3;
display: table-cell;
padding: 3px 10px;
white-space: nowrap;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
<div class="divTable">
<div class="divTableHeading">
<div class="divTableRow">
<div class="divTableCell" >DEPARTURE TIME</div>
<div class="divTableCell">ARRIVAL TIME</div>
<div class="divTableCell">FARE</div>
<div class="divTableCell">BUS TYPE</div>
<div class="divTableCell">AVAILABLE SEATS</div>
<div class="divTableCell">STATUS</div>
</div>
</div>
<div class="divTableBody" id="divTableBody">
<div class="divTableRow" onclick="hey(this);">
<div class="divTableCell1 departure_time">1200</div>
<div class="divTableCell1 arrival_time">1615</div>
<div class="divTableCell1">1600</div>
<div class="divTableCell1">VOLVO</div>
<div class="divTableCell1">8</div>
<div class="divTableCell1">OK</div>
</div>
<div class="divTableRow" onclick="hey(this)">
<div class="divTableCell1 departure_time">8888</div>
<div class="divTableCell1 arrival_time">9999</div>
<div class="divTableCell1">1600</div>
<div class="divTableCell1">VOLVO</div>
<div class="divTableCell1">8</div>
<div class="divTableCell1">OK</div>
</div>
</div>
</div>
As you added tag jQuery, you can use the following snippet to solve your issue:
$("div.divTableRow").click(function(){
var departure = $(this).find("#departure_time").text();
alert(departure);
var arrival = $(this).find("#arrival_time").text();
alert(arrival);
});
DEMO
Try using jQuerys click handler, so you can reference the clicked element within the click handler. The idea is to limit the scope ("#departure_time WITHIN the clicked row"). The answer, of course, is only valid as long as "filled by web service response" is true. Normally, you would use classes for
https://api.jquery.com/click/
$('.divTableRow').click(hey);
function hey (evt) {
alert("sdsdsd");
var departure = $(this).find('#departure_time').text();
alert(departure);
var arrival = $(this).find('#arrival_time').text();
alert(arrival);
}
.divTable{
display: table;
width: 100%;
margin-top:20px;
}
.divTableRow {
display: table-row;
text-align: -webkit-center;
}
.divTableHeading {
background-color: rgba(0, 102, 179, 0.6) !important;
color: #fff;
display: table-header-group;
white-space: nowrap;
}
.divTableCell, .divTableHead {
border: 1px solid #e3e3e3;
display: table-cell;
padding: 3px 10px;
width:30%;
white-space: nowrap;
}
.divTableCell1, .divTableHead {
border: 1px solid #e3e3e3;
display: table-cell;
padding: 3px 10px;
white-space: nowrap;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divTable">
<div class="divTableHeading">
<div class="divTableRow">
<div class="divTableCell" >DEPARTURE TIME</div>
<div class="divTableCell">ARRIVAL TIME</div>
<div class="divTableCell">FARE</div>
<div class="divTableCell">BUS TYPE</div>
<div class="divTableCell">AVAILABLE SEATS</div>
<div class="divTableCell">STATUS</div>
</div>
</div>
<div class="divTableBody" id="divTableBody">
<div class="divTableRow">
<div class="divTableCell1" id="departure_time">1200</div>
<div class="divTableCell1" id="arrival_time">1615</div>
<div class="divTableCell1">1600</div>
<div class="divTableCell1">VOLVO</div>
<div class="divTableCell1">8</div>
<div class="divTableCell1">OK</div>
</div>
<div class="divTableRow">
<div class="divTableCell1" id="departure_time">8888</div>
<div class="divTableCell1" id="arrival_time">9999</div>
<div class="divTableCell1">1600</div>
<div class="divTableCell1">VOLVO</div>
<div class="divTableCell1">8</div>
<div class="divTableCell1">OK</div>
</div>
</div>
</div>
First of all, you cannot have multiple elements with same ID on a page. Change departure_time and arrival_time to classes.
Then you may add a parameter to your event, like this:
<div class="divTableRow" onclick="hey(this);">
The this keyword is an HTML element that triggered this event.
In your javascript you can use it this way:
function hey(element) {
var departure = element.getElementsByClassName("departure_time")[0].innerText;
var arrival = element.getElementsByClassName("arrival_time")[0].innerText;
alert(departure);
alert(arrival);
}
And the whole snippet might look like this:
function hey(element) {
var departure = element.getElementsByClassName("departure_time")[0].innerText;
var arrival = element.getElementsByClassName("arrival_time")[0].innerText;
alert(departure);
alert(arrival);
}
.divTable{
display: table;
width: 100%;
margin-top:20px;
}
.divTableRow {
display: table-row;
text-align: -webkit-center;
}
.divTableHeading {
background-color: rgba(0, 102, 179, 0.6) !important;
color: #fff;
display: table-header-group;
white-space: nowrap;
}
.divTableCell, .divTableHead {
border: 1px solid #e3e3e3;
display: table-cell;
padding: 3px 10px;
width:30%;
white-space: nowrap;
}
.divTableCell1, .divTableHead {
border: 1px solid #e3e3e3;
display: table-cell;
padding: 3px 10px;
white-space: nowrap;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
<div class="divTable">
<div class="divTableHeading">
<div class="divTableRow">
<div class="divTableCell" >DEPARTURE TIME</div>
<div class="divTableCell">ARRIVAL TIME</div>
<div class="divTableCell">FARE</div>
<div class="divTableCell">BUS TYPE</div>
<div class="divTableCell">AVAILABLE SEATS</div>
<div class="divTableCell">STATUS</div>
</div>
</div>
<div class="divTableBody" id="divTableBody">
<div class="divTableRow" onclick="hey(this);">
<div class="divTableCell1 departure_time">1200</div>
<div class="divTableCell1 arrival_time">1615</div>
<div class="divTableCell1">1600</div>
<div class="divTableCell1">VOLVO</div>
<div class="divTableCell1">8</div>
<div class="divTableCell1">OK</div>
</div>
<div class="divTableRow" onclick="hey(this);">
<div class="divTableCell1 departure_time">8888</div>
<div class="divTableCell1 arrival_time">9999</div>
<div class="divTableCell1">1600</div>
<div class="divTableCell1">VOLVO</div>
<div class="divTableCell1">8</div>
<div class="divTableCell1">OK</div>
</div>
</div>
</div>

How to change css on multiple elements

I want to make so that each 3 elements (top, middle and bottom) of my polygon changes color when you hover over it. I would normally do it with css: xxx:hover but since it involves 3 different elements that need to change at the same time, I can only assume that I need take a different approach. I assume some sort of javascript? Ideas?
CODEPEN: http://codepen.io/anon/pen/shfge
HTML
<div class="hex-row even">
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</div>
<div class="hex-row">
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</div>
CSS:
.hex {
float: left;
margin-left: 3px;
margin-bottom: -26px;
}
.hex:hover {
cursor: pointer;
}
.hex .top {
width: 0;
border-bottom: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.hex .middle {
width: 104px;
height: 60px;
background: #6C6;
}
.hex .bottom {
width: 0;
border-top: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.hex-row {
clear: left;
}
.hex-row.even {
margin-left: 53px;
}
Not too hard, just target the .hex container and it's children like so:
.hex:hover .top {
border-bottom-color: red;
}
.hex:hover .middle {
background: Red;
}
.hex:hover .bottom {
border-top-color: red;
}
http://codepen.io/anon/pen/GboDw

Div elements won't use whole space

I want to place 12 cards (2 rows -> 6 cards in one row). My code needs to be responsive so I used width/height %. Problem is that there is a lot of whitespace/empty space and cards are tiny. Here is code that I used:
JSFIDDLE: http://jsfiddle.net/A2bU7/
CSS:
#pagewrap
{
display:flex;
display: -webkit-flex;
display: -moz-flex;
width:100%;
}
#board{
//padding: 5px;
background-color:#cccccc;
width:100%;
height:70%;
}
#board > div {
background-color: grey;
border:#000 1px solid;
width:10%;
height:20%;
float:left;
margin:15px;
padding:15px;
font-size:64px;
cursor:pointer;
box-shadow: 0px 5px 14px grey;
border-radius: 5px;
transition: 0.2s;
}
#board > div:nth-child(6n+1) {
clear: both;
}
#board > div:hover {
box-shadow: 0px 0px 25px black;
transition-timing-function: all ease-in-out;
}
HTML:
<html>
<div id="pagewrap">
<div id="board">
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
</div>
<div>
</html>
Margin stretches the outside of your div that's why you getting whitespace/empty space and padding stretches on the inside. So you should tune in/out your margin/padding of your card and choose what you like.
#board > div {
margin: 5px;
padding: 25px 20px;
}
fiddle with margin/padding change.
fiddle with percentile width/height.
Reduce your margin and maybe increase your padding.

Categories

Resources