Menu icon Foundation

My Posts

No Content

My Comments

jmarceli commented on fckps's post over 4 years

For Foundation 5.5.1 the solution is quite simple. If you don't want special behavior on mobile devices place this code after your foundation files (but before foundation JS initialization):

 (function() {
  Foundation.libs.dropdown['small'] = function() {
    return false;
  };

}).call(this);

Helpful 0
jmarceli commented on Viet Hoang's post about 5 years

For me a solution was to move all scripts to the end of the HTML file just before tag.

Helpful 1
jmarceli commented on carnaudj's post over 5 years

There might be some issues which I'm not aware of but here is my solution for this problem (I paste a bit more code to make changes easier to find)
In foundation.clearing.js:

    resize : function () {
      var image = $('img', '.clearing-blackout .visible-img');

      //if (image.length) {
        //this.center(image);
      //}
    },

...

        this.loaded(image, function () {
          image.css('visibility', 'visible');
          // toggle the gallery
          root.addClass('clearing-blackout');
          container.addClass('clearing-container');
          visible_image.show();
          this.fix_height(target)
            .caption($('.clearing-caption', visible_image), $image)
            //.center(image)
            .shift(current, target, function () {
              target.siblings().removeClass('visible');
              target.addClass('visible');
            });
        }.bind(this));

Adjust css to center image without using JS.
File _clearing.scss:

    .visible-img {
      height: 95%;
      position: relative;

      img {
        margin: 0 auto;
        display: block;
        //position: absolute;
        //#{$default-float}: 50%;
        //top: 50%;
        //margin-#{$default-float}: -50%;
        max-height: 100%;
        max-width: 100%;
      }
    }

I was working with clearing version 5.0.3

Helpful 0
jmarceli commented on Angela's post over 5 years

Got same issue but for me it was just overloking timer: false attribute in data-options. You could try to set:

$(document).foundation({
    orbit: {
        timer_speed: 4000,
        slide_number: false,
        pause_on_hover: false,
        navigation_arrows: false,
        resume_on_mouseout: true,
        timer: true
    }
});

Helpful 0

Posts Followed

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on fckps's post over 4 years

For Foundation 5.5.1 the solution is quite simple. If you don't want special behavior on mobile devices place this code after your foundation files (but before foundation JS initialization):

 (function() {
  Foundation.libs.dropdown['small'] = function() {
    return false;
  };

}).call(this);

Helpful 0
You commented on Viet Hoang's post about 5 years

For me a solution was to move all scripts to the end of the HTML file just before tag.

Helpful 1
You commented on carnaudj's post over 5 years

There might be some issues which I'm not aware of but here is my solution for this problem (I paste a bit more code to make changes easier to find)
In foundation.clearing.js:

    resize : function () {
      var image = $('img', '.clearing-blackout .visible-img');

      //if (image.length) {
        //this.center(image);
      //}
    },

...

        this.loaded(image, function () {
          image.css('visibility', 'visible');
          // toggle the gallery
          root.addClass('clearing-blackout');
          container.addClass('clearing-container');
          visible_image.show();
          this.fix_height(target)
            .caption($('.clearing-caption', visible_image), $image)
            //.center(image)
            .shift(current, target, function () {
              target.siblings().removeClass('visible');
              target.addClass('visible');
            });
        }.bind(this));

Adjust css to center image without using JS.
File _clearing.scss:

    .visible-img {
      height: 95%;
      position: relative;

      img {
        margin: 0 auto;
        display: block;
        //position: absolute;
        //#{$default-float}: 50%;
        //top: 50%;
        //margin-#{$default-float}: -50%;
        max-height: 100%;
        max-width: 100%;
      }
    }

I was working with clearing version 5.0.3

Helpful 0
You commented on Angela's post over 5 years

Got same issue but for me it was just overloking timer: false attribute in data-options. You could try to set:

$(document).foundation({
    orbit: {
        timer_speed: 4000,
        slide_number: false,
        pause_on_hover: false,
        navigation_arrows: false,
        resume_on_mouseout: true,
        timer: true
    }
});

Helpful 0

Posts Followed

Following

  • No Content

Followers

  • No Content

Register Today

Get all the answers in our
Foundation Classes

Learn Foundation from the creators in our interactive online webinars which will keep you up to date with the latest trends and skills needed to win your projects.

See Upcomming Classes

Or if you prefer, contact the Foundation Team at training@zurb.com or (408) 341-0600 x635