[Spry Effects] Dynamic Width

Hi,
I have a question about the blind Effect, the effect works
superb but there is one little problem, the div block i use it on
is of an dynamic width, this means if the site is resized to an
smaller resolution the div moves with it. If i use the blind effect
on the div i can't resize it any more, the width has a fixed length
an will go out of the screen if the browser is resized.
Does anybody has an idea if this is changeable, or is it not
possible?
Regards.

Hi UserXyX,
I'm guessing you can get around the problem by using an
onPostEffect observer and resetting the width of the element you
were blinding to "auto" or "". (example: ele.style.width = "auto";)
You can see an example that uses an effects observer here:
http://labs.adobe.com/technologies/spry/samples/effects/observers_sample.html
--== Kin ==--

Similar Messages

Spry Effects jumpy at start, then smooth

Here is my sample page:
http://www.bloominvestors.com/sample.html
I am trying to put a toggle on/off feature at the head of a
dynamic table. The user can click an "Instructions On/Off" button
and the instructions on how to use the table will fade in or out. I
am applying two effects - highlight and appear. As you can see,
when the page is first loaded and you click "Instructions On/Off"
the appear effect on the text comes first, then highlight on the
background. It's jumpy. However, once it is loaded the first time,
it toggles on/off in synch beautifully. How do I get it to
synchronize the effects the first time.
Here is the code:
#instructions {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-variant: small-caps;
color: #333;
text-align: center;
width: 890px;
height: 150px;
margin-right: auto;
margin-left: auto;
#instructions_title {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-variant: small-caps;
color: #606;
background-color: #FFF;
text-align: center;
#instructions_interior_body {
color: #90C;
height: 200px;
width: 900px;
margin-right: auto;
margin-left: auto;
visibility: hidden;
-->
</style>
<script src="SpryEffects.js"
type="text/javascript"></script>
<script type="text/javascript">

</script>
</head>
<body>
<div id="instructions"
onclick="MM_effectHighlight(instructions_interior_body, 1000, '',
'#330066', '#ffffff',
true);MM_effectAppearFade(instructions_interior_body, 1000, 0, 100,
true)"><span id="instructions_title"> Instructions
(On/Off)</span>
<div id="instructions_interior_body">This is how you
use this table! </div>
</div><br />

one more hopeful bump

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]

Create images with dynamic width from 3 images each (left/center/right-part)

Hello,
i want to employ a script to create images of dynamic width for me. The whole process shall base on different sized sets of images, which contain a left-image, a right-image and a center-image. The desired width for the different cases shall be reached by duplicating the center-image between the two outer images and placing those images next to each other until the image extends to desired width.
The layers importet into Photoshop shall be importet as smart-layers (which i already solved).
Has anyone done something similar already and could give me some useful hints on that issue ?
I have come up to this until now:
#target Photoshop
// =========================== Opens a new document and asks for dimensions ============================
var myLayerset = File.openDialog ("Select the set of images you want to use!", "*.png",true)
var myName = prompt("How do you want to call the document?"); // askes for document name
var width = prompt("Please insert width for the output here!", ""); // askes for desired width
var height = prompt("Please insert height for the output here!", ""); //askes for desired height
var docName = myName +".psd"
var idMk = charIDToTypeID( "Mk " );
    var desc3 = new ActionDescriptor();
    var idNw = charIDToTypeID( "Nw " );
        var desc4 = new ActionDescriptor();
        var idNm = charIDToTypeID( "Nm " );
        desc4.putString( idNm, """Wunschname""" );
        var idMd = charIDToTypeID( "Md " );
        var idRGBM = charIDToTypeID( "RGBM" );
        desc4.putClass( idMd, idRGBM );
        var idWdth = charIDToTypeID( "Wdth" );
        var idRlt = charIDToTypeID( "#Rlt" );
        desc4.putUnitDouble( idWdth, idRlt, width );
        var idHght = charIDToTypeID( "Hght" );
        var idRlt = charIDToTypeID( "#Rlt" );
        desc4.putUnitDouble( idHght, idRlt, height );
        var idRslt = charIDToTypeID( "Rslt" );
        var idRsl = charIDToTypeID( "#Rsl" );
        desc4.putUnitDouble( idRslt, idRsl, 72.000000 );
        var idpixelScaleFactor = stringIDToTypeID( "pixelScaleFactor" );
        desc4.putDouble( idpixelScaleFactor, 1.000000 );
        var idFl = charIDToTypeID( "Fl " );
        var idFl = charIDToTypeID( "Fl " );
        var idTrns = charIDToTypeID( "Trns" );
        desc4.putEnumerated( idFl, idFl, idTrns );
        var idDpth = charIDToTypeID( "Dpth" );
        desc4.putInteger( idDpth, 8 );
        var idprofile = stringIDToTypeID( "profile" );
        desc4.putString( idprofile, """sRGB IEC61966-2.1""" );
    var idDcmn = charIDToTypeID( "Dcmn" );
    desc3.putObject( idNw, idDcmn, desc4 );
executeAction( idMk, desc3, DialogModes.NO );
//==============================================save document================================================
var idsave = charIDToTypeID( "save" );
    var desc4 = new ActionDescriptor();
    var idAs = charIDToTypeID( "As " );
        var desc5 = new ActionDescriptor();
        var idmaximizeCompatibility = stringIDToTypeID( "maximizeCompatibility" );
        desc5.putBoolean( idmaximizeCompatibility, true );
    var idPhtthree = charIDToTypeID( "Pht3" );
    desc4.putObject( idAs, idPhtthree, desc5 );
    var idIn = charIDToTypeID( "In " );
    desc4.putPath( idIn, new File( "C:\\Users\\ target folder goes here" + docName ) );
    var idDocI = charIDToTypeID( "DocI" );
    desc4.putInteger( idDocI, 308 );
    var idsaveStage = stringIDToTypeID( "saveStage" );
    var idsaveStageType = stringIDToTypeID( "saveStageType" );
    var idsaveSucceeded = stringIDToTypeID( "saveSucceeded" );
    desc4.putEnumerated( idsaveStage, idsaveStageType, idsaveSucceeded );
executeAction( idsave, desc4, DialogModes.NO );
//========================================================================================================
for (var i = 0; i < myLayerset.length; i++) {
if (myLayerset[i] instanceof File && myLayerset[i].hidden == false) {
// ======================================================= opens selected images as smart objects====================
var idOpn = charIDToTypeID( "Opn " );
    var desc1 = new ActionDescriptor();
    var idnull = charIDToTypeID( "null" );
   desc1.putPath( idnull, myLayerset[i]);
    var idsmartObject = stringIDToTypeID( "smartObject" );
    desc1.putBoolean( idsmartObject, true );
executeAction( idOpn, desc1, DialogModes.NO );
//===================================duplicates opened layer into created document========================================
var idDplc = charIDToTypeID( "Dplc" );
    var desc144 = new ActionDescriptor();
    var idnull = charIDToTypeID( "null" );
        var ref135 = new ActionReference();
        var idLyr = charIDToTypeID( "Lyr " );
        var idOrdn = charIDToTypeID( "Ordn" );
        var idTrgt = charIDToTypeID( "Trgt" );
        ref135.putEnumerated( idLyr, idOrdn, idTrgt );
    desc144.putReference( idnull, ref135 );
    var idT = charIDToTypeID( "T   " );
        var ref136 = new ActionReference();
        var idDcmn = charIDToTypeID( "Dcmn" );
        ref136.putName( idDcmn, docName);
    desc144.putReference( idT, ref136 );
    var idVrsn = charIDToTypeID( "Vrsn" );
    desc144.putInteger( idVrsn, 5 );
executeAction( idDplc, desc144, DialogModes.NO );
// ======================================================= close tab without saving ==========
var idCls = charIDToTypeID( "Cls " );
    var desc156 = new ActionDescriptor();
    var idSvng = charIDToTypeID( "Svng" );
    var idYsN = charIDToTypeID( "YsN " );
    var idN = charIDToTypeID( "N   " );
    desc156.putEnumerated( idSvng, idYsN, idN );
executeAction( idCls, desc156, DialogModes.NO );

I adapted a Script somewhat, so you may give this a test.
But it uses the open file so you would have to adapt it further.
// arranges the selected jpg, tif, psd in line;
// gutters may be irregular due to rounding effects;
// thanks to michael l hale and muppet mark;
// for mac and CS6;
// 2014, use it at your own risk;
#target photoshop
if (app.documents.length == 0) {
          var myDocument = app.documents.add(UnitValue (300, "mm"), UnitValue (50, "mm"), 300, "new", NewDocumentMode.RGB, DocumentFill.TRANSPARENT)
else {myDocument = app.activeDocument};
// set to pixels;
var originalRulerUnits = app.preferences.rulerUnits;
app.preferences.rulerUnits = Units.PIXELS;
var theArray = [0, 0, myDocument.width, myDocument.height];
// select files;
if ($.os.search(/windows/i) != -1) {var theFiles = File.openDialog ("please select files", '*.jpg;*.tif;*.pdf;*.psd', true)}
else {var theFiles = File.openDialog ("please select exactly three files", getFiles, true)};
// do the arrangement
if (theFiles) {placeInLines (myDocument, theFiles, theArray)}
app.preferences.rulerUnits = originalRulerUnits;
////// function to place images in lines //////
function placeInLines (myDocument, theFiles, theArray) {
theFiles.sort();
// fit on screen;
var idslct = charIDToTypeID( "slct" );
var desc64 = new ActionDescriptor();
var idnull = charIDToTypeID( "null" );
var ref44 = new ActionReference();
var idMn = charIDToTypeID( "Mn " );
var idMnIt = charIDToTypeID( "MnIt" );
var idFtOn = charIDToTypeID( "FtOn" );
ref44.putEnumerated( idMn, idMnIt, idFtOn );
desc64.putReference( idnull, ref44 );
executeAction( idslct, desc64, DialogModes.NO );
// change pref;
var originalRulerUnits = app.preferences.rulerUnits;
app.preferences.rulerUnits = Units.PIXELS;
setToAccelerated();
app.togglePalettes();
var check = turnOffRescale ();
// create the arrangement;
if (theFiles.length > 0 && theFiles.length == 3) {
myDocument.activeLayer = myDocument.layers[0];
// create masked group;
var theGroup = myDocument.layerSets.add();
theGroup.name = "arrangement";
// determine the array’s values;
var areaWidth = theArray[2] - theArray[0];
var areaHeight = theArray[3] - theArray[1];
var theDocResolution = myDocument.resolution;
var areaRelation = areaHeight / areaWidth;
// center of placed non-pdf images;
var centerX = Number(myDocument.width / 2);
var centerY = Number(myDocument.height / 2);
// suppress dialogs;
var theDialogSettings = app.displayDialogs;
app.displayDialogs = DialogModes.NO;
var pdfSinglePages = new Array;
var nonPDFs = new Array;
var theDimPDFs = new Array;
var theLength = 0;
// collect the files’ measurements;
var theDimensions = new Array;
var theLengths = new Array;
// array to collect both files and placed pdf-pages;
var theseFiles = new Array;
var theLength = 0;
// collect the files’ measurements;
for (var o = 0; o < theFiles.length; o++) {
    var thisFile = theFiles[o];
          theseFiles.push(thisFile);
          var theDim = getDimensions(thisFile);
          theDimensions.push(theDim);
          theRelativeWidth = 100 / theDim[1] * theDim[0];
          theLength = theLength + theRelativeWidth;
// reset dialogmodes;
app.displayDialogs = DialogModes.ERROR;
// if three files;
if (theseFiles.length == 3) {
// create the layers;
var theNumber = 0;
var theAdded = 0;
var y = areaHeight / 2;
// add placed image’s width;
var thisLineWidth = 0 + theAdded;
var theLastFactor = Number (Number(myDocument.height) / theDimensions[2][1] * theDimensions[2][2] / theDocResolution * 100);
var theLastWidth = Math.round(theDimensions[2][0] * theLastFactor / 100 * theDocResolution / theDimensions[2][2]);
// place the files;
for (var x = 0; x < 3; x++) {
var theNumber = x;
var thisFile = theseFiles[theNumber];
var theFactor = Number (Number(myDocument.height) / theDimensions[theNumber][1] * theDimensions[theNumber][2] / theDocResolution * 100);
var theNewWidth = Math.round(theDimensions[theNumber][0] * theFactor / 100 * theDocResolution / theDimensions[theNumber][2]);
var offsetX = theNewWidth / 2 + thisLineWidth - centerX + theArray[0];
var offsetY = y - centerY + theArray[1];
var theLayer = placeScaleFile (thisFile, offsetX, offsetY, theFactor, theFactor);
myDocument.activeLayer.move(theGroup, ElementPlacement.PLACEATBEGINNING);
thisLineWidth = thisLineWidth + theNewWidth;
// duplicate the middle one;
if (theNumber == 1) {
          while (thisLineWidth < myDocument.width - theLastWidth) {
                    theLayer = duplicateAndOffset (theLayer, theNewWidth, 0);
                    thisLineWidth = thisLineWidth + theNewWidth;
// reset;
app.togglePalettes();
turnOnRescale (check);
app.preferences.rulerUnits = originalRulerUnits;
////// playback to accelerated //////
function setToAccelerated () {
          var idsetd = charIDToTypeID( "setd" );
          var desc1 = new ActionDescriptor();
          var idnull = charIDToTypeID( "null" );
                    var ref1 = new ActionReference();
                    var idPrpr = charIDToTypeID( "Prpr" );
                    var idPbkO = charIDToTypeID( "PbkO" );
                    ref1.putProperty( idPrpr, idPbkO );
                    var idcapp = charIDToTypeID( "capp" );
                    var idOrdn = charIDToTypeID( "Ordn" );
                    var idTrgt = charIDToTypeID( "Trgt" );
                    ref1.putEnumerated( idcapp, idOrdn, idTrgt );
          desc1.putReference( idnull, ref1 );
          var idT = charIDToTypeID( "T   " );
                    var desc2 = new ActionDescriptor();
                    var idperformance = stringIDToTypeID( "performance" );
                    var idperformance = stringIDToTypeID( "performance" );
                    var idaccelerated = stringIDToTypeID( "accelerated" );
                    desc2.putEnumerated( idperformance, idperformance, idaccelerated );
          var idPbkO = charIDToTypeID( "PbkO" );
          desc1.putObject( idT, idPbkO, desc2 );
          executeAction( idsetd, desc1, DialogModes.NO );
////// get psds, tifs and jpgs from files //////
function getFiles (theFile) {
    if (theFile.name.match(/\.(jpg|tif|psd|pdf|)$/i)) {
        return true
////// place //////
function placeScaleFile (file, xOffset, yOffset, theScale) {
// =======================================================
var idPlc = charIDToTypeID( "Plc " );
    var desc5 = new ActionDescriptor();
    var idnull = charIDToTypeID( "null" );
    desc5.putPath( idnull, new File( file ) );
    var idFTcs = charIDToTypeID( "FTcs" );
    var idQCSt = charIDToTypeID( "QCSt" );
    var idQcsa = charIDToTypeID( "Qcsa" );
    desc5.putEnumerated( idFTcs, idQCSt, idQcsa );
    var idOfst = charIDToTypeID( "Ofst" );
        var desc6 = new ActionDescriptor();
        var idHrzn = charIDToTypeID( "Hrzn" );
        var idPxl = charIDToTypeID( "#Pxl" );
        desc6.putUnitDouble( idHrzn, idPxl, xOffset );
        var idVrtc = charIDToTypeID( "Vrtc" );
        var idPxl = charIDToTypeID( "#Pxl" );
        desc6.putUnitDouble( idVrtc, idPxl, yOffset );
    var idOfst = charIDToTypeID( "Ofst" );
    desc5.putObject( idOfst, idOfst, desc6 );
    var idWdth = charIDToTypeID( "Wdth" );
    var idPrc = charIDToTypeID( "#Prc" );
    desc5.putUnitDouble( idWdth, idPrc, theScale );
    var idHght = charIDToTypeID( "Hght" );
    var idPrc = charIDToTypeID( "#Prc" );
    desc5.putUnitDouble( idHght, idPrc, theScale );
    var idLnkd = charIDToTypeID( "Lnkd" );
    desc5.putBoolean( idLnkd, true );
executeAction( idPlc, desc5, DialogModes.NO );
return myDocument.activeLayer;
////// open pdf //////
function openPDF (theImage, x) {
// define pdfopenoptions;
var pdfOpenOpts = new PDFOpenOptions;
pdfOpenOpts.antiAlias = true;
pdfOpenOpts.bitsPerChannel = BitsPerChannelType.EIGHT;
pdfOpenOpts.cropPage = CropToType.TRIMBOX;
pdfOpenOpts.mode = OpenDocumentMode.CMYK;
pdfOpenOpts.resolution = 10;
pdfOpenOpts.suppressWarnings = true;
pdfOpenOpts.usePageNumber = true;
// suppress dialogs;
var theDialogSettings = app.displayDialogs;
app.displayDialogs = DialogModes.NO;
pdfOpenOpts.page = x;
var thePdf = app.open(theImage, pdfOpenOpts);
thePdf.close(SaveOptions.DONOTSAVECHANGES);
// reset dialogmodes;
app.displayDialogs = theDialogSettings;
////// turn off preference to scale placed image //////
function turnOffRescale () {
// determine if the resize prefernce is on;
var ref = new ActionReference();
ref.putEnumerated( charIDToTypeID("capp"), charIDToTypeID("Ordn"), charIDToTypeID("Trgt") );
var appDesc = executeActionGet(ref);
var prefDesc = appDesc.getObjectValue(charIDToTypeID( "GnrP" ));
var theResizePref = prefDesc.getBoolean(stringIDToTypeID( "resizePastePlace" ));
// turn off resize image during place;
if (theResizePref == true);{
// =======================================================
var idsetd = charIDToTypeID( "setd" );
    var desc12 = new ActionDescriptor();
    var idnull = charIDToTypeID( "null" );
        var ref4 = new ActionReference();
        var idPrpr = charIDToTypeID( "Prpr" );
        var idGnrP = charIDToTypeID( "GnrP" );
        ref4.putProperty( idPrpr, idGnrP );
        var idcapp = charIDToTypeID( "capp" );
        var idOrdn = charIDToTypeID( "Ordn" );
        var idTrgt = charIDToTypeID( "Trgt" );
        ref4.putEnumerated( idcapp, idOrdn, idTrgt );
    desc12.putReference( idnull, ref4 );
    var idT = charIDToTypeID( "T   " );
        var desc13 = new ActionDescriptor();
        var idresizePastePlace = stringIDToTypeID( "resizePastePlace" );
        desc13.putBoolean( idresizePastePlace, false );
    var idGnrP = charIDToTypeID( "GnrP" );
    desc12.putObject( idT, idGnrP, desc13 );
executeAction( idsetd, desc12, DialogModes.NO );
return theResizePref
////// turn on preference to scale plced image //////
function turnOnRescale (check) {
if (check == true) {
// =======================================================
var idsetd = charIDToTypeID( "setd" );
    var desc14 = new ActionDescriptor();
    var idnull = charIDToTypeID( "null" );
        var ref5 = new ActionReference();
        var idPrpr = charIDToTypeID( "Prpr" );
        var idGnrP = charIDToTypeID( "GnrP" );
        ref5.putProperty( idPrpr, idGnrP );
        var idcapp = charIDToTypeID( "capp" );
        var idOrdn = charIDToTypeID( "Ordn" );
        var idTrgt = charIDToTypeID( "Trgt" );
        ref5.putEnumerated( idcapp, idOrdn, idTrgt );
    desc14.putReference( idnull, ref5 );
    var idT = charIDToTypeID( "T   " );
        var desc15 = new ActionDescriptor();
        var idresizePastePlace = stringIDToTypeID( "resizePastePlace" );
        desc15.putBoolean( idresizePastePlace, true );
    var idGnrP = charIDToTypeID( "GnrP" );
    desc14.putObject( idT, idGnrP, desc15 );
executeAction( idsetd, desc14, DialogModes.NO );
////// convert to so if not one aready //////
function duplicateAndOffset (theLayer, theXOffset, theYOffset) {
app.activeDocument.activeLayer = theLayer;
// =======================================================
var idcopy = charIDToTypeID( "copy" );
    var desc9 = new ActionDescriptor();
    var idnull = charIDToTypeID( "null" );
        var ref5 = new ActionReference();
        var idLyr = charIDToTypeID( "Lyr " );
        var idOrdn = charIDToTypeID( "Ordn" );
        var idTrgt = charIDToTypeID( "Trgt" );
        ref5.putEnumerated( idLyr, idOrdn, idTrgt );
    desc9.putReference( idnull, ref5 );
    var idT = charIDToTypeID( "T   " );
        var desc10 = new ActionDescriptor();
        var idHrzn = charIDToTypeID( "Hrzn" );
        var idRlt = charIDToTypeID( "#Pxl" );
        desc10.putUnitDouble( idHrzn, idRlt, theXOffset );
        var idVrtc = charIDToTypeID( "Vrtc" );
        var idRlt = charIDToTypeID( "#Pxl" );
        desc10.putUnitDouble( idVrtc, idRlt, theYOffset );
    var idOfst = charIDToTypeID( "Ofst" );
    desc9.putObject( idT, idOfst, desc10 );
executeAction( idcopy, desc9, DialogModes.NO );
return app.activeDocument.activeLayer
////// load pdf as smart object //////
function transformLayer (layer, percentage, xOffset, yOffset) {
app.activeDocument.activeLayer = layer;
// =======================================================
var idTrnf = charIDToTypeID( "Trnf" );
    var desc4 = new ActionDescriptor();
    var idFTcs = charIDToTypeID( "FTcs" );
    var idQCSt = charIDToTypeID( "QCSt" );
    var idQcsa = charIDToTypeID( "Qcsa" );
    desc4.putEnumerated( idFTcs, idQCSt, idQcsa );
    var idOfst = charIDToTypeID( "Ofst" );
        var desc5 = new ActionDescriptor();
        var idHrzn = charIDToTypeID( "Hrzn" );
        var idPxl = charIDToTypeID( "#Pxl" );
        desc5.putUnitDouble( idHrzn, idPxl, xOffset );
        var idVrtc = charIDToTypeID( "Vrtc" );
        var idPxl = charIDToTypeID( "#Pxl" );
        desc5.putUnitDouble( idVrtc, idPxl, yOffset );
    var idOfst = charIDToTypeID( "Ofst" );
    desc4.putObject( idOfst, idOfst, desc5 );
    var idWdth = charIDToTypeID( "Wdth" );
    var idPrc = charIDToTypeID( "#Prc" );
    desc4.putUnitDouble( idWdth, idPrc, percentage );
    var idHght = charIDToTypeID( "Hght" );
    var idPrc = charIDToTypeID( "#Prc" );
    desc4.putUnitDouble( idHght, idPrc, percentage );
    var idLnkd = charIDToTypeID( "Lnkd" );
    desc4.putBoolean( idLnkd, true );
    var idAntA = charIDToTypeID( "AntA" );
    desc4.putBoolean( idAntA, true );
executeAction( idTrnf, desc4, DialogModes.NO );
return app.activeDocument.activeLayer
////// function to get file’s dimensions, thanks to michael l hale //////
function getDimensions( file ){
function divideString (theString) {
          theString = String(theString);
    var a = Number(theString.slice(0, theString.indexOf("\/")));
    var b = Number(theString.slice(theString.indexOf("\/") + 1));
    return (a / b)
// from a script by michael l hale;
function loadXMPLibrary(){
     if ( !ExternalObject.AdobeXMPScript ){
          try{
               ExternalObject.AdobeXMPScript = new ExternalObject
                                                            ('lib:AdobeXMPScript');
          }catch (e){
               alert( ErrStrs.XMPLIB );
               return false;
     return true;
function unloadXMPLibrary(){
   if( ExternalObject.AdobeXMPScript ) {
      try{
         ExternalObject.AdobeXMPScript.unload();
         ExternalObject.AdobeXMPScript = undefined;
      }catch (e){
         alert( ErrStrs.XMPLIB );
////// based on a script by muppet mark //////
function dimensionsShellScript (file) {
          try {
// getMetaDataMDLS;
if (File(file) instanceof File && File(file).exists) {
          var shellString = "/usr/bin/mdls ";
          shellString += File(file).fsName;
//          shellString += File(file).fullName;
          shellString += ' > ~/Documents/StdOut2.txt';
          app.system(shellString);
// read the file;
if (File('~/Documents/StdOut2.txt').exists == true) {
    var file = File('~/Documents/StdOut2.txt');
    file.open("r");
    file.encoding= 'BINARY';
    var theText = new String;
    for (var m = 0; m < file.length; m ++) {
                    theText = theText.concat(file.readch());
          file.close();
          theText = theText.split("\n");
// get the dimensions;
          var dim = new Array;
          for (var m = 0; m < theText.length; m++) {
                    var theLine = theText[m];
                    if (theLine.indexOf("kMDItemPixelWidth") != -1) {dim.push(theLine.match(/[\d\.]+/g).join("") )}
                    if (theLine.indexOf("kMDItemPixelHeight") != -1) {dim.push(theLine.match(/[\d\.]+/g).join("") )}
                    if (theLine.indexOf("kMDItemResolutionWidthDPI") != -1) {dim.push(theLine.match(/[\d\.]+/g).join("") )}
                    if (theLine.indexOf("kMDItemResolutionHeightDPI") != -1) {dim.push(theLine.match(/[\d\.]+/g).join("") )}
// remove file and hand back;
          File('~/Documents/StdOut2.txt').remove();
catch (e) {
          if (File('~/Documents/StdOut2.txt').exists == true) {File('~/Documents/StdOut2.txt').remove()};
          return dim
          try{
                    loadXMPLibrary();
                    var xmpf = new XMPFile( file.fsName, XMPConst.UNKNOWN, XMPConst.OPEN_FOR_READ );
                    var xmp = xmpf.getXMP();
                    xmpf.closeFile();
                    var resolutionUnit = xmp.getProperty( XMPConst.NS_TIFF, 'ResolutionUnit', XMPConst.STRING);
                    var resFactor = 1;
                    if (resolutionUnit == 2) {
                              var resFactor = 1;
                    if (resolutionUnit == 3) {
                              var resFactor = 2.54;
                    var dim = [xmp.getProperty( XMPConst.NS_EXIF, 'PixelXDimension', XMPConst.STRING),
                    xmp.getProperty( XMPConst.NS_EXIF, 'PixelYDimension', XMPConst.STRING),
                    divideString (xmp.getProperty( XMPConst.NS_TIFF, 'XResolution', XMPConst.STRING)) * resFactor,
                    divideString (xmp.getProperty( XMPConst.NS_TIFF, 'YResolution', XMPConst.STRING)) * resFactor];
                    unloadXMPLibrary();
                    if(dim[0]=="undefined" || dim[1]=="undefined"){
            var dim = undefined;
            var res = undefined;
            var bt = new BridgeTalk;
            bt.target = "bridge";
            var myScript = ("var ftn = " + psRemote.toSource() + "; ftn("+file.toSource()+");");
            bt.body = myScript;
            bt.onResult = function( inBT ) {myReturnValue(inBT.body); }
            bt.send(10);
                    function myReturnValue(str){
                              res = str;
                              dim = str.split(',');
                    function psRemote(file){
                              var t= new Thumbnail(file);
                              return t.core.quickMetadata.width+','+t.core.quickMetadata.height;
    }catch(e){unloadXMPLibrary()};
          if (String(dim[2]).indexOf("\/") != -1) {
                    var a = divideString(dim[2]);
                    var b = divideString(dim[3]);
                    dim = [dim[0], dim[1], a, b]
// if dimensions are missing as might be the case with some bitmap tiffs for example try a shell-script;
          if (dim[0] == undefined || dim[1] == undefined) {
                    var array = dimensionsShellScript(file);
                    dim = array;
// if shell-string failed open doc to get measurements;
          if (dim[0] == undefined || dim[1] == undefined) {
                    var thisDoc = app.open (File(file));
// close ai without saving;
                    if (file.name.slice(-3).match(/\.(ai)$/i)) {
                              thisDoc.trim(TrimType.TRANSPARENT);
                              var dim = [thisDoc.width, thisDoc.height, thisDoc.resolution, thisDoc.resolution];
                              thisDoc.close(SaveOptions.DONOTSAVECHANGES)
                    else {
                              var dim = [thisDoc.width, thisDoc.height, thisDoc.resolution, thisDoc.resolution];
                              thisDoc.close(SaveOptions.PROMPTTOSAVECHANGES)
return dim;

Spry Effects+Safari=Conflict?

I'm currently creating a site for a commercial video producer
and I've got thumbnails beneath the video player using Spry Effects
where onLoad, the thumbnails appear dimmed and upon rollover, the
thumbs brighten up. Problem is the effect works perfectly in
Firefox but not Safari at all. Is this a known conflict?
http://www.josephimartinez.com/commercials/index.html
This is being tested in v3.0.4 of Safari for Mac.

I tried the examples from the effects_coding/index.html but
it didn't matter whether it was the onclick or onmouseover effect.
Nothing is happening in any browser.
I've updated the following page with the new code and added
the reference to my SpryAssets folder (doh! how could I forget to
add that?) and you'll see I added the code to the vid1 instance.
http://www.josephimartinez.com/commercials/index2.html
Here's what I did:
First add the references to SpryEffects in the head:
<script type="text/javascript"
src="../SpryAssets/SpryEffects.js"></script>
Then did this to the div:
<div id="vid1">
<p><a onmouseover="fadeElement.start(); return
false;" href="coors_light.html"><img
src="../images/thumbs/coors_light.jpg" alt="Coors Light"
name="commCoors" width="124" height="93" border="0" id="commCoors"
/></a></p>
<p><a href="coors_light.html"><img
src="../images/logos/coors_light.gif" alt="Coors Light"
name="coorsLight" width="80" height="60" border="0" id="coorsLight"
/></a></p>
</div>
<script type="text/javascript">
var fadeElement = new Spry.Effect.Fade("vid1",
{duration:2000, from:100, to:20, toggle:true});
</script>

Spry effect Appear/Fade don't toggle

Ok.
I have applied a simple, basic, no more basic then this
cannot be possible, Appear/Fade using the effects behaviors menu in
DW.
I have turn on the Toggle option and I said: "appear from 0
to 100".
Well the result is this:
http://www.cantinho.org/admin/cantinho/showhide.php
Note: I can make a CSS to make the element disapear at the
beginning, but why should I need that if I have configured to show
from 0 to 100% ?
What I'm missing here?
Thanks.

I have been having a similar problem, and I thought your fix
might help my problem, but after downloading and running it, I'm
still getting the same thing. I'm trying to use effectAppearFade to
make a target link appear when another link is clicked. In order
for it to appear, I evidently need to not hide it in CSS Styles,
but then when the page first opens, the target link is visible. I
can almost make it work by fading it from 100 to 0 in an onload
operation on the body of the page. The appear logic then works fine
and even toggles okay if I turn that on, but, when the page first
loads, the link that I'm hiding flashes briefly before it
disappears. I've also tried using changeProp in the body's onload
code to hide the target link, but it seems that whatever I have set
the property to in CSS Styles overrides whatever I do in the
onload. I've also tried controlling its visibility with the display
property with the same result. So far, I haven't found a way to
hide the target link before the page has loaded and then fade it to
0 before making it visible or in any other way to start the target
link hidden and have it appear when I click the link with the
AppearFade effect for it. Do you know what I'm doing wrong?
Thanks for any help you can give me.
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=utf-8" />
<title>Home</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryEffects.js"
type="text/javascript"></script>
<script type="text/javascript">

</script>
</head>
<body
onload="/*MM_changeProp('#ArtLinks','','visibility','hidden','DIV');*/
MM_effectAppearFade('#ArtLinks', 0, 100, 0, false)/*;
MM_changeProp('#ArtLinks','','visibility','visible','DIV')*/">
<div>
<table width="100%" height="477" border="0"
cellpadding="0" cellspacing="0">
<tr>
<td width="22%" valign="top"> </td>
<td width="56%" valign="top"><p align="center"
class="style1"> </p>
<p align="center" class="style1"><a
href="TechnologyMainFrame.html" title="Technology" class="style1"
accesskey="t">The Promise of
<u>T</u>echnology</a></p>
<p align="center" class="style1">and</p>
<p align="center"><strong><span
class="style4"><a href="javascript:;" title="Art"
class="style4" accesskey="a"
onclick="MM_effectAppearFade('#ArtLinks', 1000, 0, 100,
true)">The <u>A</u>rt of Life</a></span>
</strong></p></td>
<td width="22%" valign="top"><p
align="center"> </p>
<div class="style5" id="#ArtLinks">
<p align="center" class="style5"><em><a
href="Poems.php"><u>P</u>oems</a></em></p>
<p align="center" class="style5"><em><a
href="Story.php"><u>S</u>tory</a></em></p>
</div></td>
</tr>
</table>
</div>
</body>
</html>

How do I have spry effect trigger on page load?

I do not want to use the on click behavior to trigger spry
effects, is it possible to have the effects triggered by the on
page load command?
Please help and thanks very much.
Patrick

quote:
Originally posted by:
dynchuck
I attach it to an image:
<img src="images/bookcover.png" width="240" height="375"
onload="MM_effectAppearFade('buttonCol', 6000, 0, 100, false)"
/>
Actually the effect is applied on the entire page and is
currently triggered by the onclick button command.
So I was wondering if I could leave it that way but have it
triggered by the onload command.
Here is the site, the effect is only on the first tab for
now.
http://www.patrickjudson.com/weddingIndex.php
Patrick

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

Spry Effects Question

Is there a way to use a spry effect to have a div (or image)
fade away and have it show the page underneath. For example, I have
a page where I want there to be a picture when you open the page. I
then want the picture to fade out automatically, and have my web
page (with navigation, etc) underneath of it show up. It seems that
when using spry effects however, the image will fade out, but it
doesn't fade to nothing. There is something there still blocking
the content underneath.
Any help at all would be greatly appreciated!

Hi,
I've just reproduced your case and I have a solution for you.
After the effect finishes, you should made the image
invisible and in the same time to release the space occupied by the
image.
To do this, add into the effect constructor the option:
'finish:' that receives a function as parameter. On this function
you set for the image to become invisible after the effect finishes
by adding display:none.
The constructor should look like this:
var effect = new Spry.Effect.Fade('test', {duration: 3000,
from: 100, to: 0, finish:function(el,
eff){el.style.display='none';}});
The effect will be started onload.
Diana

Spry Effects doesnt work with position:absolute CSS

HI guys,
I have a text with position: absolute; left: 20px; top: 10px;
to it and using Spry's Fade Effect, it just shows it without any
fade animation, any ideas why?
quote:
<!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=utf-8" />
<title>Untitled Document</title>
<script src="assets/SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<script src="assets/SpryAssets/SpryEffects.js"
type="text/javascript"></script>
<script src="assets/SpryAssets/xpath.js"
type="text/javascript"></script>
<script src="assets/SpryAssets/SpryData.js"
type="text/javascript"></script>
<link href="assets/SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<script type="text/javascript">

</script>
</head>
<body onload="cycler.start();">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab"
onclick="MM_effectAppearFade('Content1', 1000, 0, 100, false)"
tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab"
onclick="MM_effectAppearFade('Content0', 1000, 0, 100, false)"
tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent" id="Content1">
<div>Normal text here</div>
</div>
<div class="TabbedPanelsContent" id="Content0"
spry:detailregion="dsFeaturebox1">
<div class="cool">{XML text here}</div>
</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
Thanks,
J

Hi guys,
I just would like to know why adding position: absolute on my
css would stop the Spry Effects from doing its job? Thanks!

[Spry Effects] Dynamic Width

Similar Messages

Maybe you are looking for