Foros del Web » Creando para Internet » Diseño web »

Ensanchar cuadro de texto SIN MOVERLO!

Estas en el tema de Ensanchar cuadro de texto SIN MOVERLO! en el foro de Diseño web en Foros del Web. Hola! que hay. Vereis, quiero hacer un formulario con cuadros de texto de modo que al pasar el raton el grosor de cada cuadro de ...
  #1 (permalink)  
Antiguo 31/03/2010, 06:02
 
Fecha de Ingreso: marzo-2010
Mensajes: 35
Antigüedad: 7 años, 8 meses
Puntos: 0
Ensanchar cuadro de texto SIN MOVERLO!

Hola! que hay.

Vereis, quiero hacer un formulario con cuadros de texto de modo que al pasar el raton el grosor de cada cuadro de texto se duplique.

Mi problema es el que ilustra la siguiente imagen: en donde cada cuadrado representa un pixel, y el color gris representa el borde del cuadro de texto:

http://img511.yfrog.com/i/cuadricula.png/

Cuando el grosor tiene 1pixel esta correcto

Pero al agrandarlo a 2, el problema es que el propio cuadro de texto, donde se encuentra el TEXTO se mueve, ya que en realidad lo que se mantiene fijo es la esquina superior izquierda del elemento (marcada con uja cruz roja)

Yo lo que quiero es que lo que se quede fijo sea el punto azul, ya que al hacer este efecto, es molesto que el texto se este moviendo.

Lo he conseguido hacer moviendo la posicion del cuadro de texto un pixel a la izquierda y hacia arriba a la vez que aumento el grosor.

¿Que opinais de este metodo? ¿Funcionara bien en todos los navegadores?

En unas horas subo el codigo y la pagina para que lo probeis.

Gracias!
  #2 (permalink)  
Antiguo 31/03/2010, 07:50
Avatar de chichote
Colaborador
 
Fecha de Ingreso: diciembre-2004
Ubicación: Santiago - Chile
Mensajes: 1.868
Antigüedad: 13 años
Puntos: 145
Respuesta: Ensanchar cuadro de texto SIN MOVERLO!

jejeje le daba vueltas y no te comprendia.

bueno si, es una buena opcion, no me habia planteado, sube el codigo y vemos la compatibilidad en diferentes navegadores.

saludos
  #3 (permalink)  
Antiguo 31/03/2010, 09:49
 
Fecha de Ingreso: marzo-2010
Mensajes: 35
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Ensanchar cuadro de texto SIN MOVERLO!

Bien, pues aqui pongo varias cosillas, el ensanchamiento es de 25pixeles, esta exagerado para que se aprecie bien.


El efecto como queda simplemente ensanchandolo, vereis que queda super cutre:

http://sites.google.com/site/danyof/Home/pruebagrosor02.html?attredirects=0&d=1

El efecto solucionado moviendo la posicion del cuadro de texto a la vez que se ensancha:

http://sites.google.com/site/danyof/Home/pruebagrosor.html?attredirects=0&d=1

Pensais que funcionara bien en todos los navegadores?
He probado en:
Firefox
Chrome
Internet explorer, y se ve bien en los tres.... pero no estoy seguro al 100% de si esto es lo mas correcto!

Aqui os pongo las dos funciones que uso para que no se note el movimiento:

Código:
Inicialmente el cuadro esta a 100px de la derecha y 100px de arriba:
...
#dos{border-width:1px; top:100px; left:100px;}
...

Y aqui abajo las funciones

function sobre(){
document.getElementById('dos').style.borderWidth="25px";
document.getElementById('dos').style.top="76px";
document.getElementById('dos').style.left="76px";
}

function quita(){
document.getElementById('dos').style.borderWidth="1px";
document.getElementById('dos').style.top="100px";
document.getElementById('dos').style.left="100px";
Y aqui os pongo el codigo entero de la segunda forma por si os apetece verlo entero
Código:
<html>

<head>

<style type="text/css">
input{border:solid; position:absolute;}
#dos{border-width:1px; top:100px; left:100px;}
</style>

<script type="text/javascript">
function sobre(){
document.getElementById('dos').style.borderWidth="25px";
document.getElementById('dos').style.top="76px";
document.getElementById('dos').style.left="76px";
}

function quita(){
document.getElementById('dos').style.borderWidth="1px";
document.getElementById('dos').style.top="100px";
document.getElementById('dos').style.left="100px";
}


</script>

</head>

<body>

<form>
<input type="text" id="dos" onMouseOver="sobre();" onMouseOut="quita();" value="TEXTO">
</form>

</body>

</html>
  #4 (permalink)  
Antiguo 01/04/2010, 16:53
 
Fecha de Ingreso: marzo-2010
Mensajes: 35
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Ensanchar cuadro de texto SIN MOVERLO!

Y bien? Os parece adecuado?

Etiquetas: cuadro
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:27.