faire apparaitre un calque progressivement

**dark_vidor** · 10/11/2006, 18h27

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

Comment ça je suis fou

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

**Kerod** · 11/11/2006, 05h09

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

**FremyCompany** · 11/11/2006, 10h23

Quelque chose comme ça ?

**dark_vidor** · 11/11/2006, 13h29

Envoyé par Kerod

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

oui mais comment ?

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

**FremyCompany** · 11/11/2006, 13h45

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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)

**dark_vidor** · 11/11/2006, 14h12

heu ... pourais tu me donnez des explications ?

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

et avec un txt ?

**Kerod** · 11/11/2006, 16h08

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

**dark_vidor** · 11/11/2006, 16h10

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

**Kerod** · 11/11/2006, 16h30

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**dark_vidor** · 11/11/2006, 17h09

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 ?

**Kerod** · 11/11/2006, 17h10

C'est à toi de trouver la temporisation qui correspond à tes attentes

**dark_vidor** · 11/11/2006, 17h11

la tempo c'est ? setInterval ? setTimeout ?

**FremyCompany** · 11/11/2006, 17h15

Envoyé par Kerod

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 Explication technique :

Sélectionner tout - Visualiser dans une fenêtre à part

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**dark_vidor** · 11/11/2006, 17h21

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

merci

**FremyCompany** · 11/11/2006, 17h51

Voila, c'est commenté !

Lance la page dans ton navigateur et tu comprendras

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**dark_vidor** · 11/11/2006, 21h47

merci

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

faire apparaitre un calque progressivement

JavaScript

Discussions similaires

Partager

Partager