Discussion :

[88mons]

Bonjour,
Je suis entrain de créer un site web et j'aimerai adopter un système de navigation en accordéon avec jQuery.
Cependant le lourd contenu de mon site me pose problème.
Avec cette structure, le contenu est très long a se charger : Même si les <Div> sont cachées, leur contenu est tout de même charger.
Exemple de site web : www.nda2012.be
Existe-il un moyen de gérer ce genre de structure en chargent la page lorsque l'on ouvre la Div ?
Merci

[DezMax]

Ce n'est pas le contenu de ton site qui est lourd mais plutot le serveur qui est lent .
Je n'ai pas très bien compris la question serais t-il possible de la reformuler ?
Merci

[leminipouce]

Complètement d'accord avec DezMax : c'est ton serveur qui est (très) lent !

Sinon, pour alléger le contenu d'une page, tu peux toujours charger dynamiquement sont contenu avec AJAX (surtout que tu déclenches déjà un traitement JS avec jQuery, il suffit de faire d'abord un appel AJAX pour cahrger le contenu de ton div avant d'appeler la tringlerie AJAX), mais dans ton cas, vu la lenteur du serveur, ça va être inutilisable !

[NoSmoking]

Bonjour,
ce qui me déroute le plus sur ton site c'est l’accessibilité et la navigation, j'ai vraiment du mal à savoir ce qui est cliquable de ce qui ne l'est pas.

La mise en page via une table pourrait être supprimé.

Je sais je suis hors discussion

[DezMax]

Je te conseil d'utiliser directement du texte au lieu des images et l'éditer grâce au CSS il y'aurais une meilleur qualité et se sera certainement beaucoup plus rapide .

[88mons]

Merci pour vos conseils, ce site (www.nda2012.be) est ma première production et il n'est vraiment pas au point effectivement... C'est un bricolage de code fait avec les moyens du bord...
Mon projet actuel est plus sérieux et je viens de trouvé une bonne référence de la structure et de la navigation qui me plait : http://undesign.it

Comme j'ai essayé de l'expliquer précédemment, j'aimerai pouvoir optimiser l'affichage de mon nouveau site (il va être très lourd) et comme dans celui de mon site référence, le contenu des éléments caché se charge au fur et a mesure de la navigation : C'est ce qu'il me faut !

"leminipouce" tu me parles de AJAX ( je ne connais pas vraiment mais si c'est l'unique solution, je peux apprendre ).
En cherchant avec mes petites connaissances je me demandais si c'était pas possible d'utiliser des <FRAME> avec un "target" dont le contenu seraient activés en cliquant sur la DIV qui ouvre le contenu caché...?

[NoSmoking]

...je me demandais si c'était pas possible d'utiliser des <FRAME> avec un "target"...

oublis cette idée d'autant que les FRAME sont obsolètes en HTML5.

Concernant la technique Ajax tu trouveras ceci Les meilleurs cours et tutoriels AJAX

[88mons]

ok merci bien !
je me plonge la dedans alors

[88mons]

okay je commence a comprendre,
AJAX me permet de ne charger qu'une partie de ma page html et a travers une requête via le "Moteur" je peux charger un partie de la page sans avoir a recharger l'intégralité ! PARFAIT !
Seulement, c'est la partie PHP qui m’inquiète un peu, c'est un peu flou... Est ce que je dois connaitre ce langage ?
en trifouillant dans le code source de http://undesign.it , je tombe sur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
 
                  <div class="invisible" ><a href="?r=178&amp;s=2" >rosso%20pi%26ugrave%3B%20nero </a></div>	
	          </div>
	      </div>	
	      <div  title="server.php?a=getR&amp;w=178;&amp;s=2" class="togglecontet loadcontent" >  </div>

C'est ici pas vrai ?
<a href="?r=178&amp;s=2" > : c'est la fameuse requête AJAX ?

Pouvez vous m’éclaircir sur ce point ?

[Bovino]

PHP, pas spécifiquement, mais si tu veux faire des requêtes sur un serveur, l'idéal est quand même de connaitre un langage serveur...

[88mons]

Trouvé !

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">
function envoieRequete(url,id)
{
	var xhr_object = null;
	var position = id;
	   if(window.XMLHttpRequest)  xhr_object = new XMLHttpRequest();
	  else
	    if (window.ActiveXObject)  xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); 
 
	// On ouvre la requete vers la page désirée
	xhr_object.open("GET", url, true);
	xhr_object.onreadystatechange = function(){
	if ( xhr_object.readyState == 4 )
	{
		// j'affiche dans la DIV spécifiées le contenu retourné par le fichier
		document.getElementById(position).innerHTML = xhr_object.responseText;
	}
	}
	// dans le cas du get
	xhr_object.send(null);
 
}
</script>

et

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onclick="envoieRequete('page/projet.html','centre');" >PROJETS</a>

[NoSmoking]

Trouvé !

c'est bien, mais il n'est peu être pas utile de recharger ce qui l'a déjà été !


Remarque

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onclick="envoieRequete('page/projet.html','centre');" >PROJETS</a>

pourrait être avantageusement remplacé par un button, balises qui sont prévus pour cela

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<button onclick="envoieRequete('page/projet.html','centre');" >PROJETS</button>

sinon on peu également mettre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="page/projet.html" onclick="envoieRequete('page/projet.html','centre');return false" >PROJETS</a>

la référence à la page reste visible et en cas de javascript désactivé cela baigne.