Sujet Précédent Sujet Suivant

Script AJAX pour changer contenu d'un cadre

Fermé
Mysterious_fea Messages postés 401 Date d'inscription vendredi 29 juin 2007 Statut Membre Dernière intervention 23 mars 2013 - 14 janv. 2008 à 19:57
 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
A voir également:

26 réponses

  • 1
  • 2
Réponse 1 / 26
Mysterious_fea Messages postés 401 Date d'inscription vendredi 29 juin 2007 Statut Membre Dernière intervention 23 mars 2013 35
14 janv. 2008 à 21:07
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 ?
0
Réponse 2 / 26
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
14 janv. 2008 à 22:27
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 ?
0
Réponse 3 / 26
Mysterious_fea Messages postés 401 Date d'inscription vendredi 29 juin 2007 Statut Membre Dernière intervention 23 mars 2013 35
16 janv. 2008 à 22:01
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
0
Réponse 4 / 26
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
17 janv. 2008 à 13:12
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);
0

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 vendredi 29 juin 2007 Statut Membre Dernière intervention 23 mars 2013 35
18 janv. 2008 à 19:31
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
0
Réponse 6 / 26
Mysterious_fea Messages postés 401 Date d'inscription vendredi 29 juin 2007 Statut Membre Dernière intervention 23 mars 2013 35
18 janv. 2008 à 19:49
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 !
0
Réponse 7 / 26
Mysterious_fea Messages postés 401 Date d'inscription vendredi 29 juin 2007 Statut Membre Dernière intervention 23 mars 2013 35
20 janv. 2008 à 15:44
Alors, what about implode ?
0
Réponse 8 / 26
Mysterious_fea Messages postés 401 Date d'inscription vendredi 29 juin 2007 Statut Membre Dernière intervention 23 mars 2013 35
20 janv. 2008 à 18:55
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
et 
a.lien01:hover
mais ça marche pas !
0
Réponse 9 / 26
Mysterious_fea Messages postés 401 Date d'inscription vendredi 29 juin 2007 Statut Membre Dernière intervention 23 mars 2013 35
20 janv. 2008 à 19:03
No résolu !
0
Réponse 10 / 26
Mysterious_fea Messages postés 401 Date d'inscription vendredi 29 juin 2007 Statut Membre Dernière intervention 23 mars 2013 35
22 janv. 2008 à 20:47
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
0
Réponse 11 / 26
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
24 janv. 2008 à 19:40
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).
0
Réponse 12 / 26
Mysterious_fea Messages postés 401 Date d'inscription vendredi 29 juin 2007 Statut Membre Dernière intervention 23 mars 2013 35
24 janv. 2008 à 22:04
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+
0
Réponse 13 / 26
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
24 janv. 2008 à 22:11
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' ?
0
Réponse 14 / 26
Mysterious_fea Messages postés 401 Date d'inscription vendredi 29 juin 2007 Statut Membre Dernière intervention 23 mars 2013 35
25 janv. 2008 à 19:54
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
0
Réponse 15 / 26
Mysterious_fea Messages postés 401 Date d'inscription vendredi 29 juin 2007 Statut Membre Dernière intervention 23 mars 2013 35
25 janv. 2008 à 21:49
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
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
25 janv. 2008 à 21:52
je ne sais pas.

tu utilises quoi comme code ?
0
Mysterious_fea Messages postés 401 Date d'inscription vendredi 29 juin 2007 Statut Membre Dernière intervention 23 mars 2013 35 > Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016
25 janv. 2008 à 22:14
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...
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922 > Mysterious_fea Messages postés 401 Date d'inscription vendredi 29 juin 2007 Statut Membre Dernière intervention 23 mars 2013
25 janv. 2008 à 22:18
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;
}
0
Mysterious_fea Messages postés 401 Date d'inscription vendredi 29 juin 2007 Statut Membre Dernière intervention 23 mars 2013 35 > Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016
25 janv. 2008 à 22:22
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.
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922 > Mysterious_fea Messages postés 401 Date d'inscription vendredi 29 juin 2007 Statut Membre Dernière intervention 23 mars 2013
25 janv. 2008 à 22:23
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;} ?
0
Réponse 16 / 26
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
25 janv. 2008 à 21:51
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' )
0
Réponse 17 / 26
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 778
26 janv. 2008 à 02:12
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…

--
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
26 janv. 2008 à 11:11
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.
0
Réponse 18 / 26
Mysterious_fea Messages postés 401 Date d'inscription vendredi 29 juin 2007 Statut Membre Dernière intervention 23 mars 2013 35
26 janv. 2008 à 21:40
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
0
Réponse 19 / 26
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
27 janv. 2008 à 18:35
salut,

Par contre, pour le point d'interrogation t'aurais une piste STP ?
je ne vois pas de quoi tu parles…
(o_o)'
0
Réponse 20 / 26
Mysterious_fea Messages postés 401 Date d'inscription vendredi 29 juin 2007 Statut Membre Dernière intervention 23 mars 2013 35
28 janv. 2008 à 21:02
Point d'interrogation : le cadre qui s'affiche onmouseover le petit point d'interrogation pour plus de précisions. ici
Merci
0

Discussions similaires

Mettre Facebook Messenger en français
bleumarine2009 -
lauredine61 -

1 réponse
Logiciel pour modifier les paroles d'une chanson
Wiilløw -
ryko1820 -

2 réponses