Bouger un div façon thunderbird

Bouger un div façon thunderbird - HTML/CSS - Programmation

Marsh Posté le 06-02-2006 à 17:52:32    

Lut'
Je souhaite faire bouger un div: le faire monter, lui faire prendre une pose, puis descendre. Moui j'aimerai recréer l'onglet des messageries comme thunderbird MSN Skype... J'ai néanmoins un souci avec la mesure de la hauteur de la page. Marche pô. Doucement poussent mes cheveux blancs. Si vous pouviez m'épargnez une teinture, voici ma merdouille de script:
 

Code :
  1. var onglet_tempo;
  2. var compteElement=document.getElementById('compte');
  3. var compte_hauteur=compteElement.offsetHeight;
  4. var position=getWindowHeight()-compte_hauteur;
  5. onglet_y=position;
  6. onglet_se_bouge = false;
  7. onglet_premiere_fois = true;
  8. function onglet_demarre()
  9.  {
  10.  if(onglet_y == position && !onglet_se_bouge)
  11.   onglet_deballe();
  12.  else if(!onglet_se_bouge)
  13.   onglet_remballe();
  14.  }
  15. function onglet_deballe()
  16.  {
  17.  onglet_se_bouge = true;
  18.  if(onglet_y < 10)
  19.   {
  20.   onglet_y += 1;
  21.   onglet_bouge();
  22.   setTimeout("onglet_deballe()", 10);
  23.   }
  24.  else
  25.   {
  26.   onglet_se_bouge = false;
  27.   if(onglet_premiere_fois)
  28.    onglet_tempo = setTimeout("onglet_demarre()", 6000);
  29.   onglet_premiere_fois = false;
  30.   }
  31.  }
  32. function onglet_remballe()
  33.  {
  34.  clearTimeout(onglet_tempo);
  35.  onglet_se_bouge = true;
  36.  if(onglet_y > position)
  37.   {
  38.   onglet_y -= 1;
  39.   onglet_bouge();
  40.   setTimeout("onglet_remballe()", 10);
  41.   }
  42.  else
  43.   onglet_se_bouge = false;
  44.  }
  45. function onglet_bouge()
  46.  {
  47.   document.getElementById("compte" ).style.top=onglet_y+'px';
  48.  }
  49. window.onload = onglet_demarre;

Reply

Marsh Posté le 06-02-2006 à 17:52:32   

Reply

Marsh Posté le 06-02-2006 à 21:22:16    

Essaie de ne pas réinventer la roue :)
 
Quelques adresses utiles :  
 
Prototype : http://prototype.conio.net/
Doc : http://www.sergiopereira.com/artic [...] pe.js.html
 
Librairie pour faire le genre d'effet que tu cherches : http://script.aculo.us/
 
ca aussi c'est sympa :
http://openrico.org/rico/demos.pag [...] _accordion
 
un autrie truc bien sympa :
http://bennolan.com/behaviour/
 
Paquerette

Message cité 1 fois
Message édité par paquerette le 06-02-2006 à 21:22:28
Reply

Marsh Posté le 07-02-2006 à 12:41:31    

Merci, mais au point où j'en suis ma roue est presque fini. Adapter une nouvelle roue me demanderait encore plus de tour de cric. Je dois juste avoir un petit bug de rien du tout. ...Mais je ne le vois pas. Argl!

Reply

Marsh Posté le 07-02-2006 à 13:28:38    

fais voir ta fonction getWindowHeight()

Reply

Marsh Posté le 07-02-2006 à 13:43:36    

Reply

Marsh Posté le 07-02-2006 à 13:59:49    


Mais oui tu as raison j'adore les puzzles, c'est pour ça que je vais passer mon aprem à rassembler les différents morceaux de ton script ...  :sweat:  
 
Euh sans blaguer t'aurais pas le code entier de ta page?

Reply

Marsh Posté le 07-02-2006 à 17:30:55    

Sorry, autant pour moi. Voici le html avec le petit div en bas à droite:
http://www.art-logic.info/annecy/T [...] eloppement
et voici le js: http://www.art-logic.info/annecy/_template/compte.js
et éventuellement le css qui positionne par défaut à droite:

Code :
  1. div#compte {
  2. background: #fff;
  3. position: fixed !important;
  4. position: absolute;
  5. right: 5px;
  6. bottom: 8px;
  7. width: 110px;
  8. border: solid 1px #c5c5df;
  9. -moz-border-radius:8px;
  10.  }


Message édité par artlogic le 07-02-2006 à 17:32:15
Reply

Marsh Posté le 07-02-2006 à 22:59:22    

paquerette a écrit :

Essaie de ne pas réinventer la roue :)
 
Quelques adresses utiles :  
 
Prototype : http://prototype.conio.net/
Doc : http://www.sergiopereira.com/artic [...] pe.js.html
 
Librairie pour faire le genre d'effet que tu cherches : http://script.aculo.us/
 
ca aussi c'est sympa :
http://openrico.org/rico/demos.pag [...] _accordion
 
un autrie truc bien sympa :
http://bennolan.com/behaviour/
 
Paquerette


 
MERCI pour behaviour  [:huit]  
 
J'ai presque hâte d'aller au boulot pour essayer ça  [:matleflou]  


---------------
"L'informatique n'est pas plus la science des ordinateurs que l'astronomie n'est celle des télescopes." Michael R. Fellows & Ian Parberry
Reply

Marsh Posté le 08-02-2006 à 13:17:18    

Rien à faire ? Je sèche.

Reply

Marsh Posté le 08-02-2006 à 16:58:44    

Ricco a écrit :

MERCI pour behaviour  [:huit]  
 
J'ai presque hâte d'aller au boulot pour essayer ça  [:matleflou]


 
 [:wipeout_tt]  moi je m'amuse comme un fou avec ca et les autres lib

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed