auto switch r�solution ?

Version imprimable

19/11/2012, 03h21
Hyuunkel

auto switch r�solution ?

1) Bonjour � tous, je travail actuellement sur une page et je suis confront� � un soucis de centrage � l'int�rieur d'un bloc.

Tout le site et mes blocs se cadrent et s'ajustent bien comme je le d�sire, je souhaiterai juste switcher un padding en fonction de la r�solution client sans rien changer d'autre.

Par exemple par d�faut dans mon css j'ai mis pour une r�solution de 1024*768, un padding � 3% pour ce bloc, je souhaiterai le pass� automatiquement � 5% si je passe ma r�solution en 1280*1024 par exemple...

Je pense que cela est faisable en javascript (c'est pourquoi je poste ici) mais je n'ai pas trouv� mon bonheur :(

L'un d'entre vous aurait'il un petit script sous la main susceptible de m'aider SVP ?

2) Une autre des pistes que j'ai tent� d'explorer �tais de g�rer ce padding en fonction du ratio (un pour le 4/3, un pour le 16/9 par exemple) mais je n'ai pas trouv� non plus comment g�rer le ratio...

Cordialement
19/11/2012, 09h17
SpaceFrog

Tu peux charger un css en fonction de la r�solution d�tect�e

Code:

alert('Votre resolution est '+screen.width+'x'+screen.height);
19/11/2012, 13h23
Hyuunkel
Bonjour SpaceFrog, merci de ta r�ponse rapide qui me confirme dans un 1er temps que c'est faisable :).

Je connais effectivement la fonction alert qui permet d'afficher un message (en l�occurrence : la r�solution) mais je ne sais pas comment cod� le switch.

J'ai fait un css du style :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <style type="text/css">  </style>
Le script que je cherche � faire pour m�tre dans mon body serai en quelque sorte :
Code:

1 2 3 4 5 6 <script type="text/javascript"> if "+screen.width+" == "1024" (<div id="picture1024">) else if "+screen.width+" == "1280" (<div id="picture1280">) else ect... </script>
Mais je ne sais pas comment cod� un �quivalent en javascript...
19/11/2012, 13h50
SpaceFrog

non tu n'y es pas du tout ...

regarde plut�t du cot� des feuilles de styles externes.
Un feuille par r�solution
et du coup tu fais pointer la balise de style vers le fichier en fonction de la resolution

ok, j'ai donc essay� sans succ�s :

Code:

1
2
3
4
5
6
7
8
9
 
<script type="text/javascript">
if (screen.width>=1024){
    <link href='styles1024.css' rel='stylesheet' type='text/css'>
}
else{
    <link href='styles1280.css' rel='stylesheet' type='text/css'>
}
</script>

Avant de trouver un script que j'ai adapt� et qui fonctionne :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<link id="reso" href="scripts/styles.css" rel='stylesheet' type='text/css'>
<script type="text/javascript">
var O_Style = document.getElementById('reso');
if( O_Style){
  if( screen.width == 1024)
    O_Style.href = "scripts/styles1024.css";
  else
  if( screen.width == 1280)
    O_Style.href = "scripts/styles1280.css";
	else O_Style.href = "scripts/styles.css";
}
</script>

Merci de m'avoir orient� SpaceFrog :), gr�ce � cela je peux continuer d'�crire ce dont j'ai besoin, Bonne soir�e � tous

19/11/2012, 21h00
SpaceFrog
L'erreur de ton premier code est de m�langer html et js ...
Code:

1 2 3 if (screen.width>=1024){ <link href='styles1024.css' rel='stylesheet' type='text/css'> }
On ne peut pas "rediger" du code html au milieu d'un script js de la sorte
(�ventuellement un document.write, mais a utiliser avec parcimonie dans un contexte limit�)

Ce que tu as parfaitement rectifi� dans le second code en passant par le DOM

Code:

var O_Style = document.getElementById('reso');

pour r�cup�rer l'element link
et lui attribuer conditionnellement le href :

Code:

O_Style.href =

:ccool: