Fade Effect from Spry Table

In the tutorial provided by Adobe it shows one how to create
a dynamic link list that triggers an events region. I want to know
is can you insert a fade in Spry effect on a Spry region detail
that is triggered from a Spry table repeat object? I placed an
onClick function on the Div that houses the Spry region but the
image in the Spry Detail region fades in only after it blinks in at
100%. So the effect is only working a split second after the image
appears at 100% then snaps to 0% and fades to 100%. What is the
correct method for using spry effects from Spry Region Table Links
to a targeted DIV or Spry region detail?

So this example is exactly what I am looking for, however,
when one uses images instead of simple text I think it fouls up the
smoothness of the code presented here. My problem is it works,
however, if you click through the images back and forth eventually
the image fades out to 0%. I am guessing this it could be related
to a preloading and cache issue? Or does this code handle spry
details that load in images differently?
http://www.megalomedia-inc.com/clients/bob/print.html
Click print item 1 and 2 back and forth to create the error.
Any insight on how to make this run smoothly would be greatly
appreciated and when I am done with this AJAX application I will
share it with the SPRY community.

Similar Messages

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.

Quick Question about fade effect

Quick Question:
If I wanted to add a Fade Effect from one state to another
when a button is pressed.
How would I do that within the code?

quote:
Originally posted by:
atta707
You can do something like on the click of the button:
var fader:Fade = new Fade(targetUIComponent);
fader.duration = 1000;
fader...;
fader.play();
or listen for currentStateChanging event and write the same
similar code.
or define transitions from one state to another like:
<mx:Transition id="toOneOnly" fromState="*"
toState="OneOnly">
<mx:Sequence id="t1" targets="{[p2]}">
<mx:Iris showTarget="false" duration="350"/>
<mx:SetPropertyAction name="visible"/>
<mx:SetPropertyAction target="{p2}"
name="includeInLayout"/>
</mx:Sequence>
</mx:Transition>
Hey,
I would like to use the "transition from one state to
another", but if you can explain each part for me that would be
helpful.
If you can comment on each line of that code that would help
thanks

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

Appear/Fade Effect Trouble

I'm using the appear/fade effect to make the elements on my
pages fade in when they load. When I preview the pages, instead of
just fading in, they flash on screen for a millisecond before they
fade in. How do I solve this issue?
Here's an example of the code:
Please help!

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

How to open a new page from a Spry Table click, with element info?

Hello, Spry experts!
This is probably simple, but I've searched for hours and can't find what I need. I'm using Dreamweaver CS4 and Spry 1.6.1 to create a simple Spry Table from an XML data set using PHP as my back end. I've used Dreamweaver's Insert->Spry->Spry Data Set to create everything, and the table is working fine. Colors, clicks, sorts, etc., are all working correctly as expected.
What I want is to be able to add a behavior such that when a table row is clicked, I can open a new page. Moreover, I want to pass a parameter from the table to the new page, like http://www.mydomain.com/newpage.php?aid=12345 or whatever.
So, for example, my table has two columns, "a_id" and "a_name", and my repeat region looks like this:
<div spry:region="xml_assignments">
<table width="500">
<tr>
<th spry:sort="a_id" class="spry_header">ID</th>
<th spry:sort="a_name" class="spry_header">Assignment</th>
</tr>
<tr spry:repeat="xml_assignments" spry:setrow="xml_assignments" spry:odd="spry_odd" spry:even="spry_even" spry:hover="spry_hover" spry:select="spry_select">
<td>{a_id}</td>
<td>{a_name}</td>
</tr>
</table>
</div>
What I want is to be able to open an entirely new URL, passing the value of the {a_id} in the selected row as a parameter to the new URL, as in something like: http://www.mydomain.com/newpage.php?aid={a_id}
So my questions are:
1. How best to apply the action to the table? Add an onclick to the tr tag? Something else?
2. How to extract the {a_id} value from the current row and pass it as a parameter to the action?
Or maybe just take another approach entirely?
I know that I can make the actual text in the table cells hyperlinks, and use them to link to the new page, which is fine. The desire here is just to make it so that the user can click "anywhere" on the table row (as they can currently do with the spry:select behavior) and have the link kick off, whether they actually click on the linked text or somewhere in the row where there is no text.
I'm sure this is obvious and simple, but I'm new to this level of Spry detail, and my brain is fried from hunting. Any guidance will be gratefully appreciated!
Glen Barney

I found the answer myself, after posting this, of course!
I changed:
<tr spry:repeat="xml_assignments" spry:setrow="xml_assignments" spry:odd="spry_odd" spry:even="spry_even" spry:hover="spry_hover" spry:select="spry_select">
to
<tr spry:repeat="xml_assignments" spry:setrow="xml_assignments" spry:odd="spry_odd" spry:even="spry_even" spry:hover="spry_hover" spry:select="spry_select" onclick="window.location.href='./newpage.php?aid={a_id}';">
Basically just added the onclick parameter...
And it all just worked!

Filter spry table from repeater list

Using Dreamweaver, I am looking to find out how to link a
spry repeat list (Select Drop-Down) to a Spry table.
I have created a repeat list (Select Drop-Down) using a
distinct filter on a field in my XML data base :
The XML database is:
var ds2 = new
Spry.Data.XMLDataSet("Data/NetballDatafeed190401.xml",
"NetballList/NetballProducts/SubType",{sortOnLoad:"SubType",sortOrderOnLoad:"as
cending",distinctOnLoad:true});
The drop down list is created by
<div spry:region="ds2">
<select name="select" spry:repeatchildren="ds2">
<option value="{SubType}">{SubType}</option>
</select>
</div>
I have a table which I want to show only the values on the
table where the subType that matches the value from the select
list.
This data is populated by:
var ds1 = new
Spry.Data.XMLDataSet("Data/NetballDatafeed190401.xml",
"NetballList/NetballProducts",{sortOnLoad:"ProductPrice",sortOr
derOnLoad:"ascending"});
and is created by
div spry:region="ds1">
<table>
<tr>
<th>ProductName</th>
<th>ProductPrice</th>
<th>ImageURL</th>
<th>SubType</th>
</tr>
<tr spry:repeat="ds1">
<td>{ProductName}</td>
<td>{ProductPrice}</td>
<td><img src="{ImageURL}"/></td>
<td>{SubType}</td>
</tr>
</table>
</div>
I believe that I need to create a spry:Choose statement in
the drop down list which runs a function that filters the DS1 XML
data.
I beleive that The function need to look like
var myFilterFunc = function(dataSet, row, rowNumber)
some funtion here that filters ds1 on {SubType}.......
I will then need to run ds1.filter(myFilterFunc);
Any pointers or examples most welcome.

to do the the spry:if="'statement" needs to be in the
<tr> rows you want to filter on

When I use spry fade effect I get crisp font.

My page looks like this before fade effect. The letters are smooth.
After fade effect. I get this crisp letters.
Why ??
Thanks in advance.
And sorry about my poor english.

Thanks for your help and time.
I wrote the "background-color:#FFF;" css for the object and didn't work.
So I wrote the same css for the parent object and works perfectly.
Thanks again.

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 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 with tabbed panels

The background image of the tabbed panel flashes before the
new images fade in from 0% to 100%:
Demo page
Sometimes the effect works as intended and fades in
perfectly...however it consistently resorts to flashing first --
any ideas how to fix this?

These code snippet no longer work with the out of box 1.6
release. any hints on how to work around the initial blink problem?
Seems like these methods could be better designed.
I am building the code using the designer and this is my
tabbed pane:
<div id="MainTabbedPane" class="VTabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('TabbedPanelsContent1','FrontPage.html');MM_effectBlind ('TabbedPanelsContent1',
1000, '0%', '100%', false)">Home</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('TabbedPanelsContent2','SchedRates.html');MM_effectAppe arFade('TabbedPanelsContent2',
1000, 0, 100, false)">Schedule & Rates</li>
<li class="TabbedPanelsTab" tabindex="0">Program
& Description</li>
<li class="TabbedPanelsTab"
tabindex="0">Retreats</li>
<li class="TabbedPanelsTab"
tabindex="0">Bio</li>
<li class="TabbedPanelsTab" tabindex="0">Studio
Cats</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"
id="TabbedPanelsContent1">Front Page!!!</div>
<div class="TabbedPanelsContent"
id="TabbedPanelsContent2">Schedule & Rates</div>
<div class="TabbedPanelsContent"
id="TabbedPanelsContent3">Program &
Description</div>
<div class="TabbedPanelsContent"
id="TabbedPanelsContent4">Retreats</div>
<div class="TabbedPanelsContent"
id="TabbedPanelsContent5">Bio</div>
<div class="TabbedPanelsContent"
id="TabbedPanelsContent6">Studio Cats</div>
</div>
</div>
Likes like there is one sloppy method override as well:
function MM_effectAppearFade(targetElement, duration, from,
to, toggle)
Spry.Effect.DoFade(targetElement, {duration: duration, from:
from, to: to, toggle: toggle});
}

Tabbed Panel with Fade Effect

Open my site, dg-ad.com, and the tabbed panel drop down menu has the first level visible. Click on a menu item and the second level becomes visible. The second level has a Spry fade effect so it fades into view nicely. The class .TabbedPanelContent sets the visibilty of the second layer hidden, and there is no distracting flicker, good so far.
Besides clicking on menu item I often send clients a link with a string query which lands them on my site with the tabbed panel open to what I want them to see initially., I use a string query in the URL per Dave Powers technique often refered to in this forum titled'Spry: Opening Specific Tabs and Panels from Another Page".
Because the visibility is set to hidden in the CSS the second level of the tabbed panel is still invisible, So I am looking for suggestions that may involve scripting the style or playing with the CSS to overide the CSS and make the second level visible when users arrive via the query string method.
Thanks for taking a look!
Daniel

For Spry 1.0 widgets, each widget had one core file. Each of them had common things like addClassName(), removeClassname(), along with a bunch of basic functionality. So that adds up to a lot of redundant code.
This way, all that common stuff is kept in a single file. That means that each widget base class just has what it needs to glue everything together.
Many widgets are 'panel' based: accordions, tabbed panels, slideshows. So handling those panels is done via the PanelSet and PanelSelector files.
You will find SpryTabbedPanels2.js much smaller than the first version.
By components, for instance: SpryFadingPanels.js is only needed if you want to fade between panels. If you don't want that effect, you don't need to use it. WIth components and plugins, you or anyone else can write a different transition and make that available to all your Spry UI widgets.
I don't like all the includes either but it's the right way to go with what we are doing.
Thanks,
Don

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

Slide Effect within a Table

I'm trying to add a simple Spry slide effect to some text on
one of my web sites, however the text dissapears in IE7. I've
managed to cut it down to the most basic code where the problem
occurs and it turns out to be a table cell. I took the slide
example and cut it down until it doesn't work. I'm referencing the
css and js that comes with the spry 1.6 prerelease build. This code
works fine in Firefox. If you remove the table tags, it also works
in IE7. However, with the table tags present, the text doesn't show
up at all in IE7 (although the background color does slide up and
down). I'd like to be able to keep the table tags in my actual site
because it helps to keep the shape of the page. I can't believe
know one else has run into this issue, but I haven't found anything
online. If you have any tips, please let me know. Otherwise,
consider this a bug report.
Here's 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">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Spry Slide Effects Sample</title>
<link href="../../css/samples.css" rel="stylesheet"
type="text/css" />
<script src="../../includes/SpryEffects.js"
type="text/javascript"></script>
<style type="text/css">
.animationContainer{
height: 220px;
.demoDiv{
background-color: #CCC;
height: 200px;
overflow: hidden;
.hideInitially{
visibility: hidden;
</style>
</head>
<body>
<table><tr><td>
<form method="get" action="grow_sample.html">
<input type="button" onclick="slide_hidden.start();"
value="Slide Example" />
</form>
<div class="animationContainer">
<div class="demoDiv hideInitially" id="example5">
<p><strong>Example - Slide from 0% to 100% in 2
seconds</strong>
<br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit
amet.</p></div>
</div>
<script type="text/javascript">
var slide_hidden = new Spry.Effect.Slide('example5',
{duration: 500, from: '0%', to: '100%', toggle:true});
</script>
</td></tr></table>
</body>
</html>

I am also having this problem. I've written a custom JSF
component that could technically be used in all sorts of situations
within an HTML page. During the initial component development, the
case of adding the component within a table on IE was never tested.
Only later when some other developer was reusing the component in
another project did the Slide effect within a table in IE issue
crop up. As it's a JSF component, there really isn't a very elegant
way to move the javascript to another location within the HTML page
and a previous poster pointed out. Help!

Fade Effect from Spry Table

Similar Messages

Maybe you are looking for