Posez votre question Signaler

Script AJAX pour changer contenu d'un cadre

Mysterious_fea 406Messages postés 29 juin 2007Date d'inscription 22 août 2011Dernière intervention - Dernière réponse le 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

Script AJAX pour changer contenu d'un cadre »

Suggestions

Script AJAX pour changer contenu d'un cadre
Changer le contenu d'un cadre depuis un menu (Résolu) » Forum
Mozilla Firefox-polices et couleurs » Fiches pratiques
Javascript - Effacer un champ de formulaire lors du clic (focus » Fiches pratiques
Modifier contenu d'iframe (Résolu) » Forum
Délimiter la zone texte dans un cadre en html (Résolu) » Forum

Plus

Réponse

Mysterious_fea 406Messages postés 29 juin 2007Date d'inscription 22 août 2011Dernière intervention 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 ?

Ajouter un commentaire - Site web

Réponse

Dalida 6694Messages postés 3 mars 2007Date d'inscription 16 janvier 2011Dernière intervention 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 ?

Ajouter un commentaire - Site web

Réponse

Mysterious_fea 406Messages postés 29 juin 2007Date d'inscription 22 août 2011Dernière intervention 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

Ajouter un commentaire - Site web

Réponse

Dalida 6694Messages postés 3 mars 2007Date d'inscription 16 janvier 2011Dernière intervention 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);

Ajouter un commentaire - Site web

Réponse

Mysterious_fea 406Messages postés 29 juin 2007Date d'inscription 22 août 2011Dernière intervention 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

Ajouter un commentaire - Site web

Réponse

Mysterious_fea 406Messages postés 29 juin 2007Date d'inscription 22 août 2011Dernière intervention 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 !

Ajouter un commentaire - Site web

Réponse

Mysterious_fea 406Messages postés 29 juin 2007Date d'inscription 22 août 2011Dernière intervention 20 janv. 2008 à 15:44

Alors, what about implode ?

Ajouter un commentaire - Site web

Réponse

Mysterious_fea 406Messages postés 29 juin 2007Date d'inscription 22 août 2011Dernière intervention 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

a.lien01:hover

mais ça marche pas !

Ajouter un commentaire - Site web

Réponse

Mysterious_fea 406Messages postés 29 juin 2007Date d'inscription 22 août 2011Dernière intervention 20 janv. 2008 à 19:03

No résolu !

Ajouter un commentaire - Site web

Réponse

Mysterious_fea 406Messages postés 29 juin 2007Date d'inscription 22 août 2011Dernière intervention 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

Ajouter un commentaire - Site web

Réponse

Dalida 6694Messages postés 3 mars 2007Date d'inscription 16 janvier 2011Dernière intervention 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).

Ajouter un commentaire - Site web

Réponse

Mysterious_fea 406Messages postés 29 juin 2007Date d'inscription 22 août 2011Dernière intervention 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+

Ajouter un commentaire - Site web

Réponse

Dalida 6694Messages postés 3 mars 2007Date d'inscription 16 janvier 2011Dernière intervention 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' ?

Ajouter un commentaire - Site web

Réponse

Mysterious_fea 406Messages postés 29 juin 2007Date d'inscription 22 août 2011Dernière intervention 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

Ajouter un commentaire - Site web

Réponse

Mysterious_fea 406Messages postés 29 juin 2007Date d'inscription 22 août 2011Dernière intervention 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

Ajouter un commentaire - Site web

Afficher les 9 commentaires

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

Dalida- 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;
}

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

Dalida- 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;} ?

Mysterious_fea- 25 janv. 2008 à 22:26

Ca ne change rien (j'ai défini position:relative à la div du contenu). Mon lien se trouve dans une liste à puce. Faut-il définir la position à la liste à puce ?

Dalida- 25 janv. 2008 à 22:38

possible que le lien ait besoin d'être à {display:block;}.

sinon rappelle moi l'URL, je regarderai.

Mysterious_fea- 25 janv. 2008 à 23:31

Voilà le lien.
Comme tu le vois le cadre se place à gauche toute...

Dalida- 25 janv. 2008 à 23:43

oups, avais pas bien lu dès le départ.

en CSS tu ne peux pas le placer par rapport au curseur, uniquement par rapport au cadre conteneur.

si tu le veux sur le curseur il faut le faire en JS.

Réponse

Dalida 6694Messages postés 3 mars 2007Date d'inscription 16 janvier 2011Dernière intervention 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' )

Ajouter un commentaire - Site web

Réponse

Gihef 5246Messages postés 20 juillet 2005Date d'inscription 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…

--

Ajouter un commentaire

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

Réponse

Mysterious_fea 406Messages postés 29 juin 2007Date d'inscription 22 août 2011Dernière intervention 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

Ajouter un commentaire - Site web

Réponse

Dalida 6694Messages postés 3 mars 2007Date d'inscription 16 janvier 2011Dernière intervention 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)'

Ajouter un commentaire - Site web

Réponse

Mysterious_fea 406Messages postés 29 juin 2007Date d'inscription 22 août 2011Dernière intervention 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

Ajouter un commentaire - Site web

1 2

Répondre au sujet

Posez votre question

Dossier à la une

Passage au tout numérique : quel coût pour les particuliers ?

Passage au tout numérique : quel coût pour les particuliers ?

Combien cela coûte-t-il au total ? Quelles aides apportent l'état et les acteurs du marché pour alléger cette charge non choisie ? Tous les détails sur Commentçamarche.net.

Script AJAX pour changer contenu d'un cadre

Script AJAX pour changer contenu d'un cadre »

Passage au tout numérique : quel coût pour les particuliers ?