Foros del Web » Creando para Internet » CSS »

Estilo como el GMAIL

Estas en el tema de Estilo como el GMAIL en el foro de CSS en Foros del Web. Me gustaría saber como se hace igual que pasa en el momento de "Crear Nuevo Tema" o en el GMAIL a la hora de poner ...
  #1 (permalink)  
Antiguo 23/02/2009, 05:13
 
Fecha de Ingreso: febrero-2009
Mensajes: 36
Antigüedad: 8 años, 10 meses
Puntos: 0
Estilo como el GMAIL

Me gustaría saber como se hace igual que pasa en el momento de "Crear Nuevo Tema" o en el GMAIL a la hora de poner usuario y password, que cuando el foco está en input se marque el cuadro de texto en amarillo, y cuando pierdes el foco, desaparece esta marca amarilla.
  #2 (permalink)  
Antiguo 23/02/2009, 11:46
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 12 años, 3 meses
Puntos: 54
Respuesta: Estilo como el GMAIL

ah de ser algo asi

input:focus{border:1px solid yellow}

esto no te va a andar en IE, y vas a tener q corregirlo con JS

__________________
Degiovanni Emilio
developtus.com
  #3 (permalink)  
Antiguo 24/02/2009, 04:23
 
Fecha de Ingreso: febrero-2009
Mensajes: 36
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Estilo como el GMAIL

Y para que funcione en Explorer que hago????
  #4 (permalink)  
Antiguo 25/02/2009, 05:06
 
Fecha de Ingreso: octubre-2007
Ubicación: Berlin
Mensajes: 51
Antigüedad: 10 años, 1 mes
Puntos: 1
Respuesta: Estilo como el GMAIL

esto puede resolver el problema
http://www.htmldog.com/articles/suckerfish/
  #5 (permalink)  
Antiguo 25/02/2009, 05:07
 
Fecha de Ingreso: octubre-2007
Ubicación: Berlin
Mensajes: 51
Antigüedad: 10 años, 1 mes
Puntos: 1
Respuesta: Estilo como el GMAIL

aqui para el focus
http://www.htmldog.com/articles/suckerfish/focus/

y aqui puedes ver los ejemplos
http://www.htmldog.com/articles/suck...focus/example/
  #6 (permalink)  
Antiguo 25/02/2009, 06:35
 
Fecha de Ingreso: febrero-2009
Mensajes: 36
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Estilo como el GMAIL

es lo que estaba buscando, lo probaré a ver que tal funciona, gracias por todo
  #7 (permalink)  
Antiguo 25/02/2009, 07:47
 
Fecha de Ingreso: octubre-2007
Ubicación: Berlin
Mensajes: 51
Antigüedad: 10 años, 1 mes
Puntos: 1
Respuesta: Estilo como el GMAIL

de nada...xD
  #8 (permalink)  
Antiguo 26/02/2009, 14:51
 
Fecha de Ingreso: febrero-2009
Mensajes: 36
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Estilo como el GMAIL

Ha ido, pero he estado probando para que el efecto no me lo coja cuando uso un input de type que sea diferente a "TEXT".

En la parte de javascript, poniendo despues del for esto :

if (sfEls[i].type != "submit")

Y una parte la soluciono.

Pero me gustaría que el boton no me coja el estilo del css que si lo coge.

Paso ficheros:

css
input {
width: 15em;
border: 2px solid;
border-color: #666 #ddd #ddd #666;
}

input:focus, input.sffocus{
background: #93a3c9;
border-color: #003366;
}

js.
<!--//--><![CDATA[//><!--

sfFocus = function() {
var sfEls = document.getElementsByTagName("INPUT");
for (var i = 0; i < sfEls.length; i++)
{

if (sfEls[i].type != "submit")
{
sfEls[i].onfocus=function()
{
this.className+=" sffocus";
}
sfEls[i].onblur=function()
{
this.className=this.className.replace(new RegExp(" sffocus\\b"), "");
}
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfFocus);

//--><!]]>
  #9 (permalink)  
Antiguo 02/03/2009, 02:53
 
Fecha de Ingreso: febrero-2009
Mensajes: 36
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Estilo como el GMAIL

Nadie me puede ayudar?
  #10 (permalink)  
Antiguo 02/03/2009, 14:20
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Estilo como el GMAIL

Hola:

Si el problema lo tienes con el javascript, pienso que te podrían ayudar mejor en el foro de javascript.

Saludos.

  #11 (permalink)  
Antiguo 04/03/2009, 00:50
 
Fecha de Ingreso: febrero-2009
Mensajes: 36
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Estilo como el GMAIL

He preguntado en el foro de javascript, y sin motivo ninguno, me han borrado la entrada, por lo tanto nadie me puede ayudar.
  #12 (permalink)  
Antiguo 04/03/2009, 13:58
Avatar de foreverOdd  
Fecha de Ingreso: noviembre-2007
Ubicación: Caracas
Mensajes: 489
Antigüedad: 10 años
Puntos: 14
Respuesta: Estilo como el GMAIL

No tendrias ningun problema si utilizas un framework de javascript que soporte css3, con jQuery por ejemplo, para hacer lo que quieres todo se reduciaria a :

Código css:
Ver original
  1. jQuery("#id_input:focus").css({border:"1px solid yellow"});

Saludos
__________________
My path is lit by my own fire, I only go where I desire
  #13 (permalink)  
Antiguo 09/03/2009, 01:50
 
Fecha de Ingreso: febrero-2009
Mensajes: 36
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Estilo como el GMAIL

Mi entorno de trabajo es JAVA, sería válido lo que me comentas.
  #14 (permalink)  
Antiguo 09/03/2009, 08:52
Avatar de foreverOdd  
Fecha de Ingreso: noviembre-2007
Ubicación: Caracas
Mensajes: 489
Antigüedad: 10 años
Puntos: 14
Respuesta: Estilo como el GMAIL

JAVA o JavaScript???????
Son dos lenguajes distintos.

Lo que te puse es javascript. Necesitas descargar la libreria jquery e incluirla en la pagina donde necesitas el efecto.

Suerte
__________________
My path is lit by my own fire, I only go where I desire
  #15 (permalink)  
Antiguo 09/03/2009, 10:35
 
Fecha de Ingreso: febrero-2009
Mensajes: 36
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Estilo como el GMAIL

Trabajo en entornos JAVA pero en las JSP a veces inserto funciones de javascript, lo que pasa es que nunca he usado JQUERY, por lo tanto no sé como se implementa.
  #16 (permalink)  
Antiguo 09/03/2009, 10:50
Avatar de foreverOdd  
Fecha de Ingreso: noviembre-2007
Ubicación: Caracas
Mensajes: 489
Antigüedad: 10 años
Puntos: 14
Respuesta: Estilo como el GMAIL

1.- Lo descargas Aqui

2.- Lo incluyes en tu pagina <script type="text/javascript" src="ruta/al/jquery.js">

3.- Lo usas jQuery("#id_input:focus").css({border:"1px solid yellow"});
__________________
My path is lit by my own fire, I only go where I desire
  #17 (permalink)  
Antiguo 10/03/2009, 00:32
 
Fecha de Ingreso: febrero-2009
Mensajes: 36
Antigüedad: 8 años, 10 meses
Puntos: 0
De acuerdo Respuesta: Estilo como el GMAIL

El paso tres que se tiene que poner en un tag de script al estilo :
<script>
jQuery("#id_input:focus").css({border:"1px solid yellow"});
</script>

O por lo contrario, en algun evento del tag input.

<input type="text" ... >

Donde pongo los tres puntos es donde se usa algun evento?

Saludos y Gracias
Jaime
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 17:06.