faire apparaitre un calque progressivement

Version imprimable

10/11/2006, 18h27
dark_vidor

faire apparaitre un calque progressivement

Bonjour,

j'aimera au survol d'une zone sur une image faire apparaitre un calque (ça jusque la je sais faire, c'est meme deja fait JS+CSS) sauf que j'aimerais le faire apparaitre progressivement du haut vers le bas

pour avoir un exemple de ce que je veux obtenir comme effet :

http://configure2.euro.dell.com/dell...ftdppnotebook3
quand vous avez tout choisis valider et ajouter au panier, la il y a une barre de progression de la config puis votre selection apparait en degrader je cherche a obtenir un resultat similaire :mouarf:

Comment ça je suis fou :lol: j'ai pensé a regarder dans la source mais j'suis un peut larguer :? et puis j'aime pas copier coller betement avec des truc qui me servent pas ^^ j'aime bien comprendre ce que je fait

Merci d'avoir lu ce message et à ceux qui vont prendre de leur temps pour m'aider ;)
11/11/2006, 05h09
Kerod

Cela peut être fait (d'ailleurs ca doit être fait) avec du javascript
11/11/2006, 10h23
FremyCompany

Quelque chose comme ça ?
11/11/2006, 13h29
dark_vidor

Citation:

Envoyé par Kerod

Cela peut être fait (d'ailleurs ca doit être fait) avec du javascript

oui mais comment ?

Citation:

Envoyé par FremyCompany

Quelque chose comme ça ?

non pas du tout ^^ c'est pas la barre de progression que je veux c'est un affichage du au vers le bas progressif

Code:

<div id="div" style="overflow: scroll"></div>

Code:

1
2
3
4
5
6
7
var timer;
timer=setInterval(function() {
   var h = div.offsetHeight;
   if (h != 150) { h++; }
   else { clearInterval(timer); }
   div.style.height=h+"px";
},100)

11/11/2006, 14h12
dark_vidor

heu ... pourais tu me donnez des explications ? :mrgreen:

concretement avec une image de 600*600 par exemple ? je fait comment

et avec un txt ?
11/11/2006, 16h08
Kerod

Le but est d'agrandir un calque et ce quelque soit son contenu.

As-ti au moins essayé le code donné ? Car si tu avais testé tu aurais vu toi même le résultat. La hauteur correspond ici à 150
11/11/2006, 16h10
dark_vidor

j'ai essayer effectivement j'ai mis une image entre le div mais ça la fait pas apparaitre progressivement ... :(

idem avec un tableau et du texte :(

As tu au moins lancé la procédure ??

Bon allez comme ca mais c'est la meme chose :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
 
<script langage="javascript">
var timer; 
 
    function croll(id) 
    {  
        var h = document.getElementById(id).offsetHeight; 
        alert('');if (h != 150) 
        { h++; document.getElementById(id).style.height=h+"px"; 
        timer = setInterval(croll('div'),1);}  
        else { clearInterval(timer); }  
 
    }
 
</script>
 
<body onload="croll('div')">
<div id="div" style="background-color:#FF0000"></div>
</body>
</html>

11/11/2006, 17h09
dark_vidor

en cherchant sur le net j'ai trouver ça :
http://script.aculo.us/

ça donne :
http://derniere-bataille.net/sources...effect-appear/ :)

cependant ça m'interresse ce bout de code mais j'ai pas le meme effet :
http://derniere-bataille.net/sources...ar/index-2.htm j'ai elever le alert a la place faut que je mette une tempo ?
11/11/2006, 17h10
Kerod

C'est à toi de trouver la temporisation qui correspond à tes attentes
11/11/2006, 17h11
dark_vidor

la tempo c'est ? setInterval ? setTimeout ?

Citation:

Envoyé par Kerod

As tu au moins lancé la procédure ??

Bon allez comme ca mais c'est la meme chose :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
 
<script langage="javascript">
var timer; 
 
    function croll(id) 
    {  
        var h = document.getElementById(id).offsetHeight; 
        alert('');if (h != 150) 
        { h++; document.getElementById(id).style.height=h+"px"; 
        timer = setInterval(croll('div'),1);}  
        else { clearInterval(timer); }  
 
    }
 
</script>
 
<body onload="croll('div')">
<div id="div" style="background-color:#FF0000"></div>
</body>
</html>

Lol, comme ca, ca ne risque pas de marcher ;)

Code:

1
2
3
4
5
déjà, à chaque passage dans croll, tu recrée un timer, donc, tu ne peux pas tous les arrêter à la fin...

deplus, je sais c'est trompeur, il ne faut pas écrire setTimeout(croll(id), 1) mais bien setTimeout(function() { croll(id) }, 1)

Et puis dernière chose, le pauvre n'en a pas fini de cliquer sur ok, vu le nombre d'alert qui seront affichée...

Solution proposée (pk tjrs chercher des solutions lointaines comme sur des framerworks ?) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<html><body onload="scroll('div', 150)"><div id="div" style="background-color:green; overflow:hidden; height:0px;"></div><script><!--
   scroll=function(id, hmax) {
      var scrollTimer=null;
      var o = document.getElementById(id);
      scrollTimer=setInterval(function() {
         var h = o.offsetHeight;
         if (h != hmax) { h++; }
         else { clearInterval(scrollTimer); }
         o.style.height=h+"px";
      }, 10);
   }
--></script></body></html>

11/11/2006, 17h21
dark_vidor

fremy peux tu detaillé et expliquer ton code s'il te plait, je suis pas un expert en javascript ... et la ton code comme tu le fourni je le comprend pas :roll:

merci ;)

Voila, c'est commenté !

Lance la page dans ton navigateur et tu comprendras ;)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html><body onload="scroll('div', 150)"><div id="div" style="background-color:green; overflow:hidden; height:0px;">
Ici tu mets le contenu de la zone qui doit apparaître<br/>
Cela peut prendre plusieurs lignes<br/>
Pour lancer l'effet, tu dois écrire le code JS suivant : "scroll('div', 150)"<br/>
Ici, il est dans le onload du &lt;BODY&gt; pour que cela se lance au chargment de la page
<br/><br/>
Et voila tout !
</div><script><!--
   /* id: L'ID du div surlequel faire l'effet, celui ci doit avoir ceci pour style : "background-color:green; overflow:hidden; height:0px;" */
   /* hmax: la hauter que tu veux donner au div */
   scroll=function(id, hmax) {
      var scrollTimer=null;
      var o = document.getElementById(id);
      scrollTimer=setInterval(function() {
         var h = o.offsetHeight;
         if (h != hmax) { h++; }
         else { clearInterval(scrollTimer); }
         o.style.height=h+"px";
      }, 10);
   }
--></script></body></html>

11/11/2006, 21h47
dark_vidor

merci ;)

par contre tu as mis le script en commentaires ^^ donc sans le lancer j'ai su que ça marcherais pas^^