Menu icon Foundation

Coder | Granby, QC

My Posts


  • 3
    Replies
  • Issues with ie11

    By Emmanuel Henri

    IE

    I've built a complete site with Foundation Apps and it looks great on firefox, safari, ipad, iphone and Chrome but on IE11 it's a different story. Look at the pictures and code below... IE: the three blocks should be taking the full width and the foot... (continued)

    Last Reply by Rafi Benkual almost 4 years ago




  • 2
    Replies
  • Issue with ngRepeat for modal view

    By Emmanuel Henri

    I'm using F4A with a controller connecting to an API and ngRepeat to display the information. Everything works fine on the cards but when I click on the card to show a modal view it's not the same information as the item I clicked...what am I doing wrong?... (continued)

    Last Reply by Emmanuel Henri about 4 years ago


  • 2
    Replies
  • Footer with Apps

    By Emmanuel Henri

    footerapps

    How do we create a footer with Foundation apps like the one on the Zurb Foundation site? I mean I could create one with CSS but the grid-block and flexbox seem to be countering any attempts in making one. I tried a few things such as the medium-up-3 to ma... (continued)

    Last Reply by Aaron Challis over 3 years ago



My Comments

Emmanuel Henri commented on Emmanuel Henri's post almost 4 years

Sorry for the late reply, I just saw this.

 (function() {
  'use strict';

  angular.module('application', [
    //app dependencies
    'ui.router',
    'ngAnimate',
    'ngResource', 
    'angularFileUpload',
    'ngCookies',

    //foundation
    'foundation',
    'foundation.dynamicRouting',
    'foundation.dynamicRouting.animations'
  ])
    .config(config)

    //controller for products
    .controller('productsCtrl', function($scope, $stateParams, $state, $controller, $resource, $http, FileUploader) {
      angular.extend(this, $controller('DefaultController', {$scope: $scope, $stateParams: $stateParams, $state: $state}));

      $scope.productsItemsResource = $resource('http://cpanel.mannydesigns.co:3000/' + 'api/productsEddies/' + ":id", {id: "@id"},
          { create : { method: "POST"}, save: { method: "PUT"}}
        );

      $scope.listProductsItems = function() {
        $scope.productsItems = $scope.productsItemsResource.query();
      };

     //Code for uploading files to API
      'use strict';

      // create a uploader with options
      var uploader = $scope.uploader = new FileUploader({
        scope: $scope,
        url: 'http://cpanel.mannydesigns.co:3000/' + 'api/containers/container3/upload',
        formData: [
          { key: 'value' }
        ],
        filters: [{
            name: 'filter1',
            // A user-defined filter
            fn: function(item) {
                return true;
            }
        }]
      });

      // ADDING FILTERS

      uploader.filters.push({
          name: 'filter2',
          fn: function(item) {
              return true;
          }
      });

      // REGISTER HANDLERS

      uploader.onAfterAddingFile = function(fileItem) {
          console.info('onAfterAddingFile', fileItem);
      };
      uploader.onAfterAddingAll = function(addedFileItems) {
          console.info('onAfterAddingAll', addedFileItems);
      };
      uploader.onBeforeUploadItem = function(item) {
          console.info('onBeforeUploadItem', item);
      };
      uploader.onProgressItem = function(fileItem, progress) {
          console.info('onProgressItem', fileItem, progress);
      };
      uploader.onProgressAll = function(progress) {
          console.info('onProgressAll', progress);
      };
      uploader.onSuccessItem = function(fileItem, response, status, headers) {
          console.info('onSuccessItem', fileItem, response, status, headers);
          $scope.$broadcast('uploadCompleted', fileItem);
      };
      uploader.onErrorItem = function(fileItem, response, status, headers) {
          console.info('onErrorItem', fileItem, response, status, headers);
      };
      uploader.onCancelItem = function(fileItem, response, status, headers) {
          console.info('onCancelItem', fileItem, response, status, headers);
      };
      uploader.onCompleteItem = function(fileItem, response, status, headers) {
          console.info('onCompleteItem', fileItem, response, status, headers);
      };
      uploader.onCompleteAll = function() {
          console.info('onCompleteAll');
      };


      /*---------------------------------------------------------------------------------------------------------------*/
      var editUploader = $scope.editUploader = new FileUploader({
          scope: $scope,
          url: 'http://cpanel.mannydesigns.co:3000/' + 'api/containers/container3/upload',
          formData: [
              { key: 'value' }
          ],
          filters: [{
              name: 'filter1',
              // A user-defined filter
              fn: function(item) {
                  return true;
              }
          }]
      });

      // ADDING FILTERS

      editUploader.filters.push({
          name: 'filter2',
          fn: function(item) {
              return true;
          }
      });

      // REGISTER HANDLERS

      editUploader.onAfterAddingFile = function(fileItem) {
          fileItem.upload();
          console.info('onAfterAddingFile', fileItem);

      };
      editUploader.onAfterAddingAll = function(addedFileItems) {
          console.info('onAfterAddingAll', addedFileItems);
      };
      editUploader.onBeforeUploadItem = function(item) {
          console.info('onBeforeUploadItem', item);
      };
      editUploader.onProgressItem = function(fileItem, progress) {
          console.info('onProgressItem', fileItem, progress);
      };
      editUploader.onProgressAll = function(progress) {
          console.info('onProgressAll', progress);
      };
      editUploader.onSuccessItem = function(fileItem, response, status, headers) {
          console.info('onSuccessItem', fileItem, response, status, headers);
          $scope.$broadcast('uploadCompleted', fileItem);
      };
      editUploader.onErrorItem = function(fileItem, response, status, headers) {
          console.info('onErrorItem', fileItem, response, status, headers);
      };
      editUploader.onCancelItem = function(fileItem, response, status, headers) {
          console.info('onCancelItem', fileItem, response, status, headers);
      };
      editUploader.onCompleteItem = function(fileItem, response, status, headers) {
          console.info('onCompleteItem', fileItem, response, status, headers);
          fileItem.remove();
      };
      editUploader.onCompleteAll = function() {
          console.info('onCompleteAll');
          $scope.$apply(function(){
              $scope.productsItems[globleIndex].image = selectedElement.files[0].name;
          });
      };


      $scope.load = function () {
        $http.get('http://cpanel.mannydesigns.co:3000/' + 'api/containers/container3/files').success(function (data) {
          console.log(data);
          $scope.files = data;
        });
      };

      $scope.delete = function (index, id) {
        $http.delete('http://cpanel.mannydesigns.co:3000/' + 'api/containers/container3/files/' + encodeURIComponent(id)).success(function (data, status, headers) {
          $scope.files.splice(index, 1);
        });
      };

      $scope.$on('uploadCompleted', function(event) {
        console.log('uploadCompleted event received');
        $scope.load();
      });

      //Add data to API
      $scope.productsItemsResource = $resource('http://cpanel.mannydesigns.co:3000/' + 'api/productsEddies/' + ":id", {id: "@id"},
          { create : { method: "POST"}, save: { method: "PUT"}}
        );

      $scope.deleteProductsItem = function(productsItem) {
        if (confirm('Êtes-vous sûr de vouloir supprimer cette item?')) {
          productsItem.$delete().then(function () {
            $scope.productsItems.splice($scope.productsItems.indexOf(productsItem), 1);
          });
        }
        foundationApi.publish('main-notifications', { title: 'Test', content: 'Test2' });  
      };

    //Creates prototype for setting image on scope
    $scope.setFiles = function(element) {
        $scope.$apply(function(scope) {
          console.log('files:', element.files);
          $scope.newProductsItem.image = element.files[0].name;
        });
      };

      $scope.setUpdateFiles = function(element,index) {
          console.log(index);
          globleIndex = index;
          selectedElement = element;
      };

      $scope.newProductsItem={"name":"","image":"","link":"", "category":"","description":"", "brand":""};
      $scope.createProductsItem = function (productsItem) {
        //creates the new item
        new $scope.productsItemsResource(productsItem).$create().then(function (newProductsItem) {
           $scope.productsItems.push(newProductsItem);
         });
        foundationApi.publish('main-notifications', { title: 'Test', content: 'Test2' });
        var form = document.getElementById("myForm");
        form.reset();
      };

      $scope.updateProductsItem = function(productsItem) {
        productsItem.$save();
        foundationApi.publish('main-notifications', { title: 'Test', content: 'Test2' });
      };

      $scope.listProductsItems();

})
    })

    .run(run)

    .directive("viewByFileExtension", function(){
      return{
          restrict: "EA",
          scope:false,
          link: function (scope, element, attr) {
                  var parts = attr.fileName.split(".");
                  var extension = parts[1];
              if(extension == "jpg" || extension =="png"){
                  element.html('<img src="http://cpanel.mannydesigns.co:3000/api/containers/container3/download/'+attr.fileName+'" style="max-height: 200px;" class="thumbnail"/>');
              }else{
                  var html = '';
                      html += '<video controls style="max-height: 180px;" class="thumbnail">';
                      html += '   <source id="mp4" src="http://cpanel.mannydesigns.co:3000/api/containers/container3/download/'+attr.fileName+'" type="video/mp4"/>';
                      html += '   <source id="ogv" src="http://cpanel.mannydesigns.co:3000/api/containers/container3/download/'+attr.fileName+'" type="video/ogg"/>';
                      html +='</video>';
                  element.html(html);
              }
          }
      }
    })

    .directive("embedYoutubeVideo", function(){
        return{
            restrict: "EA",
            scope:false,
            link: function (scope, element, attr) {
                element.html('<iframe width="560" height="315" src="'+ attr.embedUrl +'" frameborder="0" allowfullscreen=""></iframe><br/><br/>');
            }
        }
    })
  ;

  var globleIndex = "";
  var selectedElement = "";

  config.$inject = ['$urlRouterProvider', '$locationProvider'];

  function config($urlProvider, $locationProvider) {
    $urlProvider.otherwise('/');

    $locationProvider.html5Mode({
      enabled:false,
      requireBase: false
    });

    $locationProvider.hashPrefix('!');
  }

  function run() {
    FastClick.attach(document.body);
  }

})();

Emmanuel Henri commented on Emmanuel Henri's post almost 4 years

The only thing I was able to fix was the footer with a CSS width:100%. I tried applying the same to the grid-block containing the 3 ng-repeat items and it's not taking the full width in iE11...yet works fine in all other browsers. It's not a browser setting as two projects with different customers are showing the same issue with the customers.

What do you suggests? I'd like some suggestions if possible. I'm sure Flexbox and the footer works in IE but why does the grid-block isn't working? What am I missing or is it a bug in F4A?

Emmanuel Henri commented on Emmanuel Henri's post about 4 years

Thanks that was it. I assigned #{{$index}} to both zf-open and zf-close and it worked.

Emmanuel Henri commented on Emmanuel Henri's post about 4 years

Writing what you just showed me in foundation apps doesn't necessarily work.

Emmanuel Henri commented on Emmanuel Henri's post about 4 years

Yes I mean for foundation apps. I'm working with this right now.

Posts Followed

  • 3
    Replies
  • Issues with ie11

    By Emmanuel Henri

    IE

    I've built a complete site with Foundation Apps and it looks great on firefox, safari, ipad, iphone and Chrome but on IE11 it's a different story. Look at the pictures and code below... IE: the three blocks should be taking the full width and the foot... (continued)

    Last Reply by Rafi Benkual almost 4 years ago


  • 2
    Replies
  • Issue with ngRepeat for modal view

    By Emmanuel Henri

    I'm using F4A with a controller connecting to an API and ngRepeat to display the information. Everything works fine on the cards but when I click on the card to show a modal view it's not the same information as the item I clicked...what am I doing wrong?... (continued)

    Last Reply by Emmanuel Henri about 4 years ago


Following

    No Content

Followers

My Posts






My Comments

You commented on Emmanuel Henri's post almost 4 years

Sorry for the late reply, I just saw this.

 (function() {
  'use strict';

  angular.module('application', [
    //app dependencies
    'ui.router',
    'ngAnimate',
    'ngResource', 
    'angularFileUpload',
    'ngCookies',

    //foundation
    'foundation',
    'foundation.dynamicRouting',
    'foundation.dynamicRouting.animations'
  ])
    .config(config)

    //controller for products
    .controller('productsCtrl', function($scope, $stateParams, $state, $controller, $resource, $http, FileUploader) {
      angular.extend(this, $controller('DefaultController', {$scope: $scope, $stateParams: $stateParams, $state: $state}));

      $scope.productsItemsResource = $resource('http://cpanel.mannydesigns.co:3000/' + 'api/productsEddies/' + ":id", {id: "@id"},
          { create : { method: "POST"}, save: { method: "PUT"}}
        );

      $scope.listProductsItems = function() {
        $scope.productsItems = $scope.productsItemsResource.query();
      };

     //Code for uploading files to API
      'use strict';

      // create a uploader with options
      var uploader = $scope.uploader = new FileUploader({
        scope: $scope,
        url: 'http://cpanel.mannydesigns.co:3000/' + 'api/containers/container3/upload',
        formData: [
          { key: 'value' }
        ],
        filters: [{
            name: 'filter1',
            // A user-defined filter
            fn: function(item) {
                return true;
            }
        }]
      });

      // ADDING FILTERS

      uploader.filters.push({
          name: 'filter2',
          fn: function(item) {
              return true;
          }
      });

      // REGISTER HANDLERS

      uploader.onAfterAddingFile = function(fileItem) {
          console.info('onAfterAddingFile', fileItem);
      };
      uploader.onAfterAddingAll = function(addedFileItems) {
          console.info('onAfterAddingAll', addedFileItems);
      };
      uploader.onBeforeUploadItem = function(item) {
          console.info('onBeforeUploadItem', item);
      };
      uploader.onProgressItem = function(fileItem, progress) {
          console.info('onProgressItem', fileItem, progress);
      };
      uploader.onProgressAll = function(progress) {
          console.info('onProgressAll', progress);
      };
      uploader.onSuccessItem = function(fileItem, response, status, headers) {
          console.info('onSuccessItem', fileItem, response, status, headers);
          $scope.$broadcast('uploadCompleted', fileItem);
      };
      uploader.onErrorItem = function(fileItem, response, status, headers) {
          console.info('onErrorItem', fileItem, response, status, headers);
      };
      uploader.onCancelItem = function(fileItem, response, status, headers) {
          console.info('onCancelItem', fileItem, response, status, headers);
      };
      uploader.onCompleteItem = function(fileItem, response, status, headers) {
          console.info('onCompleteItem', fileItem, response, status, headers);
      };
      uploader.onCompleteAll = function() {
          console.info('onCompleteAll');
      };


      /*---------------------------------------------------------------------------------------------------------------*/
      var editUploader = $scope.editUploader = new FileUploader({
          scope: $scope,
          url: 'http://cpanel.mannydesigns.co:3000/' + 'api/containers/container3/upload',
          formData: [
              { key: 'value' }
          ],
          filters: [{
              name: 'filter1',
              // A user-defined filter
              fn: function(item) {
                  return true;
              }
          }]
      });

      // ADDING FILTERS

      editUploader.filters.push({
          name: 'filter2',
          fn: function(item) {
              return true;
          }
      });

      // REGISTER HANDLERS

      editUploader.onAfterAddingFile = function(fileItem) {
          fileItem.upload();
          console.info('onAfterAddingFile', fileItem);

      };
      editUploader.onAfterAddingAll = function(addedFileItems) {
          console.info('onAfterAddingAll', addedFileItems);
      };
      editUploader.onBeforeUploadItem = function(item) {
          console.info('onBeforeUploadItem', item);
      };
      editUploader.onProgressItem = function(fileItem, progress) {
          console.info('onProgressItem', fileItem, progress);
      };
      editUploader.onProgressAll = function(progress) {
          console.info('onProgressAll', progress);
      };
      editUploader.onSuccessItem = function(fileItem, response, status, headers) {
          console.info('onSuccessItem', fileItem, response, status, headers);
          $scope.$broadcast('uploadCompleted', fileItem);
      };
      editUploader.onErrorItem = function(fileItem, response, status, headers) {
          console.info('onErrorItem', fileItem, response, status, headers);
      };
      editUploader.onCancelItem = function(fileItem, response, status, headers) {
          console.info('onCancelItem', fileItem, response, status, headers);
      };
      editUploader.onCompleteItem = function(fileItem, response, status, headers) {
          console.info('onCompleteItem', fileItem, response, status, headers);
          fileItem.remove();
      };
      editUploader.onCompleteAll = function() {
          console.info('onCompleteAll');
          $scope.$apply(function(){
              $scope.productsItems[globleIndex].image = selectedElement.files[0].name;
          });
      };


      $scope.load = function () {
        $http.get('http://cpanel.mannydesigns.co:3000/' + 'api/containers/container3/files').success(function (data) {
          console.log(data);
          $scope.files = data;
        });
      };

      $scope.delete = function (index, id) {
        $http.delete('http://cpanel.mannydesigns.co:3000/' + 'api/containers/container3/files/' + encodeURIComponent(id)).success(function (data, status, headers) {
          $scope.files.splice(index, 1);
        });
      };

      $scope.$on('uploadCompleted', function(event) {
        console.log('uploadCompleted event received');
        $scope.load();
      });

      //Add data to API
      $scope.productsItemsResource = $resource('http://cpanel.mannydesigns.co:3000/' + 'api/productsEddies/' + ":id", {id: "@id"},
          { create : { method: "POST"}, save: { method: "PUT"}}
        );

      $scope.deleteProductsItem = function(productsItem) {
        if (confirm('Êtes-vous sûr de vouloir supprimer cette item?')) {
          productsItem.$delete().then(function () {
            $scope.productsItems.splice($scope.productsItems.indexOf(productsItem), 1);
          });
        }
        foundationApi.publish('main-notifications', { title: 'Test', content: 'Test2' });  
      };

    //Creates prototype for setting image on scope
    $scope.setFiles = function(element) {
        $scope.$apply(function(scope) {
          console.log('files:', element.files);
          $scope.newProductsItem.image = element.files[0].name;
        });
      };

      $scope.setUpdateFiles = function(element,index) {
          console.log(index);
          globleIndex = index;
          selectedElement = element;
      };

      $scope.newProductsItem={"name":"","image":"","link":"", "category":"","description":"", "brand":""};
      $scope.createProductsItem = function (productsItem) {
        //creates the new item
        new $scope.productsItemsResource(productsItem).$create().then(function (newProductsItem) {
           $scope.productsItems.push(newProductsItem);
         });
        foundationApi.publish('main-notifications', { title: 'Test', content: 'Test2' });
        var form = document.getElementById("myForm");
        form.reset();
      };

      $scope.updateProductsItem = function(productsItem) {
        productsItem.$save();
        foundationApi.publish('main-notifications', { title: 'Test', content: 'Test2' });
      };

      $scope.listProductsItems();

})
    })

    .run(run)

    .directive("viewByFileExtension", function(){
      return{
          restrict: "EA",
          scope:false,
          link: function (scope, element, attr) {
                  var parts = attr.fileName.split(".");
                  var extension = parts[1];
              if(extension == "jpg" || extension =="png"){
                  element.html('<img src="http://cpanel.mannydesigns.co:3000/api/containers/container3/download/'+attr.fileName+'" style="max-height: 200px;" class="thumbnail"/>');
              }else{
                  var html = '';
                      html += '<video controls style="max-height: 180px;" class="thumbnail">';
                      html += '   <source id="mp4" src="http://cpanel.mannydesigns.co:3000/api/containers/container3/download/'+attr.fileName+'" type="video/mp4"/>';
                      html += '   <source id="ogv" src="http://cpanel.mannydesigns.co:3000/api/containers/container3/download/'+attr.fileName+'" type="video/ogg"/>';
                      html +='</video>';
                  element.html(html);
              }
          }
      }
    })

    .directive("embedYoutubeVideo", function(){
        return{
            restrict: "EA",
            scope:false,
            link: function (scope, element, attr) {
                element.html('<iframe width="560" height="315" src="'+ attr.embedUrl +'" frameborder="0" allowfullscreen=""></iframe><br/><br/>');
            }
        }
    })
  ;

  var globleIndex = "";
  var selectedElement = "";

  config.$inject = ['$urlRouterProvider', '$locationProvider'];

  function config($urlProvider, $locationProvider) {
    $urlProvider.otherwise('/');

    $locationProvider.html5Mode({
      enabled:false,
      requireBase: false
    });

    $locationProvider.hashPrefix('!');
  }

  function run() {
    FastClick.attach(document.body);
  }

})();

You commented on Emmanuel Henri's post almost 4 years

The only thing I was able to fix was the footer with a CSS width:100%. I tried applying the same to the grid-block containing the 3 ng-repeat items and it's not taking the full width in iE11...yet works fine in all other browsers. It's not a browser setting as two projects with different customers are showing the same issue with the customers.

What do you suggests? I'd like some suggestions if possible. I'm sure Flexbox and the footer works in IE but why does the grid-block isn't working? What am I missing or is it a bug in F4A?

You commented on Emmanuel Henri's post about 4 years

Thanks that was it. I assigned #{{$index}} to both zf-open and zf-close and it worked.

You commented on Emmanuel Henri's post about 4 years

Writing what you just showed me in foundation apps doesn't necessarily work.

You commented on Emmanuel Henri's post about 4 years

Yes I mean for foundation apps. I'm working with this right now.

Posts Followed



Following

  • No Content

Followers

  • No Content