Problème de script avec javascript : Résolu
Forum Programmation : Problème de script avec javascript : Résolu
Bonjour,
Je recontre un problème avec un de mes script javascript dans le cas suivant.
Code Html :
<table border="0" cellspacing="0" cellpadding="0" class="actualite">
<tr>
<th width="344" align="left" scope="col" class="titre_actu">Titre de chaque actualité<br />
<hr />
</th>
<th width="24" align="left" valign="top" scope="col"><img src="image/interface/plus.png" width="17" height="17" class="plus"/></th>
</tr>
<tr>
<th colspan="2" align="left" valign="top" class="text_actu" scope="row"><div><br />
Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla </div><br /></th>
</tr>
</table>
Mon problème c'est que je cherche à cacher la balise div souligné.
J'ai pour cela ce script :
jQuery() .ready(function(){
$(".plus" ).next("div" ).hide();
});
Ce script fonctionne quand la balise div se trouve juste après l'image contenant la class "plus" mais le problème c'est que ca change la mise en forme de mon tableau or je souhaiterais garder la balise div à cette place pour garder la meme mise en forme.
J'appel donc vos connaissance pour résoudre mon problème de n'importe quel maniere.
Le but, au final, est de créer le même systeme que sur le site officiel de wow, c'est à dire le même systeme de News : "A l'affiche" ( sur leur site )
En cliquant sur le bouton plus, ca doit laisser apparaitre le reste de la news et si on reclique, la fermé.
J'attend avec impatience vos réponses, si ca manque de précision ou si vous ne comprenez pas, veuillez le signalé. Merci d'avance à vos futures réponses.
Message édité par kepsylis le 22-12-2008 à 10:47:09
Ce sujet a été déplacé de la catégorie Internet-Reseaux vers la catégorie Programmation par Sam85
Le langage SMS sera automatiquement effacé.
Aucune aide ne sera donnée par MP.
Répondre à sam85
je ne comprends pas très bien la question. Déjà pour cacher une div tu peux faire ça:
soit <div style="display:none">..</div>
soit par js: <div id="tadiv">..</div> puis js: document.getElementById('tadiv').style.display="none"
je ne pense pas que jQuery soit utile ici..
Après il pour ton histoire de mise en page explique mieux. Si tu caches la div ça va faire remonter tout ce qui a après. C'est ça ton problème?!
Donc premierement Jquery, je l'ai utilisé pour pouvoir utiliser des effets. Comme SlideUp, SlideDown pour que cela soit moin brut.
Apres l'histoire de mise en forme du tableau :
Je veux que ca donne ca
titre de l'actualité symbole +
text de lactualité sur plusisuer ligne
text de lactualité sur plusisuer ligne
text de lactualité sur plusisuer ligne
le symbole + me permettra de laisser apparaitre que les titres et ouvrir le contenu d'une actualité quand on clique dessus.
La mise en forme du tableau se déregle quand je met la balise div du texte directement a la suite, juste apres le symbole +
Je ne sais pas si on peut faire ca avec du CSS mais si c'est possible également je suis preneur.
Je vien de testé ton code js, bien entendu il fonctionne mais maintenant je souhaiterais quand cliquant sur mon symbole +, la div ( que tu a nommé tadiv ) s'ouvre et se referme pour laisser apparaitre son contenu.
alors, tu peux utiliser une fonction js du genre:
function affiche(){
obj = document.getElementById('tadiv');
lien = document.getElementById('tonlien');
if(obj.style.display == "none" ){
obj.style.display = "block";
lien.innerHTML = "-";
}
else {
obj.style.display = "none";
lien.innerHTML = "+";
}
}
et ton +: <a href="javascript:affiche()" id="tonlien">+</a>
ce qui donne chez moi, sans déformation du tableau (à part un agrandissement vertical!):
<html>
<head>
<script type="text/javascript">
function affiche(){
obj = document.getElementById('tadiv');
lien = document.getElementById('tonlien');
if(obj.style.display == "none" ){
obj.style.display = "block";
lien.innerHTML = "-";
}
else {
obj.style.display = "none";
lien.innerHTML = "+";
}
}
</script>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" class="actualite">
<tr>
<th width="344" align="left" scope="col" class="titre_actu">Titre de chaque actualité<a href="javascript:affiche()" id="tonlien">+</a><br />
<hr />
</th>
<th width="24" align="left" valign="top" scope="col"><img src="image/interface/plus.png" width="17" height="17" class="plus"/></th>
</tr>
<tr>
<th colspan="2" align="left" valign="top" class="text_actu" scope="row"><div id="tadiv" style="display:none"><br />
Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla Blablabla </div><br /></th>
</tr>
</table>
</body>
</html>
Message édité par sleepless2101 le 21-12-2008 à 16:27:23
Désolé mais ton script présente quelques petis problème.
Apres actualisation, mais div ( tadiv ) sont directement ouverte, or j'aimerais quel soit fermé au debut ( désolé de ne pas l'avoir précisé ) et ensuite ton script ne fonctionne pas pour plusieurs "+" :
titre de l'actualité symbole +
text de lactualité sur plusisuer ligne
text de lactualité sur plusisuer ligne
text de lactualité sur plusisuer ligne
titre de l'actualité symbole +
text de lactualité sur plusisuer ligne
text de lactualité sur plusisuer ligne
text de lactualité sur plusisuer ligne
titre de l'actualité symbole +
text de lactualité sur plusisuer ligne
text de lactualité sur plusisuer ligne
text de lactualité sur plusisuer ligne
Les autres + ne fonctionne pas. En effet ceci ont le bon effet mais sur le premier. C'est a dire, en appuyant sur le deuxieme ou le troisieme, c'est le premier qui se plie et déplie.
Excuse moi, seul le dernier problème subsiste. J'ai pas vu la ligne de code display:none
bon, je crois que tu n'as pas compris comment marche le web. c'est comme à l'école, on apprend, on applique.
toi, tu ne connais rien, tu ne cherches pas. mon script fonctionne très bien, il te faut l'adapter à ce que tu veux.
alors, ceci sera ma dernière réponse.
un id repère un élément. il est propre à un élément. plusieurs éléments ne peuvent pas avoir le même id. donc tu vas commencer par donner un id à chaque + (genre lien1, lien2). puis un id à chaque div d'info (genre div1, div2). un truc assez logique consisterait à faire correspondre lien1 avec div1, lien2 avec div2, ..
je vais considérer que tu procèdes comme ça.
donc tu vas remplacer <a href="javascript:affiche()" id="tonlien">+</a>
par <a href="javascript:affiche('1')" id="lien1">+</a>, mettre comme id pour la div correspondante div1 puis modifier la fonction js en
function affiche(i){
obj = document.getElementById('div'+i);
lien = document.getElementById('lien'+i);
if(obj.style.display == "none" ){
obj.style.display = "block";
lien.innerHTML = "-";
}
else {
obj.style.display = "none";
lien.innerHTML = "+";
}
}
ce n'est pas la peine de répondre à ce post à part pour dire "merci", au lieu de "ça marche pas".
dans ton moteur de recherche tu tapes "apprendre javascript", tu trouveras tout ce qu'il te faut.
c*n de moi de t'avoir aidé, mais je finis parce que j'ai commencé, en retenant bien ton pseudo pour ne plus avoir à te répondre.
adieu, looser.
Je vais te dire simplement merci car je respecte le temps que tu a passé pour m'expliqué mais comme j'ai dit au début je n'ai pas appris le javascript donc tu n'es pas obligé de réagir comme un goss de 12 ans en m'insultant de looser.
bon ça va, je me suis un peu emporté devant ton manque de combativité; mais sérieusement si tu veux faire des petits scripts comme ça js s'apprend très facilement, tu verras; par contre si tu veux développer un truc du genre jQuery ça va se corser..
alors, ça marche, t'as réussi à le mettre en place?
merci de réagir comme ca. J'apprécie sincerement. Et effectivement, je ne suis pas allez tres loin dans mes recherche. Mais je n'ai pas envie d'en apprendre beaucoup car je ne m'en sert pas tres souvent. C'est vrai que ce n'est pas un script tres compliqué.
Et pour ton script, il marque en mettant les id comme tu a dit. Seulement, je voulais un script générale pour ne pas entrer div1 - lien1; etc...
pour pouvoir l'adapter plus facilement en php et faire une zone d'administration par la suite. Mais ca va, je vois comment faire maintenant.
Merci encore.
Pour un meilleur design, le + et le - , dans le code js :
lien.innerHTML = "+";
lien.innerHTML = "-";
Est-ce possible de les remplacer par des images ?
bah si tu utiliser php/sql, chacun de tes articles a un numéro d'enregistrement dans la table, t'as qu'à utiliser ce numéro lors ce la génération de la page.. le codeur étant fainéant, l'utilisation d'une boucle pour générer une page, avec une incrémentation automatique est toujours bienvenue!
pour les images no pb: tu remplaces "+" par "<img src=\"adresse_pour_image_plus.jpg\">" et "-" par "img src=\"adresse_pour_ton_image_moins.jpg\">"
voilou
Message édité par sleepless2101 le 22-12-2008 à 00:10:18
Oui pour le php ca ira, mais lorsque je remplace le + et le - ici lien.innerHTML = "+";
Cela me dit qu'il y a une erreur a cette ligne.
Mais bon comme tu me l'a tres bien fait remarqué, je manque de combativité donc je vais allez chercher.
Bye bye et merci.
regarde un peu mieux ce que j'ai mis:
"<img src=\"adresse_pour_image_plus.jpg\">"
on utilise les \ comme caractère d'échappement...
tu peux aussi mettre
"<img src='adresse_pour_image_plus.jpg'>" qui ne pose pas de problème
donc tu mets comme ça:
lien.innerHTML = "<img src=\"adresse_pour_image_moins.jpg\" >";
et
lien.innerHTML = "<img src=\"adresse_pour_image_plus.jpg\">";
et pour le lien par défaut, ça reste classique:
a href="javascript:affiche('1')" id="lien1"><img src="adresse_pour_image_plus.jpg"></a>
l'utilisation des " et ' dans les chaines de caractères est parfois pénible, pour t'aider regarde un code source de page avec un colorateur syntaxique, par exemple avec Firefox. dans une page mets un truc du genre document.getElementById('id').innerHTML = "il a dit "kikou"..";; .. tu risques d'avoir une petite erreur! il faudra mettre "il a dit \"kikou\"..";
pour éditer ton code, je te conseille notepad++, il colore le code, c'est pratique!
Bon j'ai qu'une chose a dire : Tout marche nickel !
Effectivement les antislash ont bien jouer leur rôle.
J'utilise souvent le code source d'autres pages pour apprendre mais comme je t'ai dit je ne me sert pas beaucoup du js donc je n'ai jamais vraiment regarder ca.
Bonne continuation et merci pour ton aide qui m'a été précieuse !
de rien; pense à fermer le sujet en éditant ton premier post, et rajoutant résolu au sujet!
Il y a 1922 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.
