Detail Fade Effects Multiple divs

I've been working from the sample adobe has online:
http://labs.adobe.com/technologies/spry/samples/data_region/DetailRegionEffectsSample.html
It is set up to only fade in and out the description div, is
there any way to achieve the same effect but with multiple divs
fading in and out on click of a list item? For example I want to
bring in a photo specified in the xml but in a separate div. I know
I can bring the photo into the same div and there could be other
work arounds in regards to placement on the page but this seems
like a more elegant solution to me (but maybe not!)

Hi,
If the second div you want to animate contains dynamic data
from the same data set as it is in description case from the sample
you gave us, then you simply have to duplicate the code that is
created for element with id="description".
At the beginning of the code, you have some custom functions
that creates the fade in / fade out effect and what you have to do
is to use that code also for the div you want to animate by
duplicating the existent code and just make the change to the id.
In the original sample the effect work for element that has the
id=description and you have to do the same for your div having the
id you added for it.
var effect1 = new Spry.Effect.Fade('description1', { to: 100,
from: 0, duration: 500, finish: function() {
// The region is now showing. Process any pending row change
request.
gEffectInProgress = null;
if (gPendingSetRowIDRequest >= 0)
var id1 = gPendingSetRowIDRequest;
gPendingSetRowIDRequest = -1;
fadeOutContentThenSetRow(id1);
efffect1.start();
Diana

Similar Messages

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 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

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

Fade Effect Query

I am looking for assistance with the spry fade effect. i have
a number of divs all with the same class currently being output via
coldfusion on the page.
the plan is that when i mouse over one div, all the other
divs with the same class fade down slightly so the focused div
stands out. the class for the divs is called "box1" for example and
there are 15-17 "boxes" per page. Im fairly sure i have seen this
effect somewhere just cant seem to find it.
can anyone help out with this or point me in the direction of
someone you can? i appreciate spry may not be the best way to
tackle this so any suggestions or advice relating to other libaries
would be great too. (currently using jquery elsewhere in the site)
any assistance will be greatly appreciated,
Cheers, Sean

I'm guessing those boxes are the only one with that
className.
So the best and ideal solution would be to include
SpryDOMUtils.js (is included in the labs download package folder
"includes")
Add it to your page.
And do a little change to that File. We are going to extent
the base funtionality of the results so we can apply fade to each
of those elements.
At the bottom of your SpryDOMUtils.js add this:
Spry.$$.Results.fade = function(from,to)
return this.forEach(function(n) {
Spry.Effect.DoFade(n,{from:from, to:
to});});
Now you can do in your js
Spry.$$('.box1').fade(100,60);
And it should fade all boxes with the classname .box1 to 60%
O wait. you wanted it on mouse over.. Still include the
SpryDOMUtils.js
but now do:
Spry.$$('.box1').addEventListener('mouseover',function(){Spry.Effect.DoFade(this,{from:100 ,
to:
60});})

Fade effect: how to do with "onEnterFrame"?

Hi,
I have a map with each city represented as a dot (MC). When
you mouse over the dot, another MC with more city details/text
quickly fades in, and fades out when you roll out. But I can't get
the full fade effect working. Need your advice...
In the dot MC, I put:
on (rollOver) {
_root.showCity();
on (rollOut) {
_root.hideCity();
In the root, showCity() and hideCity() are functions to fade
in and out the city details MC (city_sanfrancisco). I figured they
should be at the root level so they can be used by other city dots
(city_sandiego, city_boston, etc.) as well:
//this lets me change the speed for fading in and another
speed for fading out
var speedIn;
speedIn = 20;
var speedOut;
speedOut = 20;
//hard-coded city for now; set city to invisible when movie
starts
var city = city_sanfrancisco;
city._alpha = 0;
//this shows the city details by fading in
function showCity(){
city._alpha += _root.speedIn;
if (city._alpha > 100){
city._alpha = 100;
function hideCity(){
city._alpha -= _root.speedOut;
if (city._alpha < 0){
city._alpha = 0;
What this doesn't do is the full fade effect, because the
function only executes once, so city._alpha doesn't reach 100 when
it fades in. I've seen in other fade effect scripts, that they use
the enterFrame event, but I don't now how to use it here... or what
is the right syntax to make the city details MC fade in to 100% on
rollOver, and fade out to 0 on rollOut... and still be able to
apply a speed setting.
Any help would be appreciated.

you could try something like this:
on(rollOver){
onEnterFrame = showCity;
then modify your showCity function slightly:
function showCity(){
city._alpha += _root.speedIn;
if (city._alpha > 100){
city._alpha = 100;
delete onEnterFrame;
.. with similar adjustments to you on rollOut code.
Hope this helps,
Sinead.

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.

Rotating Image with Fade Effect

Ok looking to rotate an image with a fade effect; below is a rotating image code.
(Wanting this effect to be transitional and smooth. Transparency? Opacity?)
<script language="JavaScript">

</script>
Any ideas?

Here is the script I finally got working! It would have not came to me without your help guys!
<script>
var pictureWebPartName="Pictures"; // name of the picture library web part
var showThumbnails = true; //otherwise show full sized images
var randomImg = true; //set to true to show in random order
var useCustomLinks = false; //true to use second column as URL for picture clicks
var RotatingPicturesLoopTime = 5000; //2000 = 2 seconds
var imgToImgTransition = 1.0; //2 = 2 seconds
// don't change these
var selectedImg = 0;
var imgCache = [];
var imgTag;
function RotatingPictures()
imgTag = document.getElementById("RotatingImage");
//Find the picture web part and hide it
var Imgs = [];
var x = document.getElementsByTagName("TD"); // find all of the table cells
var LinkList;
var i=0;
for (i=0;i<x.length;i++)
if (x[i].title == pictureWebPartName)
// tables in tables in tables... ah SharePoint!
LinkList = x[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
// hide the links list web part
LinkList.style.display="none";
break;
if (!LinkList)
document.all("RotatingImageMsg").innerHTML="Web Part '" + pictureWebPartName + "' not found!";
//Copy all of the links from the web part to our array
var links = LinkList.getElementsByTagName("TR") // find all of the rows
var url;
var len;
for (i=0;i<links.length;i++)
//if (links(i).id.match("row")!=null)
if (links[i].childNodes[0].className=="ms-vb2")
len=Imgs.length
Imgs[len]=[]
Imgs[len][0] = links[i].childNodes[0].childNodes[0].href;
if (useCustomLinks)
if (links[i].childNodes[1].childNodes.length>0)
{ Imgs[len][1] = links[i].childNodes[1].childNodes[0].href; }
else
{ Imgs[len][1] = "" }
if (Imgs.length==0)
document.all("RotatingImageMsg").innerHTML="No images found in web part '" + pictureWebPartName + "'!";
for (i = 0; i < Imgs.length; i++)
imgCache[i] = new Image();
imgCache[i].src = Imgs[i][0];
if (useCustomLinks)
imgCache[i].customlink=Imgs[i][1];
RotatingPicturesLoop();
// now show the pictures...
function RotatingPicturesLoop()
if (randomImg)
selectedImg=Math.floor(Math.random()*imgCache.length);
if (document.all){
imgTag.style.filter="blendTrans(duration=" + imgToImgTransition + ")";
imgTag.filters.blendTrans.Apply();
url=imgCache[selectedImg].src
if (useCustomLinks)
{ RotatingImageLnk.href=imgCache[selectedImg].customlink; }
else
{ RotatingImageLnk.href = url; }
if (showThumbnails)
// convert URLs to point to the thumbnails...
// from airshow%20pictures/helicopter.jpg
// to airshow%20pictures/_t/helicopter_jpg.jpg
url = revString(url);
c = url.indexOf(".");
url = url.substring(0,c) + "_" + url.substring(c+1,url.length);
c = url.indexOf("/");
url = url.substring(0,c) + "/t_" + url.substring(c,url.length);
url = revString(url) + ".jpg";
imgTag.src = url;
if (document.all){
imgTag.filters.blendTrans.Play();
selectedImg += 1;
if (selectedImg > (imgCache.length-1)) selectedImg=0;
setTimeout(RotatingPicturesLoop, RotatingPicturesLoopTime);
// utility function revString found here:
// http://www.java2s.com/Code/JavaScript/Language-Basics/PlayingwithStrings.htm
function revString(str) {
var retStr = "";
for (i=str.length - 1 ; i > - 1 ; i--){
retStr += str.substr(i,1);
return retStr;
// add our function to the SharePoint OnLoad event
_spBodyOnLoadFunctionNames.push("RotatingPictures");
</script>

<center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height="125" width="160" align="center" valign="middle">
<a name="RotatingImageLnk" id="RotatingImageLnk" alt="click for larger picture">
<img src="/_layouts/images/dot.gif" name="RotatingImage" id="RotatingImage" border=0>
</a>
<span name="RotatingImageMsg" id="RotatingImageMsg"></span>
</td>
</tr>
</table>
</center>
Thanks again guys!

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

Example Fade effect for data change?

Is there an example of how to use the fade effect when
transitioning from one record to another in a dataset?
What I have now is causing a blinking. The old data fades
out, new data appears then fades in.
<script type="text/javascript">

var fadePOout = new Spry.Effect.Fade('PO',{duration: 1000,
from: 100, to: 0});
var fadePOin = new Spry.Effect.Fade('PO',{duration: 1000,
from: 0, to: 100});
function observerPO(notificationType, notifier, data) {
if (notificationType == "onPreLoad") {
fadePOout.start();
if (notificationType == "onPostLoad") {
fadePOin.start();
dsPO.addObserver(observerPO);
</script>
REF: Spry 1.5

Yes, the example is what I want to happen. Am just not sure
it can work with a pagedview dataset as the master. Tried very hard
to follow your directions; Corrected the code in the
SpryEffects.js. Made the CSS entry for the 'PO' region to have
opacity:0. Copied your code and changed ds1 to my detail dataset
(dsPO) (also tried my master dataset, dsPOrders, out of
frustration). Changed the region name from 'description' to 'PO'
(which is the name of my region to fade in and out). Added
onclick="fadeOutContentThenSetRow('{ds_RowID}');" to the master
dataset record. (Yes, I added it. I still have no clue as to how
changes from the pagedview master dataset can update a detail
dataset, but it does.)
End result is the detail dataset appears as though the CSS
was not read. I know this because I can see spry:state="loading"
graphic. Then the data appears. It then disappears and fades in.
Clicking on a master dataset record repeats the above result.
Via Firebug am able to see that the function
fadeOutContentThenSetRow never runs. The function fadeInContent
runs several times. It appears to run through all events of the
data region twice (Accounting for why the data is seen
twice.)

Stuttering Fade Effect

You can see what I am working on here:
http://www.slimscents.com/newsite/
(under development).
What happens is this... Rolling over a div creates a fade
effect on a target div, and it works. However (especially on IE 7)
rolling over another div whilst the fade effect is ongoing, creates
an odd "stuttering" of the effect.
Help appreciated. I will be testing making the fade effect
global, but not sure if there is a way of identifying or testing if
the effect is is finished.
Code Below:
function UpdateInfo(infoType) {
var destObj=document.getElementById("infoBox");
//fadeIt.stop();
destObj.style.visibility="hidden";
destObj.style.textAlign="justify";
destObj.style.fontFamily="Arial";
var fadeIt = new Spry.Effect.Fade(destObj,{duration:
2000,from: 0, to: 100,toggle: false});
var inTxt="";
switch (infoType) {
case "whatIs":
inTxt="<iframe height='100%' name='info' width='100%'
src='sitedata/whatis.html'></iframe>";
break;
case "howDoes":
inTxt="<iframe height='100%' name='info' width='100%'
src='sitedata/howdoes.html'></iframe>";
//alert('how does');
break;
}// end switch
destObj.innerHTML=inTxt;
fadeIt.start();
}

Override JPanel's paintComponent() method. Call super and then fill the panel with desired color. The color must have proper alpha to change transparency. Add a timer to call repaint() e.g. 10 times changing the alpha from transparent to opaque.
Regards,
Stas

How do I move multiple Divs at a time?

Hi,
I can't seem to figure out how I move multiple Divs at a time. I have resized certain Div in the middle and now I have to move all the Divs that are below it up to align it with that certain div again. How do I select and move all the Divs in once? I know you can move them one at a time by changing the position in the properties or just drag them in the design view, but I have a fairly large amount of Divs.
Thanks in advance,
EC

but is there any other way? Like changing something in the properties that will make the Divs bump up to the Div aoove that when you remove one out of there
I'm afraid not.
I imported the whole site as divs by splitting the images in photoshop and saving it for web and devices.
This is approach is OK for quick comps to show a client but definitely NOT suitable for a production site. As soon as you attempt to edit your layout, the page will explode and fall apart. This is caused by the rigid/fragile code that graphics apps attempt to generate based on the images sizes.
Start over. Use graphics apps to slice and optimize images only.
Use DW to build your HTML and CSS code.
Creating your first web site in DW CS5 -
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html
Adobe Developer's Center - Getting Started tutorials
http://www.adobe.com/devnet/dreamweaver/?view=gettingstarted
Using DW Page Properties to create a basic CSS style sheet
http://kb2.adobe.com/community/publishing/505/cpsid_50576.html
APDivs as a primary layout method seldom works well. Here is why:
http://apptools.com/examples/pagelayout101.php
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

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

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 bold text in all IEs

I have created the following page
Cnet about
and used the spry fade effect on the section of text at the bottom
below the "A Sampling of what we offer" graphic.
It works fine but in IE6 and IE7 when viewed on an LCD
monitor, the bold blue text looks very choppy. I assume this has to
do with bad handling of opacity in IE. Does anyone know a hack to
fix this?

Hi artdoggy,
That is an IE bug with several workarounds. The first
workaround which is much simpler, is to specify a background color
or font on the element that you are fading in. This somehow
triggers IE to avoid this behavior.
The other workaround is to use an effect onPostEffect
observer or finish function to unset the filter function on the
element. You can see sample of how to use an observer here:
http://labs.adobe.com/technologies/spry/samples/effects/observers_sample.html
You'll have to do something like this in your observer:
effect.element.style.filter = "";
--== Kin ==--

Detail Fade Effects Multiple divs

Similar Messages

Maybe you are looking for