Bonjour,
je cherche à afficher un div caché en cliquant sur un bouton.
Jusque là c'est bon aucun problème.
Par contre j'aimerais que l'affichage se fasse progressivement, comme si la hauteur du div augmentait jusqu'à permettre de voir completement le contenu.
J'ai essaié en augmentant par une boucle la valeur "height" du style CSS mais cela ne fonctionne pas, l'affichage est toujours entier.
Une idée?
la communauté d'entraide francophone dédiée au PHP
Javascript - afficher div caché progrssivement
Administrateur PHPfrance |
3088 Messages
Ne le fais surtout pas toi-même mais utilise Yahoo! UI. Prends exemple sur le source de cet exemple.
Quel est ton degré d'affinité avec Javascript ?
Euh, en relisant je m'aperçois que tu as un problème de CSS aussi ? Donne un lien vers la page pour qu'on jette un œil ?
Quel est ton degré d'affinité avec Javascript ?
Euh, en relisant je m'aperçois que tu as un problème de CSS aussi ? Donne un lien vers la page pour qu'on jette un œil ?
désolé je ne peux pas donner un lien vers la page, c'est pour une application intranet.
Pour le javascript je me débrouille, mais j'évite d'en utiliser le plus possible. Là c'est parce que le chargement de la page demande plusieurs traitements de données assez longs donc hors de question de faire ca coté serveur.
En ce qui concerne le CSS, une erreur? voilà le css de mon div caché :
et le javascript qui va afficher :
[/code]
Pour le javascript je me débrouille, mais j'évite d'en utiliser le plus possible. Là c'est parce que le chargement de la page demande plusieurs traitements de données assez longs donc hors de question de faire ca coté serveur.
En ce qui concerne le CSS, une erreur? voilà le css de mon div caché :
Code : Tout sélectionner
.champCache { display: none; }
Code : Tout sélectionner
function afficherDiv(identifiantDiv){
if(document.getElementById(identifiantDiv).style.display == "block"){
document.getElementById(identifiantDiv).style.display = "none";//affichage du div
document.getElementById("bouton_affichage_"+identifiantDiv).value="VVV";//changement de valeur du bouton
document.getElementById("bouton_affichage_"+identifiantDiv).src = "images/fleche_bas1.gif";//changement de l'image du bouton
}
else{
document.getElementById(identifiantDiv).style.display = "block"; //dissimulation du div
document.getElementById("bouton_affichage_"+identifiantDiv).value="^^^";//changement de valeur du bouton
document.getElementById("bouton_affichage_"+identifiantDiv).src = "images/fleche_haut1.gif"; //changement de l'image du bouton
}
}
regarde avec mootools, un ensemble d'objet javascript permettant de faire des effets sympas
pro : http://www.ohweb.fr -> studio de développement en PHP, expertise en e-commerce, certifié PrestaShop
perso : http://www.olecorre.com -> un dico de termes informatiques
J'ai toujours rêvé d'un ordinateur qui soit aussi facile à utiliser qu'un téléphone. Mon rêve s'est réalisé : je ne sais plus comment utiliser mon téléphone. [Bjarne Stroustrup]
perso : http://www.olecorre.com -> un dico de termes informatiques
J'ai toujours rêvé d'un ordinateur qui soit aussi facile à utiliser qu'un téléphone. Mon rêve s'est réalisé : je ne sais plus comment utiliser mon téléphone. [Bjarne Stroustrup]
Bonjour,
La biblio scriptaculous.js, dérivée de prototype.js fait tres bien ca avec un choix riche.
Voici les fonctions de la biblio qui repondent a ton besoin:
Effect.SlideDown(Id, {duration: temps en seconde});
Effect.SlideUp(Id, {duration: temps en seconde});
Par contre, si tu as la solution pour cacher des id dynamiques à l'initialisation, je suis preneur car j'ai une solution qui marche sur ff mais pas pour ie6 (pas testé ie7).
Cordialement
La biblio scriptaculous.js, dérivée de prototype.js fait tres bien ca avec un choix riche.
Voici les fonctions de la biblio qui repondent a ton besoin:
Effect.SlideDown(Id, {duration: temps en seconde});
Effect.SlideUp(Id, {duration: temps en seconde});
Par contre, si tu as la solution pour cacher des id dynamiques à l'initialisation, je suis preneur car j'ai une solution qui marche sur ff mais pas pour ie6 (pas testé ie7).
Cordialement
J'utilise le css avec l'attribut displayPar contre, si tu as la solution pour cacher des id dynamiques à l'initialisation
classes :
Code : Tout sélectionner
.divCache {display:none;}Oui, j'utilise également cette propriété.
Dans mon head, j'ai :
Et juste avant la fermeture de mon body, j'utilise ses lignes pour l'init.
Mais cela ne fonctionne pas sous ie (6 du moins), sous ff, impec.
Dans mon head, j'ai :
Code : Tout sélectionner
<script type="text/javascript">
function afficheId(baliseId)
{
if (document.getElementById && document.getElementById(baliseId) != null)
{
document.getElementById(baliseId).style.visibility='visible';
document.getElementById(baliseId).style.display='block'; // non obligatoire
Effect.SlideDown(baliseId, {duration:1});
}
}
function cacheId(baliseId)
{
if (document.getElementById && document.getElementById(baliseId) != null)
{
Effect.SlideUp(baliseId, {duration:1});
}
}
function initId(baliseId)
{
if (document.getElementById && document.getElementById(baliseId) != null)
{
document.getElementById(baliseId).style.display='none';
}
}
</script>
Code : Tout sélectionner
<script type="text/javascript">
// si JavaScript est disponible, cache le contenu dès le
// chargement de la page. Sans JavaScript, le contenu sera
// affiché.
var nombre_enfant=document.getElementById("def_lexique").childNodes.length;
for (var i = 0; i < nombre_enfant ; i++) {
initId(document.getElementById("def_lexique").childNodes[i].getAttribute("id"));
}
</script>