Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 16
  1. #1
    Junior Member jennilynn6's Avatar
    Join Date
    Feb 2013
    Posts
    25
    Member #
    35169

    Expanding DIV question

    Hello all, I'm working on a site for a client who sells various baking products. There are 6 products, each in their own DIV (see screenshot). The descriptions for each product aren't the same length so the client asked me to make them all the same size, but for the 2 longer text areas to have a "click for more" button that would then slide that section open so its all visible. Right now I just have the divs at a set height and then scrolling to show the rest, and the client doesn't want the scroll bar. I have been googling to find a solution and haven't found what I'm looking for - so maybe I'm just not searching with the right words. Can anyone give me some knowledge on how to do this, or where I should be looking? Thanks so much!

    Jenni

    Screen Shot 2014-06-30 at 5.19.36 PM.jpg

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Here you go. Just wrote this script a couple weeks ago. Relies on jQuery. Doesn't have to be done with jQ, but I was already using it for other things. Assuming the divs' classes are "product":
    Code:
    $(document).ready(function(){
      var e = document.querySelectorAll('.product'),
            i = 0,
            num = e.length,
            height = new Array();
        for(i = 0; i < num; i++){
            height[i] = e[i].clientHeight;
        }
        height = height.sort(function(a,b){return a - b;}).reverse();
        $('.product').css('height', height[0]);
    });
    The gist: stores all of the matching elements in an array, loops thru the array, stores all of the heights in another array. Sorts the array with the heights biggest to smallest, grabs the first one (biggest) and sets all of them to that height.
    Last edited by Ronald Roe; Jun 30th, 2014 at 04:54 PM. Reason: Clarity
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Junior Member jennilynn6's Avatar
    Join Date
    Feb 2013
    Posts
    25
    Member #
    35169
    Thanks Ronald - I'm not super familiar with jQ, do I have to create a new page with this code included or do I add it to the head area of the site code?

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    If you don't already have it, you'll need to include jQuery. I would load that in the head with the async attribute. Then, paste that code (or include from a separate file) just before the closing body tag.

    Just to be clear, it's everyday Javascript, and should be treated the same, it just requires the jQuery library (which is also just Javascript) to be loaded first.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Junior Member jennilynn6's Avatar
    Join Date
    Feb 2013
    Posts
    25
    Member #
    35169
    Is there a demo page of the script somewhere?

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    No. I haven't launched the project yet. If you're looking for exactly what to do, paste this into the head:
    Code:
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    And paste this just before your </body>:
    Code:
    <script>$(document).ready(function(){
      var e = document.querySelectorAll('.product'),
            i = 0,
            num = e.length,
            height = new Array();
        for(i = 0; i < num; i++){
            height[i] = e[i].clientHeight;
        }
        height = height.sort(function(a,b){return a - b;}).reverse();
        $('.product').css('height', height[0]);
    });</script>
    And in the 2 places it says '.product' change .product to the class for the divs you want resized.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  8. #7
    Junior Member jennilynn6's Avatar
    Join Date
    Feb 2013
    Posts
    25
    Member #
    35169
    I added both scripts - the first inside the head tag and the 2nd as the last thing before the /body - but nothings changed. My CSS for the 'grid_4a' class that the products sit in is as follows - do I have to add something there to get this to work?

    The site is testing here: http://jennilynn.net/CHEF/index.html

    Code:
    .grid_4a {width:380px;
        height:375px;
        margin-bottom: 50px;
        display:inline-block;
        vertical-align:text-top;}
    Last edited by jennilynn6; Jul 02nd, 2014 at 07:36 AM.

  9. #8
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    I can't get to from the computer I'm on right now. Did you replace .product in the script I posted with .grid_4a?
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  10. #9
    Junior Member jennilynn6's Avatar
    Join Date
    Feb 2013
    Posts
    25
    Member #
    35169
    Yes:

    Code:
        <script>$(document).ready(function(){
      var e = document.querySelectorAll('.grid_4a'),
            i = 0,
            num = e.length,
            height = new Array();
        for(i = 0; i < num; i++){
            height[i] = e[i].clientHeight;
        }
        height = height.sort(function(a,b){return a - b;}).reverse();
        $('.grid_4a').css('height', height[0]);
    });</script>
    This is what one of the product sections looks like:
    Code:
     <div class="grid_4a">
                    <img class="rotate" alt="" src="img/section-services/service4.png" />
                  <h2>Genuine Vegetable Parchment Paper</h2> <!--you can edit-->
                    <p align="left">Eat, drink and be merry! Chef Le Bon&rsquo;s absolute industry-leading Genuine Vegetable Parchment paper is grease- and moisture-resistant cooking paper that seals in the food&rsquo;s natural flavors and moisture without the necessity of oils, butter or other greasy additives, rendering it a better choice over aluminum foil or baking sheets alone.  Our incredible, top-of-the-line, eco-friendly &quot;Genuine Vegetable Parchment&quot; is especially designed for healthy and extremely versatile baking; use it to bake pastries, cookies, meat, vegetables, as a cake mold liner, and on other dishes that are cooked en papillote. If you&rsquo;re the baker and the breadwinner, you&rsquo;ll appreciate the multi-functional use of our amazing Genuine Vegetable Parchment paper.</p> 
                    
                </div>

  11. #10
    Junior Member jennilynn6's Avatar
    Join Date
    Feb 2013
    Posts
    25
    Member #
    35169
    Do I have the change the height number inside the JS code? The only thing I changed inside there was the class name product to grid_4a


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:55 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com