Javascript, resolution ecran et css

cs_chiktika Messages postés 58 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 23 janvier 2011 - 16 nov. 2007 à 16:28
haroun70 Messages postés 3 Date d'inscription samedi 23 janvier 2010 Statut Membre Dernière intervention 8 novembre 2011 - 17 mars 2010 à 03:28
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

PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
17 nov. 2007 à 09:15
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)
0
cs_chiktika Messages postés 58 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 23 janvier 2011
19 nov. 2007 à 17:29
Merci beaucoup pour ta réponse !
0
haroun70 Messages postés 3 Date d'inscription samedi 23 janvier 2010 Statut Membre Dernière intervention 8 novembre 2011
17 mars 2010 à 03:28
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.
0
Rejoignez-nous