11548 sujets

JavaScript, DOM et API Web HTML5

Pages :
Bonjour,
Je suis en stage et je dois faire un site web sous dreamweaver!On me demande notamment de faire un menu déroulant(j'ai réussi a faire),seulement on ma demandé que quand on clique sur un élément du menu déroulant, la page en question qui doit safficher, s'affiche dans un calque sur la meme page que le menu déroulant!Enfet je dois utiliser un calque au lieu des frames!
Le probleme c'est que je suis bloqué à cause de cela!
A laide svp
Merci d'avance
a bientot
Modifié par grefer2luxe (29 May 2007 - 14:49)
Modérateur
Hello, bienvenue Smiley cligne

grefer2luxe a écrit :
Je suis en stage et je dois faire un site web sous dreamweaver!
comme d'hab' ! Smiley decu A quand des cours sur autre chose qu'un wisiwyg ? Les wisiwyg ne servent qu'aux personnes d'un niveau confirmé.

a écrit :
On me demande notamment de faire un menu déroulant(j'ai réussi a faire)
Pas comme il faut... mais c'est parce que ceux qui te le demandent n'ont pas compris que c'est un sujet bien plus complexe qu'il n'en a l'air. 9 chances sur 10 que tu brides l'utilisateur avec cela (navigation clavier non prévue, désactivation des couleurs non prévue, comportement sans js non prévu, etc... etc...). Bref...

Pour répondre à ton besoin, tu dois dans un premier temps faire un lien normal. Lorsque tu cliques dessus, tu accèdes à la page. De là, en js, tu dois annihiler l'action normale du lien et, à la place, créer un conteneur (via DOM par exemple) ou remplacer le contenu d'un conteneur existant.
Dans ce contenu, il faut bien générer une iframe... essentiellement pour conserver la charte graphique de la page à laquelle tu souhaites accéder. Dans cette iframe, tu récupères l'url du lien et tu la balances...

A prévoir :

- Si l'iframe est déjà existante, il ne faut pas la recréer mais uniquement mettre l'url à jour.
- Les boutons précédent / suivant ne vont plus fonctionner. Il serait bon de les rétablir.
- Le bookmark aussi va sauter. Là encore, ce serait à prévoir.

Conclusion : Si on ne t'a pas dit quelles étaient les contraintes, on te fait faire n'importe quoi... Smiley ohwell

PS : Que veux dire Izigytla ? Ce n'est pas très explicite comme titre de sujet ; il serait bon de mettre quelquechose qui sied aux recherches. Smiley cligne
Modifié par koala64 (29 May 2007 - 14:03)
Non on ne ma rien de spécial au début
Enfet j'ai créé d'abord un tableau av 7 colonne car je dois faire 7 menu déroulant.Ensuite, j'ai créé les menus déroulants av des menus contextuels.Jusqu'à là tout marche à merveille.J'ai également mis les liens derrières les choix de la liste déroulante et ils marchent bien aussi mais ils apparaissent sur une autre feuile or moi je voudrais qu'il apparaissent sur la mm feuille mais dans un calque.Il n'y a pas grand chose à faire si?
Merci d'avance

PS:Izigutla ne veut pas dire grand à vrai dire... Smiley smile
Modérateur
grefer2luxe a écrit :
Enfet j'ai créé d'abord un tableau av 7 colonne car je dois faire 7 menu déroulant.
Un tableau ?! pourquoi un tableau ? Il y a de fortes chances pour qu'une liste non ordonnée soit plus adaptée.

a écrit :
Jusqu'à là tout marche à merveille.
arf... oui et non, c'est ce que je te dis ci-dessus. Ca marche pour toi, avec tes propres habitudes de navigation et tes besoins mais c'est loin d'être une généralité. Maintenant, si c'est ce qu'on te demande, je conçois que tu ne vas pas tout reprendre -> mais il y aura (quasi) forcémment à redire...

a écrit :
J'ai également mis les liens derrières les choix de la liste déroulante et ils marchent bien aussi mais ils apparaissent sur une autre feuile or moi je voudrais qu'il apparaissent sur la mm feuille mais dans un calque.
Pas compris. Smiley confus c'est à dire ? As-tu un exemple en ligne ou le code source ? Ce que je t'ai dit ci-dessus ne convient pas ?

a écrit :
PS:Izigutla ne veut pas dire grand à vrai dire... Smiley smile
Oui, c'est pour ça que je t'invite à changer de titre de sujet. (bouton d'édition en haut à droite de ton premier post Smiley cligne ) Ainsi, si quelqu'un a le même problème, il est susceptible de le trouver plus facilement via la recherche. Smiley smile
Modifié par koala64 (29 May 2007 - 14:45)
J'ai choisi un tableau car cela ma été imposé.C'est un tableau horizontale situé tte en haut de la page au milieu.

Cepandant, voici le contenu de ma 1ere liste déroulante:
function mmLoadMenus() {
if (window.mm_menu_0525114904_0) return;
window.mm_menu_0525114904_0 = new Menu("root",53,18,"Times New Roman, Times, serif",12,"#FFFFFF","#FFFFFF","#003399","#00FF00","left","middle",3,0,2000,-5,7,true,true,true,0,true,true);
mm_menu_0525114904_0.addMenuItem("test","location=.../reglement.pdf'");
mm_menu_0525114904_0.addMenuItem("test2");
mm_menu_0525114904_0.fontWeight="bold";
mm_menu_0525114904_0.hideOnMouseOut=true;
mm_menu_0525114904_0.bgColor='#FF6699';
mm_menu_0525114904_0.menuBorder=2;
mm_menu_0525114904_0.menuLiteBgColor='#00CC99';
mm_menu_0525114904_0.menuBorderBgColor='#003399';

Dc tu peux voir là le lien du 1er sous-menu de la liste déroulante que je t'ai mis en rouge.Dans cette liste déroulante, j'ai mis que 2 sous-menu(test et test2).Dc je continue, je voudrais dc que quand je click sur "test","location=.../reglement.pdf'" le résultat de se lien arrive dans un calque sur la meme page en dessous, pas dans une autre page!Tu vois ce que je veux dire??

Modifié par grefer2luxe (29 May 2007 - 15:01)
oula, aprés le titre ca ...
faut mettre ton code entre les balise [ code ] [/ code ] sans les espaces
pour repondre a ta question il semblerait que tu voudrait faire de l'ajax ! ou peut etre utilisé des iframes perso je ne connait pas ces derniers
par contre si tu compre faire a en ajax ca va te prendre plus de tems que prevu
Smiley ohwell
Modérateur
hem... Menu n'est pas une fonction js... donc je ne sais pas ce que ça représente. (idem pour addMenuItem)

Le seul truc que je vois, c'est qu'un tableau n'est pas adapté et que les styles définis ne devraient pas se trouver dans ce code mais dans le css.

a écrit :
Tu vois ce que je veux dire??
Oui, parfaitement... mais visiblement j'ai parlé chinois parce que je t'ai donné la méthodologie à adopter.

Essaie ceci en créant une page test.htm :
<!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" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />

		<title>Exemple</title>

		<script type="text/javascript"><!--

(function() {

var oO =
{
	init: function()
	{
		oO.oDiv = document.getElementById('conteneur');
		var oA = oO.oDiv.getElementsByTagName('a')[0];

		oA.onclick = oO.createIframe;
	},

	createIframe: function()
	{
		var oP = oO.oDiv.getElementsByTagName('p')[0],
		    oIframe = document.createElement('iframe');

		oIframe.src= this.href;
		oIframe.width = '600';
		oIframe.height = '600';

		oO.oDiv.replaceChild(oIframe, oP);

		return false;
	}
};

window.onload = oO.init;

})();

		//--></script>
	</head>
	<body>

<div id="conteneur">
	<p>salut ! par <a href="test1.htm">ici</a> !</p>
</div>

	</body>
</html>
Pas besoin d'Ajax, hakkou. Smiley cligne
Modifié par koala64 (29 May 2007 - 23:03)
Ok merci mais j'ai rien besoin de créer??ni de tableau??ni de menu??ni de frame??Jveu dire j'ai que le code a mettre c sa??
En tt cas merci bcp de m'aider
Modérateur
Le code ci-dessus te montre comment remplacer le contenu d'un conteneur (la div ici) par une iframe. Il faudrait certainement procéder à quelques modifs pour l'adapter à ton code, chose que je te laisse faire... (mais tu peux demander de l'aide tant que tu retrousses les manches)

Ici, je sélectionne le lien avec getElementsByTagName et je lui dis de créer une iframe qui a comme source le href du lien (lors du clic sur ce même lien).

Avec return false, j'empêche que le navigateur ne suive l'url, ce qui provoquerait le changement de page.
Merci mais le lien ouvre une autre page malheuresement!Autrement sa marche bien Smiley smile
Il me reste pus qu'à trouver comment faire pr que sa ne change pas de page??à moin que tu t'es p-ê trompé??
En tt cas merci Smiley cligne
Modérateur
Je l'ai fait en local avant de poster donc ça marche... Smiley smile Ca t'ouvre une autre page dans la page courante (au sein de l'iframe)

PS : Il suffit juste de masquer le fait que c'est une iframe.
Modifié par koala64 (29 May 2007 - 16:02)
Administrateur
grefer2luxe a écrit :
J'ai choisi un tableau car cela ma été imposé.

C'est à ce genre de choses qu'on se rend compte qu'il y'a encore du chemin à parcourir pour la formation des formateurs Smiley sweatdrop
Voici mon code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<script language="JavaScript">
<!--
function mmLoadMenus() {
  if (window.mm_menu_0525114904_0) return;
      window.mm_menu_0525114904_0 = new Menu("root",53,18,"Times New Roman, Times, serif",12,"#FFFFFF","#FFFFFF","#003399","#00FF00","left","middle",3,0,2000,-5,7,true,true,true,0,true,true);
  mm_menu_0525114904_0.addMenuItem("test","location='E:/action sociale/base documentaire/reglement_AS_01_A_12_2007.pdf'");
  mm_menu_0525114904_0.addMenuItem("test2");
   mm_menu_0525114904_0.fontWeight="bold";
   mm_menu_0525114904_0.hideOnMouseOut=true;
   mm_menu_0525114904_0.bgColor='#FF6699';
   mm_menu_0525114904_0.menuBorder=2;
   mm_menu_0525114904_0.menuLiteBgColor='#00CC99';
   mm_menu_0525114904_0.menuBorderBgColor='#003399';
   
  window.mm_menu_0523113758_0 = new Menu("root",58,18,"Times New Roman, Times, serif",12,"#FFFFFF","#FFFFFF","#003399","#00FF00","left","middle",3,0,2000,-5,7,true,true,true,0,true,true);
  mm_menu_0523113758_0.addMenuItem("Test1");
  mm_menu_0523113758_0.addMenuItem("Test2");
  mm_menu_0523113758_0.addMenuItem("Test3");
   mm_menu_0523113758_0.fontWeight="bold";
   mm_menu_0523113758_0.hideOnMouseOut=true;
   mm_menu_0523113758_0.bgColor='#FF6699';
   mm_menu_0523113758_0.menuBorder=2;
   mm_menu_0523113758_0.menuLiteBgColor='#00CC99';
   mm_menu_0523113758_0.menuBorderBgColor='#003399';

    window.mm_menu_0525142449_0_1 = new Menu("Test1",67,18,"Times New Roman, Times, serif",12,"#FFFFFF","#FFFFFF","#003399","#00FF00","left","middle",3,0,2000,-5,7,true,true,true,0,true,true);
    mm_menu_0525142449_0_1.addMenuItem("STest1");
    mm_menu_0525142449_0_1.addMenuItem("Stest2");
     mm_menu_0525142449_0_1.fontWeight="bold";
     mm_menu_0525142449_0_1.hideOnMouseOut=true;
     mm_menu_0525142449_0_1.bgColor='#FF6699';
     mm_menu_0525142449_0_1.menuBorder=2;
     mm_menu_0525142449_0_1.menuLiteBgColor='#00CC99';
     mm_menu_0525142449_0_1.menuBorderBgColor='#003399';
  window.mm_menu_0525142449_0 = new Menu("root",58,18,"Times New Roman, Times, serif",12,"#FFFFFF","#FFFFFF","#003399","#00FF00","left","middle",3,0,2000,-5,7,true,true,true,0,true,true);
  mm_menu_0525142449_0.addMenuItem(mm_menu_0525142449_0_1);
  mm_menu_0525142449_0.addMenuItem("Test2");
  mm_menu_0525142449_0.addMenuItem("Test3");
   mm_menu_0525142449_0.fontWeight="bold";
   mm_menu_0525142449_0.hideOnMouseOut=true;
   mm_menu_0525142449_0.childMenuIcon="arrows.gif";
   mm_menu_0525142449_0.bgColor='#FF6699';
   mm_menu_0525142449_0.menuBorder=2;
   mm_menu_0525142449_0.menuLiteBgColor='#00CC99';
   mm_menu_0525142449_0.menuBorderBgColor='#003399';

  window.mm_menu_0525143039_0 = new Menu("root",62,18,"Times New Roman, Times, serif",12,"#FFFFFF","#FFFFFF","#003399","#00FF00","left","middle",3,0,2000,-5,7,true,true,true,0,true,true);
  mm_menu_0525143039_0.addMenuItem("Test");
  mm_menu_0525143039_0.addMenuItem("Stest1");
  mm_menu_0525143039_0.addMenuItem("Stest2");
  mm_menu_0525143039_0.addMenuItem("Stest3");
  mm_menu_0525143039_0.addMenuItem("Test1");
  mm_menu_0525143039_0.addMenuItem("Stest1");
  mm_menu_0525143039_0.addMenuItem("Stest2");
  mm_menu_0525143039_0.addMenuItem("Stest3");
  mm_menu_0525143039_0.addMenuItem("Test2");
  mm_menu_0525143039_0.addMenuItem("Stest1");
  mm_menu_0525143039_0.addMenuItem("Stest2");
  mm_menu_0525143039_0.addMenuItem("Stest3");
   mm_menu_0525143039_0.fontWeight="bold";
   mm_menu_0525143039_0.hideOnMouseOut=true;
   mm_menu_0525143039_0.bgColor='#FF6699';
   mm_menu_0525143039_0.menuBorder=2;
   mm_menu_0525143039_0.menuLiteBgColor='#00CC99';
   mm_menu_0525143039_0.menuBorderBgColor='#003399';

mm_menu_0525143039_0.writeMenus();
} // mmLoadMenus()
//-->
</script>
<script language="JavaScript" src="mm_menu.js"></script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body>

<script language="JavaScript1.2">mmLoadMenus();</script>
<table width="900" border="1">
  <tr>
    <th width="174" scope="col"><a href="javascript:;" onMouseOver="MM_showMenu(window.mm_menu_0525114904_0,21,21,null,'image1')" onMouseOut="MM_startTimeout();">R&eacute;glementation<img src="images/backup.jpg" name="image1" width="24" height="24" border="0" id="image1"></a></th>
    <th width="159" scope="col"><a href="javascript:;" onMouseOver="MM_showMenu(window.mm_menu_0523113758_0,21,21,null,'image2')" onMouseOut="MM_startTimeout();">Qui-Comment<img src="images/backup.jpg" name="image2" width="24" height="24" border="0" id="image2"></a></th>
    <th width="166" scope="col"><a href="javascript:;" onMouseOver="MM_showMenu(window.mm_menu_0525142449_0,21,21,null,'image3')" onMouseOut="MM_startTimeout();">Les t&eacute;rritoires<img src="images/backup.jpg" name="image3" width="24" height="24" border="0" id="image3"></a> </th>
    <th width="101" scope="col"><a href="javascript:;" onMouseOver="MM_showMenu(window.mm_menu_0525143039_0,21,21,null,'image4')" onMouseOut="MM_startTimeout();">Pilotage<img src="images/backup.jpg" name="image4" width="24" height="24" border="0" id="image4"></a></th>
    <th width="221" scope="col">&nbsp;</th>
    <th width="14" scope="col">&nbsp;</th>
    <th width="19" scope="col">&nbsp;</th>
  </tr>
</table>
<p>&nbsp;</p>
<div id="calque" style="position:relative; width:901px; height:900px; z-index:1; overflow: visible;"></div>

</div>

</body>
</html>


J'ai placé le code dans le "head" normal(enfin je pense) mais sa reste pareil!A part que je n'ai pas mis le "div"!Es ce que cela peut venir de la?
Modifié par grefer2luxe (29 May 2007 - 16:11)
Bonjour,

Te serait-il possible d'éditer ton message et de placer le code entre les balises appropriées afin d'en faciliter la lecture ?

Merci Smiley cligne
Modérateur
Raphael a écrit :
C'est à ce genre de choses qu'on se rend compte qu'il y'a encore du chemin à parcourir pour la formation des formateurs Smiley sweatdrop
En discutant avec du monde, j'ai entendu qu'il y avait des profs qui s'amusaient à parler à Ajax à des novices au bout de 20 minutes... Imagine le carnage... C'est désolant, oui. Le plus gros problème, c'est qu'on demande à des profs "généralistes" d'enseigner des choses qu'ils ne maitrisent pas. Smiley ohwell

@ grefer2luxe : Pas le temps de poursuivre là tout de suite... sorry. Smiley cligne Je repasse en soirée... si je trouve un peu de temps.
Modifié par koala64 (29 May 2007 - 16:16)
koala64 a écrit :
En discutant avec du monde, j'ai entendu qu'il y avait des profs qui s'amusaient à parler à Ajax à des novices au bout de 20 minutes... Imagine le carnage... C'est désolant, oui. Le plus gros problème, c'est qu'on demande à des profs "généralistes" d'enseigner des choses qu'ils ne maitrisent pas. Smiley ohwell

@ grefer2luxe : Pas le temps de poursuivre là tout de suite... sorry. Smiley cligne Je repasse en soirée... si je trouve un peu de temps.

j'avais dit ajax tout a lheure parce que je ne suis pas fan des iframe ^^ enfin je ne les connais pas XD
pour revenir au prof pour mon PROF d'AJAX l'ajax ca se resume a des effets ! pour avoirr une bonne note dans le projet ajax fallait jsute lui montrer un ou deux effet aculous et c'etait dans la poche Smiley sweatdrop
Modifié par hakkou (29 May 2007 - 16:20)
Ok merci beaucoup pour ton aide qui m'est si précieuse!J'espere que tu aura le temps de repasser ce soir et de continuer a m'aider!!
Bonne soiré
Ciao
Modérateur
hem... zut ! Je vais avoir du mal à t'aider là... Smiley confus parce que le code de Dream... connais pas. C'est pas compliqué, pour moi, faut tout refaire. Smiley sweatdrop

Smiley confuse mmpff Smiley murf ah, si ! Smiley idee

Une fois que ce sera fini, tu peux demander à ton formateur de venir poster la solution ? Faut qu'on discute... J'ai besoin d'explications... Smiley pelle
Modifié par koala64 (29 May 2007 - 19:18)
Mdr oé ben je vais me debrouiller tout qeul alors c'est pas grave!
Merci quand même
Autrement tu ne connais pas quelqu'un qui connaît bien dreamweaver?
Merci d'avance

PS:Jlui diraît de passer faire un pti tour sur le forum pour te voir!mdr
Smiley cligne
Pages :