Ok, so in the last post (here) we looked into creating fuly coded hexagons with HTML and CSS. And we got a decent looking row of 3 hex’s.
But in the intro image we had a lot more than what we finished with in the last post … Ready to go down the hex shaped rabbit hole ?
Ok, we had this :
with our html looking somthing like this :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div id="container"> <div class="row fullWidth" id="firstRow"> <div class="hexWrapper"> <div class="hexagon"> <div class="hexagon inner"></div> </div> <div class="text"><p>Texte</p></div> </div> <div class="hexWrapper"> <div class="hexagon"> <div class="hexagon inner"></div> </div> <div class="text"><p>Texte</p></div> </div> <div class="hexWrapper"> <div class="hexagon"> <div class="hexagon inner"></div> </div> <div class="text"><p>Texte</p></div> </div> </div> </div> |
Adding the second line of hexagons with html and css
We can easly add a second line like so :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<div id="container"> <div class="row fullWidth" id="firstRow"> <div class="hexWrapper"> <div class="hexagon"> <div class="hexagon inner"></div> </div> <div class="text"><p>Texte</p></div> </div> <div class="hexWrapper"> <div class="hexagon"> <div class="hexagon inner"></div> </div> <div class="text"><p>Texte</p></div> </div> <div class="hexWrapper"> <div class="hexagon"> <div class="hexagon inner"></div> </div> <div class="text"><p>Texte</p></div> </div> </div> <div class="row fullWidth"> <div class="hexWrapper"> <div class="hexagon"> <div class="hexagon inner"></div> </div> <div class="text"><p>Texte</p></div> </div> <div class="hexWrapper"> <div class="hexagon"> <div class="hexagon inner"></div> </div> <div class="text"><p>Texte</p></div> </div> </div> </div> |
Notice, I only added two hex’s to the second line where as we had three on the first :
Thanks to the flexbox, all is alligned perfectly.
Also notice that the second line doesn’t have an ID. We will be using this to push all our other lines up thanks to the :not selector in CSS :
|
1 2 3 |
.row:not(#firstRow){ margin-top: -64px; } |
Even more lines of hexagons
We can now copy / paste our lines and make sure the number of elements varies between odd and even :
Infinate hexagons with html and css ? How about adding some Jquery
Ok, this is looking cool, but we still haven’t got our infinate honeycomb look. And we are not going to copy /paste hundreds of hex elements in our html code. Time for some jquery magic.
So first, grab jquery and link our script.js file
|
1 2 3 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="script.js"></script> |
now, we want to extend our hexagons to the edge of the screen, so we need the width of the shortest row and the width of the screen.
Now the screen is simple, just get the width of the container element which is 100% width and has all the elements in it.
|
1 |
var windowWidth = $('#container').width(); |
And what about the rows. They also have 100% width and it is used to center the elements. But we were smart and used the “fullWidth” class to get that 100%.
So we can just use some jquery magic to remove that class, read the length of the row and then readd the class after.
But, we need the narrowest row …. so we make a function that will check each row and return the lowest width :
|
1 2 3 4 5 6 7 8 9 |
function getShortestRow(){ var shortestRow = 999999; //some arbetrary high number $(".row").each(function(){ if ($(this).width() < shortestRow){ shortestRow = $(this).width() } }); return shortestRow; } |
And we can now use the width to add all our extra hex’s to each row :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
function addHex(){ //our hex elements var htmlElementFiller = '<div class="hexWrapper"><div class="hexagon"></div></div>'; //remove our 100% width on the rows $('.row').removeClass("fullWidth"); //check our width var rowWidth = getShortestRow(); var windowWidth = $('#container').width(); //add our hexes, on to the beginning and on to the end so the elements stay centered while(rowWidth<windowWidth){ rowWidth = getShortestRow(); $(".row").prepend(htmlElementFiller); $(".row").append(htmlElementFiller); } //and we add our 100% width back $('.row').addClass("fullWidth"); } |
Be warned, this could get a bit heavy on the client navigator if you have too many rows.
And now all we need to do is fire our addHex() on document load and on window resize :
|
1 2 3 4 5 6 7 |
$( document ).ready(function() { addHex(); }); $(window).resize(function() { addHex(); }); |
Et Voila …. we’ve made hexagons with html and css and a splash of Jquery that fill the screen.
I have also made a fiddle of the final version (well at this date. i’ll probably do some more refining)