May 1, 201511 yr How can I make the columns all the same height? <div class="container"> <div class="row"> <div class="col-md-8"> <img src="img/movemaker-logo.jpg" class="img-responsive" alt=""> </div> <div class="col-md-4"> <img src="img/snail-logo.gif" class="img-responsive pull-right" alt=""> </div> </div> <div class="row"> <div class="col-md-3 cream"> <ul class="nav nav-pills nav-stacked"> <li role="presentation"><a href="index.html">Home</a></li> <li role="presentation" class="active"><a href="about-us.html">About Us</a></li> <li role="presentation"><a href="how-it-works.html">How it works</a></li> <li role="presentation"><a href="faqs.html">FAQs</a></li> <li role="presentation"><a href="enquire.html">Enquire</a></li> <li role="presentation"><a href="contact-us.html">Contact us</a></li> </ul> </div> <div class="col-md-4"> <h2>Property purchased swiftly and with certainty. Your trusted national Homebuyer with local knowledge and expertise.</h2> </div> <div class="col-md-5 main-content"> <h3>About us</h3> <p>Movemakers is a rapidly growing property investment company - we buy and then sell on properties all over the UK, having a constantly expanding national coverage.</p> <p>Movemakers works in partnership with estate agents who carry out our valuations and enhance the service we provide by providing expertise and knowledge of local markets to ensure the right price is paid. Having such contacts within the property industry allows Movemakers to understand the subtleties of regional markets and therefore offer a bespoke and more cost and time effective service.</p> <p>We also undertake development and refurbishment projects</p> <p>The administration centre is open 7 days a week in order to deal with enquiries, purchases and sales as promptly as possible. All of the team have a broad knowledge of the property industry allowing them to help to make your Movemakers moving experience as smooth as possible.</p> </div> </div> </div>
May 1, 201511 yr Author How does that help me if I tell the row to be in px and the columns are to be responsive and height should remain in %?
May 1, 201511 yr you set the row to have a min-height, as the content expands the height will increase
May 1, 201511 yr Author Dosnt work??? What am I doing wrong? <div class="container"> <div class="row"> <div class="col-md-8"> <img src="img/movemaker-logo.jpg" class="img-responsive" alt=""> </div> <div class="col-md-4"> <img src="img/snail-logo.gif" class="img-responsive pull-right" alt=""> </div> </div> <div class="row" style="min-height: 300px;"> <div class="col-md-3 menu-area" style="border: solid 1px red; height: 100%;"> <ul class="nav nav-pills nav-stacked"> <li role="presentation" class="active"><a href="index.html">Home</a></li> <li role="presentation"><a href="about-us.html">About Us</a></li> <li role="presentation"><a href="how-it-works.html">How it works</a></li> <li role="presentation"><a href="faqs.html">FAQs</a></li> <li role="presentation"><a href="enquire.html">Enquire</a></li> <li role="presentation"><a href="contact-us.html">Contact us</a></li> </ul> </div> <div class="col-md-4" style="border: solid 1px red; height: 100%;"> <h2>Property purchased swiftly and with certainty. Your trusted national Homebuyer with local knowledge and expertise.</h2> </div> <div class="col-md-5 main-content" style="border: solid 1px red; height: 100%;"> <a href="home-owners.html" class="pull-left">Home Owners</a> <a href="house-builders.html" class="pull-right">House Builders</a> </div> </div> </div>
May 1, 201511 yr funny really, I was looking at this a few days ago http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height have not tried it yet but it may work
May 1, 201511 yr Author Tried this but breaks the responsiveness Is there a way around this using D4Y0 idea?
May 1, 201511 yr look at this fiddle https://jsfiddle.net/em09bep4/1/ Edited May 1, 201511 yr by D4Y0
May 1, 201511 yr Author Does not work for me in my bootstrap environment? <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Move Makers | Website coming soon!</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="row"> <div class="col-md-8"> <img src="img/movemaker-logo.jpg" class="img-responsive" alt=""> </div> <div class="col-md-4"> <img src="img/snail-logo.gif" class="img-responsive pull-right" alt=""> </div> </div> <div class="row dynamic-height"> <div class="col-xs-4 full-height"> a<br /> a<br /> a<br /> </div> <div class="col-xs-4 full-height"> b<br /> b<br /> b<br /> b<br /> </div> <div class="col-xs-4 full-height"> c<br /> c<br /> c<br /> c<br /> c<br /> c<br /> c<br /> c<br /> c<br /> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
May 1, 201511 yr did you add the css from the fiddle? also you may have to change the col-xs-4 to col-md-4 Edited May 1, 201511 yr by D4Y0
May 1, 201511 yr Author No. Not working? My html is <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Move Makers | Website coming soon!</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="row dynamic-height"> <div class="col-xs-4 full-height"> a<br /> a<br /> a<br /> </div> <div class="col-xs-4 full-height"> b<br /> b<br /> b<br /> b<br /> </div> <div class="col-xs-4 full-height"> c<br /> c<br /> c<br /> c<br /> c<br /> c<br /> c<br /> c<br /> c<br /> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html> My CSS is .dynamic-height { height: 1px; min-height: 100px; width: 100%; display: table; } .full-height { height: 100%; background: #f00; display: table-cell; } .full-height:nth-child(2) { background :#a00; } p { color: #eeeaa5; } .control-label { color: #eeeaa5; } .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover { background-color: #eeeaa5; color: #362905; } .nav-pills>li a { color: #362905; } .menu-area { background: #eeeaa5; padding: 20px; height: 100%; } .middle-area { height: 100%; } .main-content { background: #362905; padding: 0 20px 20px 20px; height: 100%; } .house-builder { background: #614B0D; } .main-content h3, .main-content h4 { color: #eeeaa5; } ul li { color: #eeeaa5; } /* make sidebar nav vertical */ @media (min-width: 768px) { .sidebar-nav .navbar .navbar-collapse { padding: 0; max-height: none; } .sidebar-nav .navbar ul { float: none; display: block; } .sidebar-nav .navbar li { float: none; display: block; } .sidebar-nav .navbar li a { padding-top: 12px; padding-bottom: 12px; } .navbar-default { border: none; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { background: #eeeaa5; } .sidebar-nav .navbar li { background: #eeeaa5; } .height-home { height: 500px; } .height-about { height: 600px; } .height-works { height: 1200px; } .height-faqs { height: 600px; } .height-enquire { height: 800px; } .height-contact { height: 500px; } .height-home-owner { height: 600px; } .height-house-builder { height: 700px; } } @media (max-width: 767px) { .house-builder h4 { margin-top: 0; } } #this_title { display:none; }
May 1, 201511 yr If serving for IE10+ you can use Flexbox for equal height columns. Otherwise I'd use JavaScript to generate equal heights, setting explicit heights in your CSS isn't smart, the content should dictate the height. With your JavaScript you want to measure the height of all the columns in a row and set the height on them all to match the highest. It's good to do this row by row, because in most cases you just want rows to have equal height columns, not all columns on the entire page being the same. To determine columns matching a row you can measure their offset from the top of the document, when a group of them match then they are a row.
May 1, 201511 yr This is one I wrote a while ago. It requires jQuery. var equalHeights = { elementsArray: [], elements : '', init: function($) { "use strict"; var elementsArray = []; this.elements = $('.js-equal-height'); // reset the heights of all the selected elements this.elements.each(function() { // add each element to the array. elementsArray.push($(this)); }); this.elementsArray = elementsArray; this.execute($); }, execute: function($) { if (equalHeights.elements.length) { var count = 0, el, iPosition, elPosition, elHeight, iHeight, elementsArray = equalHeights.elementsArray, elements = equalHeights.elements; elements.height('auto'); for (var i=0, x = elementsArray.length; i<x; i++) { for (var j=0, k = elementsArray.length; j<k; j++) { var el = elementsArray[j]; iPosition = elementsArray[i].offset().top; elPosition = el.offset().top; // grab the top positions of the elements if (count !== i) { // check it's not the current item if (iPosition === elPosition) { // two elements are in the same vertical position. iHeight = elementsArray[i].outerHeight(); // set the heights equal to the tallest. elHeight = el.outerHeight(); if (iHeight >= elHeight) { el.css({'height' : iHeight}); } } } count ++; } } } } }; equalHeights.init(jQuery); On screen resize you can call the execute method like this. Due to rows generally containing less columns as the screen gets smaller. jQuery(window).on('resize', function(){ equalHeights.execute(jQuery); }); The html for an example row using Bootstrap and the equal heights plugin: <div class="row"> <div class="col-sm-4 js-equal-height"> ... </div> <div class="col-sm-4 js-equal-height"> ... </div> <div class="col-sm-4 js-equal-height"> ... </div> </div> This is quite an old script, although it works it is in need of some improvements. When I get the time I will re-write this and post it up on Github. Edited May 1, 201511 yr by rbrtsmith
May 1, 201511 yr Author Hey Guru, Thanks for that. I have been frantically search for code snippets and I have found and adjusted the following script. It seems to work just wondered your thoughts on it? HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Move Makers | Website coming soon!</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js" type="text/javascript"></script> <script language="javascript" type="text/javascript" src="js/equal-heights.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-8"> <img src="img/movemaker-logo.jpg" class="img-responsive" alt=""> </div> <div class="col-md-4 hidden-sm hidden-xs"> <img src="img/snail-logo.gif" class="img-responsive pull-right" alt=""> </div> </div> <div class="row equal"> <div class="col-sm-3 menu-area"> <div class="sidebar-nav"> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <span class="visible-xs navbar-brand">Menu</span> </div> <div class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="index.html">Home</a></li> <li class="active"><a href="about-us.html">About us</a></li> <li><a href="how-it-works.html">How it works</a></li> <li><a href="faqs.html">FAQs</a></li> <li><a href="enquire.html">Enquire</a></li> <li><a href="contact-us.html">Contact us</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> </div> <div class="col-sm-4"> <h2>Property purchased swiftly and with certainty. Your trusted national Homebuyer with local knowledge and expertise.</h2> </div> <div class="col-sm-5 main-content"> <h3>About us</h3> <p>Movemakers is a rapidly growing property investment company - we buy and then sell on properties all over the UK, having a constantly expanding national coverage.</p> <p>Movemakers works in partnership with estate agents who carry out our valuations and enhance the service we provide by providing expertise and knowledge of local markets to ensure the right price is paid. Having such contacts within the property industry allows Movemakers to understand the subtleties of regional markets and therefore offer a bespoke and more cost and time effective service.</p> <p>We also undertake development and refurbishment projects</p> <p>The administration centre is open 7 days a week in order to deal with enquiries, purchases and sales as promptly as possible. All of the team have a broad knowledge of the property industry allowing them to help to make your Movemakers moving experience as smooth as possible.</p> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html> JS if (document.documentElement.clientWidth > 768) { function setEqualHeight(columns) { var tallestcolumn = 0; columns.each( function() { currentHeight = $(this).height(); if(currentHeight > tallestcolumn) { tallestcolumn = currentHeight; } } ); columns.height(tallestcolumn); } $(document).ready(function() { setEqualHeight($(".equal > div")); }); }
May 1, 201511 yr The script will set all columns to equal height even if they are on different rows which seems counter productive to me. The script I wrote will work if you just paste it in and respect your rows.
May 1, 201511 yr If you are interested I made a video tutorial on this a few years ago using native JS.
May 2, 201511 yr No idea about Bootstrap but you can do this with just CSS: https://jsfiddle.net/78rbpfwp/ You just need to know how much padding-top to use. (Height / Width) * 100 = % (450 / 960) * 100 = 46.875%
May 2, 201511 yr No idea about Bootstrap but you can do this with just CSS: https://jsfiddle.net/78rbpfwp/ You just need to know how much padding-top to use. (Height / Width) * 100 = % (450 / 960) * 100 = 46.875% When you scale the window to mobile size the content in your last column breaks out of the grid
May 2, 201511 yr When you scale the window to mobile size the content in your last column breaks out of the grid It also doesn't work for dynamic content. Not the best idea to go down this route. The only way to make it work with CSS only is flexbox and that wont work on <IE10 Niller your code works great when we want all the blocks to be the same height regardless of what row or vertical position they are in the screen. In this situation it's far better than my solution as mine contains many more lines. Mine is better if you just want equal heights for items on the same row. So each row will have its blocks with a height set to the height of the tallest block. Useful on responsive pages because you don't want blocks that have unecessary height on mobile, if each row contains one block they will all be the height that the content dictates. This is how flexbox works so I wanted to replicate that behavior. Depending on your needs you should pick one of the two. I should really fix mine so it doesn't have jQuery dependency too. I just do a lot of DOM manipulation and Ajax in my projects so jQuery makes it a lot faster for me to complete them. although in the modern browsers the DOM API has improved considerably, probably influenced by jQuery. Might be looking to drop it soon. Edited May 2, 201511 yr by rbrtsmith
May 2, 201511 yr ^Good point. I created my solution because i wanted a image gallery with some description under each image. For that purpose it works well that all elements have the same height but for large columns of content it will of course be better to have the heights align to every individual row
May 3, 201511 yr It's very simple. With min-height try to add overflow: hidden; let's check it or you can fixed hright Edited May 3, 201511 yr by rubel_designer
May 3, 201511 yr It's very simple. With min-height try to add overflow: hidden; let's check it or you can fixed hright That's not going to work, I've put it 2-3 times already on this thread. Explicitly defined heights will not work with dynamic content and multiple screen dimensions. Setting overflow to hidden will just hide content that overflows your defined height, so that content is then inaccessible. The ONLY way to do this with CSS alone with dynamic content is with flexbox. Edited May 3, 201511 yr by rbrtsmith
May 3, 201511 yr If you only have two columns in every row you could do something like this: https://jsfiddle.net/Nillervision/53tupkq4/ It has some problems: Parent element is required for every row No margins between columns (I fake it with white borders) Due to the nature of table cells they will not collapse automatically with fixed min-width (you will have to set a breakpoint) Edited May 3, 201511 yr by Nillervision
May 3, 201511 yr When you scale the window to mobile size the content in your last column breaks out of the grid Indeed. Media Queries could fix it. Far from the best route, but possible in CSS. Depending on content, I didn't notice the content in OP.
May 3, 201511 yr Author Thanks guys for all your input. Some great ideas. I fell we have to be a free as possible with responsive websites so setting heights is tricky. I used Guru's idea with a nice bit of dynamic javarscript to get the divs height on that page and set all divs to equal that. Really great discussion!
May 3, 201511 yr By the way for any of those who are thinking we should always try to use CSS to solve these things we should solve them in whatever way is most pragmatic, reliable and maintainable. I've seen examples of people doing really complex convoluted CSS just to avoid a few lines of JavaScript. JavaSxcript shouldn't be avoided, it's a very, very powerful tool in our arsenal. Even for animations it can match the performance of CSS, so long as we're not using jQuerys animate method. The only issue with JavaScript is that it is a true programming language, and as such requires a longer time frame to learn than CSS. Edited May 3, 201511 yr by rbrtsmith
May 3, 201511 yr By the way for any of those who are thinking we should always try to use CSS to solve these things we should solve them in whatever way is most pragmatic, reliable and maintainable. I've seen examples of people doing really complex convoluted CSS just to avoid a few lines of JavaScript. JavaSxcript shouldn't be avoided, it's a very, very powerful tool in our arsenal. Even for animations it can match the performance of CSS, so long as we're not using jQuerys animate method. The only issue with JavaScript is that it is a true programming language, and as such requires a longer time frame to learn than CSS. I agree. Many CSS solutions to these kind of problems also often hurt semantics because they tend to depend on extra wrapper elements with no semantic purpose at all. The problem is that there are very few solid guidelines on what solutions to choose. That's why people creates myths like "Always CSS over JS" and "JS should be avoided if possible". The truth is that JS has becomed much more reliable with consitent behaviour and performance in modern browsers. But JS has a bad reputation stuck to it from the time when the browser vendors thought they would win the battle by implementing their own special DOM interpretation. I also think that is why JS never has made its way to the established education system. Through my own educations (which was of great value in all other fields) I never recieved a single lecture about JS. All this is contributing to the idea that JavaScript is insufficient, unreliable etc. Ironically JS is the one scripting language you can't avoid in modern front-end development. Graduates comes out of uni with a solid knowledge in databases, backend-programming, semantics and design. But they will try to avoid to write a single line of JS and when they realize that they can't avoid it they choose to depend on performance heavy plugins instead. Edited May 3, 201511 yr by Nillervision
May 4, 201511 yr Yes, but It's more down to maintainability than semantics, a div has zero semantical meaning, so if you nested a thousand divs it would have no bearing on semantics whatsoever, but it would be a nightmare to read and maintain. I agree with everything you said about the JS. I think the most common reasons are that they don't know JavaScript (properly) or just to demonstrate that it is actually possible with CSS, although not intended to be used in projects. I also find with JavaScript that people who are familiar with other languages such as Java, C++ etc try to just jump into JavaScript without bothering to learn it properly first, probably because the syntax is similar but when things go wrong they blame the language rather than their lack of understanding. Then they try to tell the world that JS is terrible and should be avoided. JavaScript being very different doesn't make it bad. Many including myself argue that the OO model used by JavaScript is more powerful than classical OO (JS objects can directly link to other objects and share properties without the need for classes). Also many other languages are starting to adopt functional programming, JavaScript being the first 'mainstream' language that allowed us to use higher order functions. It is essential now that web developers are learning JavaScript - and learning it properly, there's plenty of good resources around now Edited May 4, 201511 yr by rbrtsmith
May 4, 201511 yr Yes, but It's more down to maintainability than semantics, a div has zero semantical meaning, so if you nested a thousand divs it would have no bearing on semantics whatsoever, but it would be a nightmare to read and maintain... I will rephrase the word “semamtics” to “separation of concerns” as I see it can be misunderstood when talking about HTML elements (that could contain their own semantic value). SOC is a semantic principle in programming, which is why I chose the word. The idea is to separate the different layers of your application in order to keep it scalable and maintainable. For back-end devs concerns are usually separated by the MVC criteria. But for front-end the same principle is why we separate the content (HTML), presentation(CSS), and functionality(JS). When we are adding extra tags in the markup for display purposes we are violating this principle just like when adding display attributes/inline styles or event attributes to tags directly in the markup. My point is that though extra divs for display purposes probably not can be totally eliminated you should always consider other solutions if available. Which is why I would choose JS to solve the problem that OP posted. I can see why the word "semantics" could cause confusion and hope this elaboration will help to avoid that. Edited May 4, 201511 yr by Nillervision
May 4, 201511 yr Author Hi rbrtsmith, Been looking over your JS example and trying to get it to work. Set up in JSFiddle and seems to be working a treat https://jsfiddle.net/t63m3a4x/ But on my site using the same code isnt working. I have included jquery in the head. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Move Makers</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> var equalHeights = { elementsArray: [], elements : '', init: function($) { "use strict"; var elementsArray = []; this.elements = $('.js-equal-height'); // reset the heights of all the selected elements this.elements.each(function() { // add each element to the array. elementsArray.push($(this)); }); this.elementsArray = elementsArray; this.execute($); }, execute: function($) { if (equalHeights.elements.length) { var count = 0, el, iPosition, elPosition, elHeight, iHeight, elementsArray = equalHeights.elementsArray, elements = equalHeights.elements; elements.height('auto'); for (var i=0, x = elementsArray.length; i<x; i++) { for (var j=0, k = elementsArray.length; j<k; j++) { var el = elementsArray[j]; iPosition = elementsArray[i].offset().top; elPosition = el.offset().top; // grab the top positions of the elements if (count !== i) { // check it's not the current item if (iPosition === elPosition) { // two elements are in the same vertical position. iHeight = elementsArray[i].outerHeight(); // set the heights equal to the tallest. elHeight = el.outerHeight(); if (iHeight >= elHeight) { el.css({'height' : iHeight}); } } } count ++; } } } } }; equalHeights.init(jQuery); </script> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-4 js-equal-height"> <p>test</p> <p>test</p> <p>test</p> <p>test</p> </div> <div class="col-xs-4 js-equal-height"> <p>test</p> <p>test</p> </div> <div class="col-xs-4 js-equal-height"> <p>test</p> </div> </div> </div> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
May 4, 201511 yr Thanks for clearing that up. There does seem to be some movement now away from completely separating the CSS, HTML, JS which is traditionally thought of as good practice. The likes of web-components, reactive programming. I'm not 100% sure where I stand with it all right now, there's been quite a lot of discussion on Twitter about Atomic css about whether or not it's a good thing link->http://acss.io/ It's almost like using inline styles but without the specificity issues. Was developed by the Yahoo team and apparently it has increased the performance and reduced the maintenance time on the website. I don't like it, but it's interesting non-the less.
May 4, 201511 yr Hi rbrtsmith, Been looking over your JS example and trying to get it to work. Set up in JSFiddle and seems to be working a treat https://jsfiddle.net/t63m3a4x/ But on my site using the same code isnt working. I have included jquery in the head. Have you tried opening the chrome dev tools? you seeing any errors in your console? Also put your JS in a seperate file to your HTML and include it just before the closing body tag. The fact the script right now will execute before those elements are loaded is likely to be cause of the issue. you will also want to wrap it in a document ready function. $(function() { // code }); Edited May 4, 201511 yr by rbrtsmith
May 5, 201511 yr Thanks for clearing that up. There does seem to be some movement now away from completely separating the CSS, HTML, JS which is traditionally thought of as good practice. The likes of web-components, reactive programming. I'm not 100% sure where I stand with it all right now, there's been quite a lot of discussion on Twitter about Atomic css about whether or not it's a good thing link->http://acss.io/ It's almost like using inline styles but without the specificity issues. Was developed by the Yahoo team and apparently it has increased the performance and reduced the maintenance time on the website. I don't like it, but it's interesting non-the less. What the hell! Never seen that before, looks terrible. I'm a fan of BEM, oocss, etc but that looks far from maintainable. Will have too have a look see.
May 7, 201511 yr What the hell! Never seen that before, looks terrible. I'm a fan of BEM, oocss, etc but that looks far from maintainable. Will have too have a look see. It does look pretty horrible, hence the stirr it's caused on Twitter, but in terms of performance the Yahoo team are saying its far better than the old system. at the very least the approach is interesting if you want absolute performance.
Create an account or sign in to comment