Menu icon Foundation

Coder | Portland, Oregon

My Posts

No Content

My Comments

John Moore commented on Sebastian Civarolo's post over 4 years

Fiddle: http://jsfiddle.net/jomoweb/s5zzxfaj/2/

(Fiddle also includes some tweaks to remove vertical offset that made destination jump to bottom of expedition v.s. top)

I'm also having this issue. I took a shot at making a stop point for the expedition when the bottom hits the last destination point. Not sure if it will work with your markup, but you can try modifying your foundation.magellan.js with the code below. It's not overlapping anymore, but there is a little "blip" there when you keep scrolling. I will update this thread if I can solve that.

Replace line 114 (or wherever you find this):

expedition.css({position:'fixed', top: settings.fixed_top}).addClass('fixed');

With this:

var lastDestination = $("[data-magellan-destination]:last-child"); // Cache last destination (ld)
var ldBottom = lastDestination.offset().top + lastDestination.height(); // Calculate offset bottom of ld
var ldBottomYPosition = (ldBottom-window_top_offset); // Calculate ld bottom position

// If expedition bottom passes ld bottom
if(ldBottomYPosition <= (expedition.height() - settings.destination_threshold)) {
  // Position expedition top so bottom lines up with last destination
  // For different behavior, replace next line with your code
  expedition.css({position:'fixed', top: ldBottomYPosition - expedition.height(), minWidth: 0, width: expedition.outerWidth() + 'px'});
} else {
  // Magellan as .side-nav width fix: http://foundation.zurb.com/forum/posts/13831-fixed-sidebar
  expedition.css({position:'fixed', top: settings.fixed_top, minWidth: 0, width: expedition.outerWidth() + 'px'});
}

John Moore commented on Eric Dumensil's post over 4 years

I had the same issue. When the class fixed is added, the expedition goes full width of screen. I found a solution in the forums that worked for me.

http://foundation.zurb.com/forum/posts/13831-fixed-sidebar

In foundation.magellan.js, make this alteration around line 120...

 // Adding dynamic inherited width to keep menu in sidebar
// expedition.css({position:'fixed', top: settings.fixed_top}).addClass('fixed');
expedition.css({position:'fixed', top: settings.fixed_top, minWidth: 0, width: expedition.outerWidth() + 'px'});

With that code, instead of adding the class fixed, it sets the css width to keep it in the sidebar.

John Moore commented on GregR's post over 4 years

Gregr & Eric,

http://jsfiddle.net/jomoweb/s5zzxfaj/2/

This fiddle contains a version of the altered magellan sidenav.

After more extensive testing, I found these 3 updates to foundation.magellan.js (version 5.4.7) made it possible.

  1. Disable the vertical offset, which was Gregr's problem, by removing "- expedition.outerHeight()" in 2 places

Line 47:
Javascript
// scroll_top = scroll_top - expedition.outerHeight();

Line 155:
Javascript
// var top_offset = Math.floor(dest.offset().top - settings.destination_threshold - expedition.outerHeight());
var top_offset = Math.floor(dest.offset().top - settings.destination_threshold);

  1. For a side nav, you will notice the nav will go full width when it becomes fixed. To keep it the width of the container.

Line 114:
Javascript
// expedition.css({position:'fixed', top: settings.fixed_top}).addClass('fixed');
expedition.css({position:'fixed', top: settings.fixed_top, minWidth: 0, width: expedition.outerWidth() + 'px'});

(Credit: http://foundation.zurb.com/forum/posts/13831-fixed-sidebar)

  1. The next issue I had was that the side-nav would overlap anything below the last destination when scrolling down the page. Here is the fix I made, but there is an annoying little blip as you will see in the fiddle. I still think it is better than the overlap at this point though.

Line 114: (Building on last update)
```Javascript

       // Adding expedition stop point so it can't overlap elements below last destination
      var lastDestination = $("[data-magellan-destination]:last-child"); // Cache last destination (ld)
      var ldBottom = lastDestination.offset().top + lastDestination.height(); // Calculate offset bottom of ld
      var ldBottomYPosition = (ldBottom-window_top_offset); // Calculate ld bottom position

      // If expedition bottom passes ld bottom
      if(ldBottomYPosition <= (expedition.height() - settings.destination_threshold)) {
        // Position expedition top so bottom lines up with last destination
        // For different behavior, replace next line with your code
        expedition.css({position:'fixed', top: ldBottomYPosition - expedition.height(), minWidth: 0, width: expedition.outerWidth() + 'px'});
      } else {
        // Magellan as .side-nav width fix: http://foundation.zurb.com/forum/posts/13831-fixed-sidebar
        expedition.css({position:'fixed', top: settings.fixed_top, minWidth: 0, width: expedition.outerWidth() + 'px'});
      }

John Moore commented on Ross Berenson's post over 4 years

I have the same exact problem as well. I found out what caused it was nesting multiple data-equalizer inside of another. The inner nested one rows worked, while the parent was not. I don't see anything in the documentation, but maybe data equalizer might can't be nested more than once in this manner? Nesting only one row output the expected results.

See example here:
http://jsfiddle.net/uvyLLgLz/

Ross, I can't tell for sure, but it looks like you might be nesting something? I see behavior: nest in your code, but have not worked with that yet. If so, you might try un-nested to see if that debugs it?

Tina & Colin, I think your issue is that you have multiple tiled rows of divs, and this may only work on one row? If you wrap each row of divs with a parent row it should work. It did for me anyway. Not sure if that is a bug or just how it is intended to work. When I modified tina's code, it worked.

<div class="row" data-equalizer>
  <div class="small-6 large-4 columns">
    <div class="panel radius" data-equalizer-watch>
    </div>
  </div>
  <div class="small-6 large-4 columns">
    <div class="panel radius" data-equalizer-watch>
    </div>
  </div>
  <div class="small-6 large-4 columns">
    <div class="panel radius" data-equalizer-watch>
    </div>
  </div>
</div>
<div class="row" data-equalizer>
  <div class="small-6 large-4 columns">
    <div class="panel radius" data-equalizer-watch>
    </div>
  </div>
  <div class="small-6 large-4 columns">
    <div class="panel radius" data-equalizer-watch>
    </div>
  </div>
  <div class="small-6 large-4 columns">
    <div class="panel radius" data-equalizer-watch>
    </div>
  </div>
</div>

Posts Followed


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Sebastian Civarolo's post over 4 years

Fiddle: http://jsfiddle.net/jomoweb/s5zzxfaj/2/

(Fiddle also includes some tweaks to remove vertical offset that made destination jump to bottom of expedition v.s. top)

I'm also having this issue. I took a shot at making a stop point for the expedition when the bottom hits the last destination point. Not sure if it will work with your markup, but you can try modifying your foundation.magellan.js with the code below. It's not overlapping anymore, but there is a little "blip" there when you keep scrolling. I will update this thread if I can solve that.

Replace line 114 (or wherever you find this):

expedition.css({position:'fixed', top: settings.fixed_top}).addClass('fixed');

With this:

var lastDestination = $("[data-magellan-destination]:last-child"); // Cache last destination (ld)
var ldBottom = lastDestination.offset().top + lastDestination.height(); // Calculate offset bottom of ld
var ldBottomYPosition = (ldBottom-window_top_offset); // Calculate ld bottom position

// If expedition bottom passes ld bottom
if(ldBottomYPosition <= (expedition.height() - settings.destination_threshold)) {
  // Position expedition top so bottom lines up with last destination
  // For different behavior, replace next line with your code
  expedition.css({position:'fixed', top: ldBottomYPosition - expedition.height(), minWidth: 0, width: expedition.outerWidth() + 'px'});
} else {
  // Magellan as .side-nav width fix: http://foundation.zurb.com/forum/posts/13831-fixed-sidebar
  expedition.css({position:'fixed', top: settings.fixed_top, minWidth: 0, width: expedition.outerWidth() + 'px'});
}

You commented on Eric Dumensil's post over 4 years

I had the same issue. When the class fixed is added, the expedition goes full width of screen. I found a solution in the forums that worked for me.

http://foundation.zurb.com/forum/posts/13831-fixed-sidebar

In foundation.magellan.js, make this alteration around line 120...

 // Adding dynamic inherited width to keep menu in sidebar
// expedition.css({position:'fixed', top: settings.fixed_top}).addClass('fixed');
expedition.css({position:'fixed', top: settings.fixed_top, minWidth: 0, width: expedition.outerWidth() + 'px'});

With that code, instead of adding the class fixed, it sets the css width to keep it in the sidebar.

You commented on GregR's post over 4 years

Gregr & Eric,

http://jsfiddle.net/jomoweb/s5zzxfaj/2/

This fiddle contains a version of the altered magellan sidenav.

After more extensive testing, I found these 3 updates to foundation.magellan.js (version 5.4.7) made it possible.

  1. Disable the vertical offset, which was Gregr's problem, by removing "- expedition.outerHeight()" in 2 places

Line 47:
Javascript
// scroll_top = scroll_top - expedition.outerHeight();

Line 155:
Javascript
// var top_offset = Math.floor(dest.offset().top - settings.destination_threshold - expedition.outerHeight());
var top_offset = Math.floor(dest.offset().top - settings.destination_threshold);

  1. For a side nav, you will notice the nav will go full width when it becomes fixed. To keep it the width of the container.

Line 114:
Javascript
// expedition.css({position:'fixed', top: settings.fixed_top}).addClass('fixed');
expedition.css({position:'fixed', top: settings.fixed_top, minWidth: 0, width: expedition.outerWidth() + 'px'});

(Credit: http://foundation.zurb.com/forum/posts/13831-fixed-sidebar)

  1. The next issue I had was that the side-nav would overlap anything below the last destination when scrolling down the page. Here is the fix I made, but there is an annoying little blip as you will see in the fiddle. I still think it is better than the overlap at this point though.

Line 114: (Building on last update)
```Javascript

       // Adding expedition stop point so it can't overlap elements below last destination
      var lastDestination = $("[data-magellan-destination]:last-child"); // Cache last destination (ld)
      var ldBottom = lastDestination.offset().top + lastDestination.height(); // Calculate offset bottom of ld
      var ldBottomYPosition = (ldBottom-window_top_offset); // Calculate ld bottom position

      // If expedition bottom passes ld bottom
      if(ldBottomYPosition <= (expedition.height() - settings.destination_threshold)) {
        // Position expedition top so bottom lines up with last destination
        // For different behavior, replace next line with your code
        expedition.css({position:'fixed', top: ldBottomYPosition - expedition.height(), minWidth: 0, width: expedition.outerWidth() + 'px'});
      } else {
        // Magellan as .side-nav width fix: http://foundation.zurb.com/forum/posts/13831-fixed-sidebar
        expedition.css({position:'fixed', top: settings.fixed_top, minWidth: 0, width: expedition.outerWidth() + 'px'});
      }

You commented on Ross Berenson's post over 4 years

I have the same exact problem as well. I found out what caused it was nesting multiple data-equalizer inside of another. The inner nested one rows worked, while the parent was not. I don't see anything in the documentation, but maybe data equalizer might can't be nested more than once in this manner? Nesting only one row output the expected results.

See example here:
http://jsfiddle.net/uvyLLgLz/

Ross, I can't tell for sure, but it looks like you might be nesting something? I see behavior: nest in your code, but have not worked with that yet. If so, you might try un-nested to see if that debugs it?

Tina & Colin, I think your issue is that you have multiple tiled rows of divs, and this may only work on one row? If you wrap each row of divs with a parent row it should work. It did for me anyway. Not sure if that is a bug or just how it is intended to work. When I modified tina's code, it worked.

<div class="row" data-equalizer>
  <div class="small-6 large-4 columns">
    <div class="panel radius" data-equalizer-watch>
    </div>
  </div>
  <div class="small-6 large-4 columns">
    <div class="panel radius" data-equalizer-watch>
    </div>
  </div>
  <div class="small-6 large-4 columns">
    <div class="panel radius" data-equalizer-watch>
    </div>
  </div>
</div>
<div class="row" data-equalizer>
  <div class="small-6 large-4 columns">
    <div class="panel radius" data-equalizer-watch>
    </div>
  </div>
  <div class="small-6 large-4 columns">
    <div class="panel radius" data-equalizer-watch>
    </div>
  </div>
  <div class="small-6 large-4 columns">
    <div class="panel radius" data-equalizer-watch>
    </div>
  </div>
</div>

Posts Followed

Following

  • No Content

Followers

  • No Content