[scriptaculous] probleme effect appear [Résolu]

[venomelektro]

Je dois faire apparaitre un div avec un effet style appear ou autre

le probleme est que le div est 'hidden' avant

Code :

1
2
 
<div id='preview' style='position:absolute;visibility:hidden;display: none;'></div>

quand la souris passe sur une element précis (une image) une image plus grande s affiche dans le div preview

comme ceci

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
function AppearImg() {
 
newHTML = '<img src="' + imagename + '" />';
 
$("preview").innerHTML = newHTML;
 
new Effect.Appear("preview");
 
$("preview").style.display = 'block';
 
$("preview").style.visibility = 'visible';
 
}

Ca fonctionne mais on dirait que le code new Effect.Appear("preview"); affiche automatiquement le div

donc on a un tres court instant l affichage de l image normale , puis l effet commence, ce qui est pas tres joli ..(meme probleme avec d autres effets..)

connaissez vous un moment de contourner ca ?

Merci

[venomelektro]

personne ne sait ? ca sert pas a grand chose de faire des effets d apparition si on peut pas demarrer d un etat invisible quand meme..

[Matthieu2000]

code de appear...

[venomelektro]

Envoyé par Matthieu2000

code de appear...

??


new Effect.Appear("preview");

quel est le probleme ?

[Matthieu2000]

J'ai oublié ma boule de cristal
peux tu le mettre les codes en ligne?

[venomelektro]

héhé moi aussi

le code je le connais pas il est qq part dans la lib scriptaculous

http://script.aculo.us/

difficile de sortir le bout de code de son contexte mais enfin le voila

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
 
Effect.Opacity = Class.create();
Object.extend(Object.extend(Effect.Opacity.prototype, Effect.Base.prototype), {
  initialize: function(element) {
    this.element = $(element);
    if(!this.element) throw(Effect._elementDoesNotExistError);
    // make this work on IE on elements without 'layout'
    if(/MSIE/.test(navigator.userAgent) && !window.opera && (!this.element.currentStyle.hasLayout))
      this.element.setStyle({zoom: 1});
    var options = Object.extend({
      from: this.element.getOpacity() || 0.0,
      to:   1.0
    }, arguments[1] || {});
    this.start(options);
  },
  update: function(position) {
    this.element.setOpacity(position);
  }
});
 
Effect.Appear = function(element) {
  element = $(element);
  var options = Object.extend({
  from: (element.getStyle('display') == 'none' ? 0.0 : element.getOpacity() || 0.0),
  to:   1.0,
  // force Safari to render floated elements properly
  afterFinishInternal: function(effect) {
    effect.element.forceRerendering();
  },
  beforeSetup: function(effect) {
    effect.element.setOpacity(effect.options.from);
    effect.element.show(); 
  }}, arguments[1] || {});
  return new Effect.Opacity(element,options);
}

[Taum]

Salut,

le probleme est que le div est 'hidden' avant

Quelle est la raison de ça ?

Un div en display: none; n'est pas affiché, donc quel est l'interet de rajouter en plus visibility: hidden ?
De plus tu n'as pas besoin de faire $("preview").style.display = 'block'; après un Effect.Appear(), celui-ci s'en charge tout seul.

Pour résumer :
- Il faut que ton div soit en display: none; mais pas visibility: hidden;.
- Change ta fonction en :

Code :

1
2
3
4
5
function AppearImg() {
  newHTML = '<img src="' + imagename + '" />';
  $("preview").innerHTML = newHTML;  
  new Effect.Appear("preview");
}

[venomelektro]

merci et bien joué

tu ai raison je n ai jamais vraiment saisi la différence entre display none et visibility hidden c est pour ca que j emploi l un et l autre ou les deux

bon apparement pour scriptaculous il faut en rester au display none !