highest in row (ol li)

JavaScript performance comparison

Test case created

Info

check for the highest li within a row and apply that height to all li's in that row.

as the html is resposive the number of li's in a row varies.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<ol>
                
       <li>
                                        <div class="liner">
            
            <h3><a href="/work/bluebridge/">Bluebridge </a></h3>
            <div class="thumb"><a href="/work/bluebridge/"><img width="299" height="171" alt="" src="/assets/Uploads/bluebridge-tile.jpg"></a>
                        <div class="award onya">Onya</div></div>
                <p>We helped Bluebridge change tack and embrace the more ‘honest’ characteristics of their brand. <a title="View Bluebridge project" href="/work/bluebridge/">View project&nbsp;»</a></p>
          </div>
          
          
         <!-- START SERVICES -->
                                 <!--
         
         <div class="services">
                        <h4>Services&nbsp;&raquo;</h4>
                                                <p>
                                                
              Customer insight, 
                
              brand strategy, 
                
              brand identity design, 
                
              promotion, 
                
              print design, 
                
              search engine optimisation
                
            </p>
            <div class="clear"></div>
         </div>
         
                                 -->
         <!-- END SERVICES -->
          
       </li>
        
         <!--  this has been taken out as using a responsive grid now, BvL--> 
                
       <li>
                                        <div class="liner">
            
            <h3><a href="/work/nz-on-screen/">NZ On Screen </a></h3>
            <div class="thumb"><a href="/work/nz-on-screen/"><img width="299" height="171" alt="NZ On Screen logo" src="/assets/Uploads/NZOS299x171.jpg"></a>
                        <div class="award onya">ONYA finalist in Most Outstanding Website and Best Content (Corporate) categories 2011</div></div>
                <p>A vast online showcase, chock full of classic and contemporary Kiwi TV film and music video. Free and fantastic. <a title="View NZ On Screen project" href="/work/nz-on-screen/">View project&nbsp;»</a></p>
          </div>
          
          
         <!-- START SERVICES -->
                                 <!--
         
         <div class="services">
                        <h4>Services&nbsp;&raquo;</h4>
                                                <p>
                                                
              Online strategy, 
                
              website design, 
                
              information architecture, 
                
              search engine optimisation, 
                
              front-end development, 
                
              social media
                
            </p>
            <div class="clear"></div>
         </div>
         
                                 -->
         <!-- END SERVICES -->
          
       </li>
        
         <!--  this has been taken out as using a responsive grid now, BvL--> 
                
       <li>
                                        <div class="liner">
            
            <h3><a href="/work/wellingtonnz/">Wellington NZ </a></h3>
            <div class="thumb"><a href="/work/wellingtonnz/"><img width="299" height="171" alt="" src="/assets/Uploads/PWT299x171.jpg"></a>
                        <div class="award onya">ONYA finalist in Most Outstanding Website category 2010</div></div>
                <p>The official visitor website of Wellington New Zealand &ndash; the coolest little capital in the world. <a title="View Wellington NZ project" href="/work/wellingtonnz/">View project&nbsp;»</a></p>
          </div>
          
          
         <!-- START SERVICES -->
                                 <!--
         
         <div class="services">
                        <h4>Services&nbsp;&raquo;</h4>
                                                <p>
                                                
              Social media, 
                
              website design, 
                
              information architecture, 
                
              front-end development, 
                
              accessibility, 
                
              project management
                
            </p>
            <div class="clear"></div>
         </div>
         
                                 -->
         <!-- END SERVICES -->
          
       </li>
        
         <!--<li class="break">&nbsp;</li>  this has been taken out as using a responsive grid now, BvL--> 
                
       <li>
                                        <div class="liner">
            
            <h3><a href="/work/sorted/">Sorted </a></h3>
            <div class="thumb"><a href="/work/sorted/"><img width="299" height="171" alt="" src="/assets/Uploads/sorted-tile.jpg"></a>
                        </div>
                <p>Packed with great tips and intuitive calculators, Sorted is a friendly, familiar and beautifully rendered (inter)face for financial literacy. <br>and some more text for testing purposses. <a title="View Sorted project" href="/work/sorted/">View project&nbsp;»</a></p>
          </div>
          
          
         <!-- START SERVICES -->
                                 <!--
         
         <div class="services">
                        <h4>Services&nbsp;&raquo;</h4>
                                                <p>
                                                
              Information architecture, 
                
              requirements definition, 
                
              user experience, 
                
              website design, 
                
              front-end development, 
                
              e-government standards, 
                
              technology &amp; delivery, 
                
              project management
                
            </p>
            <div class="clear"></div>
         </div>
         
                                 -->
         <!-- END SERVICES -->
          
       </li>
        
         <!--  this has been taken out as using a responsive grid now, BvL--> 
                
       <li>
                                        <div class="liner">
            
            <h3><a href="/work/resene-colourmatch/">Resene ColourMatch </a></h3>
            <div class="thumb"><a href="/work/resene-colourmatch/"><img width="299" height="171" alt="" src="/assets/Uploads/resene-thumbnail-1.jpg"></a>
                        </div>
                <p>Seen a colour you love? The Resene ColourMatch iPhone App matches real world colours to Resene paint swatches. <a title="View Resene ColourMatch project" href="/work/resene-colourmatch/">View project&nbsp;»</a></p>
          </div>
          
          
         <!-- START SERVICES -->
                                 <!--
         
         <div class="services">
                        <h4>Services&nbsp;&raquo;</h4>
                                                <p>
                                                
              Promotion, 
                
              mobile, 
                
              design, 
                
              iphone apps, 
                
              technology strategy, 
                
              information architecture, 
                
              project management
                
            </p>
            <div class="clear"></div>
         </div>
         
                                 -->
         <!-- END SERVICES -->
          
       </li>
        
         <!--  this has been taken out as using a responsive grid now, BvL--> 
                
       <li>
                                        <div class="liner">
            
            <h3><a href="/work/tki/">TKI </a></h3>
            <div class="thumb"><a href="/work/tki/"><img width="299" height="171" alt="" src="/assets/Uploads/TKI299x171.jpg"></a>
                        </div>
                <p>A brand new look for Te Kete Ipurangi (TKI), one of New Zealand’s most trusted educational websites.  <a title="View TKI project" href="/work/tki/">View project&nbsp;»</a></p>
          </div>
          
          
         <!-- START SERVICES -->
                                 <!--
         
         <div class="services">
                        <h4>Services&nbsp;&raquo;</h4>
                                                <p>
                                                
              Brand development, 
                
              brand identity design, 
                
              website design, 
                
              user experience, 
                
              e-government standards, 
                
              partnering
                
            </p>
            <div class="clear"></div>
         </div>
         
                                 -->
         <!-- END SERVICES -->
          
       </li>
        
         <!--<li class="break">&nbsp;</li>  this has been taken out as using a responsive grid now, BvL--> 
                
       <li>
                                        <div class="liner">
            
            <h3><a href="/work/un-youth/">UN Youth </a></h3>
            <div class="thumb"><a href="/work/un-youth/"><img width="299" height="171" alt="" src="/assets/Uploads/un299x171.jpg"></a>
                        </div>
                <p>A striking re-brand and visual identity for UN Youth, the United Nation Youth Association of New Zealand. <a title="View UN Youth project" href="/work/un-youth/">View project&nbsp;»</a></p>
          </div>
          
          
         <!-- START SERVICES -->
                                 <!--
         
         <div class="services">
                        <h4>Services&nbsp;&raquo;</h4>
                                                <p>
                                                
              Brand strategy, 
                
              brand identity design, 
                
              promotion, 
                
              print design, 
                
              print management, 
                
              social media
                
            </p>
            <div class="clear"></div>
         </div>
         
                                 -->
         <!-- END SERVICES -->
          
       </li>
        
         <!--  this has been taken out as using a responsive grid now, BvL--> 
                
       <li>
                                        <div class="liner">
            
            <h3><a href="/work/new-zealand-on-screen/">New Zealand On Screen </a></h3>
            <div class="thumb"><a href="/work/new-zealand-on-screen/"><img width="299" height="171" alt="New Zealand On Screen" src="/assets/Uploads/thumb-new-zealand-on-screen-299x3.jpg"></a>
                        </div>
                <p>New Zealand On Screen is an experience sub-brand of NZ On Screen designed for an exhibition of the best of NZ film and TV.  <a title="View New Zealand On Screen project" href="/work/new-zealand-on-screen/">View project&nbsp;»</a></p>
          </div>
          
          
         <!-- START SERVICES -->
                                 <!--
         
         <div class="services">
                        <h4>Services&nbsp;&raquo;</h4>
                                                <p>
                                                
              Brand identity design, 
                
              promotion, 
                
              print design, 
                
              website design, 
                
              iphone apps, 
                
              technology &amp; delivery
                
            </p>
            <div class="clear"></div>
         </div>
         
                                 -->
         <!-- END SERVICES -->
          
       </li>
        
         <!--  this has been taken out as using a responsive grid now, BvL--> 
                
       <li>
                                        <div class="liner">
            
            <h3><a href="/work/commerce-commission/">Commerce Commission </a></h3>
            <div class="thumb"><a href="/work/commerce-commission/"><img width="299" height="171" alt="" src="/assets/Uploads/comcom-thumbnail-1.jpg"></a>
                        </div>
                <p>A fresh new design for the Commerce Commission’s website, bringing it up to date with brand values. <a title="View Commerce Commission project" href="/work/commerce-commission/">View project&nbsp;»</a></p>
          </div>
          
          
         <!-- START SERVICES -->
                                 <!--
         
         <div class="services">
                        <h4>Services&nbsp;&raquo;</h4>
                                                <p>
                                                
              Website design, 
                
              online strategy, 
                
              information architecture, 
                
              project management, 
                
              front-end development, 
                
              back-end development, 
                
              e-government standards
                
            </p>
            <div class="clear"></div>
         </div>
         
                                 -->
         <!-- END SERVICES -->
          
       </li>
        
         <!--<li class="break">&nbsp;</li>  this has been taken out as using a responsive grid now, BvL--> 
                
    </ol>

Preparation code output

  1. Bluebridge

    Onya

    We helped Bluebridge change tack and embrace the more ‘honest’ characteristics of their brand. View project »

  2. NZ On Screen

    NZ On Screen logo
    ONYA finalist in Most Outstanding Website and Best Content (Corporate) categories 2011

    A vast online showcase, chock full of classic and contemporary Kiwi TV film and music video. Free and fantastic. View project »

  3. Wellington NZ

    ONYA finalist in Most Outstanding Website category 2010

    The official visitor website of Wellington New Zealand – the coolest little capital in the world. View project »

  4. Sorted

    Packed with great tips and intuitive calculators, Sorted is a friendly, familiar and beautifully rendered (inter)face for financial literacy.
    and some more text for testing purposses. View project »

  5. Resene ColourMatch

    Seen a colour you love? The Resene ColourMatch iPhone App matches real world colours to Resene paint swatches. View project »

  6. TKI

    A brand new look for Te Kete Ipurangi (TKI), one of New Zealand’s most trusted educational websites. View project »

  7. UN Youth

    A striking re-brand and visual identity for UN Youth, the United Nation Youth Association of New Zealand. View project »

  8. New Zealand On Screen

    New Zealand On Screen

    New Zealand On Screen is an experience sub-brand of NZ On Screen designed for an exhibition of the best of NZ film and TV. View project »

  9. Commerce Commission

    A fresh new design for the Commerce Commission’s website, bringing it up to date with brand values. View project »

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
test1
 
establishheights();
function establishheights(){
        ape = 0;
        servicesheight= 0;
        
        $('#featured-work li').each(function(i,item){//going through each li measuring the highest height, then applying that height to all li's (if viewport > 480), BvL
                var $services = $(this).find('.services');
                
                if ( $services.length  && $services.css('display') != 'none' ) {
                        servicesheight = $services.outerHeight();
                }else { servicesheight = 0 }
        
                aper =  $(this).find('h3').outerHeight() + $(this).find('.thumb').outerHeight() + $(this).find('p').outerHeight() + servicesheight;
                
                if($(window).width() > 480) {
                        if(ape < aper){
                                ape = aper;
                                }
                }else {
                                $(this).css('height', aper );
                                }
        });
        if($(window).width() > 480) { $('#featured-work li').css('height',ape);};// if window size is smaller then 480 #featured-work li is one column and doesn't the highest height, BvL
};
 
 pending…
test2
 
establishheights();
function establishheights(){
        // calculating highest li within row (number per row can vary), BvL
        rownumber = 0;
        liheight = 0;
        lihighest = 0;
        highestofrow = [];
        $('#featured-work li').each(function(){
                $(this).css('height', '10px');
                //thisclass = $(this).attr('class');
                //$(this).removeClass(thisclass);
                $(this).removeClass();
                

                //console.log($(this).position().top);
                if($(this).next().length > 0) {
                        if($(this).position().top == $(this).next().position().top) {
                                $(this).addClass('row'+rownumber);
                                var $services = $(this).find('.services');
                                if ( $services.length  && $services.css('display') != 'none') {
                                        servicesheight = $services.outerHeight();
                                }else { servicesheight = 0 }
                                liheight =  $(this).find('h3').outerHeight() + $(this).find('.thumb').outerHeight() + $(this).find('p').outerHeight() + servicesheight;
                                if(liheight > lihighest) {lihighest = liheight;}
                        }
                        else { 
                                $(this).addClass('row'+rownumber);
                                var $services = $(this).find('.services');
                                if ( $services.length  && $services.css('display') != 'none') {
                                        servicesheight = $services.outerHeight();
                                }else { servicesheight = 0 }
                                liheight =  $(this).find('h3').outerHeight() + $(this).find('.thumb').outerHeight() + $(this).find('p').outerHeight() + servicesheight;
                                if(liheight > lihighest) {lihighest = liheight;}
                                highestofrow.push(lihighest);
                                rownumber = rownumber +1; 
                                lihighest = 0;
                        }
                }
                else {  
                        $(this).addClass('row'+rownumber);
                        var $services = $(this).find('.services');
                        if ( $services.length  && $services.css('display') != 'none') {
                                servicesheight = $services.outerHeight();
                        }else { servicesheight = 0 }
                        liheight =  $(this).find('h3').outerHeight() + $(this).find('.thumb').outerHeight() + $(this).find('p').outerHeight() + servicesheight;
                        if(liheight > lihighest) {lihighest = liheight;}

                        highestofrow.push(lihighest);
                        

                };
        });
        count = 0;
        $('#featured-work li').each(function(){
                if($(this).hasClass('row'+count)){
                        //console.log(highestofrow[count]);
                        $(this).css('height', highestofrow[count]+'px');
                }else{
                        count++;
                        $(this).css('height', highestofrow[count]+'px');
                };
        });

};
 
 pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments

Add a comment