Discussion :

[Azulys]

Bonjour à tous,

J'essaie actuellement de créer un site sur lequel, il n'y aurait qu'une page constitué d'un menu à droite et d'un corps à gauche.
Je souhaite que le corps change en fonction du menu que l'on sélectionne, seulement celle ci affichais le contenu de toutes les pages.

Pour empêcher ceci j'ai utilisé style="display:none" dans le code de mon menu.
Maintenant chaque page affiche son contenu quand on clique sur le menu, mais si je recharge la page alors il y a un grand vide :S
Ou alors je peut faire revenir sur la page d'accueil dès que l'on recharge mais je voudrais que la page soit rechargé avec le même corps, les utilisateurs de mon site ne vont pas vraiment apprécier s'ils doivent sans cesse repasser par le menu...

Voilà le code de mon menu

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<div id="Menu">
 
<!-- Le code Javascript suivant permet de changer le contenu du corps du site 
en fonction du menu sur lequel on a cliqué -->
    <script type="text/javascript">
        function showPane(id) {
          var e,i;
          var PID = "content"; // the id of the parent element
          var p = document.getElementById(PID); // parent element
          // loop through each of the childNodes of the parent element
          for (i=0; i<p.childNodes.length; i++) {
            e = p.childNodes[i];
            if (e.nodeType!=1) continue; // pass over non-element nodes
            if (e.getAttribute("id") == id) {
              e.style.display = "block";
            }
            else {
              e.style.display = "none";
            }
          }
        }
 
 
    </script>    
 
 <!-- Dans le Tableau suivant on a les différents menus, qui chargent les 
 différents corps -->
    <table>
        <tr>
            <td>
                <a href="#BMS" onclick="showPane('BMS')">♦ Qui sommes nous?</a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="#Prestation" onclick="showPane('Prestation')">♦ Nos Prestations</a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="#Rdv" onclick="showPane('Rdv')">♦ Rendez vous</a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="#Devis" onclick="showPane('Devis')">♦ Devis</a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="#Qualif" onclick="showPane('Qualif')">♦ Qualification de fichiers</a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="#Atout" onclick="showPane('Atout')">♦ Nos Atouts</a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="#Contact" onclick="showPane('Contact')">♦ Nous Contacter</a>
            </td>
        </tr>
    </table>
</div>

Et voici le code de mon corps

Code html :

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
<div id="Corps">
    <div id="content">
 
        <div id="BMS" style="display:none">
            test1 
        </div>
        <div id="Prestation" style="display:none">
            test2
        </div>
        <div id="Rdv" style="display:none">
            test3
        </div>
        <div id="Devis" style="display:none">
            test4
        </div>
        <div id="Qualif" style="display:none">
            test5
        </div>
        <div id="Atout" style="display:none">
            test6
        </div>
        <div id="Contact" style="display:none">
            test7
        </div>
    </div>    
</div>

Et voici le code de la page les appelant:

Code php :

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
<?php
    include '../header.php';
?>
<div id="Conteneur">
    <?php
        include 'Content_Vues/Vue_Titre_Page.php'
    ?>
    <?php
        include 'Content_Vues/Vue_Menu.php';
    ?>
    <?php
        include 'Content_Vues/Vue_Corps.php';
    ?>
</div>
<?php
    include '../footer.php';
?>

Voilà j'aimerais savoir si l'un de vous voit comment résoudre ce problème, et s'il peut m'aider.

Cordialement,

Azulys

[MaitreKaio]

Tu pourrais garder dans une variable JS l'id du div actuellement affiché, initialiser cette variable à la valeur du div que tu souhaites afficher au chargement de la page et appeler ta méthode showPane() au chargement de la page.
Maintenant, si tu souhaites vraiment que le dernier menu chargé "survive" à un reload, tu dois utiliser d'autres mécanismes (localStorage, cookie).
Ou alors, autre option, plus élégant mais surement plus compliqué, tu utilises Ajax pour charger le bon contenu au clic sur le menu.

[Azulys]

Je connais pas le javascript mais je vais regarder quand même ^^"