Menu icon Foundation

Designer

My Posts







My Comments

Sean M. Kimball commented on Sean M. Kimball's post about 2 months

I think I have it solved ...  Trying to re-initialize had some funny behavior with the overlay not working, but this seems to work nicely.
 
// switch the main navigation from top to right on screen resize
$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) {
setMenuLocation()
});

function setMenuLocation(){

var myQuery = Foundation.MediaQuery.current;
var myClass = $('#navigationCanvas').hasClass('position-top');

if((myQuery != 'small')) {
console.log('not small query = ' + myQuery)
$('#navigationCanvas').removeClass('position-right position-top').addClass('position-top');
}else{
console.log('is small query = ' + myQuery)
$('#navigationCanvas').removeClass('position-top position-right').addClass('position-right');
}

var options = "{content-overlay: true, transition: push}";
var OffCanvas = new Foundation.OffCanvas($('#navigationCanvas'), options);

}

$(document).ready(function(){

// set the main menu location
setMenuLocation();

});
 
 

Sean M. Kimball commented on Sean M. Kimball's post about 2 months

The site is a Modx CMS ~ so 2 menus would be more overhead, 2 menus to maintain & well, not semantic.  so not really an option.   We went with this to maintain the same feel on different devices, on a phone dropping the menu from the top covers the entire device screen sliding from the side leaves that little sliver of website on the left - it just 'feels' better. 
anyway - it's probably not a huge concern as you don't often get people resizing browsers and once they start a session on a particular device ~ it ain't moving to another.  AND I could completely ignore  the issue by using a cover behavior rather than the push. but it would be nice if the plugin was aware of the device size/breakpoints.
That being said, yes I took a look at the js for offcanvas & it does inject classes into the off-canvas-content container based on the initial class(es) of the off-canvas container.  So it's a matter of intercepting that (maybe there is an event available) or possibly re-initializing off canvas after a resize event.  ?? 

Sean M. Kimball commented on Sean M. Kimball's post 2 months

I finally gave up and just loaded all my scripts individually - too much effort to get it all working in app.js - no actual work getting done.  

Sean M. Kimball commented on Sean M. Kimball's post 2 months

you can install it using the same process as above 
npm install owl.carousel --save / --save-dev
and add the to app.js
import src from 'owl.carousel'; // seems like 'import dist' also works
but I still get the same type of errors as when trying to install flowplayer.  Not sure if I am pointing at the right import directory or if there is a conflict or if there are unresolved dependencies...  though npm is supposed to install all dependencies when you install the package. 
If you can solve that little proble, you probably solved mine too! 

Sean M. Kimball commented on Sean M. Kimball's post 2 months

I did get this to work finally.... 
npm install slick-carousel --save // we switched to slick carousel
then in my app.js:
import slick from 'slick-carousel';
Now I am trying to get flowplayer installed the same way - it's there and compiled into the app.js.  but I just get errors: 
Uncaught TypeError: Cannot read property 'bean' of undefined
Not sure what this is all about - a dependency error? how do I resolve it? 
 

Sean M. Kimball commented on Christian Magill's post 3 months

This is just what I needed for a project - though now have come into significant issues. 
I am using 3 slick sliders in a series of tabs - had some trouble with that but finally managed to figure out I had to initialize slick on each container as it's tab was clicked.  Worked great - this is the code I was using: 
 
$('[data-tabs]').on('change.zf.tabs', function(event, tab) {
var slickInitTarget = '.'+$(tab).attr('data-tab-target');
$(slickInitTarget).slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
 
I changed the data-tabs to data-responsive-accordion-tabs but could not find any events for the new responsive-accordion-tabs container type.   are there any events?  It appears the tabs/buttons get switched from 'accordion-item' to 'tabs-title' when the screen resizes. I need to catch the click event on either one... 

Sean M. Kimball commented on Sean M. Kimball's post 3 months

Foundation 6.4.1

Sean M. Kimball commented on Sean M. Kimball's post over 1 year
Sean M. Kimball commented on Sean M. Kimball's post over 1 year

the downloaded template seems to have fixed the issue, thanks.

Sean M. Kimball commented on Sean M. Kimball's post over 1 year

That link doesn't appear to have anything to do with the Javascript compiling just panini issues - nor could I find a link to a new gulp file.

What exactly did you do to get your Javascript compiling faithfully?

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Sean M. Kimball's post about 2 months

I think I have it solved ...  Trying to re-initialize had some funny behavior with the overlay not working, but this seems to work nicely.
 
// switch the main navigation from top to right on screen resize
$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) {
setMenuLocation()
});

function setMenuLocation(){

var myQuery = Foundation.MediaQuery.current;
var myClass = $('#navigationCanvas').hasClass('position-top');

if((myQuery != 'small')) {
console.log('not small query = ' + myQuery)
$('#navigationCanvas').removeClass('position-right position-top').addClass('position-top');
}else{
console.log('is small query = ' + myQuery)
$('#navigationCanvas').removeClass('position-top position-right').addClass('position-right');
}

var options = "{content-overlay: true, transition: push}";
var OffCanvas = new Foundation.OffCanvas($('#navigationCanvas'), options);

}

$(document).ready(function(){

// set the main menu location
setMenuLocation();

});
 
 

You commented on Sean M. Kimball's post about 2 months

The site is a Modx CMS ~ so 2 menus would be more overhead, 2 menus to maintain & well, not semantic.  so not really an option.   We went with this to maintain the same feel on different devices, on a phone dropping the menu from the top covers the entire device screen sliding from the side leaves that little sliver of website on the left - it just 'feels' better. 
anyway - it's probably not a huge concern as you don't often get people resizing browsers and once they start a session on a particular device ~ it ain't moving to another.  AND I could completely ignore  the issue by using a cover behavior rather than the push. but it would be nice if the plugin was aware of the device size/breakpoints.
That being said, yes I took a look at the js for offcanvas & it does inject classes into the off-canvas-content container based on the initial class(es) of the off-canvas container.  So it's a matter of intercepting that (maybe there is an event available) or possibly re-initializing off canvas after a resize event.  ?? 

You commented on Sean M. Kimball's post 2 months

I finally gave up and just loaded all my scripts individually - too much effort to get it all working in app.js - no actual work getting done.  

You commented on Sean M. Kimball's post 2 months

you can install it using the same process as above 
npm install owl.carousel --save / --save-dev
and add the to app.js
import src from 'owl.carousel'; // seems like 'import dist' also works
but I still get the same type of errors as when trying to install flowplayer.  Not sure if I am pointing at the right import directory or if there is a conflict or if there are unresolved dependencies...  though npm is supposed to install all dependencies when you install the package. 
If you can solve that little proble, you probably solved mine too! 

You commented on Sean M. Kimball's post 2 months

I did get this to work finally.... 
npm install slick-carousel --save // we switched to slick carousel
then in my app.js:
import slick from 'slick-carousel';
Now I am trying to get flowplayer installed the same way - it's there and compiled into the app.js.  but I just get errors: 
Uncaught TypeError: Cannot read property 'bean' of undefined
Not sure what this is all about - a dependency error? how do I resolve it? 
 

You commented on Christian Magill's post 3 months

This is just what I needed for a project - though now have come into significant issues. 
I am using 3 slick sliders in a series of tabs - had some trouble with that but finally managed to figure out I had to initialize slick on each container as it's tab was clicked.  Worked great - this is the code I was using: 
 
$('[data-tabs]').on('change.zf.tabs', function(event, tab) {
var slickInitTarget = '.'+$(tab).attr('data-tab-target');
$(slickInitTarget).slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
 
I changed the data-tabs to data-responsive-accordion-tabs but could not find any events for the new responsive-accordion-tabs container type.   are there any events?  It appears the tabs/buttons get switched from 'accordion-item' to 'tabs-title' when the screen resizes. I need to catch the click event on either one... 

You commented on Sean M. Kimball's post 3 months

Foundation 6.4.1

You commented on Sean M. Kimball's post over 1 year
You commented on Sean M. Kimball's post over 1 year

the downloaded template seems to have fixed the issue, thanks.

You commented on Sean M. Kimball's post over 1 year

That link doesn't appear to have anything to do with the Javascript compiling just panini issues - nor could I find a link to a new gulp file.

What exactly did you do to get your Javascript compiling faithfully?

Posts Followed

Following

  • No Content

Followers

  • No Content