paulspr / jquery-flex-vertical-center Goto Github PK
View Code? Open in Web Editor NEWjQuery plugin to vertically center an element in a container with a variable height even in a responsive layout
jQuery plugin to vertically center an element in a container with a variable height even in a responsive layout
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>
And my CSS (I think I got everything, I'd post the site but it's for a client and still in development--maybe I can email you the url?):
.parent {
height: 500px;
}
.columns.small-centered {
position: relative;
margin-left: auto;
margin-right: auto;
float: none !important;
}
.columns {
padding-left: 0em;
padding-right: 0em;
float: left;
}
.small-9 {
width: 75%;
}
.overview-copy {
padding-left: 2rem;
}
.large-8 {
position: relative;
width: 66.66667%;
}
.large-4 {
position: relative;
width: 33.33333%;
}
.product [class_="column"] + [class_="column"]:last-child {
float: left;
}
Thanks!
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
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.