jQuery Center plugin
Sun 23 Mar 2008
-
Categorias
Este plugin centraliza qualquer elemento através do método CSS da margem negativa.
Como usá-lo
Sem nenhum argumento, o método do plugin cetraliza horizontalmente e verticalmente.
$("class_or_id").center();
Você pode também especificar a direção de alinhamento
$("class_or_id").center({
horizontal: false // somente vertical
});
$("class_or_id").center({
vertical: false //somente horizontal
});
O plugin no site do jQuery
http://plugins.jquery.com/project/elementcenter
Suporte
Este plugin foi testado no IE 6, IE 7, Safari 3, Firefox 2.0
* Não funcionou no Firefox 3.0 e no Google Chrome. Estou tendo dor de cabeças com os dois ultimamente. Para mim uma grande decepção. Muitos Javascript estão lentos, assim como o Flash.
Irei trabalhar em uma próxima versão usando integralmente o Dimensions, que funciona muito bem.
Dependências
Este plugin requer o Dimensions plugin para funcionar corretamente
Página de teste
http://www.alexandremagno.net/jquery/plugins/center
Documentação original
http://code.google.com/p/jquerydevbrazil/wiki/jQueryCenterPlugin
Download
http://code.google.com/p/jquerydevbrazil/downloads/list
Autor
Alexandre Magno – http://www.alexandremagno.net
Licença
http://www.opensource.org/licenses/mit-license.php
Bio
Meu nome é Alexandre Magno, sou analista de sistemas e trabalho atualmente na Globo.com, com especialidade na construção de interfaces Web para os diversos produtos das Organizações Globo. Tenho experiência em várias tecnologias Web, dentre elas HTML/CSS/Javascript, Wordpress e Ruby on Rails, além de ser um evangelista jQuery.
Comments
Obrigado por incrementar.
Ótima dica.
vlw!!!
Boa Alex!
A maioria dos desenvolvedores HTML/CSS precisam centralizar elementos. Bem prático e fácil de usar o plugin.
Parabéns! :>)
Hi, I came across your plugin looks good. I have a question of why you chose GPL over MIT or BSD license for a simple utility. Using the gpl will cause people pass over it since it would require them to license all of their code under the gpl.
Good work by the way.
Good point John. After a research I moved to MIT license. I would like the orientation to how I can put my plugins in jQuery plugins repository…
Very thanks…
you have to add return this; to make the center()-method chainable!
Take a look hotzen:
http://code.google.com/p/jquerydevbrazil/source/browse/trunk/jquery.center.js
I made the change… thanks for suggestion!
okay, mais uma vez subiste na minha consideração
um grande abraço and good dev
Muito bom o seu plugin estou usando e está funcionando bem no IE 6/7 e no firefox 2. Já no firefox 3 ele não funciona legal. Testei no Ubuntu 8.04 com o firefox 3.
[]s
Wilton
@Wilton: Olá Wilton, infelizmente para cada novo browser mudanças precisam ser feitas, estou trabalhando nisto. Obrigado!
[...] portuguese page can be found at: http://www.alexandremagno.net/blog/?p=75 [...]
Alexandre,
alguma luz em relação ao ff3 ?
qual o problema q voce está tendo ? talvez eu possa ajudar.
vlw !
Hola, muy buen plugin, lástima que no anda con FF3
@Pepe: Irei descobrir o que está havendo, pois ele não foi atualizado desde o Firefox 2. Gracias…
Hi,
I really think this plugin works great! I have a question though…
The plugin centers(veritical) the element by computing the page’s height and not the screen’s?
@LouGee: Thanks for enjoy it! I’m working on improvements, but it gives a lot of headache to make work in all browsers. The plugin center vertically computing the page height. I hope it helps…
Thank you for this plugin. I’m using it now on my client’s website ^_^
Thank you thank you thank you!
Hi Alexandre, I can use free this plugin on proyect of comerce?
Ohhh sorry, and realy this plugin is so very good, thanks for this contribution.-
Best regards.
@imKarl: sure that you can. This plugin is out of date, I`m working with a new version fully tested…
Great thanks, I testing this version on: IE8, FF 3+, Chrome 3+, SF 4+ and don’t problem with one.-
@imKarl. Great! Some people report bugs, it seens that you are using in simple situations, because in new version I’m dealing with padding, marging, diferent scenarios to make work in all cases, but if you’re not having problem it’s great!
Hi!
You should consider adding scrollTop() and scrollLeft() values, beacause when the element is in body, it is centered relative to the window size. When page is scrolled down f.ex. 2 times window height, centered div is unvisible, because it is at the top of page, not at the visible center.
Best regards!
@stawka: thanks for the tip! I’m refactoring the plugin to work in some cases like this and this is a golden tip…
Alex Hi.
I started to use this plugin but I encounter some issues
I have the exact same files but only the content (to be centered) is different. The element to be centered is a div with some paragraphs and headings. If I have small amount of text the element is near to the center (not perfect) but if I have some paragraphs, the text is not centered at all. I am sending you an email with the site for you to test if you can. (tested in ff3.6 and 4.0
Thanks in advance for the plugin.
Hi again. My fault. I saw an error and now is working fine.
Thanks a lot
@notuo, that’s good. Anyway I’ll rewrite the plugin for the new versions of jQuery. I’m glad that now it’s working fine.
Thanks! Great plugin. After using it, I had to apply a small fix for the CSS of the element to be centered. I had to set the position CSS to “relative” since it is hard-coded inside the plugin to “absolute”. Otherwise, the result is that the DIV element being centered is overlapping with the other elements below it.
Hope this feedback gives room to improvements.
Tarek.
@tarekahf: Thanks man, very well observed!
Hello and thanx for your fine js-snippet. Two items I would propose for enhancement for dynamic content purposes:
1. If the element to center is empty it should not be displayed, maybe this way
[ if ($self.height() < 30) { cssProp.display = 'none';]
2. In responsive layouts, when the width becomes < 700px colums overlap. So best is the script does nothing in that case.
Could you help with that code?
Hi,
Thanks for contribution and feedback, I will insert the conditional line. I did make any test for responsive, but I will see what I can do for support it. I will see what I can do and release a new version.
Thank you for quick answer. Do you have a schedule therefor?
Hi, Are you a github user? I will move the plugin to github and you can follow this improvement. Thanks.
Hey,
found only old stuff and 404 pages with “vertical && center && jQuery && alexandre”
Hello, that’s because I made a migration from my blog, I will update this page and fix the 404, as well update documentation.