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

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

MailingList :
106693 abonnés

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

     Annuaire webmaster

Ressources pour webmasters :
     Kits graphiques

     Foire aux questions
     Les membres
     Devenir annonceur
     Faire un lien
     Contact

Partenaire :
     Compteur live
     Referencement
     Le PHP facile
     Activeartanima...
     L'écriteau
     Faro-dessing
     Le village de ...
     Gifs animés, f...
     Trucs et astuc...
     Electroniq...
     K i s s design
     Les kits graph...
     Easy-script.com
     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 : 31012
Envois par mail : 588


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.

>> Poster une annotation sur ce script






6 visiteurs
actuellement en ligne

    PUBLICITE



     ANNUAIRE WEBMAST.
Lycos hebergement
Domaine gratuit 1 an, 1000 Mo d'espace, 100 comptes Email, 20 Go de trafic /mois, 1 base mySQL, 1 comptes FTP pour moins de 7 € / mois. Par mal d'offres à découvrir.
http://webcenter.lycos.fr/
Cat : Hebergement web
Voir l'annuaire webmaster


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

     LES MEMBRES :
56144 membres
8360 comptes CountUs
1541 comptes myCircle

     LES FORUMS :
14 forums
39398 topics
189318 messages
>> Les forums

    SONDAGE

Vous avez un blog ou site classique ?
Un blog
Un site classique
Les deux !
La mini-astuce "Divers" du jour par alex55
Vous connaissez les Easter Eggs ? Ce sont de petits codes insérés dans les logiciels qui s'ouvrent en faisant une action particulière : dans Winamp, pendant la lecture d'une musique, tapez N U L [echap] L [echap] S O F T. Le lecteur deviendra transparent en rythme avec la musique !!!
Proposer votre mini-astuce | Archives des mini-astuces
© 1999-2009 EJS - Tous droits réservés | CNIL N° 844440 | 10/01/2009 03:00:06 | Design by Studcrea | Gen. en 0.489 sec.