 De element - le 22-11-2007
Excellent script ! | De coxtheking - le 25-11-2007
Merci...
Euh, je viens de recevoir un email disant qu'il avait été accepté alors que ça fait des mois que je l'ai posté et il avait dit qu'il n'était pas accepté, parfois il faudra m'expliquer ^^!
Beh have fun à tous alors :p ;) | De johnoo - le 30-11-2007
Ne fonctionne pas correctement sous ie7 ... | De TiteNath - le 01-12-2007
Bonjour,
Le script marche très bien sur IE7.
Mais pas plus d'une fois.
En attendant, je trouve ça bien sympa !
Merci... | De sweetdreams - le 04-02-2008
J'ai réussi a corriger l'erreur sous IE7 :
il faut modifier :
dans la deuxième fonctio ftc :
if( hActuel > hFinal) par
if( hActuel == 20) puis enlever le code :
objet.style.overflow = 'inherit';
voila. :p | De colindk - le 06-02-2008
La correction pour IE7 ne fonctionne pas.
Après cette correction le script ne marche plus avec Firefox. | De colindk - le 06-02-2008
ce n'est pas
if( hActuel > hFinal)
qu'il faut remplacer mais
if( hActuel < hFinal)
et c'est par
if( hActuel <= 20)
qu'il faut le faire
Il faut effectivement enlever le code
objet.style.overflow ='inherit';
qui se trouve dans cette conditionnelle. | De zzfurax - le 08-04-2008
Ce div déroulant est très intéressant. J'y ai ajouté un petit compteur qui permet de réduire la taille de la police en même temps que le div se réduit. Ce code est à ajouter dans la close [else if]
1°- avec les autres mises à jour des propriétés du div:
2°- juste après la réduction de la hauteur du div:
sizeActuel -= 1;
objet.style.height = hActuel + 'px';
objet.style.fontSize = sizeActuel + 'pt'; |
|
Augmenter la taille de la police ne même temps que le div se développe est un jeu d'enfant...
Merci de cette bonne idée. | De gregouye - le 18-04-2008
Le script ne marche pas sur IE6 et sur Firefox il me fait une erreur sur href="javascript:;" en disant qu'il attend un objet.
Merci pour vos reponses! | De levelkro - le 24-04-2008
Voici le code revu et corrigé, permet de choisir le nom par le lien en plus de controler la hauteur pour ajouter plusieurs divs par 1 seul code, de plus il peut effacer les autre de la même série pour afficher le dernier, j'ai pris une partie du code de cacheTout d'un autre système qui cache les divs.
J'ai aussi volontairement désactiver des code si vous désirez retrouver l'original en partie.
Dans un document .JS de votre choix
[code]
function Suite(nom,lien,hauteur){
var objet = document.getElementById(nom); // entre les deux ' tu mes le nom du div que tu veux faire apparaître !
if(objet.style.display == "none" || !objet.style.display){
/* objet.innerHTML = "Ici le text que tu veux faire apparaître !"; */
objet.style.display = "block";
objet.style.overflow = "hidden";
/* lien.innerHTML = "-"; */
var hFinal = hauteur; //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)
var hActuel = 0; //Hauteur initiale (la hauteur dès le début !)
var timer;
var fct = function ()
{
hActuel += 5; //Augmente la hauteur de 20px (tu peux modifier) tous les 40ms !
objet.style.height = hActuel + 'px';
if( hActuel > hFinal)
{
clearInterval(timer); //Arrête le timer
objet.style.overflow = 'inherit';
}
};
fct();
timer = setInterval(fct,10); //Toute les 40 ms
}
else if%2 | De jezz - le 05-06-2008
J'utilise le dernier code mis en liste et j'ai toujours un erreur lors de la fermeture de la div sur IE7
--> Argument non valide donné sur la ligne suivante après le elseif
| objet.style.height = hActuel + 'px'; |
|
avez vous un idée de ce que pourrais être mon problème? | De nouam - le 24-12-2008
Bonjour,
J'ai utilisé le "code revu et corrigé" de
levelkro
Le script ne marche plus : il y une erreur
Objet requis
Alors que j'arrivais bien à le faire marche sur IE6 et IE7 et Firefox avant.
Est-ce que quelqu'un apporter une aide. | De bugmenot - le 08-01-2009
Après quelque essais, j'ai enfin corrigé ce code pour qu'il fonctionne chez moi. sur IE7 et mozilla 3.0.5.
Le principale probleme sur IE (et surement sur Mozilla, mais il doit passer outre) c'estque, selon la taille de votre <div>, lorsqu'on le réduit, on tombe parfois sur un nombre négatif (exemple : 15 - 20 = -5 ), et lorsqu'on veut mettre le width à -5, ca bug.
On peut coriger cela comme on veut, j'ai preferer faire ca proprement :
if(hActuel>=0){ objet.style.width = hActuel +'px'; }
|
|
Et il faut effectivement enlever tout les
| objet.style.overflow = 'inherit'; |
|
On peut aussi enlever le
| objet.style.overflow = "hidden"; |
|
Pour finir n'oubliez pas d'enlever les
Si vous utilisez autre un autre type de lien comme une image par exemple. | De exup1 - le 28-03-2009
Bonjour,
Merci à l'Editeur Javascript et ses contributeurs pour la qualité de leur travail.
Ce script est éxactement ce que je cherche. Est-ce que quelqu'un peut me dire s'il est possible de l'adapter sur SPIP ?
En effet j'aimerais le rendre compatible avec le codage SPIP qui permets de référencer le contenu des pages pour la recherche. Si quelqu'un l'a déjà fait, j'aimerais avoir son avis.
Merci. | De mng - le 08-05-2009
Mes petites corrections:
bugmenot a fait une petit faute:
if(hActuel>=0){ objet.style.height = hActuel +'px'; }
|
|
Et pour que la div se referme si on clique à côté, on peut rajouter ça dans le lien:
| De cosmo_75 - le 04-11-2009
Bonsoir à tous,
J'ai pu tester avec succès ce script sur Firefox 3.0.15. Sur IE6 il y a un petit bug lorsque je tente de refermer le div, mais il me semble que ce bug est signalé et corrigé dans les commentaires précédents.
Ma question porte sur un autre point : le texte affiché se trouve dans la partie Javascript, donc entre les balises Head. Ne serait-il pas possible de le mettre directement dans le div ? | De Nogardryu - le 16-03-2010
Bonjour à tous, j'ai découvert ce script il y a quelques jours, et avec toutes vos corrections, on ne sait plus vraiment quelle est la bonne version complète du script. pas grave, je vais m'en faire un et s'il marche, vous le donner.
Pour répondre à cosmo_75, tu n'es pas obligé de mettre le texte en javascript. Inner.html insère un texte dans un div, mais tu peux t'en passer en mettant directement
document.getElementById(id_de_ta_div_a_afficher).style.display='block'
Bien entendu, la div concernée doit de base être en display: none;
Je ne sais pas si je suis très clair ni ça te sera encore possible mais peu importe. CA servira certainement à quelqu'un.
Promis, je j'arrive à faire un script propre et qui marche, je vous le soumettrais. | De levelkro - le 17-03-2010
Désolé mon ancien message a pas sauver correctement, j'essai suite a un message privé, j'ai améliorer le code, mais j'ai pas pris le temps de faire la fonction pour tous ouvrir ou fermer suivant un prefix commun (comme popup)
<script type="text/javascript">
function Suite(lien,hauteur){
//***
// levelKro: Ont ajoute le nom a afficher et sa hauteur
// tous les tag 'hauteur' sont des remplacement du code d'origine
// l'ancien code aussi était fix a 1 div a cause de la première ligne de la fonction, elle aussi est une amélioration du code original
// le troisième est un fix du code, sous certain cas le code ne marche pas car en ce cachant il peut rester afficher,
// pour éviter que ceci arriver la ligne disant la hauteur regle le problème, testé sous IE
//****************************
var objet = document.getElementById(lien); // entre les deux ' tu mes le nom du div que tu veux faire apparaître ! levelKro +++!
if(objet.style.display == "none" || !objet.style.display){
objet.style.display = "block";
objet.style.overflow = "hidden";
lien.innerHTML = "-";
var hFinal = hauteur; //Hauteur finale (la hauteur une fois que ça aura fini de déplier !) levelKro ++!
var hActuel = 0; //Hauteur initiale (la hauteur dès le début !)
var timer;
var fct = function (){
hActuel += 5; //Augmente la hauteur de 20px (tu peux modifier) tous les 40ms !
objet.style.height = hActuel + 'px';
if( hActuel > hFinal){
clearInterval(timer); //Arrête le timer
objet.style.overflow = 'inherit';
}
};
fct();
timer = setInterval(fct,40); //Toute les 40 ms
}
else if(objet.style.display == "block"){
var hFinal = 0; //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)
var hActuel = hauteur; //Hauteur initiale (la hauteur dès le début !) levelKro ++!
var timer;
var fct = function (){
hActuel -= 5; //Augmente la hauteur de -20px (tu peux modifier) tous les 40ms !
objet.style.height = hActuel + 'px';
if( hActuel <= hFinal){
clearInterval(timer); //Arrête le timer
objet.style.overflow = 'hidden';
objet.style.display = "none";
objet.style.height = "0"; // levelkro: Fix du cache de la div +++
}
};
fct();
timer = setInterval(fct,40); //Toute les 40 ms
lien.innerHTML = "+";
}
}
</script>
[<a href="#" onclick="Suite('popup0','200')">+</a>] popu0
[<a href="#" onclick="Suite('popup1','40')">+</a>] popup1
[<a href="#" onclick="Suite('choufleur','18')">+</a>] choufleur
<hr>
<div id="popup0" style="display: none; border: #000000 1px solid; width: 300px;">
Popup 0
<br><br><br><br><br><br><br><br>
Simple ?
</div>
<div id="popup1" style="display: none; border: #000000 1px solid; width: 100px;">
Popup 1
</div>
<div id="choufleur" style="display: none; border: #000000 1px solid; width: 200px;">
ici un choufleur
</div>
|
|
Reste qu'a porduire un fonction while avec le prefix desiré et passe les numéro 1 a la suite de l'autre, faut juste s'assurer de faire les numéro sans aucun oublie de suite :) | De noxtiteuf - le 07-04-2010
levelkro l'amélioration du script est géniale! Par contre j'aurais aimé savoir comment faire pour fermer les div qui sont ouvertes lorsque l'on clique sur un autre lien.
(par exemple lorsque la div1 est ouverte, en cliquant sur le lien correspondant on ouvre la div2 et ferme la div1 en même temps).
Merci ! | De ridertahiti - le 01-07-2010
modification pour cacher les autre div avant d'ouvrir le div cliqué moi j'ai mis comme argument sur ma fonction (lien, taille,image) image c'est l'image que je clique comme j'ai fait plusieurs déroulement
function Suite(lien,taille,image){
if(image == 1)
{
var objet = document.getElementById('popup');
var objetold = document.getElementById('popup2');
if(objetold.style.display == "block"){
objetold.style.overflow = 'hidden';
objetold.style.display = "none";
objetold.style.height = "0";
}
}
if(image == 2)
{
var objet = document.getElementById('popup2');
var objetold = document.getElementById('popup');
if(objetold.style.display == "block"){
objetold.style.overflow = 'hidden';
objetold.style.display = "none";
objetold.style.height = "0";
}
}
if(objet.style.display == "none" || !objet.style.display){
if(image == 1 )objet.innerHTML = "<div class='text-contact'>Téléphone : +689 43.38.06<br>Vini : +689 70.92.84<br></div>";
if(image == 2) objet.innerHTML = "<img src='images/plan/plan.jpg'>";
objet.style.display = "block";
objet.style.overflow = "hidden";
if(image == 1) lien.innerHTML = "<img style='margin-left : 35px;' src='images/contact/iphone.png'>";
if(image == 2) lien.innerHTML = "<img style='margin-left : 28px;margin-right : 17px;' src='images/contact/iplan.png'>";
var hFinal = taille; //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)
var hActuel = 0; //Hauteur initiale (la hauteur dès le début !)
var timer;
var fct = function ()
{
hActuel += 20; //Augmente la hauteur de 20px (tu peux modifier) tous les 40ms !
objet.style.height = hActuel + 'px';
if( hActuel > hFinal)
{
clearInterval(timer); //Arrête le timer
}
};
fct();
timer = setInterval(fct,40); //Toute les 40 ms
}else if(objet.style.display == "block"){
var hFinal = 0; //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)
var hActuel = taille; //Hauteur initiale (la hauteur dès le début !)
var timer;
var fct = function ()
{
hActuel -= 20; //Augmente la hauteur de -20px (tu peux modifier) tous les 40ms !
objet.style.height = hActuel + 'px';
if( hActuel <= hFinal){
clearInterval(timer); //Arrête le timer
objet.style.overflow = 'hidden';
objet.style.display = "none";
objet.style.height = "0";
}
};
fct();
timer = setInterval(fct,40); //Toute les 40 ms
if(image == 1) lien.innerHTML = "<img style='margin-left : 35px;' src='images/contact/iphone.png'>";
if(image == 2) lien.innerHTML = "<img style='margin-left : 28px;margin-right : 17px;' src='images/contact/iplan.png'>";
}
}
| De lawawa - le 12-10-2010
Très bon code mais comment je fait pour que la taille de mon div s'ajuste selon son contenu, car ce qui est a l’intérieur est le résultat d'un base de donner alors si je met le div a 600 px et que mon contenue en prend 800 j'ai un problème | De lawawa - le 13-10-2010
Sans Dénigrer votre code j'ai trouver un autre code pour faire ce que je voulait voila le lien pour ceux que sa intéresse
http://www.journaldunet.com/developpeur/tutoriel/css/040610-css-div-montrer-cacher.shtml | De almux - le 10-07-2011
C'est super, merci pour les correctifs!
Je me demande s'il serait possible d'utiliser cette méthode pour faire apparaître une div "container" (avec tout son contenu=menu) depuis le haut et, ceci, sans onClick et avec un délais de quelques 2 ou 3 secondes après le loading d'une page.
Quelqu'un a-t-il déjà fait ça? | De blackmanshadow - le 11-08-2011
bonjour merci pour ce script
j'aurais aimer savoir si il etait possible
d'afficher la div vers le HAUT pour l'ouvrir et vers le bas pour la fermer
exemple si la div ce trouve en bas du site
merci |
Home Page
