Sujet Précédent Sujet Suivant

Alternance entre divs

Trashful Messages postés 8 Date d'inscription samedi 3 octobre 2009 Statut Membre Dernière intervention 3 octobre 2009 - 3 oct. 2009 à 10:13
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 - 3 oct. 2009 à 12:02
Bonjour à tous,

J'ai un petit problème et j'espère que votre communauté sera en mesure de corriger mes petites erreurs.

N'étant pas un professionnel du javascript, mon code est un peu bancal.
En théorie, ce que je veux faire, c'est afficher un div quand je clique sur un lien, puis ouvrir un autre div à la place en cliquant sur un autre lien. Et enfin pouvoir fermer le div ouvert en cliquant sur "cacher".

Voilà mon petit code qui me permet de tout faire, sauf de fermer mon div 2. 

function getcom(id, i) {
if(!isNaN(id)) document.getElementById('c' + id).style.height = '0px';
else  { 
var reg = /c/;
var str = id;
var newid = str.split(reg);
document.getElementById(parseInt(newid[1]), 10).style.height = '0px';
}
var ob = document.getElementById(id);
i += 4;

ob.style.height = i + "px";

if (ob.offsetHeight < ob.scrollHeight) {
setTimeout(function() {
getcom(id, i);
}, 10);
}
}

function hidecom(id, i) {
var ob;
if(i < document.getElementById('c' + id).style.height)
ob = document.getElementById('c' + id);
else
ob = document.getElementById(id);
i -= 4;


ob.style.height = i + "px";

if (i > 0) {
setTimeout(function() {
hidecom(id, i);
}, 10);
}
}


Et le HTML qui me permet d'activer tout ça : 


[javascript:hidecom('0', parseInt(document.getElementById('0').style.height, 10)); 
cacher
]


[javascript:getcom('c0', 0); 
ajouter un commentaire
]
 - 
[javascript:getcom('0', 0); 

pas de commentaire
]






Trucs








<textarea></textarea>


J'espère que vous trouverez la source de mon problème, ou une façon de simplifier ce code qui me semble très lourd (désolé).

Merci beaucoup d'avance !

16 réponses

Réponse 1 / 16
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
3 oct. 2009 à 10:32
Bonjour,
avant d'aller plus loin, déjà, il faut
respecter les Majuscules/minuscules
ce n'est pas "getelementbyid"
mais document.getElementById
il faut "debogger" :

Cordialement [mon Site] [M'écrire] Bul
0
Réponse 2 / 16
Trashful Messages postés 8 Date d'inscription samedi 3 octobre 2009 Statut Membre Dernière intervention 3 octobre 2009
3 oct. 2009 à 10:37
Je devrais télécharger firebug alors ?
Mais lequel prendre, il y en a pleins...
Merci pour l'aide. :D

Je vais déjà essayer avec console d'erreur.
0
Réponse 3 / 16
Trashful Messages postés 8 Date d'inscription samedi 3 octobre 2009 Statut Membre Dernière intervention 3 octobre 2009
3 oct. 2009 à 10:52
Désolé du double post, je sais pas comment éditer un message...
J'ai essayé firebug, mais je ne trouve pas vraiment d'erreur.

Sinon, pour les majuscules minuscules, elles sont normales dans mon code, donc le problème viens pas de là.

Merci encore ^^
0
Réponse 4 / 16
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
3 oct. 2009 à 10:55
pas obligatoirement
uniquement avec FireFox et uniquement
si la console d'erreur ne suffit pas !
>>elles sont normales dans mon code, d
comment ça normale ????
vous nous mettez : document.getelementbyid(...
non , c'est : document.getElementById(...
0

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

Posez votre question
Réponse 5 / 16
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
3 oct. 2009 à 10:58
et si ce que vous nous postez ici ne correspond
pas à votre code, on va avoir énormément de
mal à corriger !
0
Réponse 6 / 16
Trashful Messages postés 8 Date d'inscription samedi 3 octobre 2009 Statut Membre Dernière intervention 3 octobre 2009
3 oct. 2009 à 11:02
Et bien, je ne comprend pas pourquoi le code s'est affiché ainsi, si vous, voulez, je peux vous donner directement le lien pour que vus voyiez mieux. Je ne trouve pas d'erreurs ni avec la console ni avec firebug.

http://radioseed.comxa.com/v2/

Vous devriez être en mesure de mieux comprendre mon code.

Merci pour votre aide.
0
Réponse 7 / 16
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
3 oct. 2009 à 11:08
navré, j'ai été voir ce site
j'ai cliqué sur <contact>, je suppose
que c'est ce qu'il fallait faire non ?
et 10' plus tard, c'est toujours "en chargement"
( je suis en bas débit ) j'ai donc abandonné
0
Réponse 8 / 16
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
3 oct. 2009 à 11:10
>>Et bien, je ne comprend pas pourquoi le code
>>s'est affiché ainsi,
je ne sais pas non plus !
mais la transformation n'a pas été faite
par ce site
repostez nous la bonne version.
0
Réponse 9 / 16
Trashful Messages postés 8 Date d'inscription samedi 3 octobre 2009 Statut Membre Dernière intervention 3 octobre 2009
3 oct. 2009 à 11:10
Non, <contact> est seulement un [# pour tester le javascript, il faut cliquer sur ] ou <cacher>
C'est là que j'utilise le JS.
0
Réponse 10 / 16
Trashful Messages postés 8 Date d'inscription samedi 3 octobre 2009 Statut Membre Dernière intervention 3 octobre 2009
3 oct. 2009 à 11:12 
function getcom(id, i) {
if(!isNaN(id)) document.getElementById('c' + id).style.height = '0px';
else  { 
var reg = /c/;
var str = id;
var newid = str.split(reg);
document.getElementById(parseInt(newid[1]), 10).style.height = '0px';
}
var ob = document.getElementById(id);
i += 4;

ob.style.height = i + "px";

if (ob.offsetHeight < ob.scrollHeight) {
setTimeout(function() {
getcom(id, i);
}, 10);
}
}

function hidecom(id) {
var ob, i;
if(parseInt(document.getElementById(id).style.height, 10) < parseInt(document.getElementById('c' + id).style.height, 10)) {
ob = document.getElementById('c' + id);
i = ob.style.height;
}
else {
ob = document.getElementById(id);
i = ob.style.height;
}
i -= 4;


ob.style.height = i + "px";

if (i > 0) {
setTimeout(function() {
hidecom(id);
}, 10);
}
}





[javascript:hidecom('0'); 
cacher
]


[javascript:getcom('c0', 0); 
ajouter un commentaire
]
 - 
[javascript:getcom('0', 0); 

pas de commentaire
]


Voilà pour le code qui j'espère respectera la casse cette fois.
0
Réponse 11 / 16
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
3 oct. 2009 à 11:13
pareil....
0
Réponse 12 / 16
Trashful Messages postés 8 Date d'inscription samedi 3 octobre 2009 Statut Membre Dernière intervention 3 octobre 2009
3 oct. 2009 à 11:16
Et bien, je ne saisi pas pourquoi, lorsque j'ai rédigé le message, les maujuscules étaient bien là, ce doit être une sorte de coreccteur orthographique...

Mais à part ça, n'avez vous pas d'idée sur comment faire que mon code puisse mieux fonctionner ?
0
Réponse 13 / 16
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
3 oct. 2009 à 11:28
if(parseInt(document.getElementById(id).style.height, 10) < parseInt(document.getElementById('c' + id).style.height, 10)) {

1° à priori, un ID doit commencer par une lettre
pas sûr que '1' soit autorisé
2° les div n'ont pas de style mais une class !


il faut donc regarder du coté de
élément.currentStyle pour IE et
window.getComputedStyle(élément,null) pour les autres

mais si vous aviez fait quelques alert
ici où là vous auriez vu.
0
Réponse 14 / 16
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
3 oct. 2009 à 11:33
uniquement pour tester si c'est
l'affichage ici qui "foire" 

	var ie false;	/*@cc_on	ie true;	@*/
if (ie)
alert(document.getElementById("toto").currentStyle.position+"\r\n"+
document.getElementById("tata").currentStyle.position+"\r\n"+
document.getElementById("titi").currentStyle.position+"\r\n"+
document.getElementById("tata").currentStyle.fontFamily+"\r\n"+
document.getElementById("toto").currentStyle.backgroundColor	);
else
alert(window.getComputedStyle(document.getElementById("toto"),null).position+"\r\n"+
window.getComputedStyle(document.getElementById("tata"),null).position+"\r\n"+
window.getComputedStyle(document.getElementById("titi"),null).position+"\r\n"+
window.getComputedStyle(document.getElementById("tata"),null).fontFamily+"\r\n"+
window.getComputedStyle(document.getElementById("toto"),null).backgroundColor	);


ah ben oui ! c'est la cas
bug chez codesSources il semble ??

vous le signalez ou je le fais ?
0
Réponse 15 / 16
Trashful Messages postés 8 Date d'inscription samedi 3 octobre 2009 Statut Membre Dernière intervention 3 octobre 2009
3 oct. 2009 à 11:39
Je vous laisse le soin de signaler ce problème (étant novice sur ce forum).
Pour ma part mon problème a été résolu, 

			function getcom(id, i) {
var ob = document.getElementById(id);
i++;

ob.style.height = i + "px";

if (ob.offsetHeight < ob.scrollHeight) {
setTimeout(function() {
getcom(id, i);
}, 10);
}
}


function hidecom(id, i) {
var ob = document.getElementById(id);
if (!i) { var i = parseInt(ob.style.height, 10); }
i--;

ob.style.height = i + "px";

if (i > 0) {
setTimeout(function() {
hidecom(id, i);
}, 1);
}
}


J'appelle plusieurs fonctions à chaque fois et tout fonctionne correctement, merci de votre aide, à bientôt.
0
Réponse 16 / 16
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
3 oct. 2009 à 12:02
et effectivement avec offset??? ou client???
ça doit fonctionner aussi
0

Discussions similaires

coller deux div avec du css
leon237 -
jordane45 -

2 réponses
Coloriage et alternance de couleur des lignes d'un tableau
Le_duc26 -
kohntark -

3 réponses
sequance d alternance paire et impaire ds un tableau
Strick9 -
Joky -

5 réponses
Quelle est la différence entre Frame, IFrame et Div...
rem78 -
jdmcreator -

5 réponses
afficher une page html placer entre div dans une autre page html
cs_shansen -
annubis -

49 réponses
Rejoignez-nous