Behavior Help

[lew2937]

On my main pages, I have applied a "Grow/Shrink" behavior "OnLoad". However, as you can see, it quickly flashes the picture and then loads. I would like to avoid that flash, but can't seem to make it go away. I've tried preloading the images, but no luck. What am I doing wrong?http://www.ivyla.com/contact.htmlOn a sub page, I am trying to create a template that includes both the main picture and some small rollover thumbnails at the top that have links. When it first loads, everything looks great (except the quick flash mentioned above), but once you start rolling over the grayscale thumbnails at the top, problems hit. I've tried reordering the behaviors, but it doesn't seem to work. Any solutions?http://www.ivyla.com/subbase.htmlThanks so much! Any help is greatly appreciated.lew

[Synook]

Well, you could use CSS to set its display to none (style="display:none; ") and then in the onload function first set the display back to inline and then continue.So, your function ( MM_effectGrowShrink() ) now looks like this

function MM_effectGrowShrink(targetElement, duration, from, to, referHeight, growFromCenter){	targetElement.style.display = "inline"; //If block then change	Spry.Effect.DoGrow(targetElement, {duration: duration, from: from, to: to, referHeight: referHeight, growCenter: growFromCenter});}

And your image

<img src="images/project_uci.gif" name="image" width="290" height="325" hspace="40" align="absmiddle" id="image" style="display:none; " onload="MM_effectGrowShrink(this, 1000, '0%', '100%', false, false, false)" />

When it first loads, everything looks great (except the quick flash mentioned above), but once you start rolling over the grayscale thumbnails at the top, problems hit. I've tried reordering the behaviors, but it doesn't seem to work. Any solutions?

Umm.. don't use the grow effect? It just looks weird to me

[lew2937]

I'm sorry, I don't understand code that well. I'm not sure what you mean to do.Even if I do a different behavior, i'm still having the same problem.http://www.ivyla.com/companyalt.htmlThanks, lew

[Synook]

Uh... ok, do you understand what CSS is, and what the display property is? I am saying that you should give all your images that use the GrowShrink effect that property through another attribute that says style="display:none; " . Now, no need to change what event the JS function runs off, onload is fine, just at the top of your page change the bit inside the second script tags to

function MM_effectGrowShrink(targetElement, duration, from, to, referHeight, growFromCenter){	targetElement.style.display = "inline"; //If block then change	Spry.Effect.DoGrow(targetElement, {duration: duration, from: from, to: to, referHeight: referHeight, growCenter: growFromCenter});}

That is all

[lew2937]

Still no luck. I must be missing something?http://www.ivyla.com/company.html

[Synook]

Ooh Spry is soooo confusing - but then all JS libararies are... ok - go into SpryAssets/SpryEffects.js and search for a function assignment to Spry.Effect.GrowShrink. Go down to the very bottom of that function (just before the last }; ) and you should see some lines that look like this

	}	var registeredEffect = SpryRegistry.getRegisteredEffect(element, effectCluster);	registeredEffect.start();	return registeredEffect;};

Change that to

	}	var registeredEffect = SpryRegistry.getRegisteredEffect(element, effectCluster);	element.style.display = "inline";	registeredEffect.start();	return registeredEffect;};

And change the MM_effectGrowShrink() function in company.html back to what it was before we modified it. Leave the display:none; statement.Not sure whether this will work...

[lew2937]

Ooh Spry is soooo confusing - but then all JS libararies are... ok - go into SpryAssets/SpryEffects.js and search for a function assignment to Spry.Effect.GrowShrink. Go down to the very bottom of that function (just before the last }; ) and you should see some lines that look like this

	}	var registeredEffect = SpryRegistry.getRegisteredEffect(element, effectCluster);	registeredEffect.start();	return registeredEffect;};

Change that to

	}	var registeredEffect = SpryRegistry.getRegisteredEffect(element, effectCluster);	element.style.display = "inline";	registeredEffect.start();	return registeredEffect;};

And change the MM_effectGrowShrink() function in company.html back to what it was before we modified it. Leave the display:none; statement.Not sure whether this will work...

[lew2937]

THANK YOU SO MUCH! It worked! I can't tell you how many hours I spent changing minor things, previewing them, uploading them and then finding out they don't work.It's much appreciated. Have a good day.lew

[lew2937]

Hello.I've had to rearrange the page and it's working the way I want, but I still seem to be getting that flashing. Since this is done with a timeline and not with the same type of behavior, i'm not sure where to put the show none id.http://www.ivyla.com/studiomembers.html