28172 sujets

CSS et mise en forme, CSS3

Préchargement de deux fenêtres

Bonjour à tous !

Voilà mon problème :

Je souhaiterais savoir si il est possible de charger un bout de site qui se mettra sur un point particulier du site principal après avoir cliquer sur un lien, sans que celui-ci ne recharge tout le site.

Ensuite, est-il possible dans ce même bout de site que l'on vient de charger de pouvoir recharger encore un autre bout de site sur un autre point du site principal.

Bien sûr, tout cela avec des pages externes (attribut object).

http://img159.imageshack.us/img159/5579/sanstitre5ly.jpg
- Donc, on clique sur le 1 (un menu contenant lui même différents liens bien sûr)
- Le contenu du lien cliqué doit s'afficher dans le 2
- Ce contenu peut être une liste, et a ce moment là, on re-clique sur un lien dans le 2 pour avoir un contenu dans la 3.

J'espère que ce n'est pas trop compliqué Smiley biggol

Je vous remercie d'avance.

Amicalement.
Bonjour.

OUI! c'est possible! (chouette)

Le mot clé est XMLHttpRequest

http://www.openweb.eu.org/articles/objet_xmlhttprequest/

Les prérequis pour utiliser cet objet sont :
- quelques notions de dom (getElementById, innerHTML)
- un peu de javascript (mise en oeuvre et appel d'une fonction)
- un peu de http (usage de get et post)

...mais ensuite, c'est vraiment bien.
... et gateau sur la cerise, marche avec FireFox!
Re bonjour !

Je suis venu, j'ai vu et j'ai été vaincu Smiley rolleyes
Avec une lecture plus approfondie, j'ai compris quelques trucs et je pense en fait que c'est trop compliqué pour ce que je veux faire.

Je vais donc m'expliquer plus précisément .

En donnant un lien premièrement : http://reynier.michele.free.fr/ (piqué sur ce forum). Lorsqu'on survole avec la souris, un texte apparaît et se masque lorsqu'on quitte . Je voudrais que ce texte apparaisse lorsqu'on clique sur un lien et qu'il reste tant que l'on a pas choisi un autre lien.

Passons au code. En voici un bout que je vous présente :

a écrit :


#sousmenu {
width : 800px;
height : 280px;
background-color : #a28d5e;
margin-top : 1px;
}

#fiche {
width : 800px;
height : 500px;
background-color : #ffffff;
margin-top : 1px;
}

object {
width:100%;
height:100%;
}


a écrit :


<div id="sousmenu">

lien1

</div>

<div id="fiche">

<object data="blabla.htm" type="text/html" />

</div>



Vous l'aurez compris, il y a un bloc (qui accueillera la page externe) en dessous d'un bloc avec les liens. Je voudrais en fait, que le lien 1 permette d'afficher blabla.htm dans le div fiche (qui est donc inséré dans la page grâce à l'attribut object), que lien 2 affiche blabla2 etc... tout cela sans rechargement de la page.

Je vous écoute attentivement Smiley confused
Ayant du temps ces temps ci, j'aimerais si possible avoir un bout de réponse assez vite.

Excusez mon impatience Smiley confused
Bonjour.
Je n'ai pas trouvé de solution CSS.
La solution XmlHttpRequest ne doit pas effrayer...
J'ai adapté une fonction trouvée par ailleurs sur ce site en la simplifiant au minimum. Elle a le mérite d'être didactique, et de tourner sur IE et FF.

<html>
<head><title></title>

<style>
div{border: 1pt solid silver}
</style>

[b]<script>
function getPage(page,div)
{
	var content = document.getElementById(div);
	
	if(document.all)
		var XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ;
	else
		var XhrObj = new XMLHttpRequest();

	XhrObj.open("GET", page);

	XhrObj.onreadystatechange = function()
	{
		if (XhrObj.readyState == 4)
		{ 
			content.innerHTML = XhrObj.responseText ;
		} 
	}
XhrObj.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
	XhrObj.send(null);
} 
</script>[/b]
</head>

<body>

<div id="sousmenu" onclick="getPage('blabla.htm','fiche')">
	Lien vers blabla.htm
</div>

<div id="fiche"></div>
<div id="fiche2"></div>

</body>
</html>




... le contenu de blabla.htm

<div onclick="getPage('blabla2.htm','fiche2')">
lien vers blabla2
</div>


... et blabla2.htm

<b>test externe blabla2</b>

Modifié par GeorgesM (06 Sep 2005 - 11:38)
Super ! Ça avance du tonnerre. Cependant j'ai quelques problèmes .

J'ai l'impression que la page se recharge lorsque je clique dans ma liste oiseaux. J'ai aussi des problèmes d'écriture (texte) car je ne sais plus quel css domine quel autre (voyez, il y a du time nr et du verdana, pourtant c'est la même liste). Dernier problème un peu divers, j'ai des problème d'accents (!).

Je vous donne l'url du site plutôt que les css et code html car il y en aurait de trop : http://www.sebastien-beghelli.com/projet/test/ .

Donc : je clique sur auteur et matériel, des descriptions apparaissent dans le bloc sous menu. Je clique sur oiseaux, une liste apparaît dans sous menu et après un second clique dans cette liste, une description de l'oiseau apparaît dans le bloc fiche (pas de fiche2) . Les deux premiers oiseaux dans la liste possèdent une description .

Je vous remercie de votre aide et surtout pour ce code

Smiley cligne
Bonsoir.

J'ai regardé le contenu de oiseaux.htm.

Les fichiers inclus par XmlHttpRequest ne doivent pas comporter les
sections <html> <head> ou <body>.
Seule les balises html sont requises. (a, p, div, ul, etc..)
En effet, ce n'est pas des pages qu'on place dans des frame ou des iframe,
mais des fragments de code html qu'on place a coeur même du contenu.

En résumé, il n'y a qu'une seule page, et plusieurs fragments.
Modifié par GeorgesM (06 Sep 2005 - 21:59)
D'accord ! Après quelques tests, cela se veut concluant.

Je ne peux encore que vous remercier car je crois que nous avons fait le tour.
Peut être aurais-je quelques questions dans le futur, mais pour l'instant je suis pleinement satisfait!

Pour les accents, je vais lancer une recherche sur le forum.

Encore gros merci Smiley cligne
Pour les accents, il faut jouer sur la ligne qui contient

XhrObj.setRequestHeader("Content-Type", "text/xml; charset=utf-8");


et l'adapter au contenu réel des fichiers inclus. La plupart du temps :

charset=iso-8859-1


(note : apprès relecture, ce que j'ai écrit dans ce message est une annerie.
ça ne concerne que l'en-tête de requête. Pas l'en tête de réponse. Désolé.) Smiley cry
Modifié par GeorgesM (07 Sep 2005 - 22:44)
Rebonjour !

Toujours pas pour les accents. Il doit y avoir un problème du au fait que l'on déclare les charset en XML et en HTML (donc deux fois?).

Car j'ai essayé tous les cas (utf8-8859-1,15 etc.) mais il y a toujours les ? à place des é et è Smiley bawling

Merci d'avance Smiley murf
Pourtant dans les menus, Matériel s'affiche bien mais pas dans les fichiers extérieur (oiseaux etc.).
Bonjour.

Il est important d'être sur du codage effectif des fichiers.
Il faut aussi faire attention à bien maitriser son éditeur de texte, et ne pas passer d'un éditeur à l'autre.
En fait, c'est toute une chaîne à contrôler.
Modifié par GeorgesM (07 Sep 2005 - 22:30)
J'ai fait quelques manip en local, et ça ne fonctionne pas en iso-8859.

ça marche en utf-8, au moins pour les fichiers importés.

Je ne sais pas encore précisément pourquoi.
Dans XmlHttpRequest, il y a XML, et les bibliothèque de bas niveau des parser et du dom
privilégient ou imposent l'utf-8, qui est un petit pas vers l'universalité.
Modifié par GeorgesM (08 Sep 2005 - 10:55)
Aie aie aie

Ca ne marche pas même en UTF-8 . Enfin .. ce sont les pages extérieures ..
Mais je ne sais pas d'où ça vient .. grr Smiley lol
Bonjour.

Le lien :

http://www.sebastien-beghelli.com/projet/test/

ne marche pas. Le projet a été déplacé ?

Pas de panique. Smiley nono
Comme dit précédemment, la maîtrise de bout en bout du contrôle de l'encodage est une affaire délicate. Les sources d'erreurs sont multiples, (éditeur de texte, configuration du serveur...) mais elles ont toutes une réponse.

en vrac:
configuration du serveur :
créer ou modifier un fichier .htaccess,
renommer htm en html ou xml,
inclure une ligne de code php fixant l'encodage en 1ere ligne, et renommer en php...

Les solutions ne manquent pas.

De plus, de nos jours, la maîtrise de l'encodage est indispensable, par exemple, pour inclure du contenu venant d'un autre site et éviter le crash des accents...

Mais d'abord, le lien. iléou... Smiley eyecrazy
Sujet clos
Aller à