Page 1 of 1

window onload

PostPosted: Thu Apr 02, 2009 12:20 pm
by jeanpaps
salut rad

j'aimerai utilisé un effet mootools qui se déclenche au chargement de la page mais je n'y arrive pas :x et je n'ai rien trouvé sur le net ??!!
tu es encore une fois mon dernier recours :D

Pour cela j'utilise les effets "fxslide"ou "effect basis" de la library mootools http://demos.mootools.net/ que j'arrive à faire fonctionner car bien expliqué.
Mais peut-on déclencher au chargement de la page un de ces effets ?? Est-ce qu'un div peut apparaitre soit en slideIn ou en fade avec un script du genre "window onload..." ????

merci encore
++
paps

Re: window onload

PostPosted: Thu Apr 02, 2009 7:12 pm
by RAD
Salut
je prefererais voir ce que toi tu as essayer !!

parce que la librairie moo est vaste !

Re: window onload

PostPosted: Thu Apr 02, 2009 9:50 pm
by jeanpaps
re

ben j'ai rien tenté pour le moment :oops:

voici le code du fade
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <script type="text/javascript" src="mootools.js"></script>
   <script type>
    window.addEvent('domready', function() {
   var el = $('myElement');
   $('fadeOpacity').addEvent('click', el.fade.bind(el, [0]));
   $('tweenOpacity').addEvent('click', function(e) {
      e.stop();
      el.fade(1);
   });
   $('tweenOpacity1').addEvent('click', function(e) {
      e.stop();
      el.fade(0.3);
   });
});   
    </script>
   <title>Effects Introduction</title>
<style type="text/css">
div.demoElement {
   width: 80px;
   height: 80px;
   border: 1px solid black;
   background-color: #f9f9f9;
   font-size: 12px;
   color: #000000;
   padding: 10px;
}
div.demoElementHeight {
   height: 120px;
}

.myClass {
   width: 300px;
   height: 50px;
   border: 3px dashed black;
   background-color: #C6D880;
   font-size: 20px;
   padding: 20px;
}
</style>
</head>
<body>
   <p>
      <a href="#" title="Fading opacity" id="fadeOpacity">Fade opacity to 0</a>
      |
      <a href="#" title="Tween opacity to 1" id="tweenOpacity">Tween opacity to 1</a>
      |
      <a href="#" title="Tween opacity to 0.3" id="tweenOpacity1">Tween opacity to 0.3</a>
   </p>
   <div id="myElement" class="demoElement">
   </div>
</body>
</html>


donc j'aimerai qu'au chargement de la page il y est un effet fade sur le div, c'est à dire qu'il passe de la valeur 0 à 1 par exemple


et sinon pour le slide

Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <script type="text/javascript" src="mootools.js"></script>
   <script type="text/javascript">
   window.addEvent('domready', function() {
   
   //-vertical

   var myVerticalSlide = new Fx.Slide('vertical_slide');

   $('v_slidein').addEvent('click', function(e){
      e.stop();
      myVerticalSlide.slideIn();
   });

   $('v_slideout').addEvent('click', function(e){
      e.stop();
      myVerticalSlide.slideOut();
   });

   $('v_toggle').addEvent('click', function(e){
      e.stop();
      myVerticalSlide.toggle();
   });

   $('v_hide').addEvent('click', function(e){
      e.stop();
      myVerticalSlide.hide();
      $('vertical_status').set('html', status[myVerticalSlide.open]);
   });
   
   $('v_show').addEvent('click', function(e){
      e.stop();
      myVerticalSlide.show();
      $('vertical_status').set('html', status[myVerticalSlide.open]);
   });
   
   // When Vertical Slide ends its transition, we check for its status
   // note that complete will not affect 'hide' and 'show' methods
   myVerticalSlide.addEvent('complete', function() {
      $('vertical_status').set('html', status[myVerticalSlide.open]);
   });
});
    </script>
   <title>Fx.Slide Demo</title>
<style type="text/css">
h3.section {
   margin-top: 1em;
}

#vertical_slide, {
   background: #D0C8C8;
   color: #8A7575;
   padding: 10px;
   border: 5px solid #F3F1F1;
   font-weight: bold;
}

div.marginbottom {
   /* Since the Fx.Slide element resets margins, we set a margin on the above element */
   margin-bottom: 10px;
}
</style></head>
<body>
   <div class="marginbottom">
      <a id="v_slideout" href="#">slide out</a>
      |
      <a id="v_slidein" href="#">slide in</a>
      |
      <a id="v_toggle" href="#">toggle</a>
   </div>
   <div id="vertical_slide">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </div>
   
</body>
</html>



ben pareil que l'autre, quand la page se charge un div apparait automatiquement en slideIn par exemple

désolé de t'abreuver de code :oops:
mais c toi qui l'a voulu :lol:

merci bcq rad pour ta disponibilité
@++

paps

ps : au fait j'ai oublié de te dire !! ya quelque temps j'avais mit un post sur une recherche d'opacity sur une div valide css2.1 et que tu m'avais dit que yavait pas pour le moement !!
hé bien j'ai trouvé figure toi et ca marche du feu de dieu !! :P
c'est la fonction applyOpacity de mootools !!!
d'où mon archarnement à continuer de travailler avec cette library plutot qu'une autre :wink: sans pour autant m'y connaitre en javascript

Re: window onload

PostPosted: Fri Apr 03, 2009 11:56 am
by jeanpaps
salut rad

en attendant que tu répondes j'ai encore cherché et je suis tombé sur ça venant de toi (post 5):
http://www.commentcamarche.net/forum/affich-11695259-comment-faire-des-lien-interne-progressif

est-ce que c'est un début de réponse, même si ce n'est pas tout à fait le script et l'effet qui me concerne ?
Ou bien suis-je complètement à côté de la plaque ??? :roll:
je n'ai pas essayé car j'attends de voir ce que tu en penses... :wink:

merci
paps

Re: window onload

PostPosted: Sat Apr 04, 2009 12:14 am
by RAD
Salut

oui ce n est pas le meme effet , mais c est bien le meme principe !

desole , la j ai pas trop de temps pour regarder , je lutte avec IE8 et des menus sur des sites qui ne passent plus et qui m ont demander de voir si je pouvais arrange le probleme , mais la je commence a devenir fou avec IE ,apres 5 heures de lute quand je le fais passer sous IE8 il passe plus IE7 et vice versa !!! je prescise que il passe tout les autres navigateurs :(

Re: window onload

PostPosted: Mon Apr 06, 2009 11:54 am
by jeanpaps
salut rad

c'est pas grave si tu n'as pas le temps
malheureusement je n'y arrive pas car je suis vraiment pas bon en javascript, il ne se passe rien quand j'essaie d'adapter le code :cry:

si un de ces 4 tu peux re regarder tant mieux :roll: sinon c pas grave je ne reviendrais plus jamais sur ton site :lol:

bon courage avec ie
++
paps

Re: window onload

PostPosted: Tue Apr 07, 2009 12:57 pm
by RAD
bon j ai pas le temps mais voila un tuto pour moo en francais !
http://www.6ma.fr/tuto/mootools+jours+j ... uction-458

anglais !
http://www.consideropen.com/blog/2008/0 ... e-library/