Discussion :

[Jiraiya42]

Salut !

Je souhaiterais modifier ma feuille de style selon la résolution du navigateur. J'ai mis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<script type="text/javascript">
  function Redim()
  {
     var wid=screen.width;
     var hei=screen.height;
     alert (wid);
     if ((wid>=800) & (wid<1024))
     {
     }
     if ((wid>=1024) & (wid<1280))
     {
     }
     if ((wid>=1280))
     {
       alert ("Résolution supérieure ou égale à 1280px.");
       document.getElementById('block').style.width='10px';
     } 
  }         
</script>
<a href="javascript:Redim();">ici</a>
<div id="block">test</div>

Ca fonctionne mais le problème est que j'aimerais que cette modification se fasse au chargement de la page et non pas lorsque je clique sur le lien...

Merci d'avance...

[Jiraiya42]

Ca fonctionne avec un div tout simple mais j'ai un problème avec mon menu. En fait, j'essaie d'agrandir ou de diminuer la taille de chaque "case" du menu (par exemple "accueil", "contact"...) pour que la longueur globale de la barre de menu soit aussi large que la bannière selon la résolution.

J'ai mis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
if ((wid>=1280))
{
  document.getElementById('block').style.width='10px';
  document.getElementByTagName('menu a').style.width='16em';
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
#menu a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding : 0; /* aucune marge intérieure */
        background : #ccc; /* couleur de fond */       
        color : #fff; /* couleur du texte */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 19em; /* largeur */
		height : 25px;
		font-size: 1em;
}

Le problème est que dans le code HTML le div se nomme "menu" et le div impliqué est "menu" avec l'attribut "a", je sais pas comment faire...

Quelqu'un peut m'aider svp ?

Merci d'avance...

[Jiraiya42]

Personne connait une solution ?

Comment faire pour atteindre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
#menu li ul

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById("menu").getElementsByTagName("LI").getElementsByTagName("UL")

Comme ça ?

[Jiraiya42]

Personne sait comment modifier via javascript les propriétés css des balies UL et LI ?

Quelqu'un peut m'aider svp ?

Merci d'avance...

[denisC]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById("menu").getElementsByTagName("LI").getElementsByTagName("UL")

Comme ça ?

Il faut faire une boucle. document.getElementById("menu").getElementsByTagName("LI") ça va te renvoyer une liste d'élements, il ne te reste plus qu'à boucler sur chacun des élements en refaisant un getElementsByTagName("UL") (qui te renverra également une liste).

[Jiraiya42]

Il faut faire une boucle. document.getElementById("menu").getElementsByTagName("LI") ça va te renvoyer une liste d'élements, il ne te reste plus qu'à boucler sur chacun des élements en refaisant un getElementsByTagName("UL") (qui te renverra également une liste).

Merci pour ta réponse

Attends, donc je fais une boucle sur le menu et les ul et dans cette boucle je fais une boucle sur les li c'est ça ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
while (document.getElementById("menu").getElementsByTagName("UL"))
{
  while (document.getElementById("menu").getElementsByTagName("LI"))
  {
    document.getElementById("menu").document.getElementById("LI").style.width='18.7em';
  }
}

Quelque chose comme ça ?

[denisC]

Quelque chose comme ça ?

Vraiment vaguement comme ça. Il faut nommer un peu tes variables quand même, comment veux-tu qu'il devine de quoi tu parles

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
var mesUls = document.getElementById("menu").getElementsByTagName("UL");
for (var i=0; i<mesUls.length; i++)
{
  var monUl = mesUls[i];
  mesLis = monUl.getElementsByTagName("LI");
  for (var j=0; j<mesLis.length; j++)
  {
    with (mesLis[j])
    {
      style.width='18.7em';
    }
  }
}

Ton code final sera certainement plus proche de ça....