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....

[Jiraiya42]

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....

Merki pour ta réponse

Oui je sais que mon code n'est pas du tout bon mais je débute. J'ai tenté d'adapter ton code en incluant une modif des style des balises A j'ai mis ça :

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
23
 
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='30em';
     }
    var mesAs = mesLIs[j];
    mesAs = mesAs.getElementsByTagName("A");
    for (var k=0; j<mesAs.length; j++)
    {
      with (mesAs[k])
       {
         style.width='30em';
       }
    }
  }
}

Mais il ne fonctionne pas, un avis svp ?

[denisC]

var mesAs = mesLis[j];

Javascript est tres sensible à la casse....

[Auteur]

Javascript est tres sensible à la casse....

à ce propos :

Code x :

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

1
2
3
4
5
getElementsByTagName("A");     => getElementsByTagName("a");
getElementsByTagName("LI");    => getElementsByTagName("li");
getElementsByTagName("LI");    => getElementsByTagName("ul");
etc...

même si le résulat est le même, il préférable d'écrire l'argument en minuscules (d'ailleurs les balises dans ta page HTML doivent être en minuscules)

de plus

Code javascript :

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

1
2
3
4
5
 
with (mesLis[j])
     {
       style.width='30em';
     }

Javascript connait "with" ? J'ai un sérieux doute (le mot clef existe dans d'autres langages mais en Javascript je n'en suis pas sûr)

[Jiraiya42]

Javascript est tres sensible à la casse....

Merci pour ta réponse.

Ah oui très juste, ça m'avait échappé De plus, dans ma dernière boucle avec le "k" j'avais mal incrémenté le k.

J'ai mis ça :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
// On définie la largeur des cellules
var width_A = '18.6em';
 
// On récupère le nombre de LI contenu dans le menu
var Lis = document.getElementById("menu").getElementsByTagName("LI");
for (var y=0; y<Lis.length; y++)
{
  var As = Lis[y];
  // On récupère le nombre de A contenu dans chaque LI...
  As = As.getElementsByTagName("A");
  for (var z=0; z<As.length; z++)
  {
    with (As[z])
    {
      //... et pour chacun, on modifie la taille des A
      style.width=width_A;
    }
  }
}
 
// On récupère le nombre de UL contenu dans le menu
var mesUls = document.getElementById("menu").getElementsByTagName("UL");
for (var i=0; i<mesUls.length; i++)
{
  var monUl = mesUls[i];
  // On récupère le nombre de LI contenu dans chaque UL
  mesLis = monUl.getElementsByTagName("LI");
  for (var j=0; j<mesLis.length; j++)
  {
    var mesAs = mesLis[j];
    // On récupère le nombre de A contenu dans chaque LI...
    mesAs = mesAs.getElementsByTagName("A");
    for (var k=0; k<mesAs.length; k++)
    {
      with (mesAs[k])
      {
        //... et pour chacun, on modifie la taille des A
        style.width=width_A;
      }
    }
  }
}

J'ai un problème avec ma variable "width_A"... J'aimerais que les deux "style.width" reçoivent la valeur de la variable "width_A" mais étant plus habitué au PHP j'ai du mal à faire quelque chose de "grammaticalement correct"

Quelqu'un peut m'aider svp ?

Merci d'avance...

EDIT : Problème résolu, je me compliquais la vie pour rien Le code est édité et terminé au cas où si ça servait à d'autres.

Merci beaucoup pour l'aide de tous ceux qui ont participé

[E.Bzz]

Bonjour,

Javascript connait "with" ?

Oui.

A+