Menu icon Foundation

Engineer | Santa Cruz, CA

ZURB Software Engineer

My Posts

No Content

My Comments

Jordan Humphreys commented on james murphy's post almost 3 years

Hey James! I think the issue you are facing here has to do with the fact that the content in the modal is not visible on page load. What you can do to get around this is initialize Pizza after the modal has loaded.

$('#statisticsModal').on('opened', function () {
  Pizza.init(this);
});

Let me know if that helps.

Jordan Humphreys commented on atinpanalley's post over 3 years

Ah, yes. Good catch. I'll put in a ticket to make sure the docs get updated to state this.

Thanks!

Jordan Humphreys commented on Rafi Benkual's post over 3 years

Have you tried setting a global configuration?

$(document).foundation('joyride', {
  expose: true,
  modal: true
});

This should be called before start.

Jordan Humphreys commented on Rafi Benkual's post over 3 years

Can you post an example of your code?

You will have to set data-abide="ajax" to disable the native form submission on validation.

You will then have to listen for the validation events on your form and trigger you callbacks then:

$('#myForm').on('valid', function () {
  // trigger your callback here
});

Jordan Humphreys commented on Rafi Benkual's post over 3 years

What is the CMS module? Abide requires the presence of the data attributes as classes are only used for presentational changes.

Jordan Humphreys commented on Shmoo's post over 3 years

One thing to keep in mind with a Wordpress application is that many of the wordpress layouts include jQuery out of the box. Just make sure you are not including it twice. It should work with jQuery being loaded in the head. Make sure that the version of jQuery that you are using is 1.8+.

Also, if that does not work, you can try initializing foundation on Document Ready:

(function ($) {
  $(document).foundation();
});

Jordan Humphreys commented on Will Jayroe's post over 3 years

Hi Will,

The assets that are in the vendor file are the ones you should use.

/js/vendor/
- custom.modernizr.js - use this one, this will be renamed soon to modernizr.js and will be a full version of Modernizr going forward.
- fastclick.js - You do not need to use fastclick.js, but is is included in the vendor folder as support is built into Foundation. Fast click removes the 300ms delay on click events in mobile environments and must be included in the header of the page.
- jquery.autocomplete.js - this file is not a dependency and was actually included by accident and will be removed in subsequent releases.
- jquery.cookie.js - this cookie extension to jQuery is an optional dependency of Joyride. If you want to use Joyride's cookie functionality you will need to include this library after jquery.
- jquery.js - use this copy of jQuery as the other will be removed in subsequent releases.
- placeholder.js - Placeholder.js is used as a polyfill for older browsers (IE9) to support input inline placeholders. This is not a dependency.

/js/
- modernizr.js - don't use this one.
- jquery.js - don't use this one.

/js/foundation/
- foundation.js - this file is the Foundation library loader, it must be included before you include any of the individual components, it is not an expanded version of the foundation.min.js file.

I hope that helps!

Jordan Humphreys commented on Jack Keller's post over 3 years

Hey Jack,

You can run multiple versions of Foundation without a problem. Foundation 4 uses the 'zurb-foundation' gem if you are using a ruby-based install (ex. with a gem file: http://foundation.zurb.com/docs/v/4.3.2/sass.html#multiple-versions), whereas Foundation 5 uses the 'foundation' gem CLI for managing Foundation projects and the 'foundation-rails' gem for Rails projects.

So essentially, if you run through the setup on http://foundation.zurb.com/docs/sass.html you shouldn't have any problems with your old projects.

The only situation where you should be concerned about conflicts is if your are running multiple versions of Foundation 4 on the same computer. In that case, you should you a Gemfile to lock the version for your project: http://foundation.zurb.com/docs/v/4.3.2/sass.html#multiple-versions

I hope that helps!

Jordan Humphreys commented on Steven Mapes's post over 3 years

Sounds like this may be a position: fixed bug. What versions of Android are your devices running and what browsers are you testing in on these devices?

Here is a work around for some versions of Android that have issues with position:fixed:
http://stackoverflow.com/questions/2784889/android-web-app-positionfixed-broken

From your description of the problem, it sounds like the browser does not understand position:fixed and is resorting to position:absolute as a workaround. This would explain the fact that clearing is appearing at the top of the page.

Are you able to post an example page demoing your issue so I can further debug it?

Jordan Humphreys commented on Rafi Benkual's post over 3 years

Can you post an example of your JoyRide directions (the element)?

Posts Followed

No Content

Following

Followers

My Posts

No Content

My Comments

You commented on james murphy's post almost 3 years

Hey James! I think the issue you are facing here has to do with the fact that the content in the modal is not visible on page load. What you can do to get around this is initialize Pizza after the modal has loaded.

$('#statisticsModal').on('opened', function () {
  Pizza.init(this);
});

Let me know if that helps.

You commented on atinpanalley's post over 3 years

Ah, yes. Good catch. I'll put in a ticket to make sure the docs get updated to state this.

Thanks!

You commented on Rafi Benkual's post over 3 years

Have you tried setting a global configuration?

$(document).foundation('joyride', {
  expose: true,
  modal: true
});

This should be called before start.

You commented on Rafi Benkual's post over 3 years

Can you post an example of your code?

You will have to set data-abide="ajax" to disable the native form submission on validation.

You will then have to listen for the validation events on your form and trigger you callbacks then:

$('#myForm').on('valid', function () {
  // trigger your callback here
});

You commented on Rafi Benkual's post over 3 years

What is the CMS module? Abide requires the presence of the data attributes as classes are only used for presentational changes.

You commented on Shmoo's post over 3 years

One thing to keep in mind with a Wordpress application is that many of the wordpress layouts include jQuery out of the box. Just make sure you are not including it twice. It should work with jQuery being loaded in the head. Make sure that the version of jQuery that you are using is 1.8+.

Also, if that does not work, you can try initializing foundation on Document Ready:

(function ($) {
  $(document).foundation();
});

You commented on Will Jayroe's post over 3 years

Hi Will,

The assets that are in the vendor file are the ones you should use.

/js/vendor/
- custom.modernizr.js - use this one, this will be renamed soon to modernizr.js and will be a full version of Modernizr going forward.
- fastclick.js - You do not need to use fastclick.js, but is is included in the vendor folder as support is built into Foundation. Fast click removes the 300ms delay on click events in mobile environments and must be included in the header of the page.
- jquery.autocomplete.js - this file is not a dependency and was actually included by accident and will be removed in subsequent releases.
- jquery.cookie.js - this cookie extension to jQuery is an optional dependency of Joyride. If you want to use Joyride's cookie functionality you will need to include this library after jquery.
- jquery.js - use this copy of jQuery as the other will be removed in subsequent releases.
- placeholder.js - Placeholder.js is used as a polyfill for older browsers (IE9) to support input inline placeholders. This is not a dependency.

/js/
- modernizr.js - don't use this one.
- jquery.js - don't use this one.

/js/foundation/
- foundation.js - this file is the Foundation library loader, it must be included before you include any of the individual components, it is not an expanded version of the foundation.min.js file.

I hope that helps!

You commented on Jack Keller's post over 3 years

Hey Jack,

You can run multiple versions of Foundation without a problem. Foundation 4 uses the 'zurb-foundation' gem if you are using a ruby-based install (ex. with a gem file: http://foundation.zurb.com/docs/v/4.3.2/sass.html#multiple-versions), whereas Foundation 5 uses the 'foundation' gem CLI for managing Foundation projects and the 'foundation-rails' gem for Rails projects.

So essentially, if you run through the setup on http://foundation.zurb.com/docs/sass.html you shouldn't have any problems with your old projects.

The only situation where you should be concerned about conflicts is if your are running multiple versions of Foundation 4 on the same computer. In that case, you should you a Gemfile to lock the version for your project: http://foundation.zurb.com/docs/v/4.3.2/sass.html#multiple-versions

I hope that helps!

You commented on Steven Mapes's post over 3 years

Sounds like this may be a position: fixed bug. What versions of Android are your devices running and what browsers are you testing in on these devices?

Here is a work around for some versions of Android that have issues with position:fixed:
http://stackoverflow.com/questions/2784889/android-web-app-positionfixed-broken

From your description of the problem, it sounds like the browser does not understand position:fixed and is resorting to position:absolute as a workaround. This would explain the fact that clearing is appearing at the top of the page.

Are you able to post an example page demoing your issue so I can further debug it?

You commented on Rafi Benkual's post over 3 years

Can you post an example of your JoyRide directions (the element)?

Posts Followed

No Content

Following

Followers

  • No Content