11540 sujets

JavaScript, DOM et API Web HTML5

Changement de contenue dans 2 DIV

Bonjour à tous,
Je rencontre un petit probléme dans un petit bout de code JavasScript.

En effet, j'ai un menu de 3 élément, quand on arrive sur le site, le contenu est chargé dans une DIV ( #contenu) avec un effet fade in.Si je clique sur le lien 3 du menu, le contenu d'origine est remplacé par le contenue du lien 3.Jusqu'a la tout va bien.
Je precise, que le lien 1 & 2 s'affiche dans la meme DIV
Pour une question de positionement je souhaiterai afficher le lien 2 dans une DIV en bas de page.

Le probléme c'est que quand je clique sur le lien 2, il ne vide pas la DIV #contenu, par contre le lien 2 apparait normalement dans la DIV en bas de page.

Je cherche donc à ce que quand on clique sur l'un des lien du menu, il y est toujours un remplacement de contenu malgré le faite que cela ne soit pas dans la meme DIV.

Voici mon code:
<script type="text/javascript">
$(document).ready(function(){ 	// le document est chargé
   $("a#cv,a#con").click(function(){ 	// on selectionne tous les liens et on définit une action quand on clique dessus
	page=($(this).attr("href")); // on recuperer l' adresse du lien
	$.ajax({  // ajax
		url: page, // url de la page à charger
		cache: false, // pas de mise en cache
		success:function(html){ // si la requêté est un succès
			afficher(html);	    // on execute la fonction afficher(donnees)
		},
		error:function(XMLHttpRequest, textStatus, errorThrows){ // erreur durant la requete
		}
	});
	return false; // on desactive le lien
   });
   $("a#archi").click(function(){ 	// on selectionne tous les liens et on définit une action quand on clique dessus
	page=($(this).attr("href")); // on recuperer l' adresse du lien
	$.ajax({  // ajax
		url: page, // url de la page à charger
		cache: false, // pas de mise en cache
		success:function(html){ // si la requêté est un succès
			view(html);	    // on execute la fonction afficher(donnees)
		},
		error:function(XMLHttpRequest, textStatus, errorThrows){ // erreur durant la requete
		}
	});
	return false; // on desactive le lien
   });
});

function afficher(donnees){
    var $objJQ = $("#contenu");
    $objJQ.fadeOut('slow',function(){
        $objJQ.html(donnees);
        $objJQ.fadeIn('slow');
		
    });
}

function view(donnees){
    var $objJQ = $("#footer");
    $objJQ.fadeOut('slow',function(){
        $objJQ.html(donnees);
        $objJQ.fadeIn('slow');
		
    });
}
</script>


Voici le lien du site: http://www.iweb.iweb-concept.fr/olive/

Je presice aussi que je débute en JavaScript.

Merci d'avance pour votre aide.

Bien cordialement.
Modérateur
Bonjour,

A priori, il faudrait vider la DIV #contenu quand on est dans la fonction view(), en la modifiant comme ci-dessous :


function view(donnees){
	var $objJQ = $("footer");
	$objJQ.fadeOut('50',function(){
		$objJQ.html(donnees);
		$objJQ.fadeIn('50');
	});
	var $objJQ2 = $("#contenu");
	$objJQ2.fadeOut('10',function(){
		$objJQ2.html("");
		$objJQ2.fadeIn('10');
	});
}


Je n'ai pas testé car je n'arrive pas à aspirer l'exemple simplement. Le code part dans tout les sens : y a du javascript certes, mais c'est en fait du jQuery, surcouche de javascript, et aussi de l'ajax ce qui complique beaucoup quand on essaie d'aspirer (pas facile pour un débutant tout ça). Je suis curieux de savoir si cette modification suffirait.

EDIT : si un gourou sait comment aspirer ce genre de site, sa solution m'intéresse.

Amicalement,
Modifié par parsimonhi (06 Jun 2014 - 00:56)
Bonjour,

Je viens de tester, cela fonctionne a merveille, la DIV #contenu ce vide bien quand la fonction view est exécuté.
Pour avoir l'inverse, c'est a dire que quand la fonction afficher est exécuté, cela vide le <footer>, j'ai ecrit ceci:

function afficher(donnees){
    var $objJQ = $("#contenu");
    $objJQ.fadeOut('10',function(){
        $objJQ.html(donnees);
        $objJQ.fadeIn('10');
		
    });
	[b]var $objJQ2 = $("footer");
	$objJQ2.fadeOut('10',function(){
		$objJQ2.html("");
		$objJQ2.fadeIn('10');
	});
}[/b]

function view(donnees){
    var $objJQ = $("footer");
    $objJQ.fadeOut('10',function(){
        $objJQ.html(donnees);
        $objJQ.fadeIn('10');
		
    });
	var $objJQ2 = $("#contenu");
	$objJQ2.fadeOut('10',function(){
		$objJQ2.html("");
		$objJQ2.fadeIn('10');
	});
}


Du coup, quand je clique sur un des lien de mon menu, il recupére bien la page HTML concerné qu'il charge a l'endroit voulu ( DIV ou footer) en vidant un ou l'autre.

Donc cette reponse est une réussite, merci beaucoup!
Par contre j'ai une petit question, et t'il possible d'avoir une petite explication concernant le bout de code?:
function view(donnees){
	var $objJQ = $("footer"); //>Charge l'objet dans footer?
	$objJQ.fadeOut('50',function(){ //>Vide  footer avec fade out?
		$objJQ.html(donnees);//Bien la je comprend pas bien
		$objJQ.fadeIn('50');//charge l'objet avec fade in?
	});
//et la bien.... je ne vois pas a quoi correspont "$objJQ2" a l'objet 2
	var $objJQ2 = $("#contenu");
	$objJQ2.fadeOut('10',function(){
		$objJQ2.html("");
		$objJQ2.fadeIn('10');
	});
}



En encore un grand merci, et merci d'avance pour la petite explication!

Cordialement
Modifié par cultroy (06 Jun 2014 - 10:49)
Modérateur
Bonjour,

L'instruction var $objJQ2 = $("#contenu"); a pour effet d'affecter à la variable jquery $objJQ2 une référence vers l’élément HTML ayant comme id "contenu". Ca ne charge pas du tout quoique ce soit comme tu l'indiques en commentaire de la ligne var $objJQ = $("#footer");. Ce qui modifie le contenu, ce sont les lignes $objJQ.html(donnees); et $objJQ2.html(""); (ça dit qu'il faut remplacer le code html à l'intérieur des éléments HTML référencés par les variables $objJQ et $objJQ2 par un nouveau code html). Tu peux par exemple t'amuser à remplacer donnes dans la ligne $objJQ.html(donnees); par une chaine de caractère comme "<button type='button'>Argh</button>" et voir ce que ça donne quand tu cliques ensuite sur tes liens.

L'idée derrière l'utilisation d'une variable comme $objJQ2 est qu'ensuite, dans le code de la fonction où est faite cette déclaration, on peut utiliser $objJQ2 à la place de $("#contenu"), ce qui simplifie légèrement le code. $objJQ2 est donc juste un nom qui pourrait être n'importe quoi d'autre. Si par exemple, on voulait changer le "background" de la div ayant comme id "contenu" en rouge (en supposant que le contenu de ce contenu soit au moins partiellement transparent bien sûr sinon on ne verra rien), les codes suivants sont donc (à peu près) équivalents :

En javascript, variante 1 sans variable :

document.getElementById("contenu").style.background="red";

En javascript, variante 2 avec variable :

var e=document.getElementById("contenu");
e.style.background="red";

En jquery, variante 1 sans variable :

$("#contenu").css("background","red");

En jquery, variante 2 avec variable :

var $e=$("#contenu");
$e.css("background","red");


Évidement, les variantes 2 avec variable n'ont d'intérêt que si on a toute une série d'instructions à effectuer sur l'élément HTML concerné. Sinon, si on a juste une instruction comme ci-dessus, ce n'est pas vraiment la peine, et on peut se contenter des variantes 1.

Quant à l’utilisation de jquery par rapport à javascript seul, son intérêt est entre autre de mettre à la disposition du codeur toute une série de fonctions qui font en une ligne des opérations plus ou moins complexes, et qui fonctionnent sur un nombre assez large de navigateurs sans qu'on ait trop à se préoccuper de compatibilité.

Par exemple, faire en javascript pur ce que font les fonctions jquery fadeOut et fadeIn avec la même fiabilité demanderait un peu (beaucoup?) plus d'efforts qu'en jquery.

Amicalement,
Modifié par parsimonhi (06 Jun 2014 - 13:43)
Désolé pour cette reponse quelque peu tardive Smiley confused ,

Merci Parsimonhi pour cette explication, qui me permet de bien mieux comprendre!
Je peux ainsi manipulé ce code plus aisement, et continuer ce projet Smiley biggrin

Je te remercie une fois de plus pour ton aide!

Bien cordialement.
Rebonjour, en regardant tout cela de plus prés, je me suis penché sur l'adaptation mobile de mon site, je souhaiterai juste rajouter un menu pour mobile de sorte:

<option value="/">Menu</option> 
<option value ="test.html" >Architecture</option> 
<option value="cv.html" >C.V</option> 
<option value="contact.html">Contact</option>


Aprés plusieurs test, je ne pense pas que cela soit réalisable, est-ce exat?

Merci pour ce dernier petit coup de main!
Sujet clos
Aller à