Gå til innhold
Presidentvalget i USA 2024 ×

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


Anbefalte innlegg

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>

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...