Demande une aide pour afficher le document write en haut

C'est compliqué à expliquer dans un titre en fait ^^

2 septembre 2010 à 23:35:59

Salut à tous

Ce que je vais vous expliqué en bas parait être une chose compliqué, mais en testant le code ci-dessous c'est tout simple

Je vous explique mon problème,
j'ai deux fichiers, le fichier haut et le fichier bas.
Je vais sur le fichier haut et j'inclus le fichier bas.

Dans mon fichier HAUT il y a une div que je cache par défaut et j'affiche ou cache par la suite via un bouton situé dans le fichier BAS.
Mon problème est que le bouton du fichier BAS s'affiche en dessous de la div du fichier HAUT, ce qui fait que c'est pas ce que je veux, je voudrais que ce soit l'inverse

Malheureusement je ne peux faire l'inverse car en fait le fichier HAUT est le code de plusieurs produits (donc ce serait trop long de modifier les fichier HAUT) et le fichier BAS est une include pour ces produits (malheuresement j'ai inclus le fichier BAS à la fin des fichiers HAUT, je ne pouvais là aussi faire autrement). N'y a-t-il pas une solution pour dire qu'il faut afficher la div sous le bouton ?
Merci à ceux qui m'aideront ou essayeront

<!-- FICHIER HAUT - DEBUT -->
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<div class="div_produits_presentation"><p>BLA BLA BLA</p></div>
<!-- FICHIER HAUT - FIN -->

<!-- SEPERATION -->

<!-- FICHIER BAS - DEBUT -->
<script language="JavaScript" type="text/JavaScript">		
$(document).ready(function(){ 
	// On cache le div a afficher : 
	$(".div_produits_presentation").hide(); 
 });
 
function Toggle_Div_Produits_Presentation() {
$(document).ready(function(){ 
	// On cache le div a afficher : 
	$(".div_produits_presentation").slideToggle(); 
 });
}

function getElementsByClass(classe)
{
	 var divs = document.getElementsByTagName("div");
	 var resultats = new Array();
	 for(var i=0; i<divs.length; i++)
		  if(divs[i].className == classe)
			   resultats.push(divs[i]);
	 return resultats;
}

if(getElementsByClass('div_produits_presentation')=="[object HTMLDivElement]"){
document.write('<a onclick="Toggle_Div_Produits_Presentation()" style="font-size:12px;cursor:default;text-decoration:underline;">Afficher/Masquer la présentation de ces Produits.</a><br><br>');
}
</script>
<!-- FICHIER BAS - FIN -->

<!-- NOTE EXPLICATIVE - DEBUT -->
<div>
En gros je voudrais que quand je clique sur "Afficher/Masquer la présentation de ces Produits.", "BLA BLA BLA" s'affiche en dessous de mon bouton en non au dessus." mais la condition est que je ne peux intervertir les fichier HAUT ou BAS et sans modifer le fichier HAUT (voir code source).
</div>
<!-- NOTE EXPLICATIVE - FIN -->

Guizmus

3 septembre 2010 à 8:07:27

A mon sens, le plus simple serait de créer ton bouton autrement.
Pourquoi ne pas :
1) récupérer l'élément DOM "div_produits_presentation"
2) créer un élément DOM a avec ton onClick et tout et tout
3) insérer l'élément créé après l'élément récupéré en 1)

xavierm02

3 septembre 2010 à 9:42:25

Va les le tutoriel des bonnes pratiques JS déjà...

@Guizmus :
C'est pas en camelCase les events, c'est en lowercase : onclick

csphoenix1

3 septembre 2010 à 11:09:40

Salut à tous,
Pour xavierm02 => merci pour l'info

Malheureusement je n'ai pas le temps de lire les tutos Javascript en ce moment, et puis c'est en me creusant la tête que je m'améliore

Mais pour l'instant je gagne plus de temps comme ça

Mais quand j'aurai une heure devant moi je penserai à toi et je m'occuperai des tutos Java

Pour Guizmus => merci de m'avoir mis sur la voie, c'est exactement ce que j'ai fait

Et ça rend bien, voyez pas vous même :

<!-- FICHIER HAUT - DEBUT -->
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<div class="div_produits_presentation"><p>BLA BLA BLA</p>lol<br></div>
<!-- FICHIER HAUT - FIN -->

<!-- SEPERATION -->

<!-- FICHIER BAS - DEBUT -->
<script language="JavaScript" type="text/JavaScript">	
		$(document).ready(function(){ 
			// On cache le div a afficher : 
			$(".div_produits_presentation").hide(); 
			$(".div_produits_presentation_new").hide(); 
		 });
		 
		function Toggle_Div_Produits_Presentation_New() {
		$(document).ready(function(){ 
			// On cache le div a afficher : 
			$(".div_produits_presentation_new").slideToggle(); 
		 });
		}
		
		function getElementsByClass(classe)
		{
			 var divs = document.getElementsByTagName("div");
			 var resultats = new Array();
			 for(var i=0; i<divs.length; i++)
				  if(divs[i].className == classe)
					   resultats.push(divs[i]);
			 return resultats;
		}
		
		if(getElementsByClass('div_produits_presentation')=="[object HTMLDivElement]"){
			var contenu_div = $('.div_produits_presentation').html();
			document.write('<a onclick="Toggle_Div_Produits_Presentation_New()" style="font-size:12px;cursor:default;text-decoration:underline;">Afficher/Masquer la présentation de ces Produits.</a><br><br>');
			document.write('<div class="div_produits_presentation_new">'+contenu_div+'</div>');
		}
</script>
<!-- FICHIER BAS - FIN -->

<!-- NOTE EXPLICATIVE - DEBUT -->
<div>
En gros je voudrais que quand je clique sur "Afficher/Masquer la présentation de ces Produits.", "BLA BLA BLA" s'affiche en dessous de mon bouton en non au dessus." mais la condition est que je ne peux intervertir les fichier HAUT ou BAS et sans modifer le fichier HAUT (voir code source).
</div>
<!-- NOTE EXPLICATIVE - FIN -->

Maintenant je souhaiterai modifier "Afficher/Masquer le contenu" en simplement "Afficher" ou "Masquer suivant si le contenu est affiché ou non.
Je vais faire mes recherches, ça ne sera pas trop compliqué je pense, mais si vous avez des propositions

Anonyme

3 septembre 2010 à 11:11:39

java, rien à voir, et il parlait de ce paragraphe du tuto : http://www.siteduzero.com/tutoriel-3-1 [...] tml#ss_part_6

csphoenix1

3 septembre 2010 à 11:50:12

Oui javascript je voulais dire désolé, et voici la soluce pour les autres :

<!-- FICHIER HAUT - DEBUT -->
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<div class="div_produits_presentation"><p>BLA BLA BLA</p>lol<br></div>
<!-- FICHIER HAUT - FIN -->

<!-- SEPERATION -->

<!-- FICHIER BAS - DEBUT -->
<script language="JavaScript" type="text/JavaScript">	
		$(document).ready(function(){ 
			// On cache le div a afficher : 
			$(".div_produits_presentation").hide(); 
			$(".div_produits_presentation_new").hide(); 
		 });
		 
		function Toggle_Div_Produits_Presentation_New() {
		$(document).ready(function(){ 
			// On cache le div a afficher : 
			$(".div_produits_presentation_new").slideToggle();
			if($("#bouton").text() == "Afficher la présentation de ces Produits."){
				$("#bouton").empty();
				$("#bouton").append("Masquer la présentation de ces Produits.");
			return;
			}
			if($("#bouton").text() == "Masquer la présentation de ces Produits."){
				$("#bouton").empty();
				$("#bouton").append("Afficher la présentation de ces Produits.");
			return;
			}
		 });
		}
		
		function getElementsByClass(classe)
		{
			 var divs = document.getElementsByTagName("div");
			 var resultats = new Array();
			 for(var i=0; i<divs.length; i++)
				  if(divs[i].className == classe)
					   resultats.push(divs[i]);
			 return resultats;
		}
		
		if(getElementsByClass('div_produits_presentation')=="[object HTMLDivElement]"){
			var contenu_div = $('.div_produits_presentation').html();
			if($(".div_produits_presentation_new").is(":visible")) {
			}else{
				document.write('<a id="bouton" onclick="Toggle_Div_Produits_Presentation_New()" style="font-size:12px;cursor:default;text-decoration:underline;">Afficher la présentation de ces Produits.</a><br><br>');
			}
			document.write('<div class="div_produits_presentation_new">'+contenu_div+'</div>');
		}
</script>
<!-- FICHIER BAS - FIN -->

<!-- NOTE EXPLICATIVE - DEBUT -->
<div>
En gros je voudrais que quand je clique sur "Afficher/Masquer la présentation de ces Produits.", "BLA BLA BLA" s'affiche en dessous de mon bouton en non au dessus." mais la condition est que je ne peux intervertir les fichier HAUT ou BAS et sans modifer le fichier HAUT (voir code source).
</div>
<!-- NOTE EXPLICATIVE - FIN -->

Tillertan

3 septembre 2010 à 12:20:37

Je suppose que quoi qu'on dise t'iras pas lire ce maudit paragraphe du tuto et tu continueras à utiliser document.write

csphoenix1

8 septembre 2010 à 18:04:25

Lol ne le prenez pas comme ça. J'ai vu que ça fonctionnait comme cela et comme j'étais débordé ces jours-ci j'ai mis cela en attente point.

Depuis le temps je l'ai lu comme promis

En tout cas ça fonctionne bien merci