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 :
105263 abonnés

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

     Annuaire webmaster

Ressources pour webmasters :
     Kits graphiques
     Création logo

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

Partenaire :
     Hebergement gratuit
     Le PHP facile
     Horoscope
     Comscripts
     WebmasterClub
     Activeartanima...
     Le village de ...
     L'écriteau
     Faro-dessing
     Gifs animés, f...
     Netsources
     Easy-script.com
     K i s s design
     Trucs et astuc...
     Je javascript
     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 : 28364
Envois par mail : 531


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?

>> Poster une annotation sur ce script






45 visiteurs
actuellement en ligne

    PUBLICITE

Wilogo.com - Création Logo Entreprise

     ANNUAIRE WEBMAST.
Sivit
Le gros challenger d'OVH ! Des bonnes offres, un super support ... Un des mes favoris !
http://www.sivit.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 :
55806 membres
8795 comptes CountUs
1517 comptes myCircle

     LES FORUMS :
14 forums
39344 topics
189182 messages
>> Les forums

    SONDAGE

Vous avez un blog ou site classique ?
Un blog
Un site classique
Les deux !
La mini-astuce "PHP / mySQL" du jour par orbital73
La super global $_SERVER['PHP_SELF'] utilisée tel quel est une variable faillible, permettant ainsi des injection de depuis l'URL
ce qui peut aller jusqu'au défacement de votre site. Pour éviter cela, utilisez htmlentities($_SERVER['PHP_SELF']).
Proposer votre mini-astuce | Archives des mini-astuces
© 1999-2008 K-NETWORK - Tous droits réservés | CNIL N° 844440 | 01/12/2008 21:16:00 | Design by Studcrea | Gen. en 0.466 sec.