transitions and div contents.

[scroots]

Does anyone know of any good transition tutorials for addind effects to a div so that when the content changes an effect makes appear nicely not just a bang.
does anyone have any examples of code?

I can change the content of a div i just need some tutorials or examples of how to add a transition effect.

the code i use to add to a div is this

<script>

function a(k) {
if (k==0) {
a2.innerHTML='<a href="java script:a(1)">SECTION 1</a> <a href="page.htm">SECTION A</a> <a href="page.htm">SECTION B</a> <a href="page.htm">SECTION C</a>';
} else {
a2.innerHTML='<a href="java script:a(0)">SECTION 1</a>';
}
}

</script>

<div id="a2"><a href="java script:a(0)">SECTION 1</a></div>

thanks is advance
scroots

[Adam20002]

I think you have to mess with the alpha filters or something for a fade in/out effect although i have never done myself.

This tutorial explains fading in text using the DOM, that might help.

http://www.javascriptkit.com/dhtmltutors/fadingtext.shtml

Also search this site for threads about alpha filters i would say.

Hope this helps.

Adam

[scroots]

thanks for your help it has given me an idea.
also anybody know how to aort of make it glide into view so that when the menu opens it doesn`t go vamoosh and shows it shows nicely in a gradual fashion?

scroots

[MrDoubtFire]

You need to do a little style application and javascript.

Using internal/external stylesheet:

<style type="text/css">
#a2 {
filter:progid\:DXImageTransform.Microsoft.Wipe(
GradientSize=1.0, wipeStyle=0, motion='forward');
}
</style>


Or applied inline:

<div id="#a2" style="filter:progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0, wipeStyle=0, motion='forward')"></div>


Then in script:

<script type="text/javascript">
var bTranState = 0;
function fnToggle() {
a2.filters[0].Apply();

if (bTranState=='0') {
bTranState = 1;

/* do your innerHTML swapping here */

} else {
bTranState = 0;

/* do your innerHTML swapping here */

}

a2.filters[0].Play(duration=2);
}
</script>



This was taken directly from Microsoft's examples btw. They have extensive examples on msdn (here (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/pixelate.asp)).

Obviously I missed some of your javascript anchor code, but you know where that goes. That should work for you, and you can check msdn for more effects if you don't want the GradientWipe.

MrDoubtFire

[scroots]

thank you i will try out your code later when i have a little more time.

scroots