Hjelp til javacript effect queue (script.aculo.us)

[Garreth]

Har brukt scriptaculous som rammeverk for å lage effekter på noen diver.

 

Tror jeg har klart å få det ganske bra til, men det bugger i firefox, ("Lukk boks" linken forsvinner etterhvert)

 

Lurer også på om det finnes noen bedre måte å lage "Timelines" for nå må jeg lage en ny timeline for hver boks, og det kan bli litt kjipt hvis jeg skal ha mange slike bokser på en side.

 

 

Se eksempelet mitt

 

 

<div id="box1">
	<h2>Artikkel 1 Ingress</h2>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean dapibus odio in mi. Curabitur ut diam ac leo semper pharetra.</p>
	<p><a href="#" onclick="startTimelineFront(); return false;">Vis hele artikkelen</a></p>
</div>


<div id="box2" style="display:none;">
	<h2>Artikkel 1 full</h2>
	<p><strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean dapibus odio in mi. Curabitur ut diam ac leo semper pharetra.</strong></p>
	<p>Etiam interdum nisl tempus elit. Fusce convallis ullamcorper nulla. Mauris mauris leo, suscipit eget, molestie at, euismod ac, urna. Praesent dignissim, massa eget pellentesque vulputate, ligula augue iaculis magna, non ultricies lorem mi eget mauris. Morbi tempus dignissim quam. Duis ut neque. Etiam suscipit elementum pede.</p>
	<p><a href="#" onclick="startTimelineEnd(); return false;">Lukk boks</a></p>
</div>


<div id="box3">
	<h2>Artikkel 2 Ingress</h2>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean dapibus odio in mi. Curabitur ut diam ac leo semper pharetra.</p>
	<p><a href="#" onclick="startTimelineFront2(); return false;">Vis hele artikkelen</a></p>
</div>


<div id="box4" style="display:none;">
	<h2>Artikkel 2 full</h2>
	<p><strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean dapibus odio in mi. Curabitur ut diam ac leo semper pharetra.</strong></p>
	<p>Etiam interdum nisl tempus elit. Fusce convallis ullamcorper nulla. Mauris mauris leo, suscipit eget, molestie at, euismod ac, urna. Praesent dignissim, massa eget pellentesque vulputate, ligula augue iaculis magna, non ultricies lorem mi eget mauris. Morbi tempus dignissim quam. Duis ut neque. Etiam suscipit elementum pede.</p>
	<p><a href="#" onclick="startTimelineEnd2(); return false;">Lukk boks</a></p>
</div>



<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[

 //Artikkel 1	
 function startTimelineFront() {
   //Hide box1
   for(var i=0; i<2; i++)

//Hide box 1
   new Effect.Fade('box1', {scaleContent: false, duration: 0.1 });

// Show box 2
new Effect.BlindDown('box2', {scaleContent: false, delay: 0.2 }); 

 }

 function startTimelineEnd() {
   //Hide box1
   for(var i=0; i<2; i++)

// Hide box 2
new Effect.BlindUp('box2', {scaleContent: false, duration: 0.1 }); 

//Show box 1
   new Effect.Appear('box1', {scaleContent: false, delay: 0.2 });

 }

 //Artikkel 2	
 function startTimelineFront2() {
   //Hide box1
   for(var i=0; i<2; i++)

//Hide box 3
   new Effect.Fade('box3', {scaleContent: false, duration: 0.1 });

// Show box 4
new Effect.BlindDown('box4', {scaleContent: false, delay: 0.2 }); 

 }

 function startTimelineEnd2() {
   //Hide box1
   for(var i=0; i<2; i++)

// Hide box 4
new Effect.BlindUp('box4', {scaleContent: false, duration: 0.1 }); 

//Show box 3
   new Effect.Appear('box3', {scaleContent: false, delay: 0.2 });

 }

// ]]>
</script>