Hi there,
I am fairly new to Javascript in general.
So I wanted to ask you if you could help me, I'm very frustrated.
This is a Mootools-Script:
<script type="text/javascript">
<!--
window.addEvent('domready', function()
{
//set the default div
activeDiv = 'content1';
activeLink = '1';
//initialise the default div
var initialise = $(activeDiv).setStyles({display:'block',opacity:
0});
new Fx.Style(initialise, 'opacity', {duration: 1} ).set(1);
$(activeLink).className = "active";
//event listener
$('navi').getElements('a').addEvent('click', function (e)
{
new Event(e).stop();
$(activeLink).className = "";
this.className = "active";
activeLink = this.id;
var newDiv = 'content'+this.id;
transitionDiv(activeDiv,newDiv);
});
});
function transitionDiv(oldDiv,newDiv)
{
var fadeOut = function()
{
var div = $(oldDiv).setStyles({
opacity: 1
});
new Fx.Style(div, 'opacity', {duration: 400, fps: 18}).start(0);
fadeIn();
};
var fadeIn = function()
{
var div2 = $(newDiv).setStyles({
display:'block',
opacity: 0
});
new Fx.Style(div2, 'opacity', {duration: 400, fps:
18}).start(1);
};
if(newDiv != activeDiv)
{
fadeOut();
activeDiv = newDiv;
}
}
-->
</script>
Now I want to translate this to get it working with Scriptaculous.
I've got several problems with it; so I hope you can help me.
This is my actual try:
<script type="text/javascript">
function Aktiv()
{
activeDiv = 'content1';
activeLink = '1';
var initialise = Element.setStyle(activeDiv, {display:'block', opacity:
0});
new Effect.Opacity(initialise, {duration:0, from:0, to:1});
$(activeLink).className = "active";
$('navi').select('a').observe('click', function (e) {
//new Event(e).stop();
$(activeLink).className = "";
this.className = "active";
activeLink = this.id;
var newDiv = 'content'+this.id;
new Effect.Opacity(activeDiv, {duration:1, from:1, to:0});
new Element.setStyle(newDiv, {display:'block', opacity:0});
new Effect.Opacity(newDiv, {duration:1, from:0, to:1});
//transitionDiv(activeDiv,newDiv);
});
};
function transitionDiv(oldDiv,newDiv)
{
var fadeOut = function()
{
var div = Element.setStyle(oldDiv, {display:'block', opacity:0});
new Effect.Opacity(div, {duration:2, from:0, to:1});
fadeIn();
};
var fadeIn = function()
{
var div2 = Element.setStyle(newDiv, {display:'block', opacity:1});
new Effect.Opacity(div2, {duration:2, from:1, to:0});
};
if(newDiv != activeDiv)
{
fadeOut();
activeDiv = newDiv;
}
};
</script>
It seems like this script lacks here:
$('navi').select('a').observe ...
But I'm not sure.
To visit the site I'm talking about with the mootools-verison look
here:
http://zentapher.com/designundmedia
Thank you very much in advance!!!!
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
