I.prototype.change flickers image when combined with the fade effect

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Attach an event to change images using - I.prototype.change - with a
fade effect when mouse goes over some elements
2. Mouse over elements :P

What is the expected output? What do you see instead?
I expect seeing a smooth fade effect when the image changes, instead,
*sometimes* (yes, that's weird), the new image slides from the left for
like 5px and the fade animation gets all chopped.

What version of the product are you using? On what operating system?
MyLib 1.0 on Slackware Linux. I couldn't reproduce the error on Google
Chrome, only Firefox. A buddy of mine also tried Firefox on Windows and saw
the same behavior.

Please provide any additional information below.
No exception gets thrown. There's a live version of the problematic page:
http://www.souagil.com.br/gabriel/myimagegallery/

Original issue reported on code.google.com by gabrielg...@gmail.com on 25 Mar 2010 at 7:23

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Looks like this only happens when there's no vertical scroll bar.

Original comment by gabrielg...@gmail.com on 25 Mar 2010 at 7:49

[GoogleCodeExporter]

What is happening in the demo is that (when there is no scroll bar initially), 
a new 
scrollbar is being introduced for a split second, which is why the overlay 
image is 
sliding to the left.  The scrollbar is not visible in FF3.6 in my testing, but 
you can 
bet it is there (I can see it clearly appearing/disappearing in FF1).  I will 
look at 
the demo code to see why this is happening.  I don't think it is a bug in My 
Library.

Original comment by dmark.ci...@gmail.com on 25 Mar 2010 at 8:52

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

You want to specify the image height/width in the call to preloadImage as well 
as 
you don't have the overlay images in the markup

preloadedImgs[src] = API.preloadImage(src.replace('_thumb', ''), 185, 185);

I'm playing around with your demo locally (if you haven't guessed!)  I'll see 
if I 
can get it in a working state as it sits.  I can tell that if the slideshow 
were 
higher on the page, there would be no issue regardless (but still you should 
use 
heights/widths with images).  :)

Original comment by dmark.ci...@gmail.com on 25 Mar 2010 at 9:47

[GoogleCodeExporter]

Well, even after putting height/width in, the problem remained.  Turns out it 
was a 
defect.  On injecting the overlay, it immediately positions it over the image 
to 
change; however, because the positioning is done in another function, it leaves 
the 
door open for a flicker of scroll bar (if there isn't one to begin with of 
course).  
Fixed locally, will be in the next update (likely tomorrow).

If you would like to fix your slide show now, here is the line I added:-

              if (options && options.effects) {
                elTemp = el.cloneNode(false);
                elTemp.id = elementUniqueId(el) + '_temporaryoverlay';
                oldChangeImage(elTemp, src);
                elTemp.style.visibility = 'hidden';
                elTemp.style.display = 'none';
                elTemp.style.position = 'absolute';
                elTemp.style.left = elTemp.style.top = '0'; // *** This one
                body.appendChild(elTemp);
                elTemp.style.display = 'block';
                overlayElement(elTemp, el);
                showElement(elTemp, true, options, function() { done(); if (fnDone) 
{ fnDone(el); } });
              }

The setElementHtml and setElementNodes functions will need similar patches.

I attached your build of mylib.js with the patch in place.

Sorry for any confusion!

Original comment by dmark.ci...@gmail.com on 25 Mar 2010 at 10:02

• Changed state: Accepted

Attachments:

• mylib.js

[GoogleCodeExporter]

Wow, I'm truly impressed!
Can't thank you enough, David. I have to say, if your lib doesn't get huge 
adoption 
the mankind is really doomed :)

About the width/height, is it really necessary? W3C validator says that my 
markup is 
fine: http://validator.w3.org/check?
uri=http://souagil.com.br/gabriel/myimagegallery/&charset=(detect+automatically)
&doct
ype=Inline&group=0

Thanks again!

Original comment by gabrielg...@gmail.com on 25 Mar 2010 at 10:28

[GoogleCodeExporter]

Thanks for the kind words!

And perhaps width/height are just recommended (highly).  I would put them in.  
At the 
very least, it makes it easier for the browser to render the document (which 
often 
leads to a more pleasant experience for the user).

Original comment by dmark.ci...@gmail.com on 27 Mar 2010 at 9:37

[GoogleCodeExporter]

Original comment by dmark.ci...@gmail.com on 27 Mar 2010 at 9:38

[GoogleCodeExporter]

Looks like you are doing some wonderful things to it on top of the fading.  Let 
me 
know when you are done and I'll update the link on our site.

Thanks for your efforts!

Original comment by dmark.ci...@gmail.com on 27 Mar 2010 at 9:43

[GoogleCodeExporter]

BTW, you need to move that Content-Type META above the TITLE (and hence above 
the 
scripts).  My Library looks for that is you have not disabled XML parse mode 
detection 
(see the isXmlParseMode method in the docs).

Original comment by dmark.ci...@gmail.com on 27 Mar 2010 at 10:27

[GoogleCodeExporter]

Original comment by dmark.ci...@gmail.com on 29 Mar 2010 at 9:11

• Changed state: Fixed