Forzar resolución

[Plaguelord]

Buenas, soy nuevito en el foro y tengo una consulta...
...tengo un blog, con un fondo con resolución 1024x768, y, obviamente, cuando lo vemos con una resolución wide, se visualiza de forma incorrecta, como podría hacer para forzar la resolución de la página en 1024x768?
Gracias!

Aprovecho el post también para preguntarle si se les ocurre alguna forma para ir visualizando las imagenes de la página xkcd (q van cambiando a diario)
Gracias de nuevo!

[tampon]

no se puede forzar a una resolucion, el mionitor del usuario esta configurado deacuerdo a su capacidad, lo que puedes hacer es diseñar tu pagina de una forma que se vea bien en distintas resoluciones.

y la segunda lo haces con php, mysql y javascript o ajax cualquiera de las dos.

[Plaguelord]

Gracias por la velocidad!
Como es una imagen de tamaño fijo y no lo quiero manejar con porcentajes, creo q lo mejor sería un js que me detecte si es resolucion wide, para cargar la el fondo alternativo en alguna resolucion wide.
Y en el caso de la 2da consulta, tmb lo tengo q hacer en js, ya que es para blogger.
Me podes dar una mano?
Gracias de nuevo

[tampon]

puedes buscar algun ejemplo en http://www.dynamicdrive.com/ para realizar lo que necesitas.

saludos!

[Plaguelord]

Buenisimo, gracias, busco ahi, cualquier cosa, consulto en este mismo hilo.
Gracias de nuevo!
EDIT: Acá dejo un codigo q creo q puede servir para lo q yo quiero si me dan una manito para modificarlo:

Código:

<script language="JavaScript1.2">
<!--
if (screen.width==800||screen.height==600) //if 800x600
window.location.replace("URL1")

else if (screen.width==640||screen.height==480) //if 640x480
window.location.replace("URL2")

else if (screen.width==1024||screen.height==768) //if 1024x768
window.location.replace("URL3")

else //if all else
window.location.replace("URL4") 

//-->
</script>

Necesito q en vez de redirigirme a otra web, me devuelva lo siguiente:

Código:

background: #000000 url(URL) no-repeat;

con eso creo q conseguiría que me cambie el fondo dependiendo de la resolución...
les parece funcional? me ayudan a modificarlo?
Gracias!

[Plaguelord]

Perdón por el doble post, espero q esto no se considere como tal, lo hago así solo para no seguir editando el anterior....
Para evitar poner muchas resoluciones no se puede hacer algo así como anexo para lo anterior:

Código:

if(screen.width/screen.height!=1.33333)//las resoluciones no wide, para tener relación cuadrada, tienen esa relación de aspecto
window.location.replace("URL2") //Acá necesitaría que me diera el texto que explique antes

Gracias!

OFF: En cuanto a como extraer las imagenes de xkcd, no encontr algo parecido en esa web.

[zerokilled]

se podria hacer pero tienes que tener en consideracion varios aspectos del lenguaje. por ejemplo, si en javascript calculas 4 / 3 resulta 1.333... periodico lo cual no es lo mismo que decir 4 / 3 == 1.333, el resultado te devolvera falso. una forma que podrias hacer es conociendo de antemanos la relacion proporcional estandar, por ejemplo 4:3, 16:9, entre otros. de modo que por ejemplo

Código:

if(screen.width / screen.height == 4 / 3) // la resolucion es relacion 4:3;
if(screen.width / screen.height == 16 / 9) // relacion 16:9
if(screen.width / screen.height == 5 / 4) // relacion 5:4 (1.25)

el unico problema que puedo ver de esta alternativa es que hay implementaciones de javascript que tienen problema tratando numeros de puntos flotante. pudiera ser que alguna implementacion trunque el valor a otro que no es. como repuesta a esta posible falla, otra alternativa podria ser comparar los valores por rango. por ejemplo, si la relacion 4:3 esta entre 1.3 a 1.4, o la relacion 16:9 esta entre 1.7 a 1.8, y asi sucesivamente.

[Plaguelord]

Código:

if(screen.width / screen.height >=1.3&&<=1.4) // la resolucion es relacion 4:3;
if(screen.width / screen.height >=1.7&&<=1.8) // relacion 16:9
if(screen.width / screen.height ==1.25) // relacion 5:4 (1.25)
//o if(screen.width / screen.height >=1.2&&<<1.3)

algo así?
igual me queda el detalle de como hacer que eso me de como resultado:

Código:

background: #000000 url(URL) no-repeat;

que es la linea q me fija el fondo del blog.
Muchas gracias!

[zerokilled]

algo asi seria lo mas apropiado

Código:

var ratio = screen.width / screen.height;
if(ratio > 1.3 && ratio < 1.4){ // 4:3
... codigo;
} else if(ratio > 1.7 && ratio < 1.8){ // 16:9
... codigo;
} else if(ratio > 1.2 && ratio < 1.3){ // 5:4
... codigo;
}

en cada ocurrencia que dice ...codigo; ahi ubicas el codigo necesario para escribir en la propiedad css. en este caso probablement seria node.style.backgroundImage = "url(imagen.jpg)";. no exactamente eso, sino que node se refiere algun elemento del documento como <body>, e imagen.jpg es la ruta de acuerdo a cada condicion.

[Plaguelord]

Si si, buenisimo, no se me había ocurrido declarar la variable antes =P
...eso muestra q estoy bastante oxidado en programación xD
Lo único q no entendí es eso último de node, pero hago un par de experimentos y te cuento.
Muchas gracias!

OFF: No quiero parecer abusador, pero, me podrías ayudar con el script en js para ir mostrando las imágenes q aparecen diariamente en xkcd?
Gracias de nuevo!

[zerokilled]

me podrías ayudar con el script en js para ir mostrando las imágenes q aparecen diariamente en xkcd?

referente a eso no tengo idea de lo que me estas hablando. quiero decir, no estoy familiariado con el xkcd. disculpa que no pueda ayudar en esa parte, esperamos que otro lo pueda hacer mejor que yo.

[Plaguelord]

xkcd es una pagina de humor geek, no lo pongo como link, pq al ser new user, no me deja ponerlo de esa forma.
Publica una foto cada día, y lo q quiero hacer, es un script que cada día me muestre la imagen q corresponde, y si no es muy complicado agregarle los botones para navegar entre los días anteriores.
Perdón si soy poco claro, es mi gran defecto ser poco conciso

[zerokilled]

poniendo a un lado el tema de la legalidad y derecho de autor. no creo que se pueda hacer. mas o menos viendo como funciona el sitio, los filename de las imagenes no conservan un formato estructural. tendrias que ver si el sitio comparte alguna API para la comunidad. si es asi, tendrias que usar su codigo para poder presentar las imagenes en tu sitio. si las alternativas anteriores no son posibles la otra opcion es obtener la imagen mediante peticiones del servidor pero este ultimo dudo mucho que tenga exito por razones de seguridad. o sea, a veces el servidor no permite hacer peticiones extranjeras o el servidor no permite recibir peticiones. no se bien como funciona eso, en foros de servidores te podrian orientar mejor.

[Plaguelord]

Buenisimo, muchas gracias por la info!
Mañana me pongo a reformar las imágenes y te cuento como me fué.
Gracias de nuevo!

[deirdre]

Hola...

Sin mucha seguridad en lo que digo, creo que la propia página mencionada por Plaguelord, http://xkcd.com/, ofrece el enlace de sus imágenes, en su propia portada (p.e. la del día de hoy es http://imgs.xkcd.com/comics/time_travel.png) permitiendo el hotlinking (for hotlinking/embedding, según sus propias palabras).

Por lo de mostrarlas, quizás fuese bueno utilizar un player de imágenes, en el que se colocaran esos links (si el player fuese en flash, el sistema de carga por xml es muy sencillo y fácil de editar). O utilizar un visionador en javascript.

Bye

[zerokilled]

claro que haciendolo manual es posible! pero estoy casi seguro que lo quera hacer automatico, leyendo la pagina y extraer el enlace. porque imaginate, dudo que vaya por las 250~ de paginas en busca de los enlaces y luego todos los dias tenga que agregar uno a su lista. es la unica forma posible pero apuesto que con el tiempo quera automatizarlo.

[Plaguelord]

Exactamente, es esa página, y la intención sería hacerlo automático, para dedicarle un poco de tiempo al coding, pero después poder ahorrar el tiempo de editar el visor a diario.
No tengo ni idea de como hacerlo xD
Se les ocurre alguna forma?

[zerokilled]

como ya se te comento, en el lado cliente no lo puedes hacer de forma automatica a no ser que el sitio distribuya alguna API para lado cliente. hasta donde pude ver solo se limitan a mostrar la ruta de la imagen. te queda por revisar soluciones de lado servidor pero como este foro es javascript poco se te puede decir acerca del lado servidor. dirigete al foro adecuado.

[Plaguelord]

Prefecto, muchas gracias!
Hoy intento hacerme un tiempito para probar lo que me aconsejaste antes, y te comento por aquí mismo.
Saludos!

[Plaguelord]

Buenas, perdón por la tardanza xD
Probé el codigo cuando tuve algo de tiempo para montar las imágenes deseadas, pero no pude hacer funcionar el codigo aunque es funcionalmente correcto =S
Acá les dejo un extracto de lo que es el código q tengo actualmente funcionando, con un solo fondo, sin detección:

Código:

body {
	background: #000000 url(url.img) no-repeat;
	color: $textocolor;
	font: normal 62.5% "Trebuchet MS",Verdana,sans-serif;
	padding-left: 0px;
}

Y necesito incorporar el código q me ayudaron a armar uds

Código:

<body onLoad="redireccionar()"> 
<script LANGUAGE="JavaScript"> 
function redireccionar() { 
var img1 = "url.img1"; 
var img2 = "url.img2"; 
var ratio = screen.width/screen.height;
if(ratio>1.3&&ratio<1.4){ //4:3
background: #000000 body.style.backgroundImage = "url(url.img1)" no-repeat;
} else if(ratio>1.7&&ratio<1.8){ //16:9
background: #000000 body.style.backgroundImage = "url(url.img2)" no-repeat;
}else //default
background: #000000 body.style.backgroundImage = "url(url.img1)" no-repeat; 
} 
</script> 
</body>

En que me estoy equivocando? (tengan en cuenta que no se nada de html ni js =$)
Gracias de antemano!

[zerokilled]

esta fallando en las lineas que pones "url(url.img1)" no-repeat;. en primer lugar, backgroundImage solo acepta la ruta de la imagen, o sea, "url(ruta/imagen.ext)". la parte "no-repeat" tienes que agregarla a su correspondiente propiedad aunque quizas seria mejor definirlo en la hoja de estilo. si necesitas declararlo en el script, entonces la propiedad adecuada es backgroundRepeat.

[Plaguelord]

Iniciado por zerokilled

esta fallando en las lineas que pones "url(url.img1)" no-repeat;. en primer lugar, backgroundImage solo acepta la ruta de la imagen, o sea, "url(ruta/imagen.ext)". la parte "no-repeat" tienes que agregarla a su correspondiente propiedad aunque quizas seria mejor definirlo en la hoja de estilo. si necesitas declararlo en el script, entonces la propiedad adecuada es backgroundRepeat[/url].

El 1er code, está funcionando bien ahora (es mas, lo estoy usando en estos momentos), lo q necesito hacer, es adaptar el segundo code para mi blog, puse el primero, para que se vea q argumentos necesitaria poner.

[Plaguelord]

Iniciado por zerokilled

esta fallando en las lineas que pones "url(url.img1)" no-repeat;. en primer lugar, backgroundImage solo acepta la ruta de la imagen, o sea, "url(ruta/imagen.ext)". la parte "no-repeat" tienes que agregarla a su correspondiente propiedad aunque quizas seria mejor definirlo en la hoja de estilo. si necesitas declararlo en el script, entonces la propiedad adecuada es backgroundRepeat.

Tenes alguna idea de como lo puedo adaptar al segundo code (lo adjunto abajo de todo, por las dudas) y necesito q el resultado de la detección, que va incluido en el body de mi html, quede de esta forma:

Código:

body {
background: #000000 url(url.img) no-repeat;
...mas código...

Y adaptado según la url que me adjuntaste en tu post, quedaría así:

Código:

body {
background-color:#000000;
background-image:url(url.img);
backgroundRepeat="no-repeat";
...mas código...

Alguna idea de como hacer que el siguiente código (el q habiamos armado para variar el fondo según la relasión de aspecto), se adapte al primero?

Código:

<body onLoad="redireccionar()"> 
<script LANGUAGE="JavaScript"> 
function redireccionar() { 
var img1 = "url.img1"; 
var img2 = "url.img2"; 
var ratio = screen.width/screen.height;
if(ratio>1.3&&ratio<1.4){ //4:3
background: #000000 body.style.backgroundImage = "url(url.img1)" no-repeat;
} else if(ratio>1.7&&ratio<1.8){ //16:9
background: #000000 body.style.backgroundImage = "url(url.img2)" no-repeat;
}else //default
background: #000000 body.style.backgroundImage = "url(url.img1)" no-repeat; 
} 
</script> 
</body>

es por los tags body onLoad? =S

De antemano, gracias!

[zerokilled]

estas mezclando css y javascript. evidentemente estas trabajando con CSS pero a traves de javascript. de modo que la sintaxis es un tanto diferente, tienes que usar las propiedades CSS para asignarle valores. el enlace muestra una lista de las propiedades CSS del objeto style. para entrar multiples valores CSS puedes usar la propiedad background.

[Plaguelord]

Iniciado por zerokilled

estas mezclando css y javascript. evidentemente estas trabajando con CSS pero a traves de javascript. de modo que la sintaxis es un tanto diferente, tienes que usar las propiedades CSS para asignarle valores. el enlace muestra una lista de las propiedades CSS del objeto style. para entrar multiples valores CSS puedes usar la propiedad background.

Si, tenés razón, pero, como estoy usando algunos script's js dentro de mi CSS (es hibrido el blog), pensé q se podria hacer así también =S
En las propiedades de CSS del link q me pasaste, no encontré nada que sirvar para evaluar la relasión de aspecto.
Se te ocurre alguna idea?
OFF: Perdón por la molestria concurrente.

EDIT: Lo acabo de plantear en el subforo de css también

[zerokilled]

no comprendo, o aparentemente no quiero comprender. tengo la impresion de que estas volviendo atras. para evaluar la relacion de aspecto tienes que usar screen.width y screen.height, ya eso se discutio en los mensajes anteriores. CSS no guarda ninguna informacion acerca del aspecto que utiliza el monitor o cualquier dispositivo de salida. lo unico que tienes que hacer con CSS es cambiar la imagen de fondo.

[Plaguelord]

jajajaja
Es q no se como tomar con css la imagen que eligio el script js según la relasion de aspecto :$

[zerokilled]

esta es tu linea

Código:

background: #000000 body.style.backgroundImage = "url(url.img2)" no-repeat;

practicamente lo tenias, solo que estabas haciendo mal la referencia al elemento, no-repeat esta mal ubicado porque javascript lo interpreta como una expresion (restar no y repeat). background: #000000, eso es CSS y en javascript no puedes escribir sintaxis CSS. lo unico que necesitas es eliminar todo lo que anteriormente mencione y preceder body con document.

[Plaguelord]

Iniciado por zerokilled

esta es tu linea

Código:

background: #000000 body.style.backgroundImage = "url(url.img2)" no-repeat;

practicamente lo tenias, solo que estabas haciendo mal la referencia al elemento, no-repeat esta mal ubicado porque javascript lo interpreta como una expresion (restar no y repeat). background: #000000, eso es CSS y en javascript no puedes escribir sintaxis CSS. lo unico que necesitas es eliminar todo lo que anteriormente mencione y preceder [i]body[/b] con document.

A ver, ya lo intento =)
Gracias de nuevo!

[Plaguelord]

Debo ser realmente muy autista, pero no puedo, me sigue mostrado el fondo en blanco...

Iniciado por Script CSS

Código:

body {
	background: #000000 url(url.img) no-repeat;
background-attachment: fixed;
	color: $textocolor;
	font: normal 62.5% "Trebuchet MS",Verdana,sans-serif;
	padding-left: 0px;
}

Iniciado por Script js

Código:

<script LANGUAGE="JavaScript"> 
var img1 = "url.img1"; 
var img2 = "url.img2"; 
var ratio = screen.width/screen.height;
if(ratio>1.3&&ratio<1.4){ //4:3
document.body.style.backgroundImage = "url(url.img1)";
} else if(ratio>1.7&&ratio<1.8){ //16:9
document.body.style.backgroundImage = "url(url.img2)";
}else //default
document.body.style.backgroundImage = "url(url.img1)"; 
</script>

Y, ya sea reemplazando la sección body del CSS por el script js, o incluyendolo dentro, me muestra el fondo en blanco.
No entiendo =( =$