Jordan Humphreys

20

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.

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:

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

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.

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

20

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.

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:

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

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.

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?