Naviger sur la meme page
salah2526
Messages postés
21
Statut
Membre
-
avion-f16 Messages postés 20368 Date d'inscription Statut Contributeur Dernière intervention -
avion-f16 Messages postés 20368 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
Sur une seul page j'ai une dizaine de liens hypertext a gauche , chaque lien sert a afficher un titre, une image et un paragraphe dons le centre de la page. lorsque le visiteur clique sur un lien je veux afficher au centre sans l'image le titre et le paragraphe correspond sans recharger la page. En plus je veut pas utiliser des frame.
Je serais tres reconnaisant pour ce qui me proposer une solution.
Merci
Sur une seul page j'ai une dizaine de liens hypertext a gauche , chaque lien sert a afficher un titre, une image et un paragraphe dons le centre de la page. lorsque le visiteur clique sur un lien je veux afficher au centre sans l'image le titre et le paragraphe correspond sans recharger la page. En plus je veut pas utiliser des frame.
Je serais tres reconnaisant pour ce qui me proposer une solution.
Merci
A voir également:
- Naviger sur la meme page
- Comment supprimer une page sur word - Guide
- Imprimer tableau excel sur une page - Guide
- Page d'accueil - Guide
- Page accueil iphone - Guide
- Comment recentrer la page google ✓ - Forum Windows
9 réponses
Salut
En Php, tu peux utiliser des includes sur toutes tes pages. Tu crées une page HTML avec ton menu gauche et sur tes autres pages, tu insères à l'aide d'un include la page de ton menu de gauche.
Chaque page que tu appeleras intégrera de fait le menu gauche ce qui donnera l'impression de rester toujours sur la même page.
Si tu veux rester en html uniquement, tu peux utiliser javascript pour changer le contenu de ta zone centrale à l'aide du modele Document Object Model (DOM). Mais le contenu de ce que tu veux afficher doit figurer dans tes scripts.
Cdlt
IC
En Php, tu peux utiliser des includes sur toutes tes pages. Tu crées une page HTML avec ton menu gauche et sur tes autres pages, tu insères à l'aide d'un include la page de ton menu de gauche.
Chaque page que tu appeleras intégrera de fait le menu gauche ce qui donnera l'impression de rester toujours sur la même page.
Si tu veux rester en html uniquement, tu peux utiliser javascript pour changer le contenu de ta zone centrale à l'aide du modele Document Object Model (DOM). Mais le contenu de ce que tu veux afficher doit figurer dans tes scripts.
Cdlt
IC
Bonjours,
Merci pour votre repense, je croix que la solution du javascript sera plus facil pour un debutant comme moi, mais comment faire pour qu'au chargement de la page, afficher le conenus du premier lien et cacher les autres titres images et paragraphes des autres liens. la page ne sera elle pas tros chargée?
Merci pour votre repense, je croix que la solution du javascript sera plus facil pour un debutant comme moi, mais comment faire pour qu'au chargement de la page, afficher le conenus du premier lien et cacher les autres titres images et paragraphes des autres liens. la page ne sera elle pas tros chargée?
Avec PHP, il faudra forcément un rechargement de la page.
Ce que tu veux faire est faisable avec du Javascript. Comme incaout le dis, tu devras utiliser l'objet DOM pour changer le contenu de ton div "contenu". Tu peux aussi construire ton site normalement puis utiliser de l'AJAX : quand on clique sur un lien, une requête est envoyé pour récupérer le HTML de la page cible et ensuite, tu récupères seulement le contenu avec une regex et pour terminer, tu utilises DOM pour mettre le nouveau contenu à la place de l'autre. Tu peux utiliser des bibliothèques comme JQuery (ou Script.aculo.us, Prototype, Mootools, ...) pour avoir plus facile et aussi pour faire des effets de fondu.
Ce que tu veux faire est faisable avec du Javascript. Comme incaout le dis, tu devras utiliser l'objet DOM pour changer le contenu de ton div "contenu". Tu peux aussi construire ton site normalement puis utiliser de l'AJAX : quand on clique sur un lien, une requête est envoyé pour récupérer le HTML de la page cible et ensuite, tu récupères seulement le contenu avec une regex et pour terminer, tu utilises DOM pour mettre le nouveau contenu à la place de l'autre. Tu peux utiliser des bibliothèques comme JQuery (ou Script.aculo.us, Prototype, Mootools, ...) pour avoir plus facile et aussi pour faire des effets de fondu.
Salut
Je ne suis pas sur que ce sera plus facile en javacript. Une solution peut consister à construire ta page HTML sous la forme de DIV que tu pourras masquer ou afficher à volonté. L'intérêt de cette méthode est que les fonctions javascript à coder sont plutot simples : masquer tous les DIV et n'afficher que celui demandé. De plus, ce sera plus facile pour toi d'écrire le contenu de tes DIV directement en HTLM, plutot que de tout écrire dans des fonctions javascript.
Le principe :
1 menu gauche avec des titres d'articles ou de pages. Un événement onclick sur chaque titre qui lance une fonction javascript d'affichage et lui passe en paramètre l'id de la div à afficher
<div id="menu">
<span onclick="Affiche('article1');">Article 1</span>
<span onclick="Affiche('article2');">Article 2</span>
</div>
Dans la partie centrale, autant de <DIV> que d'articles à afficher. Chaque <DIV> recoit un id.
Le Div central permet d'isoler les div à afficher ou à masquer des autres Div de la page.
<div id="central">
<div id="article1" class="zone">
<p>Titre</p>
<p>contenu</p>
</div>
<div id="article2" class="zone">
<p>Titre</p>
<p>contenu</p>
</div>
</div>
Il te faut aussi une feuille de style qui définit pour le style commun pour chaque div ses propriétés d'affichage
Toutes tes Div ont le même style. L'article qui doit être affiché par défaut a sa propriété display à block
<head>
<style type="text/css">
.zone {display : none; position :absolute; top:80px; left:120px; width:450px; height:300px;}
#article1{display:block;}
</style>
</head>
Enfin une fonction javascript qui masque tous les articles (propriété display à none) et affiche l'article demandé (propriété display à block).
function affiche(id)
{
if(document.getElementById(id))
{
eltAffiche = document.getElementById(id);
//masque toutes les zones
var cadre = document.getElementById("central");
//recupère dans un tableau tous les div présent dans le div central
var zones = cadre.getElementsByTagName("div");
//parcours le tableau et masque toutes les zones
for(c=0;c<zones.length;c++)
{
zones[c].style.display = "none";
}
//affiche la zone demandée
eltAffiche.style.display = "block";
}
}
Voilà, je te laisse assembler tout cela, tester et compléter. Il se peut qu'il y ait des bugs, je n'ai pas testé. Si tu as des questions, n'hésites pas.
Bon courage.
IC
Je ne suis pas sur que ce sera plus facile en javacript. Une solution peut consister à construire ta page HTML sous la forme de DIV que tu pourras masquer ou afficher à volonté. L'intérêt de cette méthode est que les fonctions javascript à coder sont plutot simples : masquer tous les DIV et n'afficher que celui demandé. De plus, ce sera plus facile pour toi d'écrire le contenu de tes DIV directement en HTLM, plutot que de tout écrire dans des fonctions javascript.
Le principe :
1 menu gauche avec des titres d'articles ou de pages. Un événement onclick sur chaque titre qui lance une fonction javascript d'affichage et lui passe en paramètre l'id de la div à afficher
<div id="menu">
<span onclick="Affiche('article1');">Article 1</span>
<span onclick="Affiche('article2');">Article 2</span>
</div>
Dans la partie centrale, autant de <DIV> que d'articles à afficher. Chaque <DIV> recoit un id.
Le Div central permet d'isoler les div à afficher ou à masquer des autres Div de la page.
<div id="central">
<div id="article1" class="zone">
<p>Titre</p>
<p>contenu</p>
</div>
<div id="article2" class="zone">
<p>Titre</p>
<p>contenu</p>
</div>
</div>
Il te faut aussi une feuille de style qui définit pour le style commun pour chaque div ses propriétés d'affichage
Toutes tes Div ont le même style. L'article qui doit être affiché par défaut a sa propriété display à block
<head>
<style type="text/css">
.zone {display : none; position :absolute; top:80px; left:120px; width:450px; height:300px;}
#article1{display:block;}
</style>
</head>
Enfin une fonction javascript qui masque tous les articles (propriété display à none) et affiche l'article demandé (propriété display à block).
function affiche(id)
{
if(document.getElementById(id))
{
eltAffiche = document.getElementById(id);
//masque toutes les zones
var cadre = document.getElementById("central");
//recupère dans un tableau tous les div présent dans le div central
var zones = cadre.getElementsByTagName("div");
//parcours le tableau et masque toutes les zones
for(c=0;c<zones.length;c++)
{
zones[c].style.display = "none";
}
//affiche la zone demandée
eltAffiche.style.display = "block";
}
}
Voilà, je te laisse assembler tout cela, tester et compléter. Il se peut qu'il y ait des bugs, je n'ai pas testé. Si tu as des questions, n'hésites pas.
Bon courage.
IC
Oui, et ceux qui n'ont pas le Javascript d'activer ne peuvent pas naviguer ...
Ce n'est pas pour rien que j'ai dis “Tu peux aussi construire ton site normalement puis utiliser de l'AJAX”. Avec ma technique, même si le visiteur n'a pas JS d'activé, il pourra naviguer normalement.
Avec ta technique, il y a de grande chance que du contenu soit chargé pour rien si le visiteur ne visite que quelques pages (même si le contenu n'est pas visible, le navigateur charger les images etc...).
Ce n'est pas pour rien que j'ai dis “Tu peux aussi construire ton site normalement puis utiliser de l'AJAX”. Avec ma technique, même si le visiteur n'a pas JS d'activé, il pourra naviguer normalement.
Avec ta technique, il y a de grande chance que du contenu soit chargé pour rien si le visiteur ne visite que quelques pages (même si le contenu n'est pas visible, le navigateur charger les images etc...).
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Oui, c exact, mais utiliser ajax, suppose d'avoir derrière un langage de script cote serveur du genre PHP ou équivalent. C'est pour cela que le système des include me semblait le mieux adapté.
Sinon, il faut gérer un affichage pour les navigateurs n'ayant pas javacript activé.
Sinon, il faut gérer un affichage pour les navigateurs n'ayant pas javacript activé.
Euh, j'ai l'impression que tu te contredis, faut savoir quoi quand même :
Oui, c'exacte, mais utiliser ajax, suppose d'avoir derrière un langage de script cote serveur du genre PHP ou équivalent. C'est pour cela que le système des include me semblait le mieux adapté.??
Je me contredis en quoi ?
J'ai toujours vu Ajax envoyer une requête à un script serveur et récupérer le traitement fait par celui ci sous la forme de données texte ou XML. Peut être existe t'il une fonction qui permette de récupérer directement le contenu d'un lien html avec Ajax, mais je ne la connais pas.
Si ca existe, par curiosité, ca m'intéresse.
J'ai toujours vu Ajax envoyer une requête à un script serveur et récupérer le traitement fait par celui ci sous la forme de données texte ou XML. Peut être existe t'il une fonction qui permette de récupérer directement le contenu d'un lien html avec Ajax, mais je ne la connais pas.
Si ca existe, par curiosité, ca m'intéresse.
Toi, tu dis “utiliser ajax, suppose d'avoir derrière un langage de script cote serveur” mais utiliser des includes ne suppose pas non plus d'utiliser du PHP ?
De toutes façon, ma technique ne nécessite pas forcément d'utiliser du PHP sur le serveur : avec AJAX, tu peux très bien charger une simple page HTML.
De toutes façon, ma technique ne nécessite pas forcément d'utiliser du PHP sur le serveur : avec AJAX, tu peux très bien charger une simple page HTML.
Si, on est d'accord, les includes supposent du PHP. C'est d'ailleurs ce que j'avais dit dans ma première réponse. Mais il préfère ne pas utiliser de PHP. C pour cette raison que pour moi ajax ne pouvait pas non plus être retenu s'il utilisait du PHP aussi.
Par contre, si tu as des infos ou des docs sur l'utilisation d'Ajax pour charger une page HTML, cela m'interesse.
Par contre, si tu as des infos ou des docs sur l'utilisation d'Ajax pour charger une page HTML, cela m'interesse.
Pour charger une page HTML, c'est la même technique qu'une page PHP.
Il ne faut pas hésiter à s'imaginer des schémas pour visualiser le fonctionnement d'une technologie (encore faut-il le savoir). En gros, AJAX permet de récupérer la source d'une page ou même de n'importe quel type de fichier comme le ferai le navigateur en tapant l'url du fichier. Si tu es connecté sur un site et que tu lances une requête AJAX vers un fichier PHP, ce fichier réagira de la même façon que si tu tapais son URL dans la barre d'adresse. Quand on sait ça, c'est logique que l'on puisse faire des requêtes AJAX vers du HTML : le navigateur ignorent que c'est du PHP, il récupère juste ce que lui renvoye le serveur Web.
Il ne faut pas hésiter à s'imaginer des schémas pour visualiser le fonctionnement d'une technologie (encore faut-il le savoir). En gros, AJAX permet de récupérer la source d'une page ou même de n'importe quel type de fichier comme le ferai le navigateur en tapant l'url du fichier. Si tu es connecté sur un site et que tu lances une requête AJAX vers un fichier PHP, ce fichier réagira de la même façon que si tu tapais son URL dans la barre d'adresse. Quand on sait ça, c'est logique que l'on puisse faire des requêtes AJAX vers du HTML : le navigateur ignorent que c'est du PHP, il récupère juste ce que lui renvoye le serveur Web.
