Spry Effects - Grow/Shrink

Hello DW people -
Trying to use the Spry behaviors in CS3. I need to put 200
photos on a commercial site I'm building and I want the photo to
start small on the page and grow on mouseover . I think the spry
behavior is close - but it puts the starting size of the photo as
100%. How do I set it so the thumbnail is the starting size? I have
to get this site delivered soon and this is my last puzzle.
Right now, the behavior goes: 100% onclick 25% to 100% -- so
it's big, then little, then bit.
I just want 25% on mouseover - 100%. Just little to big.
If I can't figure this out, I'll have to purchase a gallery
or use popups. Spry would be way sexier.
Thanks!
Cathy

How did you figure it out?
I use onLoad first to set the right size, the onClick Grow
for the effect.

Similar Messages

Grow/Shrink Effects behavior in DW 5.5

I am working on a page at http://www.tyneships.co.uk/phones/keys.php. Click on any letter on the page, and then on any of the links on the left hand side of the page that it takes you to.(all temporary code).
This takes you to a page which loads a picture and shrinks it down to a size. When you click on the picture, it expands to fill the page. Click on it again, and it shrinks back again.
I did this using the DW5.5 grow/shrink effect, to be found under Window/Behaviors/+/Effects/Grow/Shrink.
The code is here:
<img src="../photos/<?php echo $row_showshipset['thumblink']; ?>" width="800" height="600" title="Click to Zoom or Shrink" onClick="MM_effectGrowShrink(this, 1000, '100%', '300%', true, false, false)" onload="MM_effectGrowShrink(this, 0, '100%', '40%', false, false, false)">
On load, it is set to shrink the image down from 100% to 40% of its size in 0 miliseconds. When clicked on, it grows to , and then when it is clicked on, it grows from 100% to 300% to fit its preset 800 x 600.
This would be great, except for the fact that as the picture loads, it first of all fills the screen before the javascript routine shrinks it into its table.
The same happens if you click the next button under the photo while it is expanded.
There used to be a behaviour called "Pre-Load Images" that I thought may fix this problem, but it is no longer ioncluded in the DW package.(or at least I cannot find it)
Is there any way to obscure the image until it has loaded and shrunk down to its smaller size?
Howard Walker

You need to upload the script file to the server:
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
That is in your code but not on the server.
J

Help needed with Spry Grow/Shrink Query!

Dear All,
I am attempting to use the new spry effects in cs3 to grow (
and the optionally shrink) a city map for users.
My difficulty is that if you use an image at the correct 100%
size, but want to grow it from 10%, the 100% image displays as
default when you load the page, then once clicked it reszies up
from 10%.
I cant use a 10% image as my start point, because then the
'grown' map is illegible.
Any tips?
Cheers
Si

Use OnLoad with grow and set both size fields to 10% with
milliseconds set to 0
Then onClick toggle grow from 100% (don't know why) to the
Pixel size you want for the second field.

How to use the grow/shrink effect from the gallery

I'm not interested in the entire gallery, however, the
grow/shrink effect is very nice.
I tried looking for it in dreamweaver....
and then I tried grabbing gallery.js and spryeffects.js
I get errors.....Has anyone extracted this particular
behavior? There are a number of places it can be useful.
Thanks,

Oh, I think I have found something ot there, sorry if I was a little impatient...
"3d fog only works with 2 different 3d image types and does not work with a AE 3d scene."
And one of that 3d images is "RPF" or something like that, a file that contains some 3D or depth info as far as I can imagine... So... really there is no effect like this to simulate fog quickly & easily into a simple 3D After Effects composition? Cause it'd be very usefull... of course I can imagine several ways to "fake" it, but a simple effect for each 3D layer it'd be great to avoid complications... Well, anyway any imput or advice it'll be very welcomed, CHEERS!

Grow & shrink effect not working

Hello all, my issue is I cannot get the grow effect to work. I am a newbie so I have been watching tutorials. The link to my site shows a bouquet in the center of the page that I was using as a test for the grow effect. The 2 bouquet images on the right of the page is also set to grow bout I dont know if it can grow to the left. Anyway, I just cant get anything to work. All the pictures just appear in full size.
I have the behavior set to grow, from 0% to 100% on click. Here is the link. http://www.stevenleespage.com/bouquets.html
Here is the code. Thanks for the help and I hope I posted in the correct location. I'm not sure if this is where I am supposed to post problems.
Thanks again,
Steve
<!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>

<title>Ricos - Bouquets</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="mm_spa.css" type="text/css" />
<style type="text/css">

</style>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_effectGrowShrink(targetElement, duration, from, to, toggle, referHeight, growFromCenter)
    Spry.Effect.DoGrow(targetElement, {duration: duration, from: from, to: to, toggle: toggle, referHeight: referHeight, growCenter: growFromCenter});
</script>
</head>
<body bgcolor="#0000" background=>
<table width="1115" height="752" border="0" cellpadding="0" cellspacing="0" bordercolor="#00FF00">
<tr bgcolor="#220103">
   <td height="150" colspan="6" nowrap="nowrap" bgcolor="#522449"><img src="Images/Ricos/fuchsia-background_800x600.jpg" alt="title" width="1108" height="150" /></td>
</tr>
<tr bgcolor="#FF9900">
     <td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
</tr>
<tr bgcolor="#FF080E">
     <td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="2" border="0" /></td>
</tr>
<tr bgcolor="#FF9900">
     <td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
</tr>
<tr bgcolor="#FF080E">
     <td colspan="6" bgcolor="#9900FF"><img src="mm_spacer.gif" alt="" width="1" height="18" border="0" /></td>
</tr>
<tr bgcolor="#FF9900">
     <td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
</tr>
<tr bgcolor="#FF080E">
     <td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="2" border="0" /></td>
</tr>
<tr bgcolor="#FF9900">
     <td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
</tr>
<tr>
    <td width="221" height="557" valign="top" id="navborder"><br />
    <table border="0" cellspacing="0" cellpadding="0" width="220" id="navigation">
        <tr>
          <td width="220"><a href="ricos.html" class="navText">HOME </a></td>
        </tr>
        <tr>
          <td width="220"><a href="http://www.yellowpages.com/santa-rosa-ca/mip/pricess-botique-3411701/m ap?lid=3411701" target="_blank" class="navText">MAP & DIRECTIONS </a></td>
        </tr>
        <tr>
          <td width="220"><a href="wedding.html" class="navText">WEDDING APPAREL </a></td>
        </tr>
        <tr>
          <td width="220"><a href="prom.html" class="navText">PROM APPAREL </a></td>
        </tr>
        <tr>
          <td width="220"><a href="1stcommunion.html" class="navText">1ST COMMUNION APPAREL </a></td>
        </tr>
        <tr>
          <td width="220"><a href="baptism.html" class="navText">BAPTISM APPAREL </a></td>
        </tr>
        <tr>
          <td><a href="javascript:;" class="navText">BOUQUETS </a></td>
        </tr>
        <tr>
          <td><a href="decorations.html" class="navText style6 style7">DECORATIONS </a></td>
        </tr>
        <tr>
          <td><a href="centerpieces.html" class="navText">CENTER PIECES </a></td>
        </tr>
        <tr>
          <td><a href="jewelry.html" class="navText">JEWELRY</a></td>
        </tr>
        <tr>
          <td><a href="contact.html" class="navText style6 style7">GALLERY</a></td>
        </tr>
        <tr>
          <td><a href="contact.html" class="navText style6 style7">CONTACT</a></td>
        </tr>
    </table>     </td>
    <td width="25"><img src="mm_spacer.gif" alt="" width="25" height="1" border="0" /></td>
    <td width="617" align="left" valign="top"><img src="mm_spacer.gif" alt="" width="305" height="1" border="0" /><br />
     <br />
    <table border="0" cellspacing="0" cellpadding="0" width="459">
      <tr>
        <td width="459" class="pageName style16">Beautiful Bouquets </td>
      </tr>
    </table>
    <p class="style13">All of our bouquets are custom hand crafted for any occasion. </p>
    <p class="style13">Please contact us for color and design. <a href="contact.html">CONTACT</a> or visit our store. </p>
    <table width="614" height="420" border="0" align="left" cellpadding="1">
      <tr>
        <td width="600" height="411" align="left" valign="top"><div align="left"><img src="Images/Ricos/bouquet2.jpg" width="600" height="415" onclick="MM_effectGrowShrink(this, 1000, '0%', '100%', true, false, false)" /></div></td>
      </tr>
    </table>    </td>
    <td width="6"><img src="mm_spacer.gif" alt="" width="5" height="1" border="0" /></td>
    <td width="241" valign="top"><div align="left">
      <table width="230" height="221" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000">
        <tr>
          <td height="18" colspan="3" align="center" class="columnHeader"> </td>
          </tr>
        <tr>
          <td width="5"> </td>
            <td width="200" height="150" class="smallText"><p align="left"> </p>
           <br />          </td>
            <td width="5"><img src="mm_spacer.gif" alt="" width="5" height="1" border="0" /></td>
          </tr>
      </table>
      <table width="230" height="234" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000">
        <tr>
          <td height="50" colspan="3" align="center" class="columnHeader"><span class="smallText"><img src="Images/Ricos/whtbouquet2.jpg" width="400" height="303" onclick="MM_effectGrowShrink(this, 1000, '0%', '100%', false, false, true)" /></span></td>
          </tr>
        <tr>
          <td width="5"> </td>
            <td width="200" height="150" class="smallText"><p align="left"><img src="Images/Ricos/purpbouquet.jpg" width="400" height="300" onclick="MM_effectGrowShrink(this, 1000, '0%', '100%', false, false, true)" /></p>
             <br />            </td>
            <td width="5"><img src="mm_spacer.gif" alt="bouquets" width="5" height="1" border="0" /></td>
          </tr>
      </table>
    </div></td>
    <td width="5" align="left"> </td>
</tr>
<tr>
    <td width="221" height="19"> </td>
    <td width="25"> </td>
    <td width="617"><div align="center"><a href="index.html">web design by Steven Lee </a></div></td>
    <td width="6"> </td>
    <td width="241"> </td>
    <td width="5"> </td>
</tr>
</table>
</body>
</html>

I wasn't so sure that I posted in the correct location. Sorry for that. I new to forums and don't know my way around.
I didnt even know of a Spry assets folder. I thought Dreamweaver took care of that. The video tutorials didn't talk about that and it looked to simple.
I will check out the other thread and if thats ok can I ask you for any additional questions?
Thanks for your time.
Steve

Trying to achieve grow/shrink to nothing effect

I'n trying to create a vertical panel where items can be added which are displayed top to bottom. Each "item" is a box with some interesting information to display and should be shown for a few seconds.
The space where it will be displayed will first grow to make room, then fade in, display for a few seconds, fade out, and shrink back to nothing. When it grow/shrinks, the intention is that the items above and below will make room/close the gap accordingly.
Now, I've gotten quite far to get this to work with two different solutions, but both have a problem.
Solution 1
Put the "item" in a Group. Then use Timelines to animate its ScaleYProperty to simulate the shrinking to nothing effect.
Problem: As soon as I put things in a group, the content of the "Item" is too small (it uses the preferred size instead of expanding to fill available space). If I use a StackPane it looks exactly how I want, but the ScaleYProperty won't work properly then (because StackPane ignores transformations in its size calculations).
I've tried forcing the preferred size to the correct value. Problem: I don't know the correct value, I don't know how to find out how big the "content" area should be. Doing a getWidth() of the vertical panel and substracting the Insets comes close, but there's always a small difference -- in other words, unsatisfactory.
...stuck
Solution 2
Replace the "item" with Rectangles that I resize to make space for the "item" before actually adding it. The shrinking effect works great... but I cannot get the grow effect to work properly because I donot know how big the "item" will be... there's no way to find out how big something will be once added to the scene graph.
Fiddling with adding the item temporarily to the scene graph, then trying to get its size somehow didn't work or had annoying side effects.
So, basically, I'm stuck with both approaches.
First because Groups donot allow their content to fill available space... (and finding out the correct preferred size seems not possible)...
Second because I cannot find out how big something will be BEFORE adding it to a scene graph...
Any ideas what I can still try?

Okay, a fully working example ripped completely out of its context :)
This needs some keyboard control. Press 1/2 to adjust the "Playback rate" and 9/0 to adjust "Volume". In the center of the screen boxes will appear showing what you just did, and will fade out after a while. Adjusting both settings shortly after each other can result in two bars being displayed (this is intended) and shows the effect I want in greater detail.
The part I'm not happy with is where I hard-code the Preferred Width (search for setPrefWidth) because it is not correct (the width is only an estimate and changes when a slider is displayed... so the next slider added gets a different preferred width).
Possible solutions are some other way of "shrinking" a group without using the ScaleYProperty; somehow getting the correct preferred width; somehow getting Group to respect the "available space" for my StackPane... etc...
It works great in my opinion, just this little snag I want to get rid of.
playback-state-overlay.css
.root {
-c-main: rgb(173, 216, 230);
-c-shadow-highlight: derive(-c-main, -50%);
color-content-background: derive(-c-main, -80%);
.label {
-fx-text-fill: white;
.slider {
-fx-show-tick-labels: true;
-fx-show-tick-marks: true;
.slider .axis {
-fx-tick-label-fill: -c-main;
.slider .thumb {
-fx-background-color: rgb(0, 0, 0, 0.5), rgb(64, 64, 64), linear-gradient(to bottom, yellow, white, orange);
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 0.3em, 0.25em, 0.2em;
-fx-padding: 0.75em 0.3em 0.75em 0.3em;
.slider .track {
-fx-background-color: -c-shadow-highlight, derive(-c-main, -22%), linear-gradient(to bottom, derive(-c-main,-15.5%), derive(-c-main,34%) 30%, derive(-c-main,68%));
-fx-background-insets: 1 0 -1 0, 0, 1;
-fx-background-radius: 0.2em, 0.2em, 0.1em;
-fx-padding: 0.208333em;
.axis:top {
    -fx-border-color: transparent transparent #aaaaaa transparent;
.axis:right {
    -fx-border-color: transparent transparent transparent #aaaaaa;
.axis:bottom {
    -fx-border-color: #aaaaaa transparent transparent transparent;
.axis:left {
    -fx-border-color: transparent #aaaaaa transparent transparent;
.axis-tick-mark {
-fx-stroke: #aaaaaa;
.item {
-fx-font: 22pt "Arial";
.content-box {
-fx-background-color: color-content-background;
-fx-background-radius: 20;
-fx-padding: 30;
-fx-hgap: 20;
ShrinkTest.java
package hs.javafx;
import javafx.animation.Animation.Status;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.beans.binding.NumberExpression;
import javafx.beans.binding.StringBinding;
import javafx.beans.binding.StringExpression;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.collections.ListChangeListener;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.RowConstraints;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Duration;
public class ShrinkTest extends Application {
private final Player player = new Player();
private final VBox playbackStateOverlay = new VBox() {{
    getStyleClass().add("content-box");
    setVisible(false);
public static void main(String[] args) {
    Application.launch(ShrinkTest.class, args);
@Override
public void start(Stage primaryStage) throws Exception {
    StackPane stackPane = new StackPane();
    playbackStateOverlay.getChildren().addListener(new ListChangeListener<Node>() {
      @Override
      public void onChanged(ListChangeListener.Change<? extends Node> change) {
        playbackStateOverlay.setVisible(!change.getList().isEmpty());
    stackPane.setOnKeyPressed(new EventHandler<KeyEvent>() {
      @Override
      public void handle(KeyEvent event) {
        if(event.getCode() == KeyCode.DIGIT1) {
          player.rateProperty().set(player.rateProperty().get() - 0.1);
        if(event.getCode() == KeyCode.DIGIT2) {
          player.rateProperty().set(player.rateProperty().get() + 0.1);
        if(event.getCode() == KeyCode.DIGIT9) {
          player.volumeProperty().set(player.volumeProperty().get() - 1);
        if(event.getCode() == KeyCode.DIGIT0) {
          player.volumeProperty().set(player.volumeProperty().get() + 1);
        event.consume();
    stackPane.getChildren().add(new GridPane() {{
      getColumnConstraints().add(new ColumnConstraints() {{
        setPercentWidth(25);
      getColumnConstraints().add(new ColumnConstraints() {{
        setPercentWidth(50);
      getColumnConstraints().add(new ColumnConstraints() {{
        setPercentWidth(25);
      getRowConstraints().add(new RowConstraints() {{
        setPercentHeight(10);
      add(new Button("Hi"), 0, 0); // something to get focus
      add(playbackStateOverlay, 1, 1);
    Scene scene = new Scene(stackPane);
    scene.getStylesheets().add("playback-state-overlay.css");
    primaryStage.setScene(scene);
    primaryStage.setFullScreen(true);
    primaryStage.show();
    final StringBinding formattedVolume = new StringBinding() {
        bind(player.volumeProperty());
      @Override
      protected String computeValue() {
        return String.format("%3d%%", player.volumeProperty().get());
    final StringBinding formattedRate = new StringBinding() {
        bind(player.rateProperty());
      @Override
      protected String computeValue() {
        return String.format("%4.1fx", player.rateProperty().get());
    player.volumeProperty().addListener(new ChangeListener<Number>() {
      @Override
      public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
        addOSD(createOSDItem("Volume", 0.0, 100.0, player.volumeProperty(), formattedVolume));
    player.rateProperty().addListener(new ChangeListener<Number>() {
      @Override
      public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
        addOSD(createOSDItem("Playback Speed", 0.0, 4.0, player.rateProperty(), formattedRate));
private static Node createOSDItem(final String title, final double min, final double max, final NumberExpression value, final StringExpression valueText) {
    return new VBox() {{
      setId(title);
      getStyleClass().add("item");
      getChildren().add(new BorderPane() {{
        setLeft(new Label(title) {{
          getStyleClass().add("title");
        setRight(new Label() {{
          getStyleClass().add("value");
          textProperty().bind(valueText);
      getChildren().add(new Slider(min, max * 1.01, 0) {{ // WORKAROUND: 1.01 to work around last label display bug
        valueProperty().bind(value);
        setMinorTickCount(4);
        setMajorTickUnit(max / 4);
public void addOSD(final Node node) { // id of node is used to distinguish same items
    String id = node.getId();
    for(Node child : playbackStateOverlay.getChildren()) {
      if(id.equals(child.getId())) {
        Timeline timeline = (Timeline)child.getUserData();
        if(timeline.getStatus() == Status.RUNNING) {
          timeline.playFromStart();
        return;
    final StackPane stackPane = new StackPane() {{
      getChildren().add(node);
      setPrefWidth(playbackStateOverlay.getWidth() - playbackStateOverlay.getInsets().getLeft() - playbackStateOverlay.getInsets().getRight());
    node.opacityProperty().set(0);
    final Group group = new Group(stackPane);
    group.setId(node.getId());
    stackPane.setScaleY(0.0);
    final EventHandler<ActionEvent> shrinkFinished = new EventHandler<ActionEvent>() {
      @Override
      public void handle(ActionEvent event) {
        playbackStateOverlay.getChildren().remove(group);
    final Timeline shrinkTimeline = new Timeline(
      new KeyFrame(Duration.seconds(0.25), shrinkFinished, new KeyValue(stackPane.scaleYProperty(), 0))
    final EventHandler<ActionEvent> fadeInOutFinished = new EventHandler<ActionEvent>() {
      @Override
      public void handle(ActionEvent event) {
        group.setId(null);
        shrinkTimeline.play();
    final Timeline fadeInOutTimeline = new Timeline(
      new KeyFrame(Duration.seconds(0.5), new KeyValue(node.opacityProperty(), 1.0)),
      new KeyFrame(Duration.seconds(2.5), new KeyValue(node.opacityProperty(), 1.0)),
      new KeyFrame(Duration.seconds(3.0), fadeInOutFinished, new KeyValue(node.opacityProperty(), 0.0))
    EventHandler<ActionEvent> expansionFinished = new EventHandler<ActionEvent>() {
      @Override
      public void handle(ActionEvent event) {
        fadeInOutTimeline.play();
    Timeline expansionTimeline = new Timeline(
      new KeyFrame(Duration.seconds(0.25), expansionFinished, new KeyValue(stackPane.scaleYProperty(), 1.0))
    group.setUserData(fadeInOutTimeline);
    playbackStateOverlay.getChildren().add(group);
    expansionTimeline.play();
public static class Player {
    private final IntegerProperty volume = new SimpleIntegerProperty(50);
    private final DoubleProperty rate = new SimpleDoubleProperty(1.0);
    public IntegerProperty volumeProperty() {
      return volume;
    public DoubleProperty rateProperty() {
      return rate;
}

Spry.Effect.GrowShrink crazy behaviour

Hi, I was wondering if someone could help me figure out why
when I pass the mouse over the thumbnails in my photo gallery, they
act all jumpy. I used the same effect as in the Spry demo photo
gallery yet they behave differently. My gallery is located here
http://www.fotosite.ca/temp/index.htm
my grow function looks like this (and shrink is similar)
function GrowThumbnail(img, from, to){
img.style.zIndex = 150;
img.style.borderStyle = 'solid';
img.style.borderWidth = '3px';
img.style.borderColor = '#ffff00';
Spry.Effect.GrowShrink(img, {duration: 500, from: from, to:
to ,toggle:false });
Thanks in advance for any help,

Hi,
I see 2 problems:
1. The Grow/Shrink effect do not know to consider the margin,
border and padding so when you add these properties from the
JavaScript you'll have the weird behavior of images moving down and
right before animation start and then up and left when the mouse
leave.
We automatically include the 1px border in the thumbnail view
and we only change its color. You remove 2px from the border while
the mouse is not over the element and when you add them the effect
is really visible and disturbing. If you consider in keeping a such
big value for the border then you should keep it when the images
are not focused.
2. While you move the mouse over the thumbnails fast some of
the images will remain open. This is a bug that also reproduce in
our photo gallery too and I will look to fix it while the new Spry
will be released. The issue is basically generated by the fact you
are not using the toggle option while running the effect.
Cristian

Spry Effects

I am using the Grow/Shrink behavior from Spry Effects in
Dreamweaver. I am trying to grow an image from 20% to 100% but the
image appears in the browser at a 100% then when I click on it it
then appears at 100% and grows to 100%. Is it possible to get the
image to appear at 20% on the page and only grow when I click on
the image.

gregmccarthy wrote:
> Thanks, that works beautifully. Kinda thought that was
what was needed but was not sure exactly how to do it - it is a
shame that how to books that you pay good money for don't explain
that.
As somebody who writes books, I can tell you why. My
"Essential Guide to
DW CS3" devotes about 250 pages to Spry, almost certainly
than any other
book on the market; but I don't include that technique. If I
tried to do
so, my 750 page book would probably be 7,500 pages long, and
would be
published a couple of years late.
One of the great things about web design is that you can do a
lot of
amazing things by experimenting. But you need to have a firm
grasp of
the basic technology to be able to do so. That's one of the
main things
you can learn from books. I had no idea how to create the
effect that
you wanted, but I did know how to apply a Spry effect. I sat
and thought
about the problem for about two minutes, tested my theory,
and was
delighted to discover that it worked. Devising new techniques
rarely
goes as quickly as that, but that's the challenge - and fun -
part of it.
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/

Combining SPRY effects

I'm using the grow/shrink effect twice on an object. Once
onMouse Over to make it grow and once again onMouseOut to make it
shrink. The problem I am having is that the object begins to grow
and shrink spasticlly like it's having soome kind of seizure. Is
there a better way to do this. Toggeling the effect doesn't work
since you have to mose back over the object to get it to shrink and
that is so not what I am looking for.

Due to the Spry framework being fairly new, you may be best
asking this
question in the Spry specific forum: You may want to ask your
question at
the Spry specific forum:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
Spry Widget Examples
http://www.dreamweaverresources.com/spry-widgets/
"wistatboy" <[email protected]> wrote in
message
news:f4ouks$57p$[email protected]..
> I'm using the grow/shrink effect twice on an object.
Once onMouse Over to
> make
> it grow and once again onMouseOut to make it shrink. The
problem I am
> having is
> that the object begins to grow and shrink spasticlly
like it's having
> soome
> kind of seizure. Is there a better way to do this.
Toggeling the effect
> doesn't
> work since you have to mose back over the object to get
it to shrink and
> that
> is so not what I am looking for.
>

How to setup grow/shrink behavior on a moving group?

SD project. Group consists of 18 evenly spaced SD video clips each individually sized to 40%. The group is positioned near the top of the screen at 100% size.
The group then marches smoothly across the screen by transforming position X over 36 seconds using linear interpolation.
I am trying to cause the group (10 seconds into the timeline) to smoothly increase in size by applying a grow/shrink behavior over 3 seconds while continuing the X transform.
Position Y is changed to keep the location of the top of the group the same while the group grows.
Starts OK and ends OK. Works fine all the way to the end once the behavior finishes. Using the same X transform.
The problem is that during the grow behavior the apparent X and Y axis motion behaves incorrectly. The motion appears to change speed and even briefly reverses direction.
I understand why this is happening but I don't know how to fix it.
I have tried every combination of interpolation for the transforms along with every variation of the grow behavior parameters I can think of.
Everything I have tried makes things worse and/or introduces unwanted side effects.
Any thoughts?

I tried to implement what you were talking about. Just to make it easier on myself, I did use a 18 piece replicator instead of 18 individual files...so hopefully that doesn't change things. I did not get any reverse or weird X,Y behaviors acting incorrectly. It started at timeline 10:00 and ended at timeline 13:00, grew 120%, and the group had an anchor point set to the top of the group so it would only grow bottom and to the sides. Stuck with the same interpolation and everything. The only thing that looked weird was that the boxes pop back in place after the grow/shrink is done. Which is just because the behavior ends. Now! something that was odd was that I couldn't keyframe any parameters in the behavior?

Problem combining Spry effects with image captions [was: LShub]

I am using Spry effects combo sample 2. The thumbnails in the sample are all included within the same preview div. I need to include captions underneath the images, so I have each thumbnail and caption within a separate div. The effect still works everywhere except Explorer. In Explorer 7, the image grows behind the image in the next div.
I read through the Spry for Ajax forum, but the Java Script used there is different. I have tried putting all the divs I want to grow inside another and giving the new div a position and z index. I have also added a z-index in the CSS of the preview div. Nothing I've tried works. Is there a fix?
Here is a link for the page I am working on:
http://www.nhci.com/stage/kitchens/countertops.html?tab=kitchens#
Relevant CSS:
.thumbs {
    clear: both;
    margin: 5px auto;
.thumbnails85 div {
    position: relative;
    width: 85px;
    height: 85px;
    float: left;
    margin: 6px;
    padding: 0;
    float: left;
    display: inline;
.thumbnails85 img {
    top: 0px;
    left: 0px;
    width: 85px;
    height: 85px;
    position: absolute;
    z-index: 1;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
.preview {
    padding: 3px;
    margin-bottom: 5px;
    height: 300px;
    width: auto;
    margin-right: 3px;
    position: absolute;
    float: left;
.spacer105 {
    height:105px}
[Subject title edited by moderator]

I am using Spry effects combo sample 2. The thumbnails in the sample are all included within the same preview div. I need to include captions underneath the images, so I have each thumbnail and caption within a separate div. The effect still works everywhere except Explorer. In Explorer 7, the image grows behind the image in the next div.
I read through the Spry for Ajax forum, but the Java Script used there is different. I have tried putting all the divs I want to grow inside another and giving the new div a position and z index. I have also added a z-index in the CSS of the preview div. Nothing I've tried works. Is there a fix?
Here is a link for the page I am working on:
http://www.nhci.com/stage/kitchens/countertops.html?tab=kitchens#
Relevant CSS:
.thumbs {
    clear: both;
    margin: 5px auto;
.thumbnails85 div {
    position: relative;
    width: 85px;
    height: 85px;
    float: left;
    margin: 6px;
    padding: 0;
    float: left;
    display: inline;
.thumbnails85 img {
    top: 0px;
    left: 0px;
    width: 85px;
    height: 85px;
    position: absolute;
    z-index: 1;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
.preview {
    padding: 3px;
    margin-bottom: 5px;
    height: 300px;
    width: auto;
    margin-right: 3px;
    position: absolute;
    float: left;
.spacer105 {
    height:105px}
[Subject title edited by moderator]

Spry static gallery combined with Spry Effect Observers

I have set up a Spry static gallery using the
demo
here.
I would like to add a cross fade for the main image using the
Spry Effect Observers shown at the bottom of
this
demo page.
I like the thumbnail grow effect used in the first demo and
like to add a cross fade for the main image when the thumbnail is
clicked. Have someone built such an example or can someone show me
how it is done? Typically I have 4 thumbnails/images per product
page.

Mr. Andersson wrote:
> I thnik I know what's going on now...
>
> I tried Fireworks and it has a built in Slideshow
creator. The setting that
> dont use Flash uses Spry and looks like the Spry gallery
demo. The settings
> using Flash have cross fading images.
>
> From this I got the idea that Adobe maybe dont want us
to cross fade with
> Spry. They want to push Flash instead. It could explain
the total silence from
> Adobe in various threads where this question is asked.
This is a user to user forum, Adobe will never reply to you.
Also, Spry is still a pre-release framework, its nowhere near
finished.
Its the kind of framework where you take whats available and
make
something out of it, its very flexible if you know
javascript.
I am learning javascript just to understand the little bits
that I am
experimenting with, I think its the only way forward if you
intend to do
something outside the box.
Dooza
Posting Guidelines
http://www.adobe.com/support/forums/guidelines.html
How To Ask Smart Questions
http://www.catb.org/esr/faqs/smart-questions.html

Spry effects not recognizing classes

When adding a spry effect to an <img> element, it will pick up on ID's but not classes.
<style>
img.color {color:#fffff}
</style>
<body>
<img src="image.jpg" class="img.color" img />
</body>
In the spry effect dialogue, it will let me select the current img tag, but if i were to specify a second class
<style>
img.color {color:#fffff}
img.opacity {opacity:50}
</style>
<body>
<img src="image.jpg" class="img.color img.opacity" img />
</body>
then it wouldnt work because it can only recognize the current selection instead of the individual styles like i can do with an ID (which wont work for multiple styles as there can be only one id per element).

It makes it very hard for us to know what you are trying to achieve without seeing some code hence I shall give you some code to work with
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<img src="header.jpg" onClick="MM_effectAppearFade(this, 1000, 100, 0, false)">
<script src="SpryAssets/SpryEffects.js"></script>
<script>
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});}
</script>
</body>
</html>
Just copy and paste the above code into a new document, make sure that you do have SpryEffects.js in the SpryAssets folder and try it out.
Gramps

BUG report about Spry.Effect.Highlight

When the Spry.Effect.Highlight effect is not accomplished,
and click the trigger link, will report the error "startColor
undefined".

Can you please elaborate? Which "trigger link" do you mean?
Are you using the Spry 1.4 release?

Spry Effects Issue

Hello everyone,
I'm new to spry and know very little about ajax and java but
I'm eager to learn. I downloaded spry frameworks and I'm looking at
the demo effects page. I click on the fade one and it fades away
but fades back automatically. How can I set it so it wont fade back
until it is clicked again?
Thanks
-Chris

var fadename = new Spry.Effect.Fade('idoffade',
{toggle:true});

Spry Effects - Grow/Shrink

Similar Messages

Maybe you are looking for