Centrar objeto cuando le de click

alvarols · #1 (**permalink**) 28/02/2011, 11:10

Tengo este código Javascript que me centra un div dependiendo de la altura del navegador, eso lo logré hacer bien, lo que quiero es que no se centre de manera automática, sino que a la hora de que yo le de clic a un link, este se centre.

Les paso todo el código Javascript junto con el div que estoy centrando:

Código:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
 
        // creamos la funcion resize
        $(window).resize(function(){
    
            // aca creamos lo que seria el CSS dandole los atributos y valores necesarios
            // recuerden que deben ponerle el nombre del elemento a centrar (class o id del div)
            $('.cuadro').css({
                position:'absolute',
                left: ($(window).width() - $('.elemento').outerWidth())/2,
                top: ($(window).height() - $('.elemento').outerHeight())/2
            });
 
        });
 
    // ejecutamos la funcion resize
    $(window).resize();
 
    });
</script>
<style>
.cuadro  {
	background:#00F;
	width:50px;
	height:50px;
	margin:0 auto;
}
	
</style>
</head>

<body>
	<div class="cuadro">
    
    </div>
</body>

JavierB · #2 (**permalink**) 28/02/2011, 11:45

Hola, alvarols

Muevo tu tema al foro de Frameworks y Plugins Javascript desde Javascript.

Saludos,

alvarols · #3 (**permalink**) 28/02/2011, 11:54

Ya pude resolver el problema. Aquí la solución:

Código:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
		
		$("a").click(function(){
 
			// creamos la funcion resize
			$(window).resize(function(){
		
				// aca creamos lo que seria el CSS dandole los atributos y valores necesarios
				// recuerden que deben ponerle el nombre del elemento a centrar (class o id del div)
				$('.cuadro').css({
					position:'absolute',
					left: ($(window).width() - $('.elemento').outerWidth())/2,
					top: ($(window).height() - $('.elemento').outerHeight())/2
				});
			});
        
 
    // ejecutamos la funcion resize
		$(window).resize();
	 
		});
	});
</script>
<style>
.cuadro  {
	background:#00F;
	width:50px;
	height:50px;
	margin:0 auto;
}
	
</style>
</head>

<body>
	<div class="cuadro">
    </div>
    <a href="#">Centrar</a>
</body>