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 new!
     Cours de JavaScript
     Liste de discussion
     Forums

Services :
     CountUs
     myCircle

     Referencement
     Créat. de bannière

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

MailingList :
97432 abonnés

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

     Annuaire webmaster

Ressources pour webmasters :
     Kits graphiques

Plus :
     Comparateur de prix
     Foire aux questions
     Les membres
     Devenir annonceur
     Faire un lien
     Contact

Partenaire :
     Hebergement gratuit
     Le PHP facile
     Horoscope
     Comscripts
     WebmasterClub
     L'écriteau
     Faro-dessing
     Activeartanima...
     Le village de ...
     Images gifs an...
     Netsources
     Easy-script.com
     Créer son site...
     Création de site
     Les kits graph...
     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 : 13946
Envois par mail : 326


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

>> Poster une annotation sur ce script






51 visiteurs
actuellement en ligne

    PUBLICITE



     ANNUAIRE WEBMAST.
Wedoo
La plus connue des top-lists.
http://fr.wedoo.com
Cat : Cercles de sites
Voir l'annuaire webmaster


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

     LES MEMBRES :
53579 membres
9869 comptes CountUs
1352 comptes myCircle

     LES FORUMS :
14 forums
38920 topics
187787 messages
>> Les forums

    SONDAGE

Utilisez-vous une page d'accueil personnalisable ?
Oui, la page d'accueil de Google (pas le moteur)
Oui, netvibes
Oui, mon Yahoo
Oui, my MSN
Oui, un autre
Non, je n'utilise pas de service de page d'accueil personnalisée
La mini-astuce "Divers" du jour par Thor HDA
Dans Word (toutes versions) tapez : =rand(100,1) , puis faites [entrée]... Une farce des programmeurs ?
Proposer votre mini-astuce | Archives des mini-astuces
© 1999-2008 K-NETWORK - Tous droits réservés | CNIL N° 844440 | 09/05/2008 18:02:00 | Design by Studcrea | Gen. en 0.459 sec.