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: