L'éditeur JavaScript
Visiteur non-identifié | Identifiez-vous | Devenir membre
Code perdu ? | Combien de visiteurs sur votre site ?
Rechercher :
Page d'accueil
     Home Page

JavaScript
     Tous les scripts
     Proposer un script
     Recherche de script
     AJAX
     Cours de JavaScript
     Liste de discussion
     Forums

Services :
     CountUs
     myCircle
     ClickInText
     XooIt

Trucs et astuces :
     HTML / CSS
     PHP / MySQL
     Réferencement
     Graph / Présentation
     Toutes les astuces
     Ajouter un article

MailingList :
152026 abonnés

Annuaire webmaster :      Hebergement web
     Referencement
     Sites webmasters
     XHTML - CSS2
     PHP
     Affiliation - Pub
     FAI

     Annuaire webmaster

Ressources pour webmasters :
     Kit graphique
     Foire aux questions
     Les membres
     Devenir annonceur
     Faire un lien
     Contact

Partenaire :
     Compteur live
     Créer un forum
     Le PHP facile
     Comscripts
     Liens sponsorisés
     Blog
     Page Rank
     Poésie et cita...
     Gifs animés, f...
     Azote.org - no...
     Easy-script.com
     Livre-dor.net
     Web creation ...
     Electroniq...
     Je crée mon site
     Outils de créa...
     L'histoire d'a...
     Les autres
     Votre site ici ?


Cacher/Afficher un div avec du "style" !

Script posté par :

coxtheking
Vous aussi, postez vos scripts en cliquant ici.


Description

Voilà je vais vous montrer comment faire pour afficher un div pour qu'il sagrandisse petit à petit pour ne pas que ça apparaisse d'un coup (je trouve ça moche personnellement !

à priori tout ce qui est modifiable, c'est indiqué !

J'espère que ce code va pouvoir vous aider :) !


Compatibilité :

 FireFox : Toutes versions
 Mozilla : 1 et +
 Netscape Navigator : 6 et +
 Internet Explorer : 5 et +


Chiffres :

Date de création : 21/11/2007
Dernière modif : -
Visites de la page : 125875
Envois par mail : 1068


Exemple :

[+]

Ici :)


Le code :

Entre <HEAD> et </HEAD> :


Entre <BODY> et </BODY> :


Services email :

Je désire recevoir ce script par email
Je désire recevoir un email en cas de modification de ce script
Je désire m'abonner à la newsletter de l'éditeur JavaScript


Les annotations des visiteurs :

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:
var sizeActuel = 13;


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
lien.innerHTML = "*";

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:
onBlur="Suite(this)"
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
De lamono - le 05-03-2012
Bonjour,
c'est un très bon script mais est-il possible d'afficher un formulaire a la place du texte :
objet.innerHTML = "Ici le text que tu veux faire apparaître !";

Merci
De btalla - le 14-03-2012
slt je suis nouveau dans le domaine de la création et déjà j'ai un problème: en fait je voudrais un scripte qui me permet d'afficher un formulaire en fonction du choix effectué dans un autre formulaire lorsqu'on clic sur le bouton submit. le second formulaire doit être affiché dans un div de le même page. merci d'avance

>> Poster une annotation sur ce script






compteur gratuit
actuellement en ligne

    PUBLICITE



     ANNUAIRE WEBMAST.
Publicidées
jeune mais talentueuse plateforme d'affiliation. Pas mal de programmes.
http://affilie.publicidees.com
Cat : Affiliation - publicité
Voir l'annuaire webmaster


     LES SCRIPTS :
78 à éditer
68 à copier/coller
246 des membres
2580 sur le web
>> Tous les scripts

     LES MEMBRES :
68231 membres
2816 comptes CountUs
1909 comptes myCircle

     LES FORUMS :
14 forums
40625 topics
192027 messages
>> Les forums

    SONDAGE

Vous avez un blog ou site classique ?
Un blog
Un site classique
Les deux !
La mini-astuce "Navigateur" du jour par Xenon_54
Mozilla - Firefox : Ouvrez un lien dans un nouvel onglet grâce au clic de la molette.
Proposer votre mini-astuce | Archives des mini-astuces
© 1999-2014 EJS - Tous droits réservés | CNIL N° 844440 | 16/04/2014 22:20:08 | Design by | Gen. en 0.006 sec.