Menu icon Foundation

My Posts

  • 5
    Replies
  • Orbit 5.2.0 IE9 compatibility

    By Toby Stokes

    OrbitIE95.2.0

    Anyone else experiencing problems with Orbit in IE9 since 5.2? Happens on the example at http://foundation.zurb.com/docs/components/orbit.html Layout seems fine, but it doesn't respond to any interaction, although no JS errors are being reported. IE9... (continued)

    Last Reply by johnny_n about 5 years ago





My Comments

Toby Stokes commented on Paula Hightower's post about 3 years

I concur that this is related to json data only, yml reloads as expected.
I can see gulp is calling the resetPages function when the .json file changes though.
(fwiw, I just converted my json file to yaml using http://jsontoyaml.com/ as a workaround!)
 

Toby Stokes commented on Clyde Witchard's post about 3 years

They're in the /dist folder, i.e.
/bower_components/foundation-sites/dist/plugins/

Toby Stokes commented on Craig Myles's post over 4 years

@extend does give a significantly different compiled result to a mixin, and can get especially messy when dealing with media queries as well.

I can see why a mixin to achieve the same (but probably compiled to more relevant point in the css) would be useful.

But I have examined the _visibilty.scss in F5 and don't think it exists yet. Might write one...

Toby Stokes commented on dtcrusher's post over 4 years

That variable $off-canvas-width in the settings is used in several places, all which need to be overridden.
From looking at my generated stylesheet, I made the following, which works for me:

$mobile-off-canvas-width: 100%; // or any other unit

@media #{$small-only} {
  .left-off-canvas-menu, 
  .left-submenu,
  .right-off-canvas-menu {
    width: $mobile-off-canvas-width;
  }
  .move-left > .inner-wrap {
    transform: translate3d(-$mobile-off-canvas-width, 0, 0);
  }
  .move-right > .inner-wrap {
    transform: translate3d($mobile-off-canvas-width, 0, 0);
  }
  .no-csstransforms .left-off-canvas-menu {
    left: -$mobile-off-canvas-width;
  }
  .no-csstransforms .move-left > .inner-wrap {
    right: $mobile-off-canvas-width;
  }
  .no-csstransforms .right-off-canvas-menu {
    right: -$mobile-off-canvas-width;
  }
  .no-csstransforms .move-right > .inner-wrap {
    left: $mobile-off-canvas-width;
  }
}

(n.b I'm using auto-prefixer to add in extra browser prefixes for transform. not sure that foundation does though, you may want to add those in to the above properties otherwise.)

Toby Stokes commented on Dennis Eusebio's post almost 5 years

My fix was to move the contents of that menu down when the off-canvas was triggered:

$(document)
.on('open.fndtn.offcanvas', '[data-offcanvas]', function() {

  $('.left-off-canvas-menu ul').css('top', $(window).scrollTop());

})


That's assuming your aside class="left-off-canvas-menu" just contains one ul - you might need to wrap other elements in something, or just use a different selector. Also required the following default CSS:

.left-off-canvas-menu ul {
    position: relative;
    top: 0;
  }

If you wanted to avoid positioning, you could probably change the padding-top or margin-top property instead.

Toby Stokes commented on Trevor West's post almost 5 years

Just a heads up,
I think off-canvas for ie9 is missing this block from 5.2.0:

// Opera 12.16 and IE9 - don't have 3d transforms
.csstransforms.no-csstransforms3d {
  .left-off-canvas-menu { @include translate2d(-100%, 0); }
  .right-off-canvas-menu { @include translate2d(100%, 0); }

  .move-left > .inner-wrap { @include translate2d(-($off-canvas-width),0); }
  .move-right > .inner-wrap { @include translate2d($off-canvas-width,0); }
}

Well I certainly had to add it back in after 5.2.3 upgrade

Toby Stokes commented on James Cocker's post about 5 years

Worth mentioning here, as this was blocking IE8 rendering for me -
If you load any @font-face declarations via css, this will cause selectivizer polyfill to give a blank screen for IE8
http://stiankarlsen.me/blog/how-to-fix-selectivizr-in-ie8/
Foundation (used to at least) load the Open sans font, which can be disabled http://foundation.zurb.com/forum/posts/420-open-sans-font-import-and-slow-load-times

Toby Stokes commented on Lukas Hausammann's post about 5 years

Just been looking at the source, and Lukas I'm afraid you can only have one equalizer per page currently.
It's looping through ALL the data-equalizer-watch items, not just ones in a particular row - so the only way it would work would be if both groups ended up the same height. But if you expected the same height always, then you wouldn't need to use equalizer!

I have a similar situation, I think it would be good if it could be applied more than once on a page, I might suggest that on github...

Toby Stokes commented on Toby Stokes's post about 5 years

Thanks Rich,
To summarise again,
Use the same 16 column grid, but set to a .row container that is 16/12 wide (133%)
Then just use the first 12 columns!

I can imagine there being some overflow/scroll problems if misapplied, but sounds workable in theory.

I actually ended up using a 24 column base grid, which gives me both the useful subdivisions of a 16-based and 12-based grid!

Toby Stokes commented on Toby Stokes's post about 5 years

As a workaround, I have reverted
bower_components/js/foundation/foundation.orbit.js
and
bower_components/scss/foundation/components/_orbit.js
to the 5.1.1 version which seems to work fine within a general 5.2 situation.

Posts Followed



Following

    No Content

Followers

My Posts

My Comments

You commented on Paula Hightower's post about 3 years

I concur that this is related to json data only, yml reloads as expected.
I can see gulp is calling the resetPages function when the .json file changes though.
(fwiw, I just converted my json file to yaml using http://jsontoyaml.com/ as a workaround!)
 

You commented on Clyde Witchard's post about 3 years

They're in the /dist folder, i.e.
/bower_components/foundation-sites/dist/plugins/

You commented on Craig Myles's post over 4 years

@extend does give a significantly different compiled result to a mixin, and can get especially messy when dealing with media queries as well.

I can see why a mixin to achieve the same (but probably compiled to more relevant point in the css) would be useful.

But I have examined the _visibilty.scss in F5 and don't think it exists yet. Might write one...

You commented on dtcrusher's post over 4 years

That variable $off-canvas-width in the settings is used in several places, all which need to be overridden.
From looking at my generated stylesheet, I made the following, which works for me:

$mobile-off-canvas-width: 100%; // or any other unit

@media #{$small-only} {
  .left-off-canvas-menu, 
  .left-submenu,
  .right-off-canvas-menu {
    width: $mobile-off-canvas-width;
  }
  .move-left > .inner-wrap {
    transform: translate3d(-$mobile-off-canvas-width, 0, 0);
  }
  .move-right > .inner-wrap {
    transform: translate3d($mobile-off-canvas-width, 0, 0);
  }
  .no-csstransforms .left-off-canvas-menu {
    left: -$mobile-off-canvas-width;
  }
  .no-csstransforms .move-left > .inner-wrap {
    right: $mobile-off-canvas-width;
  }
  .no-csstransforms .right-off-canvas-menu {
    right: -$mobile-off-canvas-width;
  }
  .no-csstransforms .move-right > .inner-wrap {
    left: $mobile-off-canvas-width;
  }
}

(n.b I'm using auto-prefixer to add in extra browser prefixes for transform. not sure that foundation does though, you may want to add those in to the above properties otherwise.)

You commented on Dennis Eusebio's post almost 5 years

My fix was to move the contents of that menu down when the off-canvas was triggered:

$(document)
.on('open.fndtn.offcanvas', '[data-offcanvas]', function() {

  $('.left-off-canvas-menu ul').css('top', $(window).scrollTop());

})


That's assuming your aside class="left-off-canvas-menu" just contains one ul - you might need to wrap other elements in something, or just use a different selector. Also required the following default CSS:

.left-off-canvas-menu ul {
    position: relative;
    top: 0;
  }

If you wanted to avoid positioning, you could probably change the padding-top or margin-top property instead.

You commented on Trevor West's post almost 5 years

Just a heads up,
I think off-canvas for ie9 is missing this block from 5.2.0:

// Opera 12.16 and IE9 - don't have 3d transforms
.csstransforms.no-csstransforms3d {
  .left-off-canvas-menu { @include translate2d(-100%, 0); }
  .right-off-canvas-menu { @include translate2d(100%, 0); }

  .move-left > .inner-wrap { @include translate2d(-($off-canvas-width),0); }
  .move-right > .inner-wrap { @include translate2d($off-canvas-width,0); }
}

Well I certainly had to add it back in after 5.2.3 upgrade

You commented on James Cocker's post about 5 years

Worth mentioning here, as this was blocking IE8 rendering for me -
If you load any @font-face declarations via css, this will cause selectivizer polyfill to give a blank screen for IE8
http://stiankarlsen.me/blog/how-to-fix-selectivizr-in-ie8/
Foundation (used to at least) load the Open sans font, which can be disabled http://foundation.zurb.com/forum/posts/420-open-sans-font-import-and-slow-load-times

You commented on Lukas Hausammann's post about 5 years

Just been looking at the source, and Lukas I'm afraid you can only have one equalizer per page currently.
It's looping through ALL the data-equalizer-watch items, not just ones in a particular row - so the only way it would work would be if both groups ended up the same height. But if you expected the same height always, then you wouldn't need to use equalizer!

I have a similar situation, I think it would be good if it could be applied more than once on a page, I might suggest that on github...

You commented on Toby Stokes's post about 5 years

Thanks Rich,
To summarise again,
Use the same 16 column grid, but set to a .row container that is 16/12 wide (133%)
Then just use the first 12 columns!

I can imagine there being some overflow/scroll problems if misapplied, but sounds workable in theory.

I actually ended up using a 24 column base grid, which gives me both the useful subdivisions of a 16-based and 12-based grid!

You commented on Toby Stokes's post about 5 years

As a workaround, I have reverted
bower_components/js/foundation/foundation.orbit.js
and
bower_components/scss/foundation/components/_orbit.js
to the 5.1.1 version which seems to work fine within a general 5.2 situation.

Posts Followed

Following

  • No Content

Followers

  • No Content