pseudo frame

par AB » 01 févr. 2007, 18:46

Bonjour,

Merci de ta réponse, ça fait plaisir

Au passage si tu pouvais cliquer sur "résolu" en bas de page, ça permettrait aux visiteurs de savoir que ton sujet contient une solution qui fonctionne.

par **t671** » 01 févr. 2007, 18:22

Merci beaucoup AB !!!!! J'avoue que sans toi je n'y serais pas arrivé à ce résultat car je ne métrise pas assez le PHP.

Me reste plus qu'à faire l'habillage ........

Merci encore à toi .......... =D>

par AB » 01 févr. 2007, 03:31

La meilleure solution

<?php  
$page = isset($_GET['page'])? $_GET['page'] : 'accueil';

function insert($page) {
switch($page) 
	{ 
	case 'accueil': $inclure = 'accueil.html' ;break; 
	case 'presentation': $inclure = 'presentation.html' ;break; 
	case 'liens': $inclure = 'liens.html' ;break; 
	default : $inclure = 'accueil.html' ;
	}
	include("$inclure");  
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<style type="text/css">
form, select, input {
margin:0;
padding:0;
}
#menuselect p {
display:inline;
}
#menuselect select, #menuselect input {
background-color:#66CCFF;
font-family: Comic Sans MS;
font-size:0.9em;
font-weight:bold;
}
</style>
</head>
<body>
<div class="menu"> 
<form id="menuselect" action="<?php echo $_SERVER['PHP_SELF']?>" method="get">
<p>
 <select  name="page" onchange="document.forms['menuselect'].submit()">
   <option value="accueil" <?php if($page == 'accueil') echo 'selected="selected"'; ?>>Accueil</option> 
   <option value="presentation" <?php if($page == 'presentation') echo 'selected="selected"'; ?>>Présentation</option>
   <option value="liens" <?php if($page == 'liens') echo 'selected="selected"'; ?>>A voir également (liens)</option>
  </select>
</p>
<noscript><p><input type="submit" name="ok" value="ok" /></p></noscript>
</form> 
</div>
<div class="hublot"><?php insert($page); ?></div>
</body>
</html>

...avant j'améliorais ton code avec ta fonction javascript jump. Après avoir posté, je me suis souvenu que j'avais déjà fait bien mieux pour le même type de problème.
L'avantage de ce dernier script (outre qu'il est encore mieux optimisé et valide xhtml 1.1) est qu'il est compatible avec javascript désactivé. Dans ce cas un bouton ok s'affiche pour confirmer le choix

Le script a été testé ici http://www.abciweb.net/test5.php avec et sans javascript activé.

par AB » 01 févr. 2007, 02:01

Re bonjour,

Y'avait plus de fautes que je n'avais vu au début dans ton code php...

Ton code corrigé et testé chez moi ok (le menu reste sur la valeur sélectionnée)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<script type="text/javascript">
<!--
function jump(targ,selObj,restore){ 
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
//-->
</script>
</head>
<body>
<div class="menu"> 
<form>
 <select name="menu" style="background-color:#66CCFF ; font-family: Comic Sans MS" onchange="jump('parent',this,0)">
   <option value="index.php?page=accueil" <?php if(isset($_GET['page']) && $_GET['page'] == 'accueil') echo 'selected="selected"'; ?> >Accueil</option> 
   <option value="index.php?page=presentation" <?php if(isset($_GET['page']) && $_GET['page'] == 'presentation') echo 'selected="selected"'; ?> >Présentation</option>
   <option value="index.php?page=liens" <?php if(isset($_GET['page']) && $_GET['page'] == 'liens') echo 'selected="selected"'; ?> >A voir également (liens)</option>
  </select>
</select>
</form> 
</div>

<div class="hublot"> 
<?php  
$page = isset($_GET['page'])? $_GET['page'] : 'accueil';  
switch($page) 
{ 
case 'accueil': include ('accueil.html');break; 
case 'presentation': include ('presentation.html');break; 
case 'liens': include ('liens.html');break; 
}  
?> 
</div>
</body>
</html>

le même code optimisé

<?php  
$page = isset($_GET['page'])? $_GET['page'] : 'accueil';

function insert($page) {
switch($page) 
	{ 
	case 'accueil': $inclure = 'accueil.html' ;break; 
	case 'presentation': $inclure = 'presentation.html' ;break; 
	case 'liens': $inclure = 'liens.html' ;break; 
	default : $inclure = 'accueil.html' ;
	}
	include("$inclure");  
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<script type="text/javascript">
<!--
function jump(targ,selObj,restore){ 
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
//-->
</script>
</head>
<body>
<div class="menu"> 
<form>
 <select name="menu" style="background-color:#66CCFF ; font-family: Comic Sans MS" onchange="jump('parent',this,0)">
   <option value="index.php?page=accueil" <?php if($page == 'accueil') echo 'selected="selected"'; ?>>Accueil</option> 
   <option value="index.php?page=presentation" <?php if($page == 'presentation') echo 'selected="selected"'; ?>>Présentation</option>
   <option value="index.php?page=liens" <?php if($page == 'liens') echo 'selected="selected"'; ?>>A voir également (liens)</option>
  </select>
</select>
</form> 
</div>

<div class="hublot"> 
<?php  insert($page); ?> 
</div>
</body>
</html>

par **t671** » 31 janv. 2007, 20:33

En faisant ce qui est écrit plus haut, et en résumant :

Code : Tout sélectionner

function jump(targ,selObj,restore){ 
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); 
  if (restore) selObj.selectedIndex=0; 
} 
.
.
.
.
<div class="menu" style="width: 247px; height: 13px">
		<form id="form1"> 
  <select name="menu" style="background-color:#66CCFF ; font-family: Comic Sans MS" onchange="jump('parent',this,0)"> 
   <option value="index.php?page=accueil">Accueil</option> 
   <option value="index.php?page=presentation">Présentation</option> 
   <option value="index.php?page=liens">A voir également (liens)</option> 
  </select> 
</form> 
</div>
.
.
.
.
<div class="hublot">
<?php 
if (!isset($_GET['page'])) $page= 'accueil'; 
Switch($page)
{
case 'accueil': include ('accueil.htm');
case 'presentation': include ('presentation.htm');break;
case 'liens': include ('liens.htm');break;
} 
?>
</div>
</body>

je suis bien sur la page d'accueil à l'ouverture. Quand je clique sur un des liens du menu, rien ne s'affiche dans la partie centrale et celle-ci reste blanche. En plus, le choix du menu reste sur "Accueil" ......

par AB » 31 janv. 2007, 16:26

Re bonjour,

il faut donc adapter ton code comme suit:

Code : Tout sélectionner

<body> 
<div class="menu"> 
<form id="form1"> 
  <select name="menu" style="background-color:#66CCFF ; font-family: Comic Sans MS" onchange="jump('parent',this,0)"> 
   <option value="index.php?page=accueil">Accueil</option> 
   <option value="index.php?page=presentation">Présentation</option> 
   <option value="index.php?page=liens">A voir également (liens)</option> 
  </select> 
</form> 
</div> 
</body>

(avec <div class="hublot"> et ton code PHP inclus où tu veux dans le body)

par **Ryle** » 31 janv. 2007, 16:19

Certains diront que je radote, mais je réitère somme toute

J'ai l'impression que tu mélanges pseudo-frame et ajax

Une pseudo-frame consiste en une seule page (au lieu de plusieurs comme c'est le cas des frames). Cette page contient l'ensemble des éléments figés et inclu une autre page de contenu (de manière transparente pour l'utilisateur). Cette page est entièrement rechargée à chaque lien suivi, on lui passe juste un paramètre supplémentaire pour lui dire quelle page de contenu ouvrir.

Par exemple, dans ma page index.php qui affiche mon entete, menu et pied de page, je vais passer le paramètre index.php?page=accueil pour lui dire d'inclure le fichier "accueil.inc.php".

Mais j'insiste, toute la page est rechargée, entete, menu et pied de page. Le nom de "pseudo-frame" vient du fait que c'est la page index.php qui contient la partie figée de la page, et que l'on peut ajouter de nouvelles pages sans s'en soucier, comme on le ferait dans une frame.

Si tu veux mettre à jour juste un block de ta page sans la recharger, il te faut utiliser javascript et éventuellement ajax

par **t671** » 31 janv. 2007, 16:03

Merci AB,

mais le lien du menu s'ouvre dans la même fenêtre, et remplace celle-ci.
Moi je voudrais que le lien s'ouvre dans le pseudo-frame !!!!

par AB » 30 janv. 2007, 18:37

Bonjour,

Pour un menu de redirection sans frame ou avec pseudo frames essaies

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<script type="text/JavaScript">
<!--
function jump(targ,selObj,restore){ 
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
//-->
</script>
</head>

<body>
<div class="menu"> 
<form id="form1">
  <select name="menu" style="background-color:#66CCFF ; font-family: Comic Sans MS" onchange="jump('parent',this,0)">
	<option value="accueil.htm">Accueil</option> 
	<option value="presentation.htm">Présentation</option> 
	<option value="liens.htm">A voir également (liens)</option> 
  </select>
</form>
</div>
</body>
</html>

note : il manque un " dans <div class=hublot"> de ton code php, correction <div class="hublot">

par **t671** » 30 janv. 2007, 17:12

euh..... comme son nom ne l'indique peut être pas, window.open ouvre la page dont l'adresse est passée en paramètre dans une nouvelle fenêtre

J'ai l'impression que tu mélanges pseudo-frame et ajax. Les pseudo frames consistent simplement en un fichier php incluant tes entêtes, menus et pieds de page commun à chaque page (donc ce qui est dans tes frames) et qui va inclure dynamiquement le contenu de la page solicitée. Il s'agit donc de recharger complètement la page et de faire appel au même menu, pas de recharger seulement une partie de la page comme c'est le cas avec les frames.

Pour cela, ce n'est pas un window.open qu'il te faut, mais un
Code : Tout sélectionner
document.location = "mon_url";
La seconde solution se fait avec Ajax, ou l'on va intérroger le serveur via javascript, pour lire le nouveau contenu et l'afficher. Dans ce cas, pas de rechargement global de la page, donc pas de perte du menu et juste un rafraichissement d'une partie spécifique de la page.

Merci pour tes explications ! Par contre, je ne sais pas trop comment magner ce "document.location" !!!???
Comme j'ai plusieurs liens, faut-il que j'écrive un "document.location" pour chaque lien ??
A quel endroit faut-il le placer ??
Que puis-je garder ou retirer de mon menu et ma maquette de script ?

par **Ryle** » 30 janv. 2007, 16:45

euh..... comme son nom ne l'indique peut être pas, window.open ouvre la page dont l'adresse est passée en paramètre dans une nouvelle fenêtre

J'ai l'impression que tu mélanges pseudo-frame et ajax. Les pseudo frames consistent simplement en un fichier php incluant tes entêtes, menus et pieds de page commun à chaque page (donc ce qui est dans tes frames) et qui va inclure dynamiquement le contenu de la page solicitée. Il s'agit donc de recharger complètement la page et de faire appel au même menu, pas de recharger seulement une partie de la page comme c'est le cas avec les frames.

Pour cela, ce n'est pas un window.open qu'il te faut, mais un

Code : Tout sélectionner

document.location = "mon_url";

La seconde solution se fait avec Ajax, ou l'on va intérroger le serveur via javascript, pour lire le nouveau contenu et l'afficher. Dans ce cas, pas de rechargement global de la page, donc pas de perte du menu et juste un rafraichissement d'une partie spécifique de la page.

par **t671** » 30 janv. 2007, 16:03

Merci pour ton aide !!!!!

Malheureusement, ça ne fonctionne pas.
J'ai modifié le "windows.open" comme tu me l'indiques, mais c'est pareil.
Le lien s'ouvre dans une autre fenêtre .........

Alors j'ai modifié les lignes du menu pour remplacer
<option value="presentation.htm">Présentation</option> par <option value="presentation.htm?page=presentation">Présentation</option> , mais ça fonctionne toujours pô ..........

par **nejme.eddinne** » 29 janv. 2007, 21:14

Code : Tout sélectionner

window.open(form.menu.options[myindex].value,
target="hublot");

le syntax

Code : Tout sélectionner

window.open(form.menu.options[myindex].value,'hublot');

par **t671** » 29 janv. 2007, 19:40

Bonjour,

Mon site qui existe actuellement avec des frame et frameset, et je voudrais le refaire en pseudo-frames.

Mais je suis resté coincé sur un problème de menu ...... !!!!!

J'ai un menu, que je veux conserver !!!!! C'est un menu déroulant !!!! Avec des frames, je peux facilement rediriger le résultat du lien dans la frame indiquée avec un "target". Mais en php, je n'y arrive pas !!!!!! Mon résultat s'ouvre toujours dans une fenêtre secondaire !!!!!! Si vous pouviez m'aider sur ce problème, ce serait sympa ...........

Voici le code de mon menu :

Code : Tout sélectionner

<script javascript>
//
function jump(form) {
var myindex=form.menu.selectedIndex
if (form.menu.options[myindex].value != "0") 
{
window.open(form.menu.options[myindex].value, 
target="hublot");
}
}
</script>

<div class="menu">
<form><select name="menu" style="background-color:#66CCFF ; font-family: Comic Sans MS" onchange="jump(this.form)">
<option value="accueil.htm">Accueil</option>
<option value="presentation.htm">Présentation</option>
<option value="liens.htm">A voir également (liens)</option>
</select></form>
</div>

Et le code de mon php :

<div class=hublot">
<?php 
if (!isset($_GET['page'])) $page= 'accueil'; 
Switch($page)
{
case 'accueil': include ('accueil.htm');break;
case 'presentation': include ('presentation.htm');break;
case 'liens': include ('liens.htm');break;
} 
?>
</div>

Merci d'avance .........

pseudo frame

Répondre

Étendre la vue Revue du sujet : pseudo frame

pseudo frame