Spry grow effect glitch.

I'm trying to do a gallery something similar to:
http://labs.adobe.com/technologies/spry/demos/gallery/
but the grow effect on my Spry page is glitchy in the sense that it
jumps/shakes on rollover and sometimes it gets stuck and doesn't
mouseout. You can see what I'm talking about here:
http://www.tinsley.com/www/test/
. Not sure what the problem is other than I'm using tables and not
div's but not sure if that would cause this. The code DW is
generating for the effect is the following:
<a href="images/work/large/AdMNIJul.jpg" class="thickbox"
title="Your fly is down and you couldn't be happier."
rel="gallery">
<img src="images/work/medium/AdMNIJul.jpg" alt="thumb"
width="20" height="20" onmouseover="MM_effectGrowShrink(this, 500,
'20px', '70px', false, false, false)"
onmouseout="MM_effectGrowShrink(this, 300, '70px', '20px', false,
false, false)" onclick="MM_effectGrowShrink(this, 500, '70px',
'20px', false, false, false)" />
</a>
Any help would be appreciated. Thanks in advance.

firefox gives error;
quote:
Spry.Effect.DoGrow is not a function
GrowShrink(img#cooperfineart.jpg cooperfineart.jpg, 1000,
"150px", "520px", true, false, false)port.asp (line 23)
onclick(click clientX=0, clientY=0)port.asp (line 1)
[Break on this error] Spry.Effect.DoGrow(targetElement,
{duration: duration, from: from, to: to, togg...
port.asp (line 23)
Spry.Effect.DoGrow is not a function
becouse Spry.Effect.DoGrow is SPRY 1,5 code (i think)
maby update your SPRY, your using 1,4. current release is
1,6

Similar Messages

Gallery using spry grow effect that targets the clicked thumbnail

Hello. I'm trying to build a gallery with thumbnails that,
when clicked, grow to display the full-size image. I created an xml
spry data set and I'm using a spry:repeat to go through each row of
the data set and create the thumbnail. Then I attach the grow
effect, but since the target is each of the thumbnails, I need an
unique id for each. I tried using id="thumb_{ds_RowID}" (and
ds_RowCount and ds_RowNumber) but it doesn't work.
I guess ds_RowID is not valid outside the spry:region, but
perhaps there's a way around this?
Can anyone give me any sort of advice on how I could make
this work? Thank you.

Hello Dexter,
By looking in the code I think the problem appears because of
borders that are not defined in the CSS and on IE they are reported
as NaN. Try to change the border definition for the element to 0px
explicitly.
Could you show me a link where you have the page with the
problem or give me the CSS definition of the element that is
initially invisible so I can test this bug and do the corrections.
Cristian MARIN

Spry Grow Effect

I've added the grow effect to my site to grow and shrink
images on my portfolio page.
It works fine on my localhost server but when I upload it to
my webserver (Fasthosts: Windows IIS 6) it just stops working. All
the code is present, the function being called correctly, but it
just doesn't do anything.
Help me?
My page is at:
http://www.designermonkey.co.uk/port.asp?mod=port&port=top10
Designermonkey">Designermonkey

firefox gives error;
quote:
Spry.Effect.DoGrow is not a function
GrowShrink(img#cooperfineart.jpg cooperfineart.jpg, 1000,
"150px", "520px", true, false, false)port.asp (line 23)
onclick(click clientX=0, clientY=0)port.asp (line 1)
[Break on this error] Spry.Effect.DoGrow(targetElement,
{duration: duration, from: from, to: to, togg...
port.asp (line 23)
Spry.Effect.DoGrow is not a function
becouse Spry.Effect.DoGrow is SPRY 1,5 code (i think)
maby update your SPRY, your using 1,4. current release is
1,6

Grow Effect with "useCSSBox: true" Problem

Good day,
I am using the spry grow effect with the “useCSSBox:
true”. This works fine in the example( example 5) that comes
with spry(Samples directory->effects)
The problem occurs when the window is initially hidden like
“Grow example 3.1” and it goes form 0% to 100%.
Spry.Effect.Grow('example5', {duration: 1000, from: '0%',
to: '100%', toggle:true, useCSSBox: true});
Then I get an Error on line 1218 char 3 in the IE and nothing
happen.
Can somebody help me or is it a bug
Thanks in advance for any reaction

Hello Dexter,
By looking in the code I think the problem appears because of
borders that are not defined in the CSS and on IE they are reported
as NaN. Try to change the border definition for the element to 0px
explicitly.
Could you show me a link where you have the page with the
problem or give me the CSS definition of the element that is
initially invisible so I can test this bug and do the corrections.
Cristian MARIN

Spry Gallery Demo Grow effect problems

Im learning and trying to recreate the spry gallery demo with
the growing thumbnails.
I have replicated pretty much all the code and used the same
onmouseover gallery.js and spryeffects.js but I just get an error
on page and no grow.
If I use the attribute panel and use the grow effect it does
work but the thumbnails around the one growing are pushed around
instead of the growing thumbnail appearing on top.
I'm stuck!
My code for the thumnail region is here:
<div id="thumbcontainer" spry:region="dsGallery">
<div spry:repeat="dsGallery"
onmouseover="GrowThumbnail(this.getElementsByTagName('img')[0],
'75', '75');"
onmouseout="ShrinkThumbnail(this.getElementsByTagName('img')[0]);">
<img src="thumbnails/{@thumbpath}" alt="" width="32"
height="32" id="tn{ds_RowID}" style="left: 0px; right: 0px;"
spry:setrow="dsGallery" class="thumbImage"/>
</div>
</div>
Any suggestions

I'm confused. The example for Spry gallery DOESN'T use an
anchor tag around the thumbnails... In your article and in some
posts, you say that the structure is:
<div id="thumbnails">
<div class="thumbnail">
<a href="image.jpg"><img src="image.jpg"
/></a>
</div>
</div>
However, I downloaded Spry_1_6_1_022408 and copied the
example thumbnails element & content verbatim:
<div id="thumbnails" spry:region="dsPhotos dsGalleries
dsGallery">
<div spry:repeat="dsPhotos"
onclick="HandleThumbnailClick('{ds_RowID}');"
onmouseover="GrowThumbnail(this.getElementsByTagName('img')[0],
'{@thumbwidth}', '{@thumbheight}');"
onmouseout="ShrinkThumbnail(this.getElementsByTagName('img')[0]);">
<img id="tn{ds_RowID}" alt="thumbnail for {@thumbpath}"
src="galleries/{dsGalleries::@base}{dsGallery::thumbnail/@base}{@thumbpath}"
width="24" height="24" style="left: 0px; right: 0px;" />
</div>
<p class="ClearAll"></p>
</div>
NO ANCHOR TAG. Even if you look in the generated source,
there's no link surrounding the thumbnail image.
So I guess I am unclear as to how to apply your fix? Using
the 1.6.1 version, the sample function code you show doesn't match,
nor does it seem to reflect your modifications...
Any ideas? I managed to track down your post about the bug in
IE 7 (it exists in IE6, too) [the demo link (
http://mad.sweepingdesign.com/index.html)
goes to a page that says "It works!"]
The actual article can be found here, though the demo link
shows nothing:
http://www.sweepingdesign.com/wordpress/2007/11/18/spry-gallery-demo-and-ie7-z-index-bug/

Spry Grow Thumbnails

Hello folks,
How can I control the image and window size that pops up with
this spry technique?
I keep getting the same size on the large image, even if some
of the images are larger.
Spry
Grow Thumbnails Effect
http://labs.adobe.com/technologies/spry/samples/effects/growThumbnails.html
Thanks

I just replyed in the other topic you posted :)

Grow effect and growCenter

Hi -
I'm trying out the grow effect using the code from
http://labs.adobe.com/technologies/spry/preview/samples/effects/growThumbnails.html
to set the z-index, however when I insert the
growCenter:false switch
into the code, the image grows underneath the bordering
elements, which
have no z-index specified. Without the growCenter switch, the
grow and
toggle work perfectly. My images are to the left side of the
window,
however, so I need the image to grow from the upper left
corner.
I've copied the JavaScript verbatim from the example page,
and the only
modification I've made is this:
effects[targetElement.id] = new
Spry.Effect.Grow(targetElement,
{duration: 400, from: '100%', to: '500%', toggle: true,
growCenter:false, setup:setzindex, finish:resetzindex});
...where I've added the growCenter:false.
Has anyone else run into this, and is there a quick fix?
Thanks,
Rod

Hello Rod,
I think you should try into your CSS to put for every image
position: relative.
Regards,
Cristian MARIN

Adding spry fade effect to thumbnail gallery??

Hi,
I have a gallery page with a set of thumbnail images each linking to a main image.
I would like to add a simple javascript fade in for each main image. So when the user clicks on the thumbnail, the main image will fade in.
I took a look at the spry effects page (http://labs.adobe.com/technologies/spry/samples/effects/fade_sample.html) but this uses an onclick event and my code already has some onclick events:
<a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" title=\"$imgTITLE\">
...so i'm not sure if i can add the onclick events for the fade which is:
onclick="firstFade.start();"
Any ideas how i can get this to work?
Thanks for any help
B

hi, thanks for the reply.
This just applies a fade to whatever is being clicked i.e. i add this to the div container where my big image will appear and when I click on this image the main image fades out. However i want the big image to fade in when the thumbnails are clicked.
Here's the html:
<div id="left">
                <img src="images/jpg25.jpg" title="kawasakigreen">
</div>
<div id="right-gallery">
                    <div class="gallery">
<a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" >
<img src="/images/gallery/thumb_1.jpg" alt=""/>
</a>
<a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" >
<img src="/images/gallery/thumb_2.jpg" alt=""/>
</a>
<a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" >
<img src="/images/gallery/thumb_3.jpg" alt=""/>
</a>
<a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" >
<img src="/images/gallery/thumb_4.jpg" alt=""/>
</a>
                 </div>
</div>
So each thumbnail references a bigger image dynamically. I think i may need to add an onclick event to the thumbnail but I don't know how.
Is there any other way to achieve a fade in on the bigger image when a thumbnail is clicked?
Thanks
B

Spry Slide Effect problem in IE 7 only

I am using the Spry Slide Effect as a way of initially hiding
a drop down menu:
Click on menu of products:
http://www.adelantedesign.co.uk/clients/showpiece/menu.asp
I use:
.hideInitially{
display: none;
as recommended here though there is no working example using
display: none; only visibility: hidden
http://labs.adobe.com/technologies/spry/samples/effects/slide_sample.html
Using initial state of dispay: none it displays NOTHING! Is
this a bug in IE 7?
Anyone come across this problem.
Anyone got a fix?
Thanks
Rich

High Rich,
You were on the right track with EPM. Here's how it works:
http://www.projectseven.com/testing/customers/pow32/
All you do is insert a single panel EPM inside TopMenuWrapper
set to have
all panels close and with gradual stop animation and using
the basic style
theme.
Then you set the trigger DIV to display: none !important; and
to remove all
borders.
.p7EPM05 .p7epm_trigs {
overflow: hidden;
margin-bottom: 12px;
display: none !important;
Then "un-style" the EPM content DIV so it picks up your
colors and
attributes:
.p7EPM05 .p7epm_content {
padding: 12px 24px;
line-height: 1.5em;
border: 0;
Then select your "Menu of Products" link and use the built-in
EPM control
behaviors (available GUI in behaviors panel) to assign an EPM
Trigger
Control to the link, which will then look like this:
<a href="#"
onclick="P7_EPMctl('p7EPMtrg1_1','trigger')">Menu of
Products</a>
That's it.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/pop
The Ultimate DW Menu System
"RICH POW" <[email protected]> wrote in
message
news:gms1c0$rpj$[email protected]..
>I am using the Spry Slide Effect as a way of initially
hiding a drop down
>menu:
>
> Click on menu of products:
>
http://www.adelantedesign.co.uk/clients/showpiece/menu.asp
>
> I use:
> .hideInitially{
> display: none;
> }
> as recommended here though there is no working example
using display:
> none;
> only visibility: hidden
>
>
http://labs.adobe.com/technologies/spry/samples/effects/slide_sample.html
>
> Using initial state of dispay: none it displays NOTHING!
Is this a bug in
> IE
> 7?
> Anyone come across this problem.
>
> Anyone got a fix?
>
> Thanks
> Rich
>

How to keep track of the status of a spry slide effect from page to page.

Hi All,
I'm using a spry slide effect on a simple menu system.
Lets say I have a home, gallery and about us page.
I currently have the spry effect occurring with "body onload" only on the Gallery page to slide down extra sub menus only when the user lands on that page.
My problem is that I would like the slide effect to close when having left the page and landed on either of the other two pages. I can close the slide with body onload again but obviously it will close every time regardless of whether the effect was open or closed to begin with.
I know nothing about Javascript or the Spry Framework and therefore would like to know if there is a simple way to track whether the effect was open or closed from page to page?
Ideally I would like the effect to only open when landing on the gallery page and closing only if the previous page was the gallery page and the effect was open. For all other instances the effect should not be actioned.
I thought that there would be a way seeing as there is a toggle option with this effect. How does the effect know when it was previously open/closed and is there a way of parsing that in the URL so that the next page knows what to do?
Any help would really be appreciated.
Thanks

Sorry, but what you wish to do, will require you to at least have a basic understanding of JavaScript and setting/unsetting cookies.
For a basic introduction to using JavaScript try: http://www.adobe.com/devnet/dreamweaver/articles/js_for_designers.html
HTH
PZ

Is it possible to change direction of growth for the grow effect?

I would like to use the grow effect on a page with a few images.
The images are going to be floated rigth of the text that goes with them and the problem I have is that the images grows in part to the right of the visible window and are partially out of view creating an horizontal scrolling bar.
I used the default value for var growFromCenter; which is true. I changed it also to false but the results are even worst because it seems to grow from the top left corner of the image to the right and bottom.
I could not figure out, I am a begginer at javascript, if there is some parameter that I could modify to make it grow toward the right of the thumbnail position.
Thank you

I achieved the effect I was looking for by changing the following in the SpryEffects.js
I am using growFromCenter set as true.
changed
toPos.x = startOffsetPosition.x + (originalWidth - toRect.width) / 2.0;
to
toPos.x = startOffsetPosition.x + (originalWidth - toRect.width);
to achieve the growth to the right of the thumbnail image.
Still I would like to hear comments about my solution and any other suggestions or alternatives to achieve the same result.
Although many of the variables are easy to understand by their names others are not so obvious to me. Is there a resource where I can find a description of the variables used in SrpyEffects.js
Thank you.

No 3D chart anti-aliasing with 3D Grow effect on Mac Mini

Today I have just purchased a Mac mini for the main purpose of rendering Keynote animated 3D charts for a doco I'm editing. I am using Keynote '08 (4.0.3).
As it turns out, anti-aliasing works on the 3D charts as long as there is no '3D Grow' effect on them. However, if I apply a '3D Grow' effect and view the slideshow, I get the jaggies and no anti-aliasing, even when the animation has finished. I also get no anti-aliasing when exporting as Quicktime in any format.
I get anit-aliasing on my Mac Pro at work, but not on this Mac Mini so I wonder if there is some incompatibility with Keynote and the Mac mini graphics capabilities.

Hi, thanks for your response.
Actually, I have no transitions grayed out, although for the build effects on Charts, 'Flame' is indicated as unable to be used on this computer.... so you're right, it doesn't look good. Strange that I can use a build effect like Sparkle or Shimmer which are anti-aliased but for 3D grow, some growing blocks of a chart can't be anti-aliased
I guess it's back to the store to try and exchange this mac mini for an Imac.

Spry slide effect problem

Hi
i have a div with the slide effect, it works but it start as
showing and i want it to be "shrinked" when the page is loading.
what should i do?
ron

High Rich,
You were on the right track with EPM. Here's how it works:
http://www.projectseven.com/testing/customers/pow32/
All you do is insert a single panel EPM inside TopMenuWrapper
set to have
all panels close and with gradual stop animation and using
the basic style
theme.
Then you set the trigger DIV to display: none !important; and
to remove all
borders.
.p7EPM05 .p7epm_trigs {
overflow: hidden;
margin-bottom: 12px;
display: none !important;
Then "un-style" the EPM content DIV so it picks up your
colors and
attributes:
.p7EPM05 .p7epm_content {
padding: 12px 24px;
line-height: 1.5em;
border: 0;
Then select your "Menu of Products" link and use the built-in
EPM control
behaviors (available GUI in behaviors panel) to assign an EPM
Trigger
Control to the link, which will then look like this:
<a href="#"
onclick="P7_EPMctl('p7EPMtrg1_1','trigger')">Menu of
Products</a>
That's it.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/pop
The Ultimate DW Menu System
"RICH POW" <[email protected]> wrote in
message
news:gms1c0$rpj$[email protected]..
>I am using the Spry Slide Effect as a way of initially
hiding a drop down
>menu:
>
> Click on menu of products:
>
http://www.adelantedesign.co.uk/clients/showpiece/menu.asp
>
> I use:
> .hideInitially{
> display: none;
> }
> as recommended here though there is no working example
using display:
> none;
> only visibility: hidden
>
>
http://labs.adobe.com/technologies/spry/samples/effects/slide_sample.html
>
> Using initial state of dispay: none it displays NOTHING!
Is this a bug in
> IE
> 7?
> Anyone come across this problem.
>
> Anyone got a fix?
>
> Thanks
> Rich
>

Trouble applying Spry slide effect option

I am trying to use the SPRY Slide effect. According the Adobe documentation on the
Dreamweaver stuff/Spry_1_6_1_022408/samples/effects/slide_sample.html that I downloaded it says:
“The Slide was designed to animate the element vertically or horizontally. By enabling the horizontal option the element will dissapear [sic] to its left.”
How do you enable this option? I can’t find horizontal on options panel. There is only "up" or "down."

VL Branko wrote:
How do you enable this option? I can’t find horizontal on options panel. There is only "up" or "down."
That option doesn't appear in the Slide effect panel. You need to edit the code inserted by Dreamweaver. Change this:
function MM_effectSlide(targetElement, duration, from, to, toggle)
Spry.Effect.DoSlide(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
to this:
function MM_effectSlide(targetElement, duration, from, to, toggle)
Spry.Effect.DoSlide(targetElement, {duration: duration, from: from, to: to, toggle: toggle, horizontal: true});
Dreamweaver doesn't show all the options available for Spry. You often need to tweak the code manually.

Keynote – 2D chart grow effect?

Hi, i've made a graph that i want to animate with the grow effect that is available for 3D graphs. Only i want the graph to be 2D. Any way to work around this?
Heres a video of basically what i want to achieve: http://www.youtube.com/watch?feature=player_embedded&v=hAlBvw-UR5Y (just the graph movement, don't worry about the faded edge and text movement etc.)
Urgent, thanks in advance for all help!

Hi there,
I had the same problem, and I don't think Keynote offers a grow build for 2D pie charts. What I did was to convert the chart into 3D, move it to centre position using the rotate knob and the set the depth of the chart (inspector -> charts -> bottom) to zero. This almost looks like a 2D pie chart and was sufficient to me, hope this helps.
Niklas

Spry grow effect glitch.

Similar Messages

Maybe you are looking for