Menu icon Foundation

Designer | Manchester UK

Freelance designer & developer

My Posts


  • 12
    Replies
  • Deep nested equalizer

    By Jonny Wood

    Equalizer

    I'm trying to obtain equal heights using equalizer but I'm not sure it's possible "out of the box" with the structure I'm using. I've set everything up in this codepen which is pretty self explanatory. Is there any way to achieve equal heights across all ... (continued)

    Last Reply by Bradshaw Layfield 4 months ago


  • 2
    Replies
  • Sticky add class at div scroll

    By Jonny Wood

    classsticky

    I must have read every post and article on foundation sticky top-bar for this and still no luck.   I have a sticky top-bar, I have a div below it set to 100% width & height with parallax content.  I'm looking to add a class to top-ba... (continued)

    Last Reply by Jonny Wood over 3 years ago


My Comments

Jonny Wood commented on Erik Oberhausen's post over 1 year

I was having the same issue of using .grid-frame and the content being hidden on smaller screens. I found a little bit of jQuery to be the best solution for my circumstances. 
I had nested grid elements in the grid-frame centered vertically (and horizontally on larger screens).
Markup:
<header id="hero" class="grid-y grid-frame">

<div id="page-head" class="cell shrink grid-x align-justify">
<div class="cell medium-6">
<!-- cell content -->
</div>
<div class="cell small-12 medium-6">
<!-- cell content -->
</div>
</div>

<div class="hero-message cell auto cell-block-container align-center">
<div class="grid-x align-center">
<div class="grid-content cell small-12 xxlarge-10 wide-9">

    &lt;!-- cell content --&gt;

  &lt;/div&gt;
&lt;/div&gt;

</div>

</header>
jQuery:
var
grid_frame = $(".grid-frame"),
grid_content = $(".grid-frame .grid-content"),
offset = $("#page-head");

grid_frame.css("min-height", function() {
return grid_content.outerHeight() + offset.outerHeight();
});
 Hope this helps anyone else with similar issues :)
 
Update
I was still having issues with the grid-content element shrinking too much and hiding content on mobile devices so I needed to give that a min-height via jQuery too:
grid_content.css("min-height", function() {
return $(this).height();
});
May be overkill, but it works ;P

Jonny Wood commented on Denis Vaillant's post almost 2 years

I'm looking to do the same but don't want to overwrite the core files.
It seems strange that most of the Foundation functionality works with whatever custom breakpoints you add (as long as they are added correctly in both $breakpoints and $breakpoint-classes within _settings.scss yet the reveal function for off-canvas is limited. 
Is there a way to make the change Denis has made without touching the original files...?

Jonny Wood commented on Jonny Wood's post almost 2 years

 After a lott of head-scratching and seeing which elements should be the equalizer and which ones should watch which equalizer........ confused?! I was! Anyway, I'm glad to say, deep nesting is possible and for my particular issue, here's the resulting solution!
 
And here's the code:
<div class="row" data-equalizer="row" data-equalize-on="medium">

<div class="callout columns small-12 large-6">
<h3>Parent A</h3>

&lt;div class="row categories" data-equalizer="cats"&gt;

  &lt;article class="column small-12 medium-6"&gt;
    &lt;div class="callout equal-inner" data-equalizer-watch="row"&gt;
      &lt;h4&gt;Box 01&lt;/h4&gt;
      &lt;p&gt;Each box 01 to 04 need to have equal heights.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/article&gt;
  &lt;article class="column small-12 medium-6"&gt;
    &lt;div class="callout equal-inner" data-equalizer-watch="row"&gt;
      &lt;h4&gt;Box 02&lt;/h4&gt;
      &lt;p&gt;Visually the borders must all align at the bottom across both Parents A and B.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/article&gt;

&lt;/div&gt;

</div>
<div class="callout columns small-12 large-6">
<h3>Parent B</h3>

&lt;div class="row categories" data-equalizer="cats"&gt;

  &lt;article class="column small-12 medium-6"&gt;
    &lt;div class="callout equal-inner" data-equalizer-watch="row"&gt;
      &lt;h4&gt;Box 03&lt;/h4&gt;
      &lt;p&gt;Currently they only equalize within their own parent.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/article&gt;
  &lt;article class="column small-12 medium-6"&gt;
    &lt;div class="callout equal-inner" data-equalizer-watch="row"&gt;
      &lt;h4&gt;Box 04&lt;/h4&gt;
      &lt;p&gt;Is it possible to "deep-link" nested equalized elements...? I've tried several ways now with no luck.&lt;/p&gt;
      &lt;p&gt;And yes... the markup structure needs to remain as it is.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/article&gt;

&lt;/div&gt;

</div>
</div>
 

Jonny Wood commented on Jonny Wood's post over 3 years

 Thanks Rafi,
 
The stuckto:top event wasn't right for my needs. This is what I've got as a solution so far, only issue with it currently is if the browser window gets resized.
HTML:
<header id="navigation" class="header sticky-container" data-sticky-container role="banner">

<div data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small; btmAnchor: content:bottom;">
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text"><a href="<?php echo home_url(); ?>">Site</a></li>
</ul>
</div>
<div class="top-bar-right">
</div>
</div>
</div>

</header>
<!-- end .header -->

<div id="onscreen">
<div class="parallax-background">
<div class="intro-text">
Parralax
<p><i class="fi-arrow-down"></i></p>
</div>
</div>

</div>

<div id="content">
</div>
 
JS:
// This works but not with window resize
var nav = jQuery("#navigation");
var content = jQuery("#content").offset();

jQuery(window).scroll(function(){
var screenPosition = jQuery(document).scrollTop() + 100;
if (screenPosition < content.top) {
nav.removeClass( "shrink" );
}
if (screenPosition >= content.top) {
nav.addClass("shrink");
}
});

Posts Followed

  • 3
    Replies
  • grid-x 100% height

    By Erik Oberhausen

    xy gridheight

    Hello. What is the best method to make either a grid-x wrapper or the surrounding grid-container stretch to 100% height? I initially setup an outer grid frame wrapper that enclosed my grid-x elements, but then ran into the overflow of the content within... (continued)

    Last Reply by Jonny Wood over 1 year ago




Following

    No Content

Followers

My Posts



My Comments

You commented on Erik Oberhausen's post over 1 year

I was having the same issue of using .grid-frame and the content being hidden on smaller screens. I found a little bit of jQuery to be the best solution for my circumstances. 
I had nested grid elements in the grid-frame centered vertically (and horizontally on larger screens).
Markup:
<header id="hero" class="grid-y grid-frame">

<div id="page-head" class="cell shrink grid-x align-justify">
<div class="cell medium-6">
<!-- cell content -->
</div>
<div class="cell small-12 medium-6">
<!-- cell content -->
</div>
</div>

<div class="hero-message cell auto cell-block-container align-center">
<div class="grid-x align-center">
<div class="grid-content cell small-12 xxlarge-10 wide-9">

    &lt;!-- cell content --&gt;

  &lt;/div&gt;
&lt;/div&gt;

</div>

</header>
jQuery:
var
grid_frame = $(".grid-frame"),
grid_content = $(".grid-frame .grid-content"),
offset = $("#page-head");

grid_frame.css("min-height", function() {
return grid_content.outerHeight() + offset.outerHeight();
});
 Hope this helps anyone else with similar issues :)
 
Update
I was still having issues with the grid-content element shrinking too much and hiding content on mobile devices so I needed to give that a min-height via jQuery too:
grid_content.css("min-height", function() {
return $(this).height();
});
May be overkill, but it works ;P

You commented on Denis Vaillant's post almost 2 years

I'm looking to do the same but don't want to overwrite the core files.
It seems strange that most of the Foundation functionality works with whatever custom breakpoints you add (as long as they are added correctly in both $breakpoints and $breakpoint-classes within _settings.scss yet the reveal function for off-canvas is limited. 
Is there a way to make the change Denis has made without touching the original files...?

You commented on Jonny Wood's post almost 2 years

 After a lott of head-scratching and seeing which elements should be the equalizer and which ones should watch which equalizer........ confused?! I was! Anyway, I'm glad to say, deep nesting is possible and for my particular issue, here's the resulting solution!
 
And here's the code:
<div class="row" data-equalizer="row" data-equalize-on="medium">

<div class="callout columns small-12 large-6">
<h3>Parent A</h3>

&lt;div class="row categories" data-equalizer="cats"&gt;

  &lt;article class="column small-12 medium-6"&gt;
    &lt;div class="callout equal-inner" data-equalizer-watch="row"&gt;
      &lt;h4&gt;Box 01&lt;/h4&gt;
      &lt;p&gt;Each box 01 to 04 need to have equal heights.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/article&gt;
  &lt;article class="column small-12 medium-6"&gt;
    &lt;div class="callout equal-inner" data-equalizer-watch="row"&gt;
      &lt;h4&gt;Box 02&lt;/h4&gt;
      &lt;p&gt;Visually the borders must all align at the bottom across both Parents A and B.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/article&gt;

&lt;/div&gt;

</div>
<div class="callout columns small-12 large-6">
<h3>Parent B</h3>

&lt;div class="row categories" data-equalizer="cats"&gt;

  &lt;article class="column small-12 medium-6"&gt;
    &lt;div class="callout equal-inner" data-equalizer-watch="row"&gt;
      &lt;h4&gt;Box 03&lt;/h4&gt;
      &lt;p&gt;Currently they only equalize within their own parent.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/article&gt;
  &lt;article class="column small-12 medium-6"&gt;
    &lt;div class="callout equal-inner" data-equalizer-watch="row"&gt;
      &lt;h4&gt;Box 04&lt;/h4&gt;
      &lt;p&gt;Is it possible to "deep-link" nested equalized elements...? I've tried several ways now with no luck.&lt;/p&gt;
      &lt;p&gt;And yes... the markup structure needs to remain as it is.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/article&gt;

&lt;/div&gt;

</div>
</div>
 

You commented on Jonny Wood's post over 3 years

 Thanks Rafi,
 
The stuckto:top event wasn't right for my needs. This is what I've got as a solution so far, only issue with it currently is if the browser window gets resized.
HTML:
<header id="navigation" class="header sticky-container" data-sticky-container role="banner">

<div data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small; btmAnchor: content:bottom;">
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text"><a href="<?php echo home_url(); ?>">Site</a></li>
</ul>
</div>
<div class="top-bar-right">
</div>
</div>
</div>

</header>
<!-- end .header -->

<div id="onscreen">
<div class="parallax-background">
<div class="intro-text">
Parralax
<p><i class="fi-arrow-down"></i></p>
</div>
</div>

</div>

<div id="content">
</div>
 
JS:
// This works but not with window resize
var nav = jQuery("#navigation");
var content = jQuery("#content").offset();

jQuery(window).scroll(function(){
var screenPosition = jQuery(document).scrollTop() + 100;
if (screenPosition < content.top) {
nav.removeClass( "shrink" );
}
if (screenPosition >= content.top) {
nav.addClass("shrink");
}
});

Posts Followed

Following

  • No Content

Followers

  • No Content