Discussion :

[mariogarcia]

bonjour, j'aimerai faire le suivant, j'ai un button dans une cellule d'un tableau et j'aimera que le lien qui appelle ce button s'ouvre dans une autre cellule qui serait comment la cellule principale? est-ce possible? ou les tableau ne sont pas une bonne idée, j'ai fait des tableau ainsi j'évite les frames. pas bon pour le référencement.
merci d'avance.
mario

[Kerod]

Utilises des calques (div) et etc...

Pour ta question tu voudrais mettre tout le code directement dans le td sans iframe et fenetre de ce genre

[Swoög]

Les tableaux ne sont pas tip top non plus, le mieux est le CSS (cf lien dans ma signature) (sauf données tabulaires évidemment )

sinon, si tu veux que seule une partie de la page soit modifiée, il te faudra utiliser AJAX (cf tutos dans la section JavaScript ) mais ce n'est pas top non plus pour le référencement

sinon il n'y a pas d'autres moyens pour le moment de simuler l'effet des frames...

le mieux serait que tu fasses une fonction (en JS, grâce à AJAX) qui prenne en paramètre la page à afficher (son URL) et l'id du div dans le quel tu veux afficher la page...

Ensuite, tu modifies ton site, (grâce à PHP par exemple) pour pouvoir avoir quelque chose qui fasse que tu fournis ou non les éléments de design avec tes pages... exemple :

http://www.monsite.com/mapage.php ==> fournit la page complète, avec balise head, body, la totale

http://www.monsite.com/mapage.php?only_contenu=on ==> fournit uniquement les données de la page (la partie qui change par rapport au design des autres pages, ce que tu appelles la cellule principale )

comme ça ensuite, tes liens auront cette forme :

Code :

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

<a href="lapage.php" onclicke="return ! fonction_AJAX(this.href + '?only_contenu=on', 'id_du_div_principal');">cliquer ici</a>

et la fonction retourne true si AJAX marche bien, et false sinon...

comme ça si AJAX marche pas le lien fonctionnera quand même, et pour les moteurs de recherche, c'est tout bénèf puisqu'ils suivront le lien et référenceront quand même la page

si c'est pas super clair après avoir lu les tutos sur AJAX, héiste pas à poser des questions

[mariogarcia]

en effet j'aurais un menu horizontale, avec quatre onglets chaque onglet se refere a une partie differente de mon site, et j'aimerai que quand je clique sur un onglet; le menu qui se trouve a gauche change.
maintenant, peut je faire une référence vers une page html externe? je m'explique, j'ai des pages écrites en html et je me demande s'il y a un autre moyen de faire afficher les pages dans un div que celui de copier et coller le code de ma page externe vers mon nouveau bloc

Code :

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

1
2
<div class="qqch">
</div>

merci je continue mes recherches sur ajax.

[Swoög]

oui, il y a moyen, avec la solution que je t'ai indiquée

[mariogarcia]

bonjour, j'ai lu les tutoriaux sur ajax mais tous semblent se pencher vers l'autocompletion. je ne sais pas si ce que j'ai besoin ici est du domaine de l'auto completion,
pour ajax j'ai commence a écrire l'objet xhr car dans tous les tutoriaux on commence pour écrire ceci..
mes connaissances en js sont assez nulles, car j'ai jamais fait auparavant, d'ailleurs celui ci serait mon premier site demi-dynamique. j'ai crée ce que je crois être l'équivanlent de ce que swoög a propose: mapage.php. avec les div et tout le reste.
j'ai des pages separées qui devront aller dans les div, mais je vois pas vraiment d'exemple ou de tutoriaux en ce domaine concernant ajax. et je ne comprend pas comment faire pour créer la fonction js qui prenne en parametre l'url (fichier php ou htm) et l'id du div correspondant et l'affiche en ce div.
voici le code que j'ai eu,

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link title="test" type="text/css" rel="stylesheet" href="navstyle.css">
<title>colombia la bella</title>
<script type="text/javascript">
    function getXhr(){
                if(window.XMLHttpRequest) // Firefox et autres
                   xhr = new XMLHttpRequest(); 
                else if(window.ActiveXObject){ // Internet Explorer 
                   try {
                            xhr = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch (e) {
                            xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                }
                else { // XMLHttpRequest non supporté par le navigateur 
                   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
                   xhr = false; 
                } 
            }
</script>
<style type="text/css">
    .window {
        height: 768px;
        width: 1024px;
        background-color:#FFFFFF;
    }
    .maincontainer{
        padding-top: 39px;
        padding-left: 39px;
        padding-right:39px;
        padding-bottom: 39px;
    }
    .mainwindow {
     height: 690px;
     width:  946px;
     background-color:#CCCCCC;
    }
    .header{
    padding-left: 0px;
    height:90px;
    width: 946px;
    background-color:#00148E;
    }
    .bannercolombia{
        float:right;
        }
     .logosite{ 
         float:left;
        }
    .menu{
        height: 576px;
        width: 180px;
        background-image:url(images/bgmenu.gif);
        background-color: #DA0010;
        float:left;
        }
     .main{
        height: 576px;
        width: 766px;
        background-color:#FFFFFF;
        float:left
        }
        .navbar{
          height: 39px;
          width: 766px;
          background-color:#FFFFFF;
          }
</style>
 
</head>';
 
<body bgcolor="#FFFFFF">
<div class="window"> 
    <div class="maincontainer">
        <div class="mainwindow">
            <div class="header">
             <img class="bannercolombia" src="images/bannercolombia.gif" alt="bannercolombia" />
             <img class="logosite" src="images/logosite.gif" alt="logosite" />
            </div>
            <div class="menu">
            </div>
            <div class="main">
                <div class="navbar">
                </div>
            </div>
      </div>
    </div>
</div>
</body>
</html>

ici la page est encore en html.. je dois la convertir en php? si oui il existe de fonctions php pour ce faire?
merci et excusez moi pour autant des questions.

[mariogarcia]

j'ai avancé un petit peu, en ce qui concerne la fonction

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
 
function getXhr()
{
     if(window.XMLHttpRequest)xhr = new XMLHttpRequest(); 
else if(window.ActiveXObject)
  { 
  try{
     xhr = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) 
     {
     xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }
  }
else 
  {
  alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
  xhr = false; 
  } 
}function ShowPage(page)
{
getXhr()
xhr.onreadystatechange = function()
    {
     if(xhr.readyState == 4 && xhr.status == 200)
     {
     document.getElementById('').innerHTML=xhr.responseText;
     }
    }
xhr.open("GET","ajax1.php?page="+page,true);
xhr.send(null);
}

la fucntion showpage est celle qui devrai prendre l'url mais comment faire pour le div id ? ou div class?
je vois vraiment pas.

[<romain/>]

Pour commencer je rejoins Swoög dans le fait que les tableaux c'est pas tip top. C'est pas fait pour faire ça. Porquoi ne pas utiliser les paragraphes, listes et autres bloc fournient par (x)html dont c'est la véritable fonction?

Ensuite tu semble partie pour faire du javascript, c'est bien mais sache que environs 10% des internautes ont leur javascript de désactivé, en faisant ca tu les "exclu" de ton site...

Je te conseil de faire un peu de php, rien de bien méchant et pourtant ca correspond exactement a ce que tu veux faire (du moins ce que j'ai compris )


il te suffit d'avoir des url de ce type la par exemple:
www.monsite.fr/index.php?lien=1


Et ensuite dans le bloc ou tu veux inserer tes liens (ou bien la cellule si tu gardes l'option tableau...) tu aura quelque chose comme ca :

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
 
<?php
 
if ($_GET['lien']=='1') {
include ('lien1.htm');
}
else if ($_GET['lien']=='2') {
include ('lien2.htm');
}
|
|
|
etc.
 
 
?>

[mariogarcia]

j'ai voulu faire du ajax... il parait que c'est très bien...
oui j'ai maintenant compris grace au site que j'ai mis auparavant que c'est possible,
je n'utilise plus les tableaux si tu vois bien dans mon code il n'y a plus il n'y a que des blocs <div>
et j'ai reussi a faire une partie de ce que tu propose, le probleme que vient maintenat et comment faire pour qu'une page ne depase pas les dimensions du <div> et qu'a la place il aie des ascenceurs?
merci beaucoup, ton aide est le bienvenue en ce moment surtout.

[Swoög]

pour ce qui est des acenseurs dans le div, c'est du CSS : fixe la taille du div (avec height et width) puis ajoute la propriété "overflow : auto"

pour ce qui est du div, pour l'identifier utilise plutôt une id (comme ça, getElementById et hop on en parle plus )

@<romain/> : la solution que j'ai proposé plus haut permet justement d'utiliser AJAX et JS pour les utilisateurs chez qui c'est compatible, et recharger entièrement la page pour les autres (ce qui a en plus pour effet d'être aprécié par les moteurs de référencement, etc... )

[<romain/>]

@mariogarcia :oups oui dsl j'avais pas vu (pas trop réveillé surement)
Pour les ascenceur normalemment c'est automatique...dès que le site est plus grand que la page. Enfin je suis pas sur de bien comprendre...

@Swoög=> je savais pas qu'on pouvait faire ca... je me coucherait moins con ce soir lol

[Swoög]

lol, en développement web, tout ce qui est réellement pratique est possible ou presque (sauf faille de sécu ) parfois directement parfois par des moyens détournés

pour ce qui est des scroll, je pense qu'il voulait dire "uniquement sur un div" (comme si c'était une iframe quoi ) [dans ce cas : taille fixe + overflow ^^]

[mariogarcia]

j'ai change les class par Id et mis dans la feuille de style #id au lieu de .id
car j'ai vu beaucoup d'exemples qui c'était comme cela
mais je n'arrive toujours pas a faire ce que tu as propose dans ton premier(swoög) post. et je peux pas etre blâme de ne pas avoir essayé.
j'ai trouve overflow auto.. cela fonctione.. merci de ce cote là..

[Swoög]

il faut que tu indiques l'id du div là :

Code :

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

document.getElementById('').innerHTML=xhr.responseText;

ensuite, que n'arrives-tu pas à faire ?

[mariogarcia]

j'ai mis l'id la dans mon code;.
j'ai une page qui s'appelle "menu navigation tab.htm' j'aimerai qu'elle apparaise dans le div class navbar; cela j'ai fait avec require 'menu navigationtab.htm';
je veux que quand je clique sur un des 'buttons de ce menu navigationtab la page qui se trouve dans le div id menu1 change vers une autre page par exemple menu1.htm;-->menu2.htm.. etc
et que ces pages menu1.htm..etc sont evidement des menus, j'aimerai que quand je clique sur des buttons de menus il y ai des autres pages externes qui se chargent dans le dvd Id main..
voilà c'est en gros ce que je dois faire

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
 
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link title="test" type="text/css" rel="stylesheet" href="navstyle.css">
<title>colombia la bella</title>
<script type="text/javascript">
    <script type='text/JavaScript'>
var xhr = null; 
function getXhr()
{
     if(window.XMLHttpRequest)xhr = new XMLHttpRequest(); 
else if(window.ActiveXObject)
  { 
  try{
     xhr = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) 
     {
     xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }
  }
else 
  {
  alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
  xhr = false; 
  } 
}
 
function ShowPage(page)
{
getXhr()
xhr.onreadystatechange = function()
    {
     if(xhr.readyState == 4 && xhr.status == 200)
     {
     document.getElementById('main').innerHTML=xhr.responseText;
     }
    }
xhr.open("GET","ajax.php?page="+page,true);
xhr.send(null);
}
 
</script>
<style type="text/css">
    .window {
        height: 768px;
        width: 1024px;
        background-color:#FFFFFF;
    }
    .maincontainer{
        padding-top: 39px;
        padding-left: 39px;
        padding-right:39px;
        padding-bottom: 39px;
    }
    .mainwindow {
     height: 690px;
     width:  946px;
     background-color:#CCCCCC;
    }
    .header{
    padding-left: 0px;
    height:90px;
    width: 946px;
    background-color:#00148E;
    }
    .bannercolombia{
        float:right;
        }
     .logosite{ 
         float:left;
        }
    #menu1{
        height: 576px;
        width: 180px;
        background-image:url(images/bgmenu.gif);
        background-color: #DA0010;
        float:left;
        }
     #main{
        height: 576px;
        width: 766px;
        background-color:#FFFFFF;
        float:left;
        overflow:auto;
        }
        .navbar{
          height: 39px;
          width: 766px;
          background-color:#FFFFFF;
          padding-bottom: 0px;
          float:left;
          }
         .menu {
list-style-type: none;
margin: 0;
padding: 0;
}
 
.menu a {
  display: block;
  width: 9em;
    height: 1.5em;
    font-family: verdana,helvetica,arial,sans-serif;
  font-size: 70%;
  font-weight: bold;
    background-color: #ffe800;
    text-align: center;
    color: #000;
  text-decoration: none;
    margin: 20px 0;
}
.menu a:link, .menu a:visited {
  border-top: 1px solid #cecece;
  border-bottom: 2px solid #4a4a4a;
  border-left: 1px solid #cecece;
  border-right: 2px solid #4a4a4a;
}
.menu a:hover {
  border-bottom: 1px solid #cecece;
  border-top: 2px solid #4a4a4a;
  border-right: 1px solid #cecece;
  border-left: 2px solid #4a4a4a;
}
 
 
a.test {text-decoration: none;
color: #222;
}
a.test:hover{text-decoration: underline;
}
-->
</style>
 
</head>
 
<body bgcolor="#FFFFFF" onLoad="ShowPage(1)">
<div class="window"> 
    <div class="maincontainer">
        <div class="mainwindow">
            <div class="header">
             <img class="bannercolombia" src="" alt="bannercolombia" />
             <img class="logosite" src="" alt="logosite" />
            </div>
            <div id="menu1">
            </div>
            <div id="main">
 
            </div>
        mario garcia 2006
      </div>
</div>
</body>
</html

[Swoög]

et ton problème est ? tu n'appelles jamais ta fonction AJAX...

exemple :

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
function ShowPage(page)
{
getXhr();
if(!xhr) return false;
xhr.onreadystatechange = function()
    {
     if(xhr.readyState == 4 && xhr.status == 200)
     {
     document.getElementById('main').innerHTML=xhr.responseText;
     }
    }
xhr.open("GET","ajax.php?page="+page,true);
xhr.send(null);
return true;
}

Code :

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

1
2
3
4
                    <li><a href="index.php?page=bienvenus" onclick="return !ShowPage('bienvenus');">Bienvenus</a></li>
                    <li><a href="index.php?page=generalinfo" onclick="return !ShowPage('generalinfo');">generalités</a></li>
                    <li><a href="index.php?page=diversite" onclick="return !ShowPage('diversite');">diversité</a></li>
                    <li><a href="index.php?page=changement" onclick="return !ShowPage('changement');">changement</a></li></ul></center>

[mariogarcia]

ce code je dois le mettre ou?
dans index.php? dans menu.html? ou dans la page que je veux que cela soit charge? ou la ou se trouvent les buttons..
merci, mille et une fois.

[Swoög]

tu dois reconnaitre en partie ton code existant, il suffit de le remplace par la version modifiée

[mariogarcia]

je reconnais ce code... mais comment je l'ai deja dit, j'ai ces menu dans des pages externes..
il y a une page principale avec body, header et les divs, puis il y a une page menunavigationbar et une autre menu.. pour que cela fonctionne je dois copier tous ce qui il y a dans les pages externes dans la page index.php.. il faut dans ce cas faire des boucles selon..
car si je mets ce que tu m'as donné dans la page externe menu.html et en guise de text fait un require dans la page index.php l'id main reste vide et vierge
m'ai je fait comprendre?
merci.

[Swoög]

tu as une erreur JS qui s'affiche ?

essaie de mettre (pour voir si c'est le serveur qui retourne une erreur ) :

Code :

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

1
2
3
4
5
    if(xhr.readyState == 4 && xhr.status == 200)
     {
     alert(xhr.responseText);
     document.getElementById('main').innerHTML=xhr.responseText;
     } else { alert(xhr.readyState); alert(xhr.status); }