detectar resolucion del usuario

Durin · #1 (**permalink**) 25/02/2008, 16:09

Estoy utilizando el codigo ( que esta en este post : http://www.forosdelweb.com/f13/faqs-javascript-105325/index7.html) que sirve para utilizar una hoja de estilo, dependiendo de la resolucion del usuario, con lo cual, toma la hoja, a traves del valor que le ponga como nombre a la css ( como puede ser 800.css, 1024.css, etc). Bueno mi problema es que, tengo las css guardadas en una carpeta, pero no pude poner la ruta de donde la tengo guardada, probe poniendo href, url, pero ninguno funciono, la hoja la toma solamente si esta dentro de la misma carpeta donde tengo el html que la utiliza. Por eso quisiera saber si hay alguna manera de que el codigo tome la hoja de la carpeta que yo quiero, muchas gracias, aqui pongo el codigo para que no tengan que fijarse en el post que antes mencione:

Código HTML:

<head>
  <link rel="stylesheet" type="text/css" id="hojaestilo">
  <script language="JavaScript" type="text/javascript">
  <!--
    document.getElementById('hojaestilo').href = screen.width + ".css";
   -->
  </script>
</head>

codigojavascript · #2 (**permalink**) 25/02/2008, 19:35

Yo probé esto y funcionó correctamente:

Código:

<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" id="hojaestilo">

  <script language="JavaScript" type="text/javascript">
  <!--

/* Suponiendo que la hoja de estilo esté en un subdirectorio */
document.getElementById('hojaestilo').href = 'css/' + screen.width + ".css";

   -->
  </script>

</HEAD>

<BODY>

Texto de la página

</BODY>
</HTML>

Debería funcionar tambien con la ruta absoluta, por ejemplo:

Código:

<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" id="hojaestilo">

  <script language="JavaScript" type="text/javascript">
  <!--

/* Ruta absoluta */
document.getElementById('hojaestilo').href = 'http://www.midominio.com/css/' + screen.width + ".css";

   -->
  </script>

</HEAD>

<BODY>

Texto de la página

</BODY>
</HTML>

Espero que sirva
Saludos

Durin · #3 (**permalink**) 27/02/2008, 08:57

Muchas gracias, me ha servido el primer codigo que pusiste, lo que si debes respetar ese orden 'css/' + screen.width + ".css"; (en el caso que la carpeta se llame, "css/"). Ahora tengo otra pregunta, yo estoy ajustando para que la pagina se pueda ver en 800X600 y en 1024X768, (osea que tuve que diseñar dos css, una para cada resolucion), mi problema es que , si el usuario tiene otra resolucion y como no toma ninguna de las dos y envez de hacer una css para cada resolucion, habra alguna forma para que tome la mas adecuada para cada resolucion? o tambien estaba pensando que al no tener las css correspondientes tome la original, osea, la que estaba desde un principio sin tener en cuenta el tema de la resolucion. Por si me respondes "codigojavascript" ( o alguien que tambien sepa), como has solucionado este inconveniente? . Muchisimas gracias

codigojavascript · #4 (**permalink**) 27/02/2008, 18:52

Bueno, me tomé como personal el pedido de ayuda de Durin así que programé este javascript que carga una hoja de estilo de acuerdo a la resolucion de pantalla del visitante y en el caso que no se haya definido una hoja de estilo para la resolucion utilizada se carga una hoja de estilo por defecto.

Dejo un enlace al ejemplo:

http://www.codigojavascript.com/redi...n-pantalla.php

Espero que sirva.
Saludos

Durin · #5 (**permalink**) 27/02/2008, 21:29

Muchisimas gracias, este codigo que armaste me sirvio, pero tengo un problema ( y no me doy cuenta cual es!), me falla la parte en que si el usuario no tiene la resolucion y tomaria la hoja "default.css", bueno ahi esta el problema, que no la toma, probe poniendo una resolucion de 1280,pero no toma la hoja de estilo "default", es como sino entraria por la parte del "else", y por lo que vi el codigo lo copie tal cual lo hiciste vos, lo unico que cambia es la variable donde guardas el url de las css, y saque la pregunta de 640 (ya que en mi caso no la necesito) por si acaso aca dejo el codigo:

Código HTML:

<link rel="stylesheet" type="text/css" id="hojaestilo">
  
<script language="JavaScript" type="text/javascript">

// Defino la URL donde se encuentran las hojas de estilo   
urlHojaEstilo = '../misc/'; 
  
// Si la resolución (en ancho) de pantalla es igual a 1024 || 800 se ejecuta esta sentencia   
if (screen.width == '1024' || '800' ) {  

// Se carga la hoja de estilo correspondiente a la resolución utilizada por el usuario  
    document.getElementById('hojaestilo').href = urlHojaEstilo + screen.width + ".css";   
}  
  
/* En el caso de que la resolución es diferente a alguna de las anteriores, se carga una hoja de estilo por defecto, llamada default.css */  
else {  
    document.getElementById('hojaestilo').href = urlHojaEstilo + 'default.css';   
}  

</script>

La hoja de estilo "default" tambien esta dentro de la carpeta "misc",es rarisimo, nose cual sea el problema

codigojavascript · #6 (**permalink**) 28/02/2008, 05:49

Es verdad, perdón, tenía un par de errorres el script.
Probá con esto:

Código:

<HTML>
<HEAD>

<LINK rel="stylesheet" type="text/css" id="hojaestilo">

<script language="javascript">

// Definimos la URL donde se encuentran las hojas de estilo
urlHojaEstilo = 'http://www.codigojavascript.com/css/';
// Guardamos la resolución actual
resolucion = screen.width;

/* Si la resolución (en ancho) de pantalla es igual a 1024 || 800 || 640
 ejecutamos esta sentencia */
if ((resolucion == '1024') || (resolucion == '800') || (resolucion == '640')) {
	// Cargamos la hoja de estilo correspondiente a la resolución de pantalla utilizada
	document.getElementById('hojaestilo').href = urlHojaEstilo + resolucion + ".css";
}

/* De otra manera, es decir, si la resolución de pantalla es diferente a alguna 
de las anteriores, cargamos una hoja de estilo por defecto llamada default.css */
else {
	document.getElementById('hojaestilo').href = urlHojaEstilo + 'default.css';
	resolucion = 'default';
}

document.write('Hoja de estilo cargada en la página:<br>');
document.write(urlHojaEstilo+resolucion+'.css');

</script>

</HEAD>

<BODY>

</BODY>
</HTML>

Saludos

Durin · #7 (**permalink**) 28/02/2008, 08:45

Muchisimas gracias, este codigo que armaste me sirvio un monton, sos un groso, y aparte esta bueno, porque tambien le va a servir a otros, muchas gracias. Ahora te tiro otro mangazo "personal", como dijiste antes, ya que veo que sabes de javascript (caso contrario de mi, que nose bastante), me interesaria saber si me podes ayudar (creo que es la ultima que te pido!) sobre la validacion de un formulario, para mas detalle te dejo este post: http://www.forosdelweb.com/f13/validando-formulario-con-dos-funciones-559688/. Espero que me puedas ayudar .... te di las gracias? , por las dudas te las doy de vuelta, muchas gracias :)

codigojavascript · #8 (**permalink**) 28/02/2008, 14:06

Durin: primero, de nada, para eso está el foro, para ayudar.

En cuanto a lo de la validación de formulario tengo un script el cual te puede ser útil. Ten encuenta que cada formulario de cada sitio es diferente así que es dificil hacer un script que satisfaga a todos por igual.

Te dejo un enlace al ejemplo que te mencioné. Si te parece que falta algo (algún campo para validar) me dices y armamos algo a tu medida, no cuesta tanto ya que es un tema ya re visto y hay bastante info en la web como para armar lo que se quiera.

Aca va el enlace:

Validación de datos en un Formulario

Saludos
Toda la suerte

Durin · #9 (**permalink**) 02/03/2008, 12:56

Muchas gracias de nuevo, me ha servido tu codigo de validacion de formulario, la parte de validar el email con las expresiones regulares