Menu icon Foundation

Engineer

I'm an engineer working on Foundation at Zurb, and the proud owner of a ridiculous mustache.

My Posts

No Content

My Comments

Chris Oyler commented on Toon's post over 3 years

Short answer, no. There's not really a pause method for script running. We have visibility classes so you can hide elements, and responsiveToggle/Menu so you can change menu patterns based on screen size.
However, we did include a super handy MediaQuery utility library and event emitters you can tap into. So, if you wanted to 'pause' a dropdown menu, you could do something like:

$(window).on('changed.zf.mediaquery', function(evt, newSize, oldSize){
  if(newSize === 'small'){
    $('#dropdown-menu-foo').foundation('destroy');
  }else if(oldSize === 'small'){
    var menu = new Foundation.DropdownMenu($('#dropdown-menu=foo'));
  } 
}); 

Chris Oyler commented on Moreno's post over 3 years

Definitely update as soon as you can. There were tons of bug fixes and stability upgrades between 6.0.3 and 6.1.x

Chris Oyler commented on Justin J's post over 3 years

@Justin J do you mean closeOnClick? Clicking outside the modal window will close the modal itself, as will hitting the esc key, by default.

Chris Oyler commented on Daniel's post over 3 years

The attribute data-dropdownmenu shouldn't be there, it should add a random id string the data-dropdown-menu attribute. But that's a different thing, and not what your question is about.

A more succinct way to show what Brian was point out, is the options is just an object. So you can do this:

var opts = {disableHover: false, closeOnClick: true};
var menu = new Foundation.DropdownMenu($('#some-menu'), opts);

Chris Oyler commented on etienne bastien's post over 3 years

It initialized after a while, but wow, those photos are huge! If you resize your images in a photo editor, (even Preview will do), you'll get much better performance.

*edit

Brian Tan's answer was correct.
On your contact page, after the load method executes, you need to call foundation() as well. Also, .page doesn't exist on your contact page, but #page does. That needs to be fixed and you should be good.

Chris Oyler commented on Allan Jardine's post over 3 years

This is a tricky one, and the answer is... maybe.

If you check within <thead> or <tfoot> and the background property of a <tr> is transparent, you should be in Foundation 6.

Another option would be to create a <meta> tag, apply .foundation-mq and see if it has any computed styles. That's how Foundation 6 css and js communicate.

Chris Oyler commented on Andy Guera's post over 3 years

it certainly could be fixed, with a pull request or in the future. When I wrote this, 2 separate magellan plugins weren't on my use case radar, so magellan just sweeps the dom for anything with a [data-magellan-target] attribute. That could be changed a bit to look for [data-magellan-target="id-of-magellan-you-want-to-target-this-element"]. that would require the addition of an id to your magellan root element, and slightly more markup to your target elements.

Chris Oyler commented on Daniel Quinn's post over 3 years

Or, if you know an element will change size every so often, you can set the option checkEvery to a positive integer, like 50-ish. Then it will checkSizes on every 50 scroll events, which is fairly often.

Chris Oyler commented on Daniel Quinn's post over 3 years

Programmatically:
```Javascript
var bar = new Foundation.Sticky($('#selector'), {marginTop: 0,
marginBottom: 0,
topAnchor: 'someId:top',
btmAnchor: someId:bottom'});

$('something').on('some.event', function(){
bar._calc(true);
});
```

data-sticky init with $(document).foundation();

$('something').on('some.event', function(){
  $('#some-sticky-thing').foundation('_calc', true);
});

Chris Oyler commented on Rohan Purekar's post over 3 years

What exactly are you trying to do, a POST to an html file? Seems like you should be sending the login info to a backend somewhere right?

Posts Followed








  • 7
    Replies
  • Sticky Nav Over Underlying Content

    By Rob T

    Sticky nav

    I'm trying to create a sticky nav in Foundation 6 using this method: http://foundation.zurb.com/forum/posts/36690-how-to-create-a-sticky-top-bar-on-foundation-6. The thing it's not doing that I'd like it to do is to overlay the nav over the background... (continued)

    Last Reply by mcdvoice 10 months ago




Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Toon's post over 3 years

Short answer, no. There's not really a pause method for script running. We have visibility classes so you can hide elements, and responsiveToggle/Menu so you can change menu patterns based on screen size.
However, we did include a super handy MediaQuery utility library and event emitters you can tap into. So, if you wanted to 'pause' a dropdown menu, you could do something like:

$(window).on('changed.zf.mediaquery', function(evt, newSize, oldSize){
  if(newSize === 'small'){
    $('#dropdown-menu-foo').foundation('destroy');
  }else if(oldSize === 'small'){
    var menu = new Foundation.DropdownMenu($('#dropdown-menu=foo'));
  } 
}); 

You commented on Moreno's post over 3 years

Definitely update as soon as you can. There were tons of bug fixes and stability upgrades between 6.0.3 and 6.1.x

You commented on Justin J's post over 3 years

@Justin J do you mean closeOnClick? Clicking outside the modal window will close the modal itself, as will hitting the esc key, by default.

You commented on Daniel's post over 3 years

The attribute data-dropdownmenu shouldn't be there, it should add a random id string the data-dropdown-menu attribute. But that's a different thing, and not what your question is about.

A more succinct way to show what Brian was point out, is the options is just an object. So you can do this:

var opts = {disableHover: false, closeOnClick: true};
var menu = new Foundation.DropdownMenu($('#some-menu'), opts);

You commented on etienne bastien's post over 3 years

It initialized after a while, but wow, those photos are huge! If you resize your images in a photo editor, (even Preview will do), you'll get much better performance.

*edit

Brian Tan's answer was correct.
On your contact page, after the load method executes, you need to call foundation() as well. Also, .page doesn't exist on your contact page, but #page does. That needs to be fixed and you should be good.

You commented on Allan Jardine's post over 3 years

This is a tricky one, and the answer is... maybe.

If you check within <thead> or <tfoot> and the background property of a <tr> is transparent, you should be in Foundation 6.

Another option would be to create a <meta> tag, apply .foundation-mq and see if it has any computed styles. That's how Foundation 6 css and js communicate.

You commented on Andy Guera's post over 3 years

it certainly could be fixed, with a pull request or in the future. When I wrote this, 2 separate magellan plugins weren't on my use case radar, so magellan just sweeps the dom for anything with a [data-magellan-target] attribute. That could be changed a bit to look for [data-magellan-target="id-of-magellan-you-want-to-target-this-element"]. that would require the addition of an id to your magellan root element, and slightly more markup to your target elements.

You commented on Daniel Quinn's post over 3 years

Or, if you know an element will change size every so often, you can set the option checkEvery to a positive integer, like 50-ish. Then it will checkSizes on every 50 scroll events, which is fairly often.

You commented on Daniel Quinn's post over 3 years

Programmatically:
```Javascript
var bar = new Foundation.Sticky($('#selector'), {marginTop: 0,
marginBottom: 0,
topAnchor: 'someId:top',
btmAnchor: someId:bottom'});

$('something').on('some.event', function(){
bar._calc(true);
});
```

data-sticky init with $(document).foundation();

$('something').on('some.event', function(){
  $('#some-sticky-thing').foundation('_calc', true);
});

You commented on Rohan Purekar's post over 3 years

What exactly are you trying to do, a POST to an html file? Seems like you should be sending the login info to a backend somewhere right?

Posts Followed

Following

  • No Content

Followers

  • No Content