Menu icon Foundation

My Posts

No Content

My Comments

Nina Barley commented on Dalyn Newby's post over 3 years

Finally got Chrome to work properly, by forcing the reinit even as the last action.  There's a visible lag in equalizing the divs, but they are not truncated.
 <script>   $(window).load(function(){       Foundation.reInit('equalizer');   });</script>

Nina Barley commented on Dalyn Newby's post over 3 years

Mine is now working in Firefox & IE, but Chrome still persists in truncating the divs that are being equalized.

Nina Barley commented on Dalyn Newby's post over 3 years

I am also have the problem with the two divs not equalizing until you resize the window.

I am also using Foundation 6.
I have 2 animated gifs which are not broken, but are using data-interchange.
These 2 gifs seem to be loaded by the time I get to the foundation init, based on what I'm seeing in the network tab in the browser.
I am calling the foundation init at the very bottom of the HTML.
When I remove the images, equalizer works perfectly to make the 2 divs the same height.

I have tried a separate call to foundation.equalizer onload, but it doesn't fix the problem.
I would really appreciate any help anyone can give!

 
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <title>My Title</title>
    <link rel="stylesheet" type="text/css" href="public/css/app.css">
</head>
<body>
    <!-- Section 3  -->
    <section id="find-doctor" class="grad-blue centered container">
        <h2 class="heading-main light-text pad-T20 pad-B10">Panel Header</h2>
        <p class="heading-section light-text pad-B10" tabindex="0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed accumsan tellus, sit amet facilisis sem. In finibus euismod dictum. Nullam blandit, ipsum nec ultrices vestibulum.</p>
        <a class="button button-secondary inverted home-btn margin-B24" href="#" role="button">Title 1</a>
        <div class="row padded reinit-size" id="more-health" data-equalizer="health" data-equalize-on="large" data-resize="health" data-events="resize">
            <div class="columns small-12 large-6">
                <div class="card centered" data-equalizer-watch="health">
                    <div class="content">
<img alt="nurse help" class="img-spacing" data-interchange="[public/images/1600/help_cropped_xlg.gif, (default)],
                        [public/images/320/help_cropped_sm.gif, small],
                        [public/images/1600/help_cropped_xlg.gif, medium]"/>
                        <h3 class="heading-sub pad-B10">Card Header 1</h3>
                        <p class="body-regular" tabindex="0">Mauris egestas est in lorem rhoncus suscipit. Integer eu mauris pellentesque, viverra dolor maximus, porta orci. Nullam fermentum condimentum tortor. Integer eu mauris pellentesque.</p>
                        <a href="#" role="button">Learn more</a>
                    </div>
                </div>
            </div>
            <div class="columns small-12 large-6 lower-card-pad">
                <div class="card centered" data-equalizer-watch="health">
                    <div class="content">
<img alt="wellness discounts" class="img-spacing cards" data-interchange="[public/images/1600/coupons_xlg.gif, (default)],
                        [public/images/320/coupons_sm.gif, small],
                        [public/images/1600/coupons_xlg.gif, medium]"/> 
 
                        <h3 class="heading-sub pad-B10">Title 2</h3>
                        <p class="body-regular" tabindex="0">Donec et lacus molestie, porttitor velit id, pellentesque libero. In augue nisl, tempor ac ultrices sed, blandit eget neque.<br/>
                        <a href="#" role="button">See all programs</a></p>
                    </div>
</div>
            </div>
        </div>
    </section>
   
<script src="public/js/vendor/jquery.js"></script> <!-- JQuery 2.2.4 -->
<script src="public/js/vendor/foundation.js"></script> <!-- Foundation 6.2.3 -->
<script src="public/js/app.js"></script> <!-- Initialize foundation -->

Posts Followed


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Dalyn Newby's post over 3 years

Finally got Chrome to work properly, by forcing the reinit even as the last action.  There's a visible lag in equalizing the divs, but they are not truncated.
 <script>   $(window).load(function(){       Foundation.reInit('equalizer');   });</script>

You commented on Dalyn Newby's post over 3 years

Mine is now working in Firefox & IE, but Chrome still persists in truncating the divs that are being equalized.

You commented on Dalyn Newby's post over 3 years

I am also have the problem with the two divs not equalizing until you resize the window.

I am also using Foundation 6.
I have 2 animated gifs which are not broken, but are using data-interchange.
These 2 gifs seem to be loaded by the time I get to the foundation init, based on what I'm seeing in the network tab in the browser.
I am calling the foundation init at the very bottom of the HTML.
When I remove the images, equalizer works perfectly to make the 2 divs the same height.

I have tried a separate call to foundation.equalizer onload, but it doesn't fix the problem.
I would really appreciate any help anyone can give!

 
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <title>My Title</title>
    <link rel="stylesheet" type="text/css" href="public/css/app.css">
</head>
<body>
    <!-- Section 3  -->
    <section id="find-doctor" class="grad-blue centered container">
        <h2 class="heading-main light-text pad-T20 pad-B10">Panel Header</h2>
        <p class="heading-section light-text pad-B10" tabindex="0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed accumsan tellus, sit amet facilisis sem. In finibus euismod dictum. Nullam blandit, ipsum nec ultrices vestibulum.</p>
        <a class="button button-secondary inverted home-btn margin-B24" href="#" role="button">Title 1</a>
        <div class="row padded reinit-size" id="more-health" data-equalizer="health" data-equalize-on="large" data-resize="health" data-events="resize">
            <div class="columns small-12 large-6">
                <div class="card centered" data-equalizer-watch="health">
                    <div class="content">
<img alt="nurse help" class="img-spacing" data-interchange="[public/images/1600/help_cropped_xlg.gif, (default)],
                        [public/images/320/help_cropped_sm.gif, small],
                        [public/images/1600/help_cropped_xlg.gif, medium]"/>
                        <h3 class="heading-sub pad-B10">Card Header 1</h3>
                        <p class="body-regular" tabindex="0">Mauris egestas est in lorem rhoncus suscipit. Integer eu mauris pellentesque, viverra dolor maximus, porta orci. Nullam fermentum condimentum tortor. Integer eu mauris pellentesque.</p>
                        <a href="#" role="button">Learn more</a>
                    </div>
                </div>
            </div>
            <div class="columns small-12 large-6 lower-card-pad">
                <div class="card centered" data-equalizer-watch="health">
                    <div class="content">
<img alt="wellness discounts" class="img-spacing cards" data-interchange="[public/images/1600/coupons_xlg.gif, (default)],
                        [public/images/320/coupons_sm.gif, small],
                        [public/images/1600/coupons_xlg.gif, medium]"/> 
 
                        <h3 class="heading-sub pad-B10">Title 2</h3>
                        <p class="body-regular" tabindex="0">Donec et lacus molestie, porttitor velit id, pellentesque libero. In augue nisl, tempor ac ultrices sed, blandit eget neque.<br/>
                        <a href="#" role="button">See all programs</a></p>
                    </div>
</div>
            </div>
        </div>
    </section>
   
<script src="public/js/vendor/jquery.js"></script> <!-- JQuery 2.2.4 -->
<script src="public/js/vendor/foundation.js"></script> <!-- Foundation 6.2.3 -->
<script src="public/js/app.js"></script> <!-- Initialize foundation -->

Posts Followed

Following

  • No Content

Followers

  • No Content