miércoles, 29 de mayo de 2013

Centrar DIV en navegador con jQuery

Ejemplo de como centrar de forma vertical y horizontal el DIV o cualquiera de las etiquetas HTML.

1.- Modo 1:

/**
 * version plugins
 * Centrar div en windows ;)
 */
(function($){
    $.fn.extend({
        center: function (options) {
            var options =  $.extend({ // Default values
                inside:window, // element, center into window
                transition: 0, // millisecond, transition time
                minX:0, // pixel, minimum left element value
                minY:0, // pixel, minimum top element value
                withScrolling:true, // booleen, take care of the scrollbar (scrollTop)
                vertical:true, // booleen, center vertical
                horizontal:true // booleen, center horizontal
            }, options);
            return this.each(function() {
                var props = {position:'absolute'};
                if (options.vertical) {
                    var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
                    if (options.withScrolling) top += $(options.inside).scrollTop() || 0;
                    top = (top > options.minY ? top : options.minY);
                    $.extend(props, {top: top+'px'});
                }

                if (options.horizontal) {
                    var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
                    if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;
                    left = (left > options.minX ? left : options.minX);
                    $.extend(props, {left: left+'px'});
                }
                if (options.transition > 0) $(this).animate(props, options.transition);
                else $(this).css(props);
                return $(this);
            });
        }
    });
})(jQuery);                       

//Modo de uso
jQuery(document).ready(function($){
    $('.wmb').center();                
    $(window).bind('resize', function() {
        $('.wmb').center({transition:300});
    });
})





2.- Modo 2:

/**
 * Version corta para centrar div en la pantalla
 * Sin parámetro
 */
(function($){
    $.fn.extend({
        center: function () {
            return this.each(function() {
                var top = ($(window).height() - $(this).outerHeight()) / 2;
                var left = ($(window).width() - $(this).outerWidth()) / 2;
                $(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
            });
        }
    });
})(jQuery);

//Modo de uso
jQuery(document).ready(function($){
    $('.wmb').center();                                           
})
/**
 * Fin Version corta para centrar div en la pantalla
 **/



//El div
<div class="wmb" style="width: 250px;height: 250px;background: #ccc;">texto aquí...</div>

// Modo 3 centrar titulo verticalmente 
 
//title center vertical    
var altura = ($("h1#page-title").height() - $("h1#page-title span").height()) / 2;//el hijo resta la altura del padre y se diveide en 2 
$("h1#page-title span").css({
   'margin-top': altura + 'px'
})


No hay comentarios:

Publicar un comentario