Javascript, resolution ecran et css

Signaler
Messages postés
58
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
23 janvier 2011
-
Messages postés
3
Date d'inscription
samedi 23 janvier 2010
Statut
Membre
Dernière intervention
8 novembre 2011
-
Bonjour,
voila je détecte la résolution du client en javascript comme ceci :

if (screen.height>=1024){
    ...
}
else{
    ...
}

ensuite j'ai besoin de redimensionner un div conteneur en fonction de la résolution. J'ai essayé deux méthodes qui ne fonctionnent pas :

1 :
par l'appel de feuilles de styles externes differentes selon la résolution :
if (screen.height>=1024){
    <link href='styles1024.css' rel='stylesheet' type='text/css'>
}
else{
    <link href='styles768.css' rel='stylesheet' type='text/css'>
}

2:
par le passage de parametres ds la feuille de style interne.

if (screen.height>=1024){
    var hauteur=700px
    var largeur=900px
}
else{
    var hauteur=540px  
    var largeur=700px
}
</script>
<style type="text/css">
#anim {
    vertical-align:top;
    text-align:center;
    position: relative;
    height: hauteur;
    width: largeur;
    margin-right: auto;
    margin-left: auto;
    top: 0px;
}
</style>

voila ds les deux cas cela ne fonctionne pas.
Quelqu'un a-t-il une idée ??

Merci d'avance.

3 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
Bonjour,
On ne peut pas mélanger javascript et style comme tu le fais, une variable javascript n'est pas reconnue dans le style.

Tu peux toujours essayer comme ceci en changeant la source du link




<link id" L_STYLE " href'defaut.css' rel= 'stylesheet' type='text/css'>
<script type="text/javascript">

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

if( O_Style){

  if( screen.height > = 1024)

    O_Style.href = "styles1024.css";
  else
    O_Style.href = "


styles

768.css";
}

</script>








Remarque :
La hauteur de l'écran hôte n'est pas forcément la hauteur de l'exploreur...

Une piste peu être mettre la dimension de ton div à 100%

<style type ="text/css">
#anim {
  vertical-align : top;
  text-align : center;
  position : relative;
  height : 100%;
  width: 100%;
  top : 0px;
}
</style>






Sinon faire une recherche avec redirection suivant résolution écran.


;0)
Messages postés
58
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
23 janvier 2011

Merci beaucoup pour ta réponse !
Messages postés
3
Date d'inscription
samedi 23 janvier 2010
Statut
Membre
Dernière intervention
8 novembre 2011

mois je pense qu'elle existe une manière moins compliquée pour resoudre le prbml d'ecran et c bien le % pour les largeures et les hauteures.