Menu icon Foundation

My Posts




  • 7
    Replies
  • requireJS with Foundation 5

    By partizan

    requireJS

    Hi, I'm looking into using RequireJS to load JS but I'm having difficulty properly integrating it with Foundation 5. I found some resources online that show how to do that but they don't seem to work for me: * https://gist.github.com/mscharley/10746... (continued)

    Last Reply by Greg Stephens about 3 years ago


My Comments

partizan commented on partizan's post about 3 years

I was forgetting to init foundation:

require(["jquery", "foundation", "foundation.interchange"], function ($, foundation, interchange){
$(function() {
$(document).foundation();
});
});

It's all good now

partizan commented on partizan's post about 3 years

Something like this, but I was hoping that Foundation provides this already and I don't have to create my own classes.

Doesn't the gutter change - shrink for smaller screens and expands for larger screens (as it hits a breakpoint)?

partizan commented on partizan's post over 3 years

I replaced $(document).load(function() {} with $(document).ready(function() {} and it seems to work now. I'm not sure why the original developer who wrote the code used .load() instead of .ready() to initialize the foundation code. Is changing it to .ready() wrong?

Erik, I also removed the as recommended. You're right, it doesn't make sense to be there.

This is the code that works now:

require(['jquery', 'foundation'], function($) {


  $(document).ready(function() { 

      $(this).foundation({
      orbit: {
        animation: 'slide',
        timer_speed: 1000,
        pause_on_hover: true,
        animation_speed: 500,
        navigation_arrows: true,
        bullets: false
      }
      }); 
    });
});


partizan commented on partizan's post over 3 years

I'm not getting any errors in FireBug concole which makes it hard to debug what the problem is. I was hoping that you'll be able to spot something that doesn't look right.

If I place a JS alert within:

require(['jquery', 'foundation'], function($) {
alert('hi');
}

then the alert is shown, so I know this part is fine. However, when I place the alert within:

require(['jquery', 'foundation'], function($) {
$(document).load(function() {
alert('hi');
});
});

then the alert is not shown, so I know something is wrong there and can't initialize the orbit feature.

partizan commented on partizan's post over 3 years

//====== Code in app.js under /js ========= //

requirejs.config({
  paths: {
    "jquery": '../bower_components/jquery/dist/jquery.min',
    "jquery.cookie": '../bower_components/jquery.cookie/jquery.cookie',
    "foundation": '../bower_components/foundation/js/foundation',
    "foundation.abide": '../bower_components/foundation/js/foundation/foundation.abide',
    "foundation.accordion": '../bower_components/foundation/js/foundation/foundation.accordion',
    "foundation.alert": '../bower_components/foundation/js/foundation/foundation.alert',
    "foundation.clearing": '../bower_components/foundation/js/foundation/foundation.clearing',
    "foundation.dropdown": '../bower_components/foundation/js/foundation/foundation.dropdown',
    "foundation.equalizer": '../bower_components/foundation/js/foundation/foundation.equalizer',
    "foundation.interchange": '../bower_components/foundation/js/foundation/foundation.interchange',
    "foundation.joyride": '../bower_components/foundation/js/foundation/foundation.joyride',
    "foundation.magellan": '../bower_components/foundation/js/foundation/foundation.magellan',
    "foundation.offcanvas": '../bower_components/foundation/js/foundation/foundation.offcanvas',
    "foundation.orbit": '../bower_components/foundation/js/foundation/foundation.orbit',
    "foundation.reveal": '../bower_components/foundation/js/foundation/foundation.reveal',
    "foundation.slider": '../bower_components/foundation/js/foundation/foundation.slider',
    "foundation.tab": '../bower_components/foundation/js/foundation/foundation.tab',
    "foundation.toolbar": '../bower_components/foundation/js/foundation/foundation.toolbar',
    "foundation.topbar": '../bower_components/foundation/js/foundation/foundation.topbar'
  },
  shim: {
    "jquery.cookie": ['jquery'],
    "foundation": ['jquery'],
    "foundation.abide": ['foundation'],
    "foundation.accordion": ['foundation'],
    "foundation.alert": ['foundation'],
    "foundation.clearing": ['foundation'],
    "foundation.dropdown": ['foundation'],
    "foundation.equalizer": ['foundation'],
    "foundation.interchange": ['foundation'],
    "foundation.joyride": ['foundation', 'jquery.cookie'],
    "foundation.magellan": ['foundation'],
    "foundation.offcanvas": ['foundation'],
    "foundation.orbit": ['foundation'],
    "foundation.reveal": ['foundation'],
    "foundation.slider": ['foundation'],
    "foundation.tab": ['foundation'],
    "foundation.toolbar": ['foundation'],
    "foundation.topbar": ['foundation']
  }
});

// Add any foundation modules you require to the end of this line.
require(['jquery', 'foundation'], function($) {

  // Foundation JavaScript
  // Documentation can be found at: http://foundation.zurb.com/docs
    $(document).load(function() {
      $(this).foundation({
    orbit: {
          animation: 'slide',
          timer_speed: 1000,
          pause_on_hover: true,
          animation_speed: 500,
          navigation_arrows: true,
          bullets: false
    }
    });
    });
});     





Posts Followed

  • 7
    Replies
  • requireJS with Foundation 5

    By partizan

    requireJS

    Hi, I'm looking into using RequireJS to load JS but I'm having difficulty properly integrating it with Foundation 5. I found some resources online that show how to do that but they don't seem to work for me: * https://gist.github.com/mscharley/10746... (continued)

    Last Reply by Greg Stephens about 3 years ago


Following

    No Content

Followers

My Posts

My Comments

You commented on partizan's post about 3 years

I was forgetting to init foundation:

require(["jquery", "foundation", "foundation.interchange"], function ($, foundation, interchange){
$(function() {
$(document).foundation();
});
});

It's all good now

You commented on partizan's post about 3 years

Something like this, but I was hoping that Foundation provides this already and I don't have to create my own classes.

Doesn't the gutter change - shrink for smaller screens and expands for larger screens (as it hits a breakpoint)?

You commented on partizan's post over 3 years

I replaced $(document).load(function() {} with $(document).ready(function() {} and it seems to work now. I'm not sure why the original developer who wrote the code used .load() instead of .ready() to initialize the foundation code. Is changing it to .ready() wrong?

Erik, I also removed the as recommended. You're right, it doesn't make sense to be there.

This is the code that works now:

require(['jquery', 'foundation'], function($) {


  $(document).ready(function() { 

      $(this).foundation({
      orbit: {
        animation: 'slide',
        timer_speed: 1000,
        pause_on_hover: true,
        animation_speed: 500,
        navigation_arrows: true,
        bullets: false
      }
      }); 
    });
});


You commented on partizan's post over 3 years

I'm not getting any errors in FireBug concole which makes it hard to debug what the problem is. I was hoping that you'll be able to spot something that doesn't look right.

If I place a JS alert within:

require(['jquery', 'foundation'], function($) {
alert('hi');
}

then the alert is shown, so I know this part is fine. However, when I place the alert within:

require(['jquery', 'foundation'], function($) {
$(document).load(function() {
alert('hi');
});
});

then the alert is not shown, so I know something is wrong there and can't initialize the orbit feature.

You commented on partizan's post over 3 years

//====== Code in app.js under /js ========= //

requirejs.config({
  paths: {
    "jquery": '../bower_components/jquery/dist/jquery.min',
    "jquery.cookie": '../bower_components/jquery.cookie/jquery.cookie',
    "foundation": '../bower_components/foundation/js/foundation',
    "foundation.abide": '../bower_components/foundation/js/foundation/foundation.abide',
    "foundation.accordion": '../bower_components/foundation/js/foundation/foundation.accordion',
    "foundation.alert": '../bower_components/foundation/js/foundation/foundation.alert',
    "foundation.clearing": '../bower_components/foundation/js/foundation/foundation.clearing',
    "foundation.dropdown": '../bower_components/foundation/js/foundation/foundation.dropdown',
    "foundation.equalizer": '../bower_components/foundation/js/foundation/foundation.equalizer',
    "foundation.interchange": '../bower_components/foundation/js/foundation/foundation.interchange',
    "foundation.joyride": '../bower_components/foundation/js/foundation/foundation.joyride',
    "foundation.magellan": '../bower_components/foundation/js/foundation/foundation.magellan',
    "foundation.offcanvas": '../bower_components/foundation/js/foundation/foundation.offcanvas',
    "foundation.orbit": '../bower_components/foundation/js/foundation/foundation.orbit',
    "foundation.reveal": '../bower_components/foundation/js/foundation/foundation.reveal',
    "foundation.slider": '../bower_components/foundation/js/foundation/foundation.slider',
    "foundation.tab": '../bower_components/foundation/js/foundation/foundation.tab',
    "foundation.toolbar": '../bower_components/foundation/js/foundation/foundation.toolbar',
    "foundation.topbar": '../bower_components/foundation/js/foundation/foundation.topbar'
  },
  shim: {
    "jquery.cookie": ['jquery'],
    "foundation": ['jquery'],
    "foundation.abide": ['foundation'],
    "foundation.accordion": ['foundation'],
    "foundation.alert": ['foundation'],
    "foundation.clearing": ['foundation'],
    "foundation.dropdown": ['foundation'],
    "foundation.equalizer": ['foundation'],
    "foundation.interchange": ['foundation'],
    "foundation.joyride": ['foundation', 'jquery.cookie'],
    "foundation.magellan": ['foundation'],
    "foundation.offcanvas": ['foundation'],
    "foundation.orbit": ['foundation'],
    "foundation.reveal": ['foundation'],
    "foundation.slider": ['foundation'],
    "foundation.tab": ['foundation'],
    "foundation.toolbar": ['foundation'],
    "foundation.topbar": ['foundation']
  }
});

// Add any foundation modules you require to the end of this line.
require(['jquery', 'foundation'], function($) {

  // Foundation JavaScript
  // Documentation can be found at: http://foundation.zurb.com/docs
    $(document).load(function() {
      $(this).foundation({
    orbit: {
          animation: 'slide',
          timer_speed: 1000,
          pause_on_hover: true,
          animation_speed: 500,
          navigation_arrows: true,
          bullets: false
    }
    });
    });
});     





Posts Followed


Following

  • No Content

Followers

  • No Content