paulspr / jquery-flex-vertical-center Goto Github PK

top-margin causes layouts "jump" issue. transform: translateY() solves this issue, because element's original position is not being modified.

It works in a similar way as position: relative and top properties used together. But doesn't have a side effect when position property is explicitly declared in CSS.

I know it doesn't work in older browsers, so it could configurable via option passed in the options object (let's say useCss3Transform: true).

how to undo to default style?
i think will be good have reset behavior like:
$('#anElement').flexVerticalCenter('reset');
thanks @PaulSpr

Hey, nice plugin.

If I got it right, the plugin calculate the height for the first parent of your the element you want to center. What if, I need to specify a different parent? For example:

<div id="page-header-bg">
    <div class="wrapper">   
        <div class="grid">
            <div class="grid-item one_half">
                <h1>About Us</h1>
                <span class="subheader">Texting text</span>
            </div>
        </div>
    </div>
</div>

I want to center the content inside grid-item based on page-header-bg height. Is there a way to do that?

Could you please so kind to publish this plugin on bower.io?
Here you can see how to do this:
http://bower.io/docs/creating-packages/

Thank you 👍

You see the text jumping in its right place, is this normal behavior?

It would be nice if you can also publish this package on the npmjs.com website.
You should simply create an account and then npm publish your code.

I get the above error in my FF console. But not sure why. The script tag is loaded after jquery is loaded. And my site.js file is loaded in the at the end of my body tag. Can someone assist with correcting this error?

mysite: http://truelight-estl.com/

Hi, I've this situation:

if (Modernizr.mq('only screen and (min-width: 768px)')) {
    $( '#site-navigation' ).flexVerticalCenter({
        cssAttribute: 'margin-top', 
        parentSelector: '#masthead',
        deferTilWindowLoad: false,
    });
} else {
    // Destroy here
}

How to destroy this?

I'm using a Zurb Foundation 5 Shopify theme and 80% of the time my element is vertically aligned however when I reload the page (comm + r) my element sits below the bottom of my parent div. Would love to get this to work, otherwise I think I'd have to resort to media queries, which is not ideal!

Here's my html, some is written in liquid:

              <div class="columns large-9 fade-in">
                <h2>BREATHE THE DIFFERENCE</h2>
                <p>A class 1 medical device with a 3M filter, AIR ALLERGY and AIR TRAVEL are up to 99% effective in defense against airborne viruses, bacteria, pollution, and allergens.</p>
              </div>
            </div>
            <div class="row">
              <div class="columns large-3">
                {{ 'discreet-icon.jpg' | asset_url | img_tag: 'airware' , 'icon-img fade-in discreet'}}
              </div>
              <div class="columns large-9 fade-in">
                <h2>DISCREET</h2>
                <p>Nobody will notice you’re wearing it! It’s like your own personal secret agent. License to breathe.</p>
              </div>
            </div>
            <div class="row">
              <div class="columns large-3">
                {{ 'natural-remedy-icon.jpg' | asset_url | img_tag: 'airware' , 'icon-img fade-in natural-remedy'}}
              </div>
              <div class="columns large-9 fade-in">
                <h2>DRUG-FREE, LATEX-FREE: A NATURAL REMEDY</h2>
                <p>Instant relief from your breathing related ailments ... without taking any medication! Feel better, breathe better!</p>
              </div>
            </div>
            <div class="row">
              <div class="columns large-3">
                {{ 'airflow-icon.jpg' | asset_url | img_tag: 'airware' , 'icon-img fade-in airflow'}}
              </div>
              <div class="columns large-9 fade-in">
                <h2>INCREASES AIRFLOW</h2>
                <p>Increases airflow up to 60%! Thats 38% more than leading nasal strips!</p>
              </div>
            </div>
            <div class="row">
              <div class="columns large-3">
                {{ 'theraputic-icon.jpg' | asset_url | img_tag: 'airware' , 'icon-img fade-in theraputic'}}
              </div>
              <div class="columns large-9 fade-in">
                <h2>THERAPEUTIC ESSENTIAL OILS</h2>
                <p>Infused with therapeutic essential oils specifically formulated to provide drug-free relief to common ailments and increase athletic performance.</p>
              </div>
            </div>
          </div>
      </div>
      <div class="small-12 large-4 large-pull-8 columns">
        {{ 'nasal.jpg' | asset_url | img_tag: 'airware' , 'nasal fade-in vertical-center'}}
      </div>
    </div>

The resizer function was being called before some of my div content was set which created a weird error and adding extra margin-top to my vertically centered div. I adjusted the code to fire the resize function on window.load and it works perfectly:

$.fn.flexVerticalCenter = function( options ) {
var settings = $.extend({
cssAttribute: 'margin-top', // the attribute to apply the calculated value to
verticalOffset: 0, // the number of pixels to offset the vertical alignment by
parentSelector: null, // a selector representing the parent to vertically center this element within
debounceTimeout: 25 // a default debounce timeout in milliseconds
}, options || {});
return this.each(function(){
var $this = $(this); // store the object
var debounce;
var resizer = function () {
var parentHeight = (settings.parentSelector && $this.parents(settings.parentSelector).length) ?
$this.parents(settings.parentSelector).first().height() : $this.parent().height();
$this.css(
settings.cssAttribute, ( ( ( parentHeight - $this.height() ) / 2 ) + parseInt(settings.verticalOffset) )
);
};
$(window).resize(function () {
clearTimeout(debounce);
debounce = setTimeout(resizer, settings.debounceTimeout);
});
$(window).load(function () {
resizer();
});
$this.find('img').load(resizer);
});
};
})( jQuery );

.outerHeight() method should be used instead of .height() because in some cases .height() causes wrong top-margin calculations.

Hi,

Is it safe to wrap the following line in a setTimeout to essentially debounce the resize function across different browsers?

$(window).resize(resizer);

Or perhaps inside the actual function-

$this.css(
attribute, ( ( $this.parent().height() - $this.height() ) / 2 )
);

This will call the resizer function on jQuery's orientationchange event so the element remains in the center of the screen on both landscape and portrait orientation for mobile devices and tablets.

$(window).on("orientationchange", function(){ resizer(); });

It would be great to implement a function to detach the centering routine and return the element to it's original positioning.

For example, when switching to a mobile breakpoint that changes the layout, it might no longer be desirable to center it.

Recently I'm using the responsive layout, and I was used this slideshow plugin: http://responsive-slides.viljamis.com/, when I load at first time, the elements won't vertical center immediately, after all the slideshow images finish loading, then it finally vertical center, can this have a nice solution?

Bug page: http://lthome.com.s146246.gridserver.com/