Appel lien dans 1div sans recharger toute la page

Bonjour,

Structure du site:

header
Menu à gauche // Contenu à droite
footer

Description menu et du contenu

Menu verticale avec des dizaines de liens, qui affiche une ou plusieurs images
avec du texte.

Ce que je voudrais faire

• Avoir qu'un seul fichier html avec juste le contenu qui change...
Pour faciliter les mise à jour et éviter d'avoir trop de fichier html.

• Si il y a plusieurs images à afficher je souhaiterais en afficher qu'une
et mettre en place 2 boutons Suivant / Précédent .
=> Peut être en Js ??

Commentaire

J'ai préparer la mise en page html css, mais je bloque sur le reste,
j'ai vue qu'il y aurait plusieurs solutions ( Php Include, Iframes, Ahah, Jquery... )

Je ne sais pas trop vers quoi me tourner et je ne connais pas trop le Php et le java.

Donc si vous avez sous le coude un bon tuto ça m'aiderais bien.

Merci
Modifié par Mani (19 Oct 2011 - 10:41)

Bonjour,

Si le but est de ne pas recharger la page, alors il faut utiliser du JavaScript.

Si dans ce but tu ne souhaite avoir qu'une seule page HTML, alors, il faut simplement appliquer un système de montrer/cacher : En gros, sans JS tu as tout ton contenu sur la page, au chargement, tu masques ce qui doit l'être et au au clic tu affiches.

Merci pour ta réponse,

tout avoir avoir sur la même page html risque d’alourdir trop la page. ( beaucoup d'images )

Pour le Java j'ai vue plein de truk mais pas pour faire sa. Tu aurait le nom de ce Js?

Merci pour les liens, mais le site de référence indiquer sur le second lien
ne correspond pas à ce que je cherche à faire...

J'ai trouver un site qui correspond exactement à ce que je voudrais réaliser.
http:// www. diolau.co.uk en trifouillant le code je me suis aperçu que c'était un template
générer par un site payant, le souci est que la structure est incompréhensible.

Je vois le code css pour passer à l'image suivante ou précédente de la mini galerie d'un menu.
Mais je ne le vois pas dans le html.... donc je vois pas comment il est utiliser.

Je ne vois pas non plus comment il affiche les menu sur la page...

Le site est un mauvais exemple vus que c'est un template mais l'idée est la, si vous avez un site
du même genre avec un code lisible ça m'aiderais beaucoup.

Mani a écrit :
Pour le Java j'ai vue plein de truk mais pas pour faire sa. Tu aurait le nom de ce Js?

JavaScript.
Java est un langage de programmation différent, rien à voir.

Pour apprendre JavaScript, il y a des bouquins bien écrits qu'on peut trouver chez tous les bons libraires.
Modifié par fvsch (21 Oct 2011 - 10:22)

J'ai des livres et des formation DVD mais pour le CSS2 xhtml....

Ce que je cherche c'est un tuto ou autre qui m'explique comment mettre en place une
fonction spécifique de Javascript ou un autre pour l’implanter dans mon css et html.

Je ne connais pas le nom spécifique pour faire sa donc forcement je tourne en rond
avec mes recherchesssSSss

Je vous demande pas de me pondre ce code, juste de me guider vers un site, un tuto
pas la bible du javascript, ce n'est pas un site Pro juste un book perso.

Voici un autre site http://snasen.no/
le code est beaucoup plus lisible.

Pourriez vous m'aider à le comprendre ?

Je vois tout sont menu qui est apparemment dans un dossier séparer je ne sais pas pourquoi
il n'y as pas le ".html" sur chacun des ces liens ???

Quand on clik sur un lien du menu tous s'affiche dans

<div id='content'>
<div class='container'>
..
...
</div>
</div>

Je ne comprend pas pourquoi il à fait une class pour sont body je ne la retrouve pas dans le css.

Je crois que c'est ce bout de code qu'il utilise pour afficher l'élément du menu dans le div container.

function move_up() 
{
	var move = getCookie('move');
	if (move == '') return false;
	
	var menu = document.getElementById('menu');
	menu.scrollTop = move;
	
	// should i delete the cookie here
	// or reset it to zero
}


function do_click()
{
	moved = document.getElementById('menu');
	moved = moved.scrollTop;
	
	// record the cookie
	setCookie('move', moved, 1);
}

function getCookie(c_name)
{
	if (document.cookie.length > 0)
	{
		c_start = document.cookie.indexOf(c_name + "=")

		if (c_start != -1)
		{ 
			c_start = c_start + c_name.length + 1 
			c_end = document.cookie.indexOf(";", c_start)
			
			if (c_end == -1) c_end = document.cookie.length
			return unescape(document.cookie.substring(c_start, c_end))
		} 
	}
	return 0;
}

function setCookie(c_name,value,expiredays)
{
	var exdate = new Date();
	exdate.setDate(exdate.getDate() + expiredays);
	document.cookie = c_name + "=" + escape(value) +
	((expiredays==null) ? "" : ";expires=" + exdate.toGMTString()) + '; path=/';

Il à d'autres Js > jquery.cycle.all.js et is-forever-no-way/

path = 'http://snasen.no/files/gimgs/';

$(document).ready(function()
{
	setTimeout('move_up()', 1);
});

et

$(document).ready(function(){ 
	$('#s1').cycle({
	fx:'fade', 
	speed:'2000', 
	timeout: 0, 
	next:'#next, #s1', prev:'#prev'});
	});

Celui ci est pour les mini galeries je pense...
Il as un dernier Js mais il est beaucoup trop long pour afficher ici, mais je suppose que
vous savez comment le voir .

Pourquoi a t-il mis ce code dans sa page html et non dans le css ?

<style type='text/css'>
#num {padding-left: 6px;}
	.img-bot {margin-bottom: 6px; display: block; }
</style>

Merci de m'aider à comprendre et à faire le tris dans tous sa.

Hello. Ce que tu cherches à faire est un appel Ajax, et c'est plutôt complexe sans un minimum de connaissances en JS. Regarde du côté de xmlhttprequest pour du JS pur, sinon la plupart des frameworks JS proposent une méthode Ajax.

Je pense qu'il sera plus efficace de se renseigner sur XMLHttpRequest, éventuellement de choisir une bibliothèque JavaScript telle que jQuery (ou autre) et de lire la documentation sur les fonctions XHR/«AJAX» qu'elle fournit. Quelques notions de HTTP et l'utilisation d'un outil qui surveille les requêtes HTTP effectuées par le navigateur (par exemple la Web Console de Firefox) ne seraient pas du luxe.

Décortiquer un site existant risque d'être compliqué vu que n'importe quelle application va sans doute mélanger dans son code un appel Ajax, une gestion d'erreur (requête Ajax échouée), une modification du DOM en cas de succès, et sans doute des effets d'animation ou autres subtilités propres à l'application.

Je vais me pencher sur XMLHttpRequest j'ai vue qu'il pouvait être associer à responseHTML
ce qui pourrait correspondre à mes attente....

Je vais voir comment mettre en place ces fonctions, je vous tiens au courant
merci de ne pas fermer le sujet.