Menu icon Foundation
xlarge compatibility with off-canvas

Hi,

I am using the additional breakpoints large and xxlarge in an project.

If you use off-canvas container and you want to reveal the panel on large screen, you are supposed to use .reveal-for-medium and .reveal-for-large classes. I you decide to use .reveal-for-xlarge or .reveal-for-xxlarge classes, you will end up in a javascript parse error in foundation.js, as they are not defined in foundation.js

I updated the JS file by changing :

 

this.$element[0].className.match(/(reveal-for-medium|reveal-for-large)/g)

 

into :

 

this.$element[0].className.match(/(reveal-for-medium|reveal-for-large|reveal-for-xlarge|reveal-for-xxlarge)/g)

 

And it works like a charm :)

 

I was just wondering if there is a better way to do it as my changes will be erased each time I will update foundation ?

Or if it is a kind of bug, as I am the only one using xlarge breakpoints with off-canvas with .reveal classes ?

 

Thanks for your help !

xlarge xxlarge off-canvas reveal

Hi,

I am using the additional breakpoints large and xxlarge in an project.

If you use off-canvas container and you want to reveal the panel on large screen, you are supposed to use .reveal-for-medium and .reveal-for-large classes. I you decide to use .reveal-for-xlarge or .reveal-for-xxlarge classes, you will end up in a javascript parse error in foundation.js, as they are not defined in foundation.js

I updated the JS file by changing :

 

this.$element[0].className.match(/(reveal-for-medium|reveal-for-large)/g)

 

into :

 

this.$element[0].className.match(/(reveal-for-medium|reveal-for-large|reveal-for-xlarge|reveal-for-xxlarge)/g)

 

And it works like a charm :)

 

I was just wondering if there is a better way to do it as my changes will be erased each time I will update foundation ?

Or if it is a kind of bug, as I am the only one using xlarge breakpoints with off-canvas with .reveal classes ?

 

Thanks for your help !

Jonny Wood almost 2 years ago

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...?