Menu icon Foundation

My Posts

No Content

My Comments

Jeanie Chung commented on Anton's post over 4 years

Hey Anton-

In Foundation for Apps, we use ui-router. It looks like firebase has documentation (https://www.firebase.com/docs/web/libraries/angular/guide/user-auth.html#section-routers) for hooking up the authentication with ui-router. If you see the code snippet sample, you can switch it over to "ui-router" formatting, and then place that code in your app.js file. Your controller names may differ from the default firebase names provided in the sample.

Jeanie Chung commented on Rahul Verma's post over 4 years

Hey Rahul-

Looking at the source code, Equalizer is mainly built for the functionality of nested components, so the use case that you're describing wouldn't work as expected.

You could possibly look for other jQuery plugins that handle a wider variety of use cases that may solve your problem! matchHeight.js is a good one. :)

Jeanie Chung commented on Rick's post over 4 years

Hey Rick-

It looks like in your code snippet, you're missing a key method ('.on') that basically tells jQuery to listen for that open event. So your final code snippet will look something like this:

$(document).on('open.fndtn.offcanvas', '[data-offcanvas]', function () {
    // ... DO COOL STUFF
});

Jeanie Chung commented on Rob Feature's post over 4 years

Sorry Rob. I meant to clarify with my last post that I forgot to change the width property on the instructions I gave. Your CSS declaration will look like:

meta.tablet {
  font-family: "/only screen and (min-width:500px)/";
  width: 500px;
}

Actually, upon closer look of Foundation, it appears that the width property isn't used in registering the media, only the media query rule (the font-family property).

It appears the width property might be part of legacy code and is just there if someone were to want to use that value separately in their custom JS instead of having to parse through the media query rule to get to the breakpoint value.

Jeanie Chung commented on Rob Feature's post over 4 years

Oh, sorry. The "font-family" is just a property that we're using so that we can parse that property on the JS end and match up the media query with the named width (I forgot to change that with your particular property) so that width property should match up with the lower-bound of your media query. Essentially, it is just our way of passing SCSS variables to Foundation so that we can use functions like the ones listed above.

Jeanie Chung commented on Rob Feature's post over 4 years

Hey Rob-

You can do the following:

  1. First define your tablet as a meta class. This is what puts the rule in the DOM so that Foundation JS can parse the rule.
meta.tablet {
  font-family: "/only screen and (min-width:500px)/";
  width: 40em;
}
  1. Register the breakpoint with the .register_media method. The first argument is what it will be known in Foundation JS, the second argument is what you defined the meta class as in Step 1.
Foundation.utils.register_media('tablet', 'tablet');

  1. Use the match media library (instead of Foundation.utils) to check for the breakpoint.
if (matchMedia(Foundation.media_queries['tablet']).matches){

// do stuff ...
};

Currently, the Foundation.utils object only has defined media queries for the ones listed in the documentation, but we will be expanding this API with the upcoming version of Foundation 6. :)

Jeanie Chung commented on Tim Cross's post over 4 years

If you look at the source code here:

           if (el_patterns[i][1].test(value) && valid_length ||
            !required && el.value.length < 1 || $(el).attr('disabled')) {
            el_validations.push(true);
          } else {
            el_validations.push(false);
          }

the first part of it is checking for three conditions: whether or not the pattern matches the value, whether it is NOT required and the field is empty, and whether or not the input is disabled. Matching any of these conditions will not fire the error labels on your form.

Any other situation will trigger the error labels. So the fact that the you're putting the "required" flag on there and the number input is parsing it as a blank field (i.e. the length of the input is < 1), it's tripping the required flag and marking it as an invalid field.

Jeanie Chung commented on Tim Cross's post over 4 years

Hey Tim-

So the number input actually strips out any value that is a non-numeric value automatically, so when you enter a non-numeric number, what is sent to Abide is a blank value. Abide is not able to match a "blank" value against the RegEx we have defined in the library and that's why the error is not triggering.

If you want to prioritize showing the input error, I would recommend using an input with "type='text'" and "pattern='number'". In the meantime, we will try to account for this in our next version of Abide. Thanks for bringing this to our attention!

Jeanie

Jeanie Chung commented on Stuart's post over 4 years

Hi Stuart-

You can open zf-modal programmatically using the following syntax:

<div class="button" ng-click="modal.activate()">Activate Modal, Captain!</div>

and set your modal parameters as follows:

$scope.foo = "Bloop!";
$scope.bar = "Blee!";
var config = {
id: 'your optional id here',
template: '{{foo}} {{bar}}',
contentScope: {
foo: $scope.foo,
bar: $scope.bar
},
animationIn: 'slideInFromTop'
}
$scope.modal = new ModalFactory(config);

When you call the ModalFactory and pass the configuration as an argument, you can set the variables to your liking. The contentScope object is a way for you to easily pass through content variables you may have in your parent scope (this was mainly created for deeply nested modals) and you can additionally pass your item IDs through with the ng-click directive as well.

Jeanie Chung commented on Kieran Mahon's post over 4 years

You can just add this snippet in and it should show the modal automatically. This is an event handler that fires once your DOM is loaded:

  StartController.$inject = ['$scope', '$stateParams', '$state', '$controller','FoundationApi'];
  function StartController($scope, $stateParams, $state, $controller, FoundationApi) {
  angular.extend(this, $controller('DefaultController', {$scope: $scope, $stateParams: $stateParams, $state: $state}));
   $scope.$on('$viewContentLoaded', function(e) {
       FoundationApi.publish('tcModal', 'open');
       e.preventDefault();
   })
  }

We're injecting the FoundationApi and using it in the event handler for $viewContentLoaded, which will fire once the DOM loads. See if that helps!

Posts Followed


  • 2
    Replies
  • Off-canvas event bindings

    By Rick

    off-canvas javascript event

    I have come across a curious issue when trying to bind callbacks to the off-canvas open event. Prior to using Foundation 5.5.2 using the event name "open" worked correctly and callbacks were fired as expected. In Foundation 5.5.2 the event name "open" ... (continued)

    Last Reply by Rick over 4 years ago





Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Anton's post over 4 years

Hey Anton-

In Foundation for Apps, we use ui-router. It looks like firebase has documentation (https://www.firebase.com/docs/web/libraries/angular/guide/user-auth.html#section-routers) for hooking up the authentication with ui-router. If you see the code snippet sample, you can switch it over to "ui-router" formatting, and then place that code in your app.js file. Your controller names may differ from the default firebase names provided in the sample.

You commented on Rahul Verma's post over 4 years

Hey Rahul-

Looking at the source code, Equalizer is mainly built for the functionality of nested components, so the use case that you're describing wouldn't work as expected.

You could possibly look for other jQuery plugins that handle a wider variety of use cases that may solve your problem! matchHeight.js is a good one. :)

You commented on Rick's post over 4 years

Hey Rick-

It looks like in your code snippet, you're missing a key method ('.on') that basically tells jQuery to listen for that open event. So your final code snippet will look something like this:

$(document).on('open.fndtn.offcanvas', '[data-offcanvas]', function () {
    // ... DO COOL STUFF
});

You commented on Rob Feature's post over 4 years

Sorry Rob. I meant to clarify with my last post that I forgot to change the width property on the instructions I gave. Your CSS declaration will look like:

meta.tablet {
  font-family: "/only screen and (min-width:500px)/";
  width: 500px;
}

Actually, upon closer look of Foundation, it appears that the width property isn't used in registering the media, only the media query rule (the font-family property).

It appears the width property might be part of legacy code and is just there if someone were to want to use that value separately in their custom JS instead of having to parse through the media query rule to get to the breakpoint value.

You commented on Rob Feature's post over 4 years

Oh, sorry. The "font-family" is just a property that we're using so that we can parse that property on the JS end and match up the media query with the named width (I forgot to change that with your particular property) so that width property should match up with the lower-bound of your media query. Essentially, it is just our way of passing SCSS variables to Foundation so that we can use functions like the ones listed above.

You commented on Rob Feature's post over 4 years

Hey Rob-

You can do the following:

  1. First define your tablet as a meta class. This is what puts the rule in the DOM so that Foundation JS can parse the rule.
meta.tablet {
  font-family: "/only screen and (min-width:500px)/";
  width: 40em;
}
  1. Register the breakpoint with the .register_media method. The first argument is what it will be known in Foundation JS, the second argument is what you defined the meta class as in Step 1.
Foundation.utils.register_media('tablet', 'tablet');

  1. Use the match media library (instead of Foundation.utils) to check for the breakpoint.
if (matchMedia(Foundation.media_queries['tablet']).matches){

// do stuff ...
};

Currently, the Foundation.utils object only has defined media queries for the ones listed in the documentation, but we will be expanding this API with the upcoming version of Foundation 6. :)

You commented on Tim Cross's post over 4 years

If you look at the source code here:

           if (el_patterns[i][1].test(value) && valid_length ||
            !required && el.value.length < 1 || $(el).attr('disabled')) {
            el_validations.push(true);
          } else {
            el_validations.push(false);
          }

the first part of it is checking for three conditions: whether or not the pattern matches the value, whether it is NOT required and the field is empty, and whether or not the input is disabled. Matching any of these conditions will not fire the error labels on your form.

Any other situation will trigger the error labels. So the fact that the you're putting the "required" flag on there and the number input is parsing it as a blank field (i.e. the length of the input is < 1), it's tripping the required flag and marking it as an invalid field.

You commented on Tim Cross's post over 4 years

Hey Tim-

So the number input actually strips out any value that is a non-numeric value automatically, so when you enter a non-numeric number, what is sent to Abide is a blank value. Abide is not able to match a "blank" value against the RegEx we have defined in the library and that's why the error is not triggering.

If you want to prioritize showing the input error, I would recommend using an input with "type='text'" and "pattern='number'". In the meantime, we will try to account for this in our next version of Abide. Thanks for bringing this to our attention!

Jeanie

You commented on Stuart's post over 4 years

Hi Stuart-

You can open zf-modal programmatically using the following syntax:

<div class="button" ng-click="modal.activate()">Activate Modal, Captain!</div>

and set your modal parameters as follows:

$scope.foo = "Bloop!";
$scope.bar = "Blee!";
var config = {
id: 'your optional id here',
template: '{{foo}} {{bar}}',
contentScope: {
foo: $scope.foo,
bar: $scope.bar
},
animationIn: 'slideInFromTop'
}
$scope.modal = new ModalFactory(config);

When you call the ModalFactory and pass the configuration as an argument, you can set the variables to your liking. The contentScope object is a way for you to easily pass through content variables you may have in your parent scope (this was mainly created for deeply nested modals) and you can additionally pass your item IDs through with the ng-click directive as well.

You commented on Kieran Mahon's post over 4 years

You can just add this snippet in and it should show the modal automatically. This is an event handler that fires once your DOM is loaded:

  StartController.$inject = ['$scope', '$stateParams', '$state', '$controller','FoundationApi'];
  function StartController($scope, $stateParams, $state, $controller, FoundationApi) {
  angular.extend(this, $controller('DefaultController', {$scope: $scope, $stateParams: $stateParams, $state: $state}));
   $scope.$on('$viewContentLoaded', function(e) {
       FoundationApi.publish('tcModal', 'open');
       e.preventDefault();
   })
  }

We're injecting the FoundationApi and using it in the event handler for $viewContentLoaded, which will fire once the DOM loads. See if that helps!

Posts Followed

Following

  • No Content

Followers

  • No Content