Fade Effect problem in IE

hi everyone,
I'm having problems with a fade out/in transition in IE8. The area I am changing has a white background (actually there are a few nested divs that all have a white background), and the fade effect triggers on a click in the navigation area and fades everything into the body background color (dark brown) and back. The effect works fine in firefox and safari. Anyone know how to fix this problem? I want the content that is fading to maintain the white background and not fade to brown and back. you can view the page here to see whats going on.
http://www.prometheusbusiness.com/testarea/NoelRose/home.html
also, (and this is a really small issue, so I'm not too concerned if I can't fix it) after the page loads, the first fade out transition doesnt seem to fire, it just disappears, and the new page fades in. after the first time, everything works as I expect, but it would be great if every click worked exactly the same every time.
any help is appreciated, thanks.
-Dan

Similar Messages

Appear/fade effect problems

I'm working on a portfolio website: www.carolinedelson.com
The index page image appears how i want it to, but when you click s/s 2013 and click one of the gifs, the images flash on the screen then display the effect. i don't know how to change this to a smooth fade in. I also work in the display mode of dreamweaver cs6 a lot more than directly with the code, so any simple fixes would be really appreciated!

On Thu, 23 Aug 2007 17:07:25 +0100, David Powers
<[email protected]>
wrote:
>[email protected] wrote:
>> <img src="images/places_03.jpg" alt=""
name="main" width="642" height="508"
>> id="main" onload="MM_effectAppearFade(this, 1000, 0,
100, false)">
>
>You can't use an onload event on an image. It works only
on the <body>
>tag. Remove the Fade effect from the image, then select
the body tag in
>the Tag selector at the bottom of the Document window.
Apply the Fade
>effect to the body, and select "main" as the Target
Element.
David - I'm sure it's in a book somewhere - but I can't find
it.
I already have the Modify Template Make Attribute Editable
<body id="default" >
use this to apply css to specific pages
Can you add a second or even third so that in addition you
can use
onload javascripts.
I've rather fought shy of Javascript - preferring to use php,
but I
now think that was a mistake - and just use JS to provide
extra
features whilst allowing for people that have it disabled
Or maybe I should just ditch Templates altogether and use
100% ssi's
~Malcolm N....
~

Fade Effect Flickering Problem

I have thumbnail gallery that utilizes the fade effect on the
mouseover event. Unfortunately, if the user mouses over the
thumbnails too quickly, the images flicker quite horribly. I was
wondering if there was a way to remove this problem.
Thanks
You can view the gallery
here

Hello existdissolve,
Your problem in the gallery has 2 issues:
1. Indeed you discovered a bug that I managed to fix in the
internal version that will be published next week. In the code
below that I will give I will include the work around for the
problem too.
2. Seems that you didn't completely understood the meaning of
the toggle option and I will try to explain you more detailed here.
Basically the toggle option is not controlling the direction of the
running effect as I think you understood. The toggle will not tell
to the effect to run in reverse direction but instead its scope is
to tell the effect that it CAN run in reverse direction.
When you try to animate an element using a link, when you set
the toggle option on, the animation will go between the from and to
values, on the first click, and will go between to and from values
on a second click. This cycle could repeat infinitely.
When you try to achieve this effect using 2 links you'll have
2 implementation solutions:
a. Use the same line of code for both links.
<a href="#" onclick="MM_effectAppearFade('element', 500,
0, 100, true)">Click Me First</a>
<a href="#" onclick="MM_effectAppearFade('element', 500,
0, 100, true)">Click Me Second</a>
You will observe that if you'll click these links in order
the element will appear and then will disappear back.
b. Use 2 non toggling effects with the from and the to
options reversed:
<a href="#" onclick="MM_effectAppearFade('element', 500,
0, 100, false)">Click Me First</a>
<a href="#" onclick="MM_effectAppearFade('element', 500,
100, 0, false)">Click Me Second</a>
There is however a problem why I am not recommending this
second solution in your case. If you click on the links in the
second example fast enough in their order you'll have a weird
result. The 2 effects are not knowing the other effect is running
so you'll end up with 2 effects that tries to do an opposite action
in the same time on the same element. This is somehow happening in
your case too if you move the mouse over the images fast enough you
can't predict anymore what the result will be.
In this situation you'll have to change a little bit the code
in your page. Right now you have this code:
<img id="tn{ds_RowID}"
src="galleries/{dsGalleries::@base}{dsGallery::@base}/thumbnails/{@thumbpath}"
width="90"
height="90"
alt="Sample Images from Spry Data."
title="{ds_RowNumber}"
style="opacity:0.3; filter:alpha(opacity=30)"
onmouseover="MM_effectAppearFade('tn{ds_RowID}', 500, 30,
100, false)"
onmouseout="MM_effectAppearFade('tn{ds_RowID}', 500, 100, 30,
true)"
onclick="HandleThumbnailClick('{ds_RowID}');" />
When you change the onmouseover and the onmouseout effects to
match the first solution I explained above you'll result with this
code:
<img id="tn{ds_RowID}"
src="galleries/{dsGalleries::@base}{dsGallery::@base}/thumbnails/{@thumbpath}"
width="90"
height="90"
alt="Sample Images from Spry Data."
title="{ds_RowNumber}"
style="opacity:0.3; filter:alpha(opacity=30)"
onmouseover="MM_effectAppearFade(this, 500, 30, 100, true)"
onmouseout="MM_effectAppearFade(this, 500, 30, 100, true)"
onclick="HandleThumbnailClick('{ds_RowID}');" />
You observe that I changed in both effects the target element
from tn{ds_RowID} to the special javascript keyword 'this'. I did
this to overcome the bug I told you about that you discovered in
the SpryEffects.
Let me know if you have further questions on this problem.
Regards,
Cristian MARIN

Fade Effect

I have a code on my buttons, which makes a blank image
currently on stage get replaced with a different one when a button
is rolled over.
The code I am using is this:
on mouseenter me
sprite(3).member="a"
on mouseleave me
sprite(3).member="blank"
end
Very simple lingo. Is there a way that when the new image
comes to view, it fades in when the mouse rolls over the button,
instead of just popping in, and fade out once the mouse leaves the
button, so that I end up with a smooth transition.
Thank you.

Guys:
Thanks for taking your time to help me with the issue.
I actually got an answer from another member that solved my
problem. The code that was posted here was making the button sprite
do the fade effect.
My friend did some tweaking to that code to achieve what I
needed.
Here is the code:
property fadeSprite
property totalSteps
property eachStep
property animateMe
on getPropertyDescriptionList
myPropList = [:]
myPropList.addProp(#totalSteps,[#comment:"select the number
of steps for the
fade:",#format:#integer,#range:[#min:5,#max:20],#default:10])
myPropList.addProp(#fadeSprite,[#comment:"enter the sprite
to fade:",#format:#integer,#default:1])
return myPropList
end
on beginSprite me
sprite(fadeSprite).blend = 0
animateMe = true
eachStep = 100/totalSteps
end
on mouseEnter me
animateMe = false
end
on mouseLeave me
animateMe = true
end
on enterFrame me
if animateMe then
if sprite(fadeSprite).blend > 0 then
sprite(fadeSprite).blend = sprite(fadeSprite).blend -
eachStep
end if
else
if sprite(fadeSprite).blend < 100 then
sprite(fadeSprite).blend = sprite(fadeSprite).blend +
eachStep
end if
end if
end
With this one, I am able to select which sprite is fading in
and out. Again, thanks for your help.

Fade Effect Issue with table structure

I have an existing HTML page with a table framework that uses
CSS divs in some of the table rows. My SPRY data is currently
wrapped in DIV tags within the table. I've discovered that the
table is screwing up the fade effect in IE7. Is there any way I can
get around this without removing the table and recoding the whole
page in CSS? FYI...I using version 1.4. I'm not sure if 1.5 will
fix this issue.

Essentially the fade in fade out effect isn't working at all
in IE. It's setup as a slideshow and uses the fade effect as a
transition between the spry data. The slideshow works fine just
without the fade effect. Everything works perfectly in Firefox
though. I know this code will work as we have used it before, the
only thing different is that I have my DIV with the SPRY content
wrapped within a table cell and row. I've read that the TR tag
cannot be used, but it's not exactly using the TR as an ID. Once I
comment out the table, tr, and td tags, the effect works no problem
so I know it is the table. I can't give you the URL because it's on
our local network.

Fade effect with DataGrid. Header text are visible ... :(

Hi,
the problem with DataGrid.
If I specify the Fade effect for showing DataGrid, all lines
are showing correct, so the fade works, but the headers text and
the data texts are showing immediately (like without Fade).
Is it possible to avoid this effect? I want to show my
datagrid from alpha 0.00 to 1.00 for ALL elements (for lines, for
headers, for headers TEXT and of course of data TEXT)
Is it a bug?

I had the same problem. I havent fixed it but I did a work
around and used a WipeDown effect in parallel. It eliminates the
headers of appearing immediately.

Firefox is hanging when the page scrolls down to a html5 video or the page to a slideshow with fade effect

Every time a page has a html5 video or a slideshow with fade effect Firefox 3.6 becomes terriblely slow. It freezes with this test: http://demos.hacks.mozilla.org/openweb/HWACCEL/
I have Fedora 14 and before that Fedora 13 and the problem happens with both.
The same doesn't happen on Opera or Google Chrome.
'''UPDATE 1''': I have already tryed the Safe Mode and the problem happens the same.
'''UPDATE 2:''' This page full of videos scroll smothly without any problemas: http://brettgaylor.tumblr.com/tagged/webmademovies

I forgot to say that I did tryed the Safe Mode just to see if the slow was not being caused by some extension or plugin. However the result was all the same. By the way, the slow happens even if there is only one page opened. I am not thinking it is something related to the ATI video card or even Fedora because the same slow does't happen in Chrome and Opera...

On Mouse Text Appear/Fade IE Problem

Hello Dreamweaver Sages,
I'm having an odd problem I was hoping someone might be able to help me with. First, I am using CS6 and the latest of all browsers.
I have applied the same Spry Appear/Fade effect to a images having <a href> links and text with <a href> links created directly from the behavior panels. All coding has been properly located/placed.
Here is the odd thing:
1) The fade effect works pefectly on images and linked text on my Mac, on all browsers.
BUT...
2) On a PC, the fade effect works fine on images, but does not work at all on the linked text in any later version of IE.
I have tried making a few adjustments but have had no luck getting it to work. The only thing I can think of is a conflict with the "text decoration" designated as "none" in my overall defintition for the text involved, but don't think it's the case.
Anyone else heard of this? Is it just me or is there a work-around to an established issue?
Thanks!
Matt

I have a webpage containing a textbox. Some events are bound to the textbox on key events, hence the UI changes as the user types on the textbox.
With IE10 a clear ('X') button appears on the textbox which allows users to clear the textbox.
Is there any event in JavaScript through which I can capture the clearing of the textbox with the clear ('X') button?
I also tried using change event of the textbox, but the problem with change event is that it gets fired only when the user focuses out of the textbox (see this fiddle
http://jsfiddle.net/MDMV5/ for repro) , which I don't want.
Reiterating the question: Is there any event in JavaScript through which I can capture the clearing of the textbox with the clear ('X') button?
If the user cuts/pastes with the mouse, does your UI behave as you would like?
I can accept events not occurring until the user moves to another control, but there seems to be a bug with this: if the user clicks the X button then clicks on a dropdown list control, the onchange event is not fired (found on Win 7 x64 + IE10 x64).
So I've had to use the input::-ms-clear hack to disable this feature :(

Flex 4 Fade effect reverse filter suspend ?

Strigh to the point:
I have a button which plays fade effect on a component. The fade effect looks like this:
var fadeOut:Fade = new Fade();
fadeOut.target = target;
fadeOut.duration = 5000;
fadeOut.alphaTo = 0;
fadeOut.filter =
"remove";
fadeOut.captureStartValues();
removeElement(target);
fadeOut.play();
Now I have a second button on which I have:
fadeOut.reverse();
The problem is that I want when the effect is reversed not to removeElement(target), but it still gets removed as soon as the effect ends. I tried on the second button fadeOut.filter = "", but no luck.
So does anyone know how can I delete that filter so my element doesn't get removed when the effect is reversed and goes back to start state?
Thanks !

Probably there's a chance I might use this:
mx.core.UIComponent.effectFinished(effectInst:IEffectInstance):void
Called by the effect instance when it stops playing on the component. You can use this method to restore a modification to the component made by the effectStarted() method when the effect started, or perform some other action when the effect ends.
But I don't seem to find any documentation on that, no examples no nothing, I don't understand how can i get that IEffectInstance and how am I supposed to restore the modifications to the component made by the effectStarted...
Definitely need some help here...

Tooltip Fade Effect in IE7 Not Working

I'm hoping someone has a fix for this ...
When using IE7, the first time you mouse over a
tooltip—everything works fine.
But if you mouse over it again, the Fade Effect no longer
works. Is there a way to fix this clitch??

Does anyone know when a next version of Spry is going to be
released. I can't seem to fix this problem and I'm hoping that it's
fixed in the next version.
When using IE7, the first time you mouse over a
tooltip—everything works fine.
But if you mouse over it again, the Fade Effect no longer
works. Is there a way to fix this glitch??

X6 menu fade effect query

Im wondering if theres anything to disable this...or its just me...i turned off the theme effects already. I just dont like it, i feel like it slows down the fone...im wondering if there could be any future updates on the nokia X6 since the last one was v40? Nokia need to remove this menu fade effect! seriously...

It is not possible to removed it as it is part of the default theme shell.
If you find this post helpful, a click upon the white star at bottom would always be appreciated.
If it also solves your problem, clicking ACCEPT AS SOLUTION below it will benefit other users!

Slow fade effect

Hi!
I'm using the following code to do a fade transition effect between two images:
     public void render(Graphics g, Image imageFrom, Image imageTo, int width, int height) {
          BufferedImage buffer=gc.createCompatibleImage(width,height);
          Graphics2D g2 = (Graphics2D)buffer.getGraphics();
          int counter=0;
          while (counter<90) {
               counter=counter+2;
               double alphaScalar = Math.sin(Math.toRadians(counter));
               g2.setComposite(AlphaComposite.SrcOver);
               g2.drawImage(imageFrom, 0, 0, null);
               g2.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, (float)alphaScalar));
               g2.drawImage(imageTo, 0, 0, null);
               g.drawImage(buffer, 0, 0, null);
               try {
                    Thread.sleep(5);
               catch(InterruptedException ex){}
          g.dispose();
          g2.dispose();
          buffer.flush();
     }My main problem is that using a buffer to save the image composite before drawing it over the panel's Graphic context slows the effect considerably. I have other effects (scrolling, sliding and some more) which don't require the use of an intermediate buffer and they are way faster without it. I'm looking for a way to improve the perfomance of my fade effect. I've tried to draw the image composite over the panel's Graphic context directly (no buffer) but the screen flickers. Can anyone help me, please ?
Regards

import java.awt.*;
import java.awt.event.*;
import java.awt.image.BufferedImage;
import java.io.*;
import java.net.*;
import javax.imageio.ImageIO;
import javax.swing.*;
public class ImageFading
    public ImageFading()
        BufferedImage[] images = loadImages();
        FadePanel fadePanel = new FadePanel(images);
        JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.getContentPane().add(fadePanel);
        f.setSize(400,400);
        f.setLocation(200,200);
        f.setVisible(true);
    private BufferedImage[] loadImages()
        String[] fileNames = {
            "greathornedowl.jpg", "mtngoat.jpg", "bclynx.jpg", "redfox.jpg"
        BufferedImage[] images = new BufferedImage[fileNames.length];
        try
            for(int j = 0; j < images.length; j++)
                URL url = getClass().getResource("images/" + fileNames[j]);
                images[j] = ImageIO.read(url);
        catch(MalformedURLException mue)
            System.err.println("url: " + mue.getMessage());
        catch(IOException ioe)
            System.err.println("read: " + ioe.getMessage());
        return images;
    public static void main(String[] args)
        new ImageFading();
class FadePanel extends JPanel
    BufferedImage[] images;
    int last, next;
    AlphaComposite ac;
    float alpha;
    public FadePanel(BufferedImage[] images)
        this.images = images;
        alpha = 1.0f;
        last = 0;
        next = 1;
        new FadeController(this);
    protected void paintComponent(Graphics g)
        super.paintComponent(g);
        Graphics2D g2 = (Graphics2D)g;
        int w = getWidth();
        int h = getHeight();
        int x = (w - images[last].getWidth())/2;
        int y = (h - images[last].getHeight())/2;
        ac = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, alpha);
        g2.setComposite(ac);
        g2.drawImage(images[last], x, y, this);
        ac = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 1.0f - alpha);
        g2.setComposite(ac);
        g2.drawImage(images[next], x, y, this);
    public void advance()
        last = next;
        next = (next + 1) % images.length;
    public void fade(float alpha)
        this.alpha = alpha;
        repaint();
class FadeController
    FadePanel fadePanel;
    boolean rotate;
    float alpha;
    final float alphaInc = 0.01f;
    public FadeController(FadePanel fp)
        fadePanel = fp;
        rotate = true;
        beginRotation();
    private void beginRotation()
        new Thread(new Runnable()
            public void run()
                while(rotate)
                    fadePanel.advance();
                    fade();
                    try
                        Thread.sleep(10000);
                    catch(InterruptedException ie)
                        System.err.println("rotate interrupt: " + ie.getMessage());
        }).start();
    private void fade()
        alpha = 1.0f;
        new Thread(new Runnable()
            public void run()
                while(alpha > 0)
                    fadePanel.fade(alpha);
                    alpha -= alphaInc;
                    try
                        Thread.sleep(35);
                    catch(InterruptedException ie)
                        System.err.println("fade interrupt: " + ie.getMessage());
        }).start();
}

Image rotation with fade effect

I am new to the spry framework and have just started going
through the examples to see if I could create an image rotator that
fades the images into each other when changing. I have taken
snippets from different places to do this and think I have the
answer but really wanted some feedback to sanity check and let me
know if this is the best way of doing it. If it is, then I hope
others will find it useful.
Here is the url to the example:
Image
rotation example
And here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<title>Sample Image Rotation</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible"
content="IE=7;FF=3;OtherUA=4" />
<meta name="author" content="www.baytree-cs.com - Peter
Barkway"/>
<meta name="copyright" content="(C)2006 Baytree Computer
Services, All right reserved."/>
<meta name="abstract" content="ISM Homepage" />
<meta name="description" content="ISM Homepage" />
<meta name="keywords" content="ISM Homepage"/>
<meta name="robots" content="all,index,follow"/>
<meta name="distribution" content="global"/>
<meta name="mssmarttagspreventparsing"
content="true"/>
<meta name="rating" content="general"/>
<style type="text/css">
.element{
float:left;
position: relative;
width: 350px;
text-align: center;
#display{
opacity: 0;
filter: alpha(opacity=0);
#animate{
left: -350px;
opacity: 1;
filter: alpha(opacity=100);
</style>
</head>
<body>
<noscript><h1>This page requires JavaScript.
Please enable JavaScript in your browser and reload this
page.</h1></noscript>
<div id="container">
<div id="display" class="element"
spry:detailregion="dsImg"><img src="<?php echo
$rootDir.$baseDir;?>/{@base}{@path}"/></div>
<div id="animate" class="element"
spry:detailregion="dsImg2"><img src="<?php echo
$rootDir.$baseDir;?>/{@base}{@path}"/></div>
<p class="clear"></p>
</div>
<script type="text/javascript"
src="js/xpath.js"></script>
<script type="text/javascript"
src="js/SpryData.js"></script>
<script type="text/javascript"
src="js/SpryEffects.js"></script>
<script type="text/javascript">
var dsGalleries = new Spry.Data.XMLDataSet("spry.php",
"galleries/gallery", { method: "POST", postData:
"c=1&d=<?php echo $baseDir;?>", headers: {
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
var dsImg = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var dsImg2 = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var imageInterval = 8000; // 8 seconds
var imageFadeInterval = 4000; // 4 seconds
var image2Loaded = null;
var effect = new Spry.Effect.Fade('animate', {from: 100, to:
0, toggle: true, duration: imageFadeInterval});
// Prepare an observer that will change the opacity of the
initially
// hidden element in oposition with the initially visible
element
var obs1 = new Object;
// On each effect step we calculate the complementary
opacity for the other image container.
obs1.onStep = function(ef){
if (typeof otherEl == 'undefined')
otherEl = document.getElementById('display');
var opacity = 0;
if(/MSIE/.test(navigator.userAgent)){
opacity = Spry.Effect.getStyleProp(ef.element,
'filter').replace(/alpha$opacity([0-9]{1,3})$/, '$1');
otherEl.style.filter = "alpha(opacity=" + parseInt(100 * (1
- opacity), 10) + ")";
}else{
opacity = Spry.Effect.getStyleProp(ef.element, 'opacity');
otherEl.style.opacity = (1 - opacity);
// Attach the observer to the Fade effect
effect.addObserver(obs1);
function fadeInContent() {
// 1st time in so set the current rows so that the 'animate'
set is 1 ahead of the 'display' set
if(image2Loaded == null) {
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 2)
% dsImg.getData().length);
image2Loaded = 0;
} else {
if(image2Loaded) {
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
image2Loaded = 0;
} else {
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
image2Loaded = 1;
effect.start();
var obs2 = {
onPostLoad: function() {
setInterval("fadeInContent()", imageInterval);
dsImg.addObserver(obs2);
</script>
</body>
</html>

I think that I might have got this going now. Here is the
code if anyone wants to use it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<title>Sample Image Rotation</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible"
content="IE=7;FF=3;OtherUA=4" />
<meta name="author" content="www.baytree-cs.com - Peter
Barkway"/>
<meta name="copyright" content="(C)2006 Baytree Computer
Services, All right reserved."/>
<meta name="abstract" content="ISM Homepage" />
<meta name="description" content="ISM Homepage" />
<meta name="keywords" content="ISM Homepage"/>
<meta name="robots" content="all,index,follow"/>
<meta name="distribution" content="global"/>
<meta name="mssmarttagspreventparsing"
content="true"/>
<meta name="rating" content="general"/>
<style type="text/css">
.element{
float:left;
position: relative;
width: 350px;
text-align: center;
#display{
opacity: 0;
filter: alpha(opacity=0);
#animate{
left: -350px;
opacity: 1;
filter: alpha(opacity=100);
</style>
</head>
<body>
<noscript><h1>This page requires JavaScript.
Please enable JavaScript in your browser and reload this
page.</h1></noscript>
<div id="container">
<div id="display" class="element"
spry:detailregion="dsImg"><img src="<?php echo
$rootDir.$baseDir;?>/{@path}"/></div>
<div id="animate" class="element"
spry:detailregion="dsImg2"><img src="<?php echo
$rootDir.$baseDir;?>/{@path}"/></div>
<p class="clear"></p>
</div>
<script type="text/javascript"
src="js/xpath.js"></script>
<script type="text/javascript"
src="js/SpryData.js"></script>
<script type="text/javascript"
src="js/SpryEffects.js"></script>
<script type="text/javascript">
var dsGalleries = new Spry.Data.XMLDataSet("spry.php",
"galleries/gallery", { method: "POST", postData:
"c=1&d=<?php echo $baseDir;?>", headers: {
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
var dsImg = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var dsImg2 = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var imageInterval = 4000; // 8 seconds
var imageFadeInterval = 2000; // 4 seconds
var effect = new Spry.Effect.Fade('animate', {from: 100, to:
0, toggle: true, duration: imageFadeInterval});
// Prepare an observer that will change the opacity of the
initially
// hidden element in oposition with the initially visible
element
var obs1 = new Object;
// On each effect step we calculate the complementary
opacity for the other image container.
obs1.onStep = function(ef){
if (typeof otherEl == 'undefined')
otherEl = document.getElementById('display');
var opacity = 0;
if(/MSIE/.test(navigator.userAgent)){
opacity = Spry.Effect.getStyleProp(ef.element,
'filter').replace(/alpha$opacity([0-9]{1,3})$/, '$1');
otherEl.style.filter = "alpha(opacity=" + parseInt(100 * (1
- opacity), 10) + ")";
}else{
opacity = Spry.Effect.getStyleProp(ef.element, 'opacity');
otherEl.style.opacity = (1 - opacity);
// Attach the observer to the Fade effect
effect.addObserver(obs1);
function fadeInContent() {
// 1st time in so set the current rows so that the 'animate'
set is 1 ahead of the 'display' set
//use this flag to avoid the effect running on load
if (typeof image2Loaded == 'undefined') {
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 2)
% dsImg.getData().length);
var curRow = dsImg.getCurrentRow();
image2Loaded = 0;
} else {
if(image2Loaded) {
var img = document.getElementById('display');
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
var curRow = dsImg.getCurrentRow();
image2Loaded = 0;
} else {
var img = document.getElementById('animate');
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
var curRow = dsImg2.getCurrentRow();
image2Loaded = 1;
var imgPath = '<?php echo $rootDir.$baseDir;?>/' +
curRow["@path"];
var gImageLoader = new Image();
gImageLoader.onload = function()
effect.start();
gImageLoader.src = imgPath;
var obs2 = {
onPostLoad: function() {
setInterval("fadeInContent()", imageInterval);
dsImg2.addObserver(obs2);
</script>
</body>
</html>

Fade effect question

I can implement a fade in effect with a single image, but I
cannot get the same code to work with the arrayed images generated
in the "photoDemo" tutorial on the Adobe site. Sho Kuwamoto has a
fade in working in his tutorial (
http://labs.adobe.com/technologies/flexbuilder2/tutorials/#)
though with different syntax (that I can't make work either), so I
know the array isn't the issue. Why does this work in one, but not
the other, example?
Any help would be greatly appreciated. I'm using the FB3
Beta for the moment.
Thanks in advance.
1) In this example, the fade out works fine ...
<?xml version="1.0"?>

<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml">
<mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0"
alphaTo="0.0"/>
<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0"
alphaTo="1.0"/>
<mx:Panel title="Fade Effect Example" width="95%"
height="95%"
paddingTop="5" paddingLeft="10" paddingRight="10"
paddingBottom="5">
<mx:Text width="100%" color="blue"
text="Use the Fade effect to show or hide the text and
image. Use an embedded font when applying the Fade effect to
text."/>
<mx:Image source="photo.png"
visible="{cb1.selected}"
hideEffect="{fadeOut}" showEffect="{fadeIn}"/>
<mx:CheckBox id="cb1" label="visible"
selected="true"/>
</mx:Panel>
</mx:Application>
2) In the itemRenderer ("thumbnails" here) of the "photoDemo"
tutorial on the Adobe site (
http://learn.adobe.com/wiki/display/Flex/1b.+Code+Files),
it does not. It compiles and runs, but seems to ignore the effect
call. Why?
"thumbnails" ...
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
width="125" height="125"
horizontalAlign="center"
paddingBottom="5" paddingLeft="5" paddingRight="5"
paddingTop="5">
<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0"
alphaTo="1.0"/>
<mx:Image source="{data.thumbnail.url}"
showEffect="{fadeIn}" />
</mx:VBox>
main ...
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
[Bindable]
private var photoFeed:ArrayCollection;
private function requestPhotos():void {
photoService.cancel();
var params:Object = new Object();
params.format = 'rss_200_enc';
params.tags = keywords.text;
photoService.send(params);
private function photoHandler(event:ResultEvent):void {
photoFeed = event.result.rss.channel.item as
ArrayCollection;
]]>
</mx:Script>
<mx:HTTPService id="photoService" url="
http://api.flickr.com/services/feeds/photos_public.gne"
result="photoHandler(event)" />
<mx:states>
<mx:State name="panel1Zoomed">
<mx:SetProperty target="{panel1}" name="width"
value="831"/>
<mx:SetProperty target="{panel1}" name="height"
value="455"/>
<mx:AddChild relativeTo="{panel1}"
position="lastChild">
<mx:TileList x="9" y="55" width="791" height="353"
dataProvider="{photoFeed}"
itemRenderer="thumbnails"></mx:TileList>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Panel x="10" y="10" width="542" height="75"
layout="absolute" id="panel1" resizeEffect="Resize">
<mx:Label x="10" y="10" text="Keyword:" width="63"/>
<mx:TextInput x="116" y="8" id="keywords"/>
<mx:Button x="307" y="8" label="search"
id="keywordButton"
click="requestPhotos();currentState='panel1Zoomed'"/>
</mx:Panel>
</mx:Application>

I've never used this effect. Maybe if you preload the image(s)...
Go to Behaviors panel.
Click the plus sign (+).
From the drop menu, select Preload Images.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Fade Effect working weird.

My little app is driven by a TabNavigator with each tab
showing a different "page" with DataGrids/Form/TabNavs etc. I am
trying to fade from "page" to "page" and all looks fine except Text
types on the "page". They don't fade, just abruptly disappear once
the fadeOut alpha reaches some number. Am I missing something? All
help is appreciated.

"rtalton" <[email protected]> wrote in
message
news:gjp0v7$1r7$[email protected]..
> In order to use Fade effects on text, the font must
first be embedded.
Or, if you can get direct access to the text objects, you can
set the
blendMode of the text to "layer", and then Fade effects will
work on them
properly.

Fade Effect problem in IE

Similar Messages

Maybe you are looking for