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);

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.

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

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
    }
});

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);

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.

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

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
    }
});

Posts Followed

Following

  • No Content

Followers

  • No Content