Site en Accordéon et gestion des Div

Version imprimable

09/01/2013, 18h12
88mons

Site en Accordéon et gestion des Div

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 ;)
09/01/2013, 21h39
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
10/01/2013, 11h23
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 !
10/01/2013, 18h39
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 :pastaper:
10/01/2013, 21h01
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 ;) .
11/01/2013, 17h58
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 ! :ccool:

"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é...? :mrgreen:
11/01/2013, 22h43
NoSmoking

Citation:

...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
15/01/2013, 20h51
88mons

ok merci bien !
je me plonge la dedans alors :aie:

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:

1 2 3 4 5 6 <div class="invisible" ><a href="?r=178&s=2" >rosso%20pi%26ugrave%3B%20nero </a></div> </div> </div> <div title="server.php?a=getR&w=178;&s=2" class="togglecontet loadcontent" > </div>
C'est ici pas vrai ?
<a href="?r=178&s=2" > : c'est la fameuse requête AJAX ?

Pouvez vous m’éclaircir sur ce point ?

15/01/2013, 21h43
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...

Trouvé ! :)

Code:

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>

Code:

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

22/01/2013, 20h01
NoSmoking

Citation:

Trouvé ! :)

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

Remarque

Code:

<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:

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

sinon on peu également mettre

Code:

<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.