Script AJAX pour changer contenu d'un cadre

Mysterious_fea Messages postés 401 Date d'inscription Statut Membre Dernière intervention -
Monoem YOUNEB - 14 oct. 2010 à 16:24

Bonjour,
Cela doit être un des trucs "bateau" de l'AJAX, mais je n'arrive pas à trouver le code.
J'ai un petit cadre à droite de ma page (le cadre plus) et j'aimerais mettre tout en bas un lien "Encore plus..." qui modifierait le contenu du cadre avec autre chose : comme un défilement, mais seulement avec deux états possibles : le premier contenu et le second contenu. J'aimerais également dans le second contenu mettre en haut du cadre un lien pour revenir au premier.

Je crois que ça dois avoir quelque chose à voir avec visibility ou display, mais aucune idée du code !
Merci pour vos réponses (une fois de plus !)
Ciao

Afficher la suite

A voir également:

Script AJAX pour changer contenu d'un cadre
Changer dns - Guide
Script vidéo youtube - Guide
Comment faire un cadre sur word - Guide
Changer carte graphique - Guide
Changer extension fichier - Guide

26 réponses

Réponse 1 / 26

Mysterious_fea Messages postés 401 Date d'inscription Statut Membre Dernière intervention 35

En fait la seule chose que je voudrais faire, c'est qu'en cliquant sur le lien "Encore Plus" en bas du cadre ("Plus..."), le contenu du cadre change (en fait c'est pour afficher d'autres "Plus"), et qu'une fois qu'on a cliqué sur "Encore Plus..." et que le contenu a changé, un lien retour vers le premier contenu soit inclu en haut. Je n'arrive pas à trouver ce genre de script dans les tutos.

Ou est le truc dans ton exemple ? le texte qui apparaît onmouseover ?

Réponse 2 / 26

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

re,

oui mon exemple c'est juste le {:hover}, tu peux le faire sur {:active} ça fait un faux clic.

ton contenu, il sera déjà chargé sur la page et il faut juste afficher/masquer ou tu auras besoin d'aller chercher le contenu sur le serveur ?

dans les deux cas tu peux le faire avec Javascript mais dans le second il faut utiliser 'HTTPRequest' et donc ça devient de l'Ajax.

pour JS, tu vas utiliser une fonction que tu auras codé et tu vas l'appeler sur l'évènement 'onclic' de la balise du "Encore plus".

tu t'orientes vers ça ?

Réponse 3 / 26

Mysterious_fea Messages postés 401 Date d'inscription Statut Membre Dernière intervention 35

Je vais essayer d'étudier ton code et d'écrire mon code, mais plus tard. Merci beaucoup.
Rien à voir : quelle est la vraie syntaxe de "implode()" en PHP.
J'écris :

	$options = $_GET['options'];
	$optionsfinal = implode(":", $options);

et il me retourne l'erreur
"Warning: implode() [function.implode]: Invalid arguments passed in C:\programmes\wamp\www\Spider's Web\contact.php on line 170"

J'ai essayé en remplaçant les guillemets par des ' ', et en changeant le contenu par une virgule, un tiret, mais rien à faire.
Le pblem vient peut être de $options. Je l'ai récupéré comme ça :

<label for="animflash">Animations flash
    <input type="checkbox" value="checkbox" name="options[]" id="animflash" />
    </label><br />
	<label for="fid">Fid&eacute;lisation des visiteurs
    <input type="checkbox" value="checkbox" name="options[]" id="fid" />
    </label><br />
	<label for="pub">Adsense
    <input type="checkbox" value="checkbox" name="options[]" id="pub" />
    </label><br />
	<label for="prom">Promotion du site
    <input type="checkbox" value="checkbox" name="options[]" id="prom" />
    </label>

Merci
Ciao

Réponse 4 / 26

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

salut,

"Warning: implode() [function.implode]: Invalid arguments passed in C:\programmes\wamp\www\Spider's Web\contact.php on line 170"
tu as passé un mauvais argument.

string implode ( string $glue, array $pieces )

le premier est une chaîne, le deuxième un tableau.
ton premier argument est nien une chaîne, donc c'est que le deuxième n'est pas un tableau.

$optionsfinal = implode(":", $options);

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 26

Mysterious_fea Messages postés 401 Date d'inscription Statut Membre Dernière intervention 35

Whaou jcomprend rien à ce que tu dis là !
Pourquoi as-tu réécri mon code ?
Quel code dois-je mettre ?
J'ai essayé sans succès string implode()
Merci de préciser

Réponse 6 / 26

Mysterious_fea Messages postés 401 Date d'inscription Statut Membre Dernière intervention 35

Je corrige mon message sur le JS, car entre temps j'ai trouvé, et c'était pas bien compliqué. En tout cas, merci pour tes conseils, ça m'a fait avancer.
Alors, j'ai défini deux div "interchangeables", evanescent et evanescent2.
Par défaut, evanescent est en display:block et evanescent2 en display:none.
Le lien en bas de evanescent est comme ça :

<a href="#" onClick="document.getElementById('evanescent2').style.display='block';document.getElementById('evanescent').style.display='none';">Encore plus...</a>

Et le lien de "retour", situé dans evanescent2, est comme ça :

<a href="#" onClick="document.getElementById('evanescent').style.display='block';document.getElementById('evanescent2').style.display='none';">Back in black...</a>

Et voilà ! merci pour ton aide.
Par contre j'attend toujours avec impatience des précisions sur implode()...
Merci !

Réponse 7 / 26

Mysterious_fea Messages postés 401 Date d'inscription Statut Membre Dernière intervention 35

Alors, what about implode ?

Réponse 8 / 26

Mysterious_fea Messages postés 401 Date d'inscription Statut Membre Dernière intervention 35

Autre petit problème CSS (je vais pas ouvrir un nouveau post pour ça) :
comment définir le :hover d'un lien comme ça :

<a href="#" class="lien01">Lien</a>

J'ai essayé

a:hover.lien01

a.lien01:hover

mais ça marche pas !

Réponse 9 / 26

Mysterious_fea Messages postés 401 Date d'inscription Statut Membre Dernière intervention 35

No résolu !

Réponse 10 / 26

Mysterious_fea Messages postés 401 Date d'inscription Statut Membre Dernière intervention 35

STP 3 problèmes !

(1) précisions sur implode()
(2) syntaxe CSS a:hover
(3) est-ce quand même fonctionnel si j'enlève "href="#"" à un lien affichant un cadre onmouseover (comme dans ton exemple) ? Parce que ça fait bouger la page en entier donc c'est pas génial. Ca marche sous FF2, mais je ne suis pas sûr sous les autres navigateurs. Est-ce grave ?

Merci encore
Ciao

Réponse 11 / 26

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

salut,

désolé me suis absenté quelques jours.

1) 'implode()'

2) ':hover{}'

3) ça devrait fonctionner sauf sous IE 6 (ça doit encore peser 40% du marché) si la balise n'est pas <a>.
si ça fait bouger ta mise en page, c'est peut être qu'il y a une bordure. ce ne serait pas avec une image ?

en plus l'attribut 'href' te permet d'envoyer vraiment vers une page au cas où JS est inactif (rare).

Réponse 12 / 26

Mysterious_fea Messages postés 401 Date d'inscription Statut Membre Dernière intervention 35

1 et 2 : merci je vais potasser
3 : En fait, c'est juste que si je scroll la page un peu vers le bas et que je clique sur le lien JS, il suit également le lien "#" qui remonte la page en haut. C'est juste ça. j'ai remarqué que tu avais laissé "#" sur ton exemple, mais il n'y avais pas de srollage possible, donc pas de problème)
Merci
a+

Réponse 13 / 26

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

ah vi !

en JS, en plus de l'appel à ta fonction il faut ajouter une instruction pour indiquer à la page qu'il ne faut pas propager l'évènement.

onclick="ma_fonction(); return false;"

et pour ':hover{}' as-tu tenté sans le 'href' ?

Réponse 14 / 26

Mysterious_fea Messages postés 401 Date d'inscription Statut Membre Dernière intervention 35

Pour la définition de :hover pour une classe de lien, c'est OK
Pour implode, ça va toujours pas !
Faut-il mettre ça :

string implode  ( string $glue  , array $pieces  )

?
Il faut laisser string ou le remplacer par quelque chose ?
Ou alors il faut mettre ça :

$array = array('nom', 'email', 'telephone');
$comma_separated = implode(",", $array);

?
Dans ce dernier cas, cela ne marche pas, mais c'est surement parce que je n'ai pas défini l'array. J'ai seulement mis ça dans mon formulaire :

<label for="animflash">Animations flash
    <input type="checkbox" value="checkbox" name="options[]" id="animflash" />
    </label><br />
	<label for="fid">Fid&eacute;lisation des visiteurs
    <input type="checkbox" value="checkbox" name="options[]" id="fid" />
    </label><br />
	<label for="pub">Adsense
    <input type="checkbox" value="checkbox" name="options[]" id="pub" />
    </label><br />
	<label for="prom">Promotion du site
    <input type="checkbox" value="checkbox" name="options[]" id="prom" />
    </label>

?
Comment collecter la chaîne des valeurs d'options dans une variable ?
Je ne comprend vraiment pas, peux-tu m'écrire le code en entier parce que là...

Pour le JS, je vais laisser href="#" au cas où.
Merci

Réponse 15 / 26

Mysterious_fea Messages postés 401 Date d'inscription Statut Membre Dernière intervention 35

Autre petit truc (encore du JS !). Je fais afficher un petit cadre du genre "Plus d'infos" au passage sur un lien. Comment positionner le coin bas gauche du cadre sur le curseur ?
Merci

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

je ne sais pas.

tu utilises quoi comme code ?

Mysterious_fea Messages postés 401 Date d'inscription Statut Membre Dernière intervention 35 > Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention

En fait c'est même pas du JS.
Voilà le HTML :

<a href="#" class="readmore"><img src="images/hum.png" class="readmore" /><span>Hallo !</span></a>

Et le CSS :

a.readmore span{
position:absolute;
display:none;
width:150px;
background-color:#E53000;
border:1px solid #FFAO17;
padding:5px;
color:#FFFFFF;
}

a.readmore {
cursor:crosshair;
}

a.readmore:hover {
background-color:transparent;
}

a.readmore:hover span{
display:block;
}

img.readmore{
	width:15;
	height:18;
	border:0;
	}

Je ne sais pas comment positionner le span...

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922 > Mysterious_fea Messages postés 401 Date d'inscription Statut Membre Dernière intervention

il est en positionnement absolu donc tu peux le caler par rapport aux bords haut, droit, bas ou gauche du conteneur parent (qui doit être à {position:relative;} s'il ne s'agit pas de <body>).
donc tu dois pouvoir passer :

a.readmore span{
position:absolute;
bottom:0;
left:0;
display:none;
width:150px;
background-color:#E53000;
border:1px solid #FFAO17;
padding:5px;
color:#FFFFFF;
}

Mysterious_fea Messages postés 401 Date d'inscription Statut Membre Dernière intervention 35 > Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention

marche pô !
La position absolute s'applique à la page (donc le cadre ne retrouve en bas à droite de la page elle-même)
Et pourtant absolute est le seul moyen de ne pas faire bouger le contenu aux alentours.

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922 > Mysterious_fea Messages postés 401 Date d'inscription Statut Membre Dernière intervention

conteneur parent (qui doit être à {position:relative;} s'il ne s'agit pas de <body>)
as-tu mis le conteneur référent à {position:relative;} ?

Réponse 16 / 26

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

salut,

1/ ce que tu avais au dessus, c'est la définition de la fonction (celle du manuel PHP).
donc pour chaque élément, il te donne son type, il ne faut pas le reprendre quand tu utilises la fonction.

$array = array('nom', 'email', 'telephone');
$comma_separated = implode(",", $array);

ce code doit fonctionner.

2/ pour savoir ce qu'il retourne il faut que tu définisses l'attribut 'value' de tes <input>.

<label for="animflash">Animations flash
    <input type="checkbox" value="animflash" name="options[]" id="animflash" />
    </label><br />
	<label for="fid">Fid&eacute;lisation des visiteurs
    <input type="checkbox" value="fid" name="options[]" id="fid" />
    </label><br />
	<label for="pub">Adsense
    <input type="checkbox" value="pub" name="options[]" id="pub" />
    </label><br />
	<label for="prom">Promotion du site
    <input type="checkbox" value="prom" name="options[]" id="prom" />
</label>

ensuite tu auras un tableau dans le '$_POST' à l'index 'options'.

$checked_values= $_POST['options'];

tu peux tester avec :

print_r( $_POST['options'] );

dans ton cas si tu coches le premier et le troisième, '$checked_values' contiendra 'animflash' et 'pub'.
ce qui doit être représenté comme ça par 'print_r()' :

$checked_values => array( 'animflash' , 'pub' )

Réponse 17 / 26

Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention 2 779

Bonjour,

Je ne sais pas si c'est encore dans le sujet (je n'ai pas tout lu ;-), mais je suis revenu sur un truc que j'essayais depuis quelques temps.
J'en ai fait un petit bricolage d'amateur qui affiche un contenu différent dans une <div>.
À tester.

++
Si vous savez l'améliorer, je suis preneur.
Comme par exemple récupérer le contenu d'une autre <div> cachée pour la passer à la fonction plutôt que de devoir contruire ces var bizarres…

--

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

salut Gihef,

tu peux mettre ton texte dans un <div> caché (j'ai embarqué le style).

<div id="hidden" style="display:none;">
	<div id="hautdiv"><\/div>
	<h3 class="h">Du texte de 2e main<\/h3>
	<p>Du texte de 2e main main main<\/p>
	<p>Du texte de 2e main main main main main main main main main main main<\/p>
	<p>Du texte de 2e main main main main main main main<\/p>
	<p>Du texte de 2e main main main main main main main main main main main main main main main main main main main main main<\/p>
	<p>Du texte de 2e main main main main main main main<\/p>
	<p>Du texte de 2e main main main main main main main main main main main main main main main main main main main main main<\/p>
	<p>Du texte de 2e main main main main main main main main main main main main main main main main main main main<\/p>
	<p id="remonte"><a href="#hautdiv">&uarr; HAUT &uarr;<\/a><\/p>
</div>

et tu transvases direct de l'un à l'autre.

document.getElementById("clic").innerHTML=document.getElementById("hidden").innerHTML;

au passage, regarde ça, pas de JS mais un joli coup de CSS.

Réponse 18 / 26

Mysterious_fea Messages postés 401 Date d'inscription Statut Membre Dernière intervention 35

Pour le implode, c'est bon, tout marche, merci beaucoup !
Pour le :hover, c'est pareil !
Par contre, pour le point d'interrogation t'aurais une piste STP ?

Merci merci merci encore !
Ciao

Réponse 19 / 26

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

salut,

Par contre, pour le point d'interrogation t'aurais une piste STP ?
je ne vois pas de quoi tu parles…
(o_o)'

Réponse 20 / 26

Mysterious_fea Messages postés 401 Date d'inscription Statut Membre Dernière intervention 35

Point d'interrogation : le cadre qui s'affiche onmouseover le petit point d'interrogation pour plus de précisions. ici
Merci

Discussions similaires

probleme sommet

Votre réponse

Discussions similaires