Sujet Précédent Sujet Suivant

Déroulement aprés click ?

Résolu/Fermé
Officieum Messages postés 17 Date d'inscription samedi 2 octobre 2004 Statut Membre Dernière intervention 28 novembre 2014 - 29 avril 2008 à 00:41
 cv - 13 mai 2008 à 09:55
Bonjour,

Je suis vraiment débutant dans le domaine du javascript, j'ai déja créé des sites mais exclusivement en html pour le coté utilisateur.
Le html ayant ses limites, je suis aujourd'hui confronté à un problème...

Le problème de mon problème est qu'il est dificilement définissable par des mots et qu'en conséquence, mes recherches n'ont donné aucun résultat, ou en tout cas, aucun résultat que je sois capable d'exploiter.

Je m'adresse donc à vous...

Voila, je souhaite pouvoir afficher des parties de ma page quand l'utilisateur click sur un bouton, un peu comme un menu déroulant sauf que mes parties contiennent du html (genre tableau, image...) [L'idéal étant que ces parties soient contenues dans des pages externes, appelées via un include par exemple ? je ne sais pas si c'est possible.].

ex :
http://translate.google.com/translate_t?langpair=en|fr

lorsqu'on clique sur "Proposer une meilleure traduction" aprés avoir demandé une traduction quelconque.
c'est à peu prés ce que je désire... mais dans ma page je voudrais pouvoir le reproduire pour un nombre inderterminé de rubriques avec possibilité pour l'utilisateur d'avoir ca :

+Titre1
-Titre 2
texte2
+Titre3

ou

-Titre 1
texte2
-Titre 2
texte2
+Titre 3

...

enfin vous comprenez ce que je veux dire, ce qui exclu une page diférente avec a chaque fois une rubrique déployée !

J'espère que je suis clair.
J'ai demandé à un ami qui ma expliqué que c'était surement du javascript ou du AJAX, c'est pourquoi je vous demande de l'aide. Je vous précise tout de suite que je suis vraiment noob en la matière et qu'une réponse du genre
"et bien... tu na qu'a utiliser la fonction view3forsercond.alpha" ne m'apporterait pas beaucoup d'aide.

Merci d'avance.

Officieum
A voir également:

18 réponses

Réponse 1 / 18
foufita Messages postés 68 Date d'inscription mercredi 29 août 2007 Statut Membre Dernière intervention 10 mars 2014 8
29 avril 2008 à 12:00
essayer ca :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script language="javascript">
function changeSt(element, val )
{
//alert(element);


if(val=="add")
{
document.getElementById(element).style.cssText="display:block";

}
else
{
document.getElementById(element).style.cssText="display:none";
}
}
</script>
<style>
.tdcache
{
display:none;
padding-right: 30px;
padding-left: 30px;
}
</style>
</head>
<body>
<table>
<tr>
<td align="left" onClick="changeSt('wafa','add')" id="1">clicquer ici</td>
</tr>
</table>
<div class="tdcache" id="wafa">
Mondial Events Motivation Consulting (MEMC) organise, gère et délivre une large gamme de prestations événementielles destinée aux entreprises, organismes publiques et aux secteurs associatifs et caritatifs. Qu’il s’agisse d’optimiser votre présence à un salon commercial, de mettre en valeur vos nouveaux produits ou de maximiser le potentiel de vos employés, MEMC a la stratégie adéquate à vos enjeux.

</div>
</body>
</html>
1
Réponse 2 / 18
Officieum Messages postés 17 Date d'inscription samedi 2 octobre 2004 Statut Membre Dernière intervention 28 novembre 2014 4
29 avril 2008 à 09:29
up
0
Réponse 3 / 18
foufita Messages postés 68 Date d'inscription mercredi 29 août 2007 Statut Membre Dernière intervention 10 mars 2014 8
29 avril 2008 à 10:29
assalamou alaykom wa rahmatou allah wa barakatouhou !(tunisienne)
la solution pour ton prob est AJAX
le lien ci-dessou est un tres bon exemple qui s'adapte à ce que tu veut:

http://dev.jquery.com/view/trunk/plugins/accordion/demo/
0
Réponse 4 / 18
foufita Messages postés 68 Date d'inscription mercredi 29 août 2007 Statut Membre Dernière intervention 10 mars 2014 8
29 avril 2008 à 10:43
ca c'est un exemple que tu peut tester
( bien sur tu doit telecharger les fichier .js et .css exemple http://dev.jquery.com/view/trunk/plugins/accordion//lib/jquery.js et ci de suite)

code html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jQuery UI Accordion</title>

<link rel="stylesheet" href="demo.css" />

<script type="text/javascript" src="../lib/jquery.js"></script>
<script type="text/javascript" src="../lib/chili-1.7.pack.js"></script>

<script type="text/javascript" src="../lib/jquery.easing.js"></script>
<script type="text/javascript" src="../lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="../jquery.accordion.js"></script>

<script type="text/javascript">
jQuery().ready(function(){
// simple accordion
jQuery('#list1a').accordion();

// second simple accordion with special markup

// highly customized accordion

// first simple accordion with special markup


// bind to change event of select to control first and seconds accordion
// similar to tab's plugin triggerTab(), without an extra method
var accordions = jQuery('#list1a');

jQuery('#switch select').change(function() {
accordions.accordion("activate", this.selectedIndex-1 );
});
jQuery('#close').click(function() {
accordions.accordion("activate", -1);
});
jQuery('#switch2').change(function() {
accordions.accordion("activate", this.value);
});
jQuery('#enable').click(function() {
accordions.accordion("enable");
});
jQuery('#disable').click(function() {
accordions.accordion("disable");
});
jQuery('#remove').click(function() {
accordions.accordion("destroy");
wizardButtons.unbind("click");
});
});
</script>

</head>
<body>

<!--<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-accordion/">jQuery accordion Plugin</a> Demo</h1>-->
<div id="main">

<fieldset>
<legend>Standard, container is a div, header is h3 and content div and nested p</legend>

<div class="basic" style="float:left;" id="list1a">
<a>There is one obvious advantage:</a>
<div>
<p>
You've seen it coming!<br/>
Buy now and get nothing for free!<br/>
Well, at least no free beer. Perhaps a bear,<br/>
if you can afford it.
</p>
</div>
<a>Now that you've got...</a>
<div>
<p>
your bear, you have to admit it!<br/>
No, we aren't selling bears.
</p>
</div>
<a>Rent one bear, ...</a>
<div>
<p>
get two for three beer.
</p>
<p>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
Period.
</p>
</div>
</div>


<div id="log"><div><strong>Log</strong></div></div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2623402-1";
urchinTracker();
</script>
</body>
</html>
0

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

Posez votre question
Réponse 5 / 18
Officieum Messages postés 17 Date d'inscription samedi 2 octobre 2004 Statut Membre Dernière intervention 28 novembre 2014 4
29 avril 2008 à 11:02
Bonjour,

Merci pour cette réponse, c'est pas mal mais ca n'est pas exactement ce que je cherche et je n'arrive pas vraiment à l'adapter à mon cas... enfin si je ne trouve pas mieux, je ferais avec mais bon.

Es-t-on forcé de passer par AJAX ?

Dans le code source de mon exemple google, j'ai isolé ceci :

<span style="visibility:visible;" id=zippyspan onclick="_rolldown()"><img src="http://www.google.com/mb/plus_sm.gif" style="margin-right: 0.33em">Proposer une meilleure traduction</span></td></tr></table></form><div id=thanks style="height:0px; display: none"><span style="padding:2px; background-color:#ff9">Merci de votre contribution à Google Traduction.</span></div><form action="/translate_suggestion" target=hidden_iframe method=post id=suggestion_form style="height:0px; overflow:hidden; display:none" class=highlight onsubmit="_submitroll()"><input type=hidden name=hl value="fr"><input type=hidden name=oe value="UTF8"><input type=hidden name=text value="sds"><input type=hidden name=langpair value="en|fr"><input type=hidden name=gtrans value="SDS"><table id=suggesttable><tr><td width=49%><span style="float: right; font-size:smaller">Nous tiendrons compte de votre suggestion pour améliorer la qualité des traductions lors des futures mises à jour de notre système.</span></td><td width=2% rowspan=2></td><td id=utranscell width=49%><textarea name=utrans wrap=SOFT dir="ltr" rows=5 id=suggestion>SDS</textarea></td></tr><tr><td></td><td align=right><input type=submit value="Envoyer"></td></tr></table></form>

est ce que quelqu'un y comprend quelque chose... j'ai essayé de mettre ca dans une page mais ca ne marche pas.. il doit manquer la fonction ou je ne sais quoi ... ?

Merci de votre aide.

Officieum
0
Réponse 6 / 18
Officieum Messages postés 17 Date d'inscription samedi 2 octobre 2004 Statut Membre Dernière intervention 28 novembre 2014 4
29 avril 2008 à 12:29
Merci pour ce code...
Je m'approche du but.
Voici ce que j'ai fais :
CODE HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script language="javascript">
function changeSt(element, val )
{
//alert(element);


if(val=="add")
{
document.getElementById(element).style.cssText="display:block";

}
else
{
document.getElementById(element).style.cssText="display:none";
}
}
</script>
<style>
.tdcache
{
display:none;
padding-right: 30px;
padding-left: 30px;
}
</style>
</head>
<body>
<table>
<tr>
<td align="left" onClick="changeSt('sujet1','add')" id="1">sujet1</td>
</tr>
</table>
<div class="tdcache" id="sujet1">
texte1
</div>

<table>
<tr>
<td align="left" onClick="changeSt('sujet2','add')" id="2">sujet2</td>
</tr>
</table>
<div class="tdcache" id="sujet2">
texte2
</div>

<table>
<tr>
<td align="left" onClick="changeSt('sujet3','add')" id="3">sujet3</td>
</tr>
</table>
<div class="tdcache" id="sujet3">
texte3
</div>

</body>
</html>
FIN CODE HTML

VISIBLE ICI :
http://sous-titres.info/test.htm

Cependant, j'aimerai que quand quand texte1 est affiché, si l'on reclick sur sujet1, alors texte1 disparaisse.
Est-ce possible ?

Enfin j'imagine que pour la mise en page je doit utiliser une feuille CSS ? la mise en page directement à l'interieur ne marche pas. Est-il possible d'utiliser un include par exemple qui appel la page contenant texte1 avec sa mise en page.. étant donné que texte1 contiendra surement du php.

Suis-je clair ?

Merci beaucoup pour ton aide.

Officieum
0
Réponse 7 / 18
Officieum Messages postés 17 Date d'inscription samedi 2 octobre 2004 Statut Membre Dernière intervention 28 novembre 2014 4
29 avril 2008 à 12:39
En fait, j'ai résolu le problème du include par moi même. Il ne me manque plus que le moyen de faire disparaitre le texte lorsque l'on recilck sur le bouton.

Voila
0
Réponse 8 / 18
foufita Messages postés 68 Date d'inscription mercredi 29 août 2007 Statut Membre Dernière intervention 10 mars 2014 8
29 avril 2008 à 13:00
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script language="javascript">
function changeSt(element, btn)
{
//alert(element);
source=document.getElementById(btn).src.substring((document.getElementById(btn).src.lastIndexOf("/")+1),(document.getElementById(btn).src.length-4));

if(source=="add")
{
document.getElementById(element).style.cssText="display:block";
document.getElementById(btn).src="drop.png";

}
else
{
document.getElementById(element).style.cssText="display:none";
document.getElementById(btn).src="add.png";

}
}
</script>
<style>
.tdcache
{
display:none;
padding-right: 30px;
padding-left: 30px;
}
</style>
</head>
<body>
<table>
<tr>
<td align="left" onClick="changeSt('wafa','add')" id="1"><img src="add.png" alt="" id="add"/></td>
</tr>
</table>
<div class="tdcache" id="wafa">
Mondial Events Motivation Consulting (MEMC) organise, gère et délivre une large gamme de prestations événementielles destinée aux entreprises, organismes publiques et aux secteurs associatifs et caritatifs. Qu’il s’agisse d’optimiser votre présence à un salon commercial, de mettre en valeur vos nouveaux produits ou de maximiser le potentiel de vos employés, MEMC a la stratégie adéquate à vos enjeux.

</div>
</body>
</html>
0
Réponse 9 / 18
Officieum Messages postés 17 Date d'inscription samedi 2 octobre 2004 Statut Membre Dernière intervention 28 novembre 2014 4
29 avril 2008 à 13:25
Ton code ne fonctionne pas : "erreur sur la page" et j'ai regardé mais je ne suis pas en mesure de le corriger.
Merci pour ton aide.
0
Réponse 10 / 18
foufita Messages postés 68 Date d'inscription mercredi 29 août 2007 Statut Membre Dernière intervention 10 mars 2014 8
29 avril 2008 à 14:21
ca marche tres bien chez moi
tu doit avoir une petite image "add.png" et une autre "drop.png" se sont des icone pour pouvoir tester
decrit moi l'erreur qui s'affiche chez toi
0
Réponse 11 / 18
Officieum Messages postés 17 Date d'inscription samedi 2 octobre 2004 Statut Membre Dernière intervention 28 novembre 2014 4
29 avril 2008 à 14:50
Et bien oui, j'avais créé ces deux icones...
Quand je lance la page, j'ai bien mon iconne add qui s'affiche mais lorsque je click dessus rien ne se passe et mon navigateur m'indique en bas à gauche "erreur sur la page". Voila
Pourquoi passes par des images ? c'est réelement de texte que j'ai besoin moi !

Enfin... voyons déja ce problème.

Merci.
0
Réponse 12 / 18
foufita Messages postés 68 Date d'inscription mercredi 29 août 2007 Statut Membre Dernière intervention 10 mars 2014 8
29 avril 2008 à 14:58
au lieu des image c'est du texte

ca marche chez moi :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script language="javascript">
function changeSt(element, btn,idhidden)
{
//alert(element);
if(document.getElementById(idhidden).value=="")
{
document.getElementById(element).style.cssText="display:block";
document.getElementById(idhidden).value="visible";
}
else
{
document.getElementById(element).style.cssText="display:none";
document.getElementById(idhidden).value=""

}
}
</script>
<style>
.tdcache
{
display:none;
padding-right: 30px;
padding-left: 30px;
}
</style>
</head>
<body>
<table>
<tr>
<td align="left" onClick="changeSt('wafa','add','hidden')" id="1"><input name="test" type="hidden" value="" id="hidden"/>cliquer ici</td>
</tr>
</table>
<div class="tdcache" id="wafa">
Mondial Events Motivation Consulting (MEMC) organise, gère et délivre une large gamme de prestations événementielles destinée aux entreprises, organismes publiques et aux secteurs associatifs.
</div>
</body>
</html>
0
Réponse 13 / 18
Officieum Messages postés 17 Date d'inscription samedi 2 octobre 2004 Statut Membre Dernière intervention 28 novembre 2014 4
29 avril 2008 à 15:15
Ca marche, c'est super...
Je vais voir si j'arrive à l'adapter parfaitement mais ca devrait le faire... merci beaucoup.

Par contre si je met ca sur un site, il demandera forcément en haut :
"Pour vous aidez à proteger votre ordinateur, internet explorer à bloké ..." ?

Merci.
0
Réponse 14 / 18
foufita Messages postés 68 Date d'inscription mercredi 29 août 2007 Statut Membre Dernière intervention 10 mars 2014 8
29 avril 2008 à 15:22
j'ai rien compris,explique moi encore
0
Réponse 15 / 18
Officieum Messages postés 17 Date d'inscription samedi 2 octobre 2004 Statut Membre Dernière intervention 28 novembre 2014 4
29 avril 2008 à 15:29
En fait un petit problème :

ex ici : http://sous-titres.info/TESTfinal.htm

quand je click sur le premier, il se déroule mais une fois qu'il est déroulé, si je veux dérouler le second je doit faire 2 clics sur le second.. ?
Je ne comprend pas pourquoi.

Merci beaucoup de m'aider.
0
Réponse 16 / 18
foufita Messages postés 68 Date d'inscription mercredi 29 août 2007 Statut Membre Dernière intervention 10 mars 2014 8
29 avril 2008 à 15:39
les id des hidden doivent etre differents

code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script language="javascript">
function changeSt(element, idhidden)
{
//alert(element);
if(document.getElementById(idhidden).value=="")
{
document.getElementById(element).style.cssText="display:block";
document.getElementById(idhidden).value="visible";
}
else
{
document.getElementById(element).style.cssText="display:none";
document.getElementById(idhidden).value=""

}
}
</script>
<style>
.tdcache
{
display:none;
padding-right: 30px;
padding-left: 30px;
}
</style>
</head>
<body>

<table>
<tr>
<td align="left" onClick="changeSt('text1','hidden1')" id="1"><input name="form1" type="hidden" value="" id="hidden1"/>
sujet1</td>
</tr>
</table>

<div class="tdcache" id="text1">
texte1
</div>

<table>
<tr>
<td align="left" onClick="changeSt('text2','hidden2')" id="2"><input name="form2" type="hidden" value="" id="hidden2"/>
sujet2</td>
</tr>
</table>
<div class="tdcache" id="text2">
texte2
</div>

<table>
<tr>
<td align="left" onClick="changeSt('text3','hidden3')" id="3"><input name="form3" type="hidden" value="" id="hidden3"/>

sujet3</td>
</tr>
</table>
<div class="tdcache" id="text3">
texte3
</div>

</body>
</html>
0
Réponse 17 / 18
Officieum Messages postés 17 Date d'inscription samedi 2 octobre 2004 Statut Membre Dernière intervention 28 novembre 2014 4
29 avril 2008 à 16:02
parfait, merci
0
Réponse 18 / 18
cv
13 mai 2008 à 09:55
Bonjour,

Est il possible de déterminer une hauteur fixe de l'ensemble et de faire apparaitre un ascenseur quand le liste dans un item et plus longue ?
0

Discussions similaires

Site de confiance ou non ?
mlle_so -
Jaffeli -

25 réponses
MSI CLICK BIOS 5
Theo4612 -
john99 -

9 réponses
Info visual-click.com
monts59 -
mpmp93 -

1 réponse
problème avec ad doubleclick sur android
monnalie -
bazfile -

6 réponses
Mon msi Click bios 5 se lance toute seul !!!
Tom -
bazfile -

1 réponse