animer la hauteur d'un div

par **hi-logik** » 30 nov. 2008, 18:54

merci pour vos réponses et vos impressions lol

je suis d'accord avec vous 2 tous dépends de ce que l'on recherche !

une librairie est en effet très pratique en terme de rapidité et souvent de
performance et pour certain projet ou le temps nous est imparti ca peux vite faire l'affaire !

Mais c'est vrai que dans mon cas je préfère codé pour etre plus alaise avec ce language !

je vais travailler le code ca va bien m'aider avec mes recherches !

les problème de compatibilité est aussi un bonne exercice même si on aurai pu s'en passé (merci Bilou) lol

++ (^-^)

par **@rthur** » 30 nov. 2008, 13:37

il vaut mieux chercher à tout coder soi-même en se contentant de ce que propose nativement JavaScript (quitte à donner l'impression de réinventer la roue) et parvenir à comprendre les mécanismes de JavaScript et, donc, à progresser dans la maîtrise de ce langage, plutôt que d'utiliser une bibliothèque (même si elle peut rendre service en faisant coder plus rapidement ou en moins de lignes) et ne pas très bien comprendre. C'est ce que je fais, personnellement.

Tout dépend quel est l'objectif que l'on recherche.
Si on veut juste atteindre le résultat, alors le passage par une librairie est plus simple et plus puissant (et permet d'être compatible avec tous les navigateurs à coup sur: "IE6, aaaarrrrrggggg!!!"

)
En revanche si on veut progresser dans le langage en question alors effectivement il vaut mieux tout faire soi-même. On est d'accord

par **Victor BRITO** » 30 nov. 2008, 13:06

...enfin bon si tu préfère coder ton animation "from scratch" je n'y vois pas d'inconvénient mais le plus simple c'est quand même d'utiliser les librairies qui proposent exactement ce que tu cherches à faire.

Justement, comme il l'a dit plus haut :

j'ai pas une grande
expérience de Javascript et je profite de ce genre d'exercice pour renforcer mes connaissances !

il vaut mieux chercher à tout coder soi-même en se contentant de ce que propose nativement JavaScript (quitte à donner l'impression de réinventer la roue) et parvenir à comprendre les mécanismes de JavaScript et, donc, à progresser dans la maîtrise de ce langage, plutôt que d'utiliser une bibliothèque (même si elle peut rendre service en faisant coder plus rapidement ou en moins de lignes) et ne pas très bien comprendre. C'est ce que je fais, personnellement.

par **@rthur** » 30 nov. 2008, 02:24

Mine de rien mes 2 lignes de code fonctionnent et devrait faire ce que tu veux...
...enfin bon si tu préfère coder ton animation "from scratch" je n'y vois pas d'inconvénient mais le plus simple c'est quand même d'utiliser les librairies qui proposent exactement ce que tu cherches à faire.

par **jojolapine** » 30 nov. 2008, 02:19

Bonsoir,
pour rester compatible, voici comment utiliser setTimeout() avec les même effets:

Code : Tout sélectionner

var time=null;
function arepeter(){
    alert('hihi');
    time= setTimeout('arepeter()',300);
}
function stoparepeter(){
    clearTimeout(time);
}

Voilà après tu faits ce que tu veux avec ça

par **hi-logik** » 30 nov. 2008, 00:19

merci à tous pour vos réponses !

J'ai eu de bon echo de JQuery et je l'utiliserais à l'occasion mais j'ai pas une grande
expérience de Javascript et je profite de ce genre d'exercice pour renforcer mes connaissances !

quand à la function setInterval je l'ai aperçu mais il parait qu'elle pose plus de problème en terme de compatibilité
niveau navigateur, après quelque recherche !

maintenant est vrai ou faux je ne ne peux pas juger !

je vais continuer à faire mes recherches avec le lien que tu m'as donné AB et
si tu as du temps au cas ou et bien je suis la ! et si je trouve la réponse avant
ben je la donnerais à fin d'aider la communauté

^ ^

par **@rthur** » 29 nov. 2008, 19:39

Bonjour,

Regarde du côté de la librairie javascript jQuery, ça devrait te simplifier la vie:
http://docs.jquery.com/Tutorials:Live_E ... _of_jQuery

// Attention à bien penser à inclure la librairie jQuery dans l'entête de la page ;)
<a href="#null" onclick="$('#tondiv').slideToggle('slow');">Titre</a>
<div id="tondiv" style="display:none;">
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
</div>

par AB » 29 nov. 2008, 18:48

j'ai regarder qu niveau des function javascript et je penses qu'il me faudrais la function setTimeout
mais après par rapport à mon cas je ne sais pas trop comment l'integrer !

Oui c'est un bon début. Sur le principe la fonction setTimeout (ou setInterval) peut servir pour faire défiler un div (horizontalement ou verticalement) d'un point à un autre.
Un exemple qui n'est peut-être pas tout a fait adapté à ton cas mais qui peut te donner des idées : http://www.phpfrance.com/forums/viewtop ... &highlight (je n'ai pas le temps de t'en dire plus aujourd'hui)

par **hi-logik** » 29 nov. 2008, 15:14

bonjour à tous !

je souhaiterais animer un div de façon que lorsque je click sur la div superieur qui est le titre
la div du dessous se deroule en animation !

je penses donc qu'il faut jouer avec la hauteur, cependant je n'ai pas une grande experience en Javascript !

pour l'instant la function que j'ai pu faire est en javascript :

Code : Tout sélectionner

function showHide(id)
{
    var div   = document.getElementById(id).style;

    with(div)
    {
       display=(display=="block") ? "none" : "block";
    }
}
</script>

en php


echo '<div class="'.$class.'" onclick="showHide(\'line'.$row->id.'\')" onmouseover="this.style.background=\'#eee8fb\';this.style.cursor=\'default\';"
onmouseout="this.style.background=\''.$color.'\'">'."\n";
        echo ucfirst($row->firstname." ".$row->lastname)."\n";
        echo '</div>'."\n";
        echo '<div class="detailRegister2" id="line'.$row->id.'">'."\n";
        echo '<p><br />';
        echo $row->gender.' '.$row->firstname.' '.$row->lastname."<br />\n";
        echo "Nee le: ".$row->birthday."<br /><br />\n";
        echo $row->address."<br />\n";
        echo $row->code_postal.' '.$row->country."<br />\n";
        echo "Mobile: <b>".chunk_split($row->mobile, 2, " ")."</b><br />\n";
        echo "Telephone: ".$phone."<br />\n";
        echo "Email: ".$row->email."<br /><br />\n";
        echo '</p>';
        echo '</div>'."\n";

j'ai regarder qu niveau des function javascript et je penses qu'il me faudrais la function setTimeout
mais après par rapport à mon cas je ne sais pas trop comment l'integrer !

je me doute qu'il y a plus simple donc voila si quelqu'un peut m'aider merci d'avance

animer la hauteur d'un div

Répondre

Étendre la vue Revue du sujet : animer la hauteur d'un div

Re: animer la hauteur d'un div

animer la hauteur d'un div