"gli inn/gli ut"-animasjon

Unlimited · 12. juli 2006

se på denne siden og si hvordan jeg kan ha en "gli inn/gli ut"-animasjon på min side!

http://www.yahoo.com/?p=1152577037

PS! "gli inn/gli ut"-animasjon kommer ned fra header når du går inn i lenken.

Drømmemannen · 12. juli 2006

Om du vil kan du ta utgangspunkt i følgende, som funker i Opera 9.00 ihvertfall:

Skjult tekst: (Marker innholdet i feltet for å se teksten):

<html>
<head>
 <style>

 #wrapper {
     width: 600px;
     margin: 0 auto;
     background-color: #ffcccc;
 }

 #thingy {
     height: 0;
     overflow: hidden;
     background-color: #ccccff;
 }

 </style>
 <script type="text/javascript">

 var direction = 1;        // When starts hidden, otherwise -1
 var animationSteps = 50;  // Number of steps in animation
 var animationTime = 500;  // Total time in milliseconds
 var maxHeight = 100;      // Max height of thingy

 function showHide()
 {
     var element = document.getElementById( 'thingy' );
     var currentHeight = parseInt( element.style.pixelHeight );

     if (( direction > 0 && currentHeight == maxHeight )
         || ( direction < 0 && currentHeight == 0 ))
     {
         direction = -direction;
     }
     else
     {
         var newHeight = Math.round( currentHeight + direction * maxHeight / animationSteps );

         if ( newHeight < 0 )
         {
             newHeight = 0;
         }
         else if ( newHeight > maxHeight )
         {
             newHeight = maxHeight;
         }

         element.style.height = newHeight + 'px';
         setTimeout( 'showHide()', Math.round( animationTime / animationSteps ) );
     }
 }

 </script>
</head>
<body>

<div id="wrapper">

 <div id="thingy">
   <p>Thingy-innhold</p>
 </div>

 <h2>Hallo</h2>
 <p>Masse innehold. Masse innhold. Masse innhold. Masse innhold.</p>
 <p><input type="button" value="Klikk her!" onclick="showHide()"></p>

</div>

</body>
</html>

Endret 12. juli 2006 av balletryne

Jesper Karsrud · 2. august 2006

Det du kan gjøre er å se på YUI, da det er dette Yahoo har brukt på sidene sine. Ganske hendig JavaScript-bibliotek, egentlig.

Unlimited · 2. august 2006

oi, har aldri vært der!! takk skal se på den.

24. august 2006

Om du vil kan du ta utgangspunkt i følgende, som funker i Opera 9.00 ihvertfall:

Skjult tekst: (Marker innholdet i feltet for å se teksten):

<html>
<head>
 <style>

 #wrapper {
     width: 600px;
     margin: 0 auto;
     background-color: #ffcccc;
 }

 #thingy {
     height: 0;
     overflow: hidden;
     background-color: #ccccff;
 }

 </style>
 <script type="text/javascript">

 var direction = 1;        // When starts hidden, otherwise -1
 var animationSteps = 50;  // Number of steps in animation
 var animationTime = 500;  // Total time in milliseconds
 var maxHeight = 100;      // Max height of thingy

 function showHide()
 {
     var element = document.getElementById( 'thingy' );
     var currentHeight = parseInt( element.style.pixelHeight );

     if (( direction > 0 && currentHeight == maxHeight )
         || ( direction < 0 && currentHeight == 0 ))
     {
         direction = -direction;
     }
     else
     {
         var newHeight = Math.round( currentHeight + direction * maxHeight / animationSteps );

         if ( newHeight < 0 )
         {
             newHeight = 0;
         }
         else if ( newHeight > maxHeight )
         {
             newHeight = maxHeight;
         }

         element.style.height = newHeight + 'px';
         setTimeout( 'showHide()', Math.round( animationTime / animationSteps ) );
     }
 }

 </script>
</head>
<body>

<div id="wrapper">

 <div id="thingy">
   <p>Thingy-innhold</p>
 </div>

 <h2>Hallo</h2>
 <p>Masse innehold. Masse innhold. Masse innhold. Masse innhold.</p>
 <p><input type="button" value="Klikk her!" onclick="showHide()"></p>

</div>

</body>
</html>

6480250[/snapback]

Den koden funker fint i Opera, men ikke i FF - noe tips til hvordan man fikkser det ? Er på utkikk etter et slikt script

Drømmemannen · 25. august 2006

Gjort en liten forandring på det nå. Funker nå i Opera of FireFox hos meg.

Skjult tekst: (Marker innholdet i feltet for å se teksten):

<html>
<head>
<style>

#wrapper {
    width: 600px;
    margin: 0 auto;
    background-color: #ffcccc;
}

#thingy {
    height: 0;
    overflow: hidden;
    background-color: #ccccff;
}

</style>
<script type="text/javascript">

var direction = 1;        // When starts hidden, otherwise -1
var animationSteps = 50;  // Number of steps in animation
var animationTime = 500;  // Total time in milliseconds
var maxHeight = 100;      // Max height of thingy

function showHide()
{
    var element = document.getElementById( 'thingy' );

    if ( !element.style.height )
    {
        element.style.height = '0px';
    }

    var currentHeight = parseInt( element.style.height );

    if (( direction > 0 && currentHeight == maxHeight )
        || ( direction < 0 && currentHeight == 0 ))
    {
        direction = -direction;
    }
    else
    {
        var newHeight = Math.round( currentHeight + direction * maxHeight / animationSteps );

        if ( newHeight < 0 )
        {
            newHeight = 0;
        }
        else if ( newHeight > maxHeight )
        {
            newHeight = maxHeight;
        }

        element.style.height = newHeight + 'px';
        setTimeout( 'showHide()', Math.round( animationTime / animationSteps ) );
    }
}

</script>
</head>
<body>

<div id="wrapper">

<div id="thingy">
  <p>Thingy-innhold</p>
</div>

<h2>Hallo</h2>
<p>Masse innehold. Masse innhold. Masse innhold. Masse innhold.</p>
<p><input type="button" value="Klikk her!" onclick="showHide()"></p>

</div>

</body>
</html>

Endret 25. august 2006 av balletryne

Logg inn

"gli inn/gli ut"-animasjon

Anbefalte innlegg

Unlimited

Lenke til kommentar

Videoannonse

Drømmemannen

Lenke til kommentar

Jesper Karsrud

Lenke til kommentar

Unlimited

Lenke til kommentar

Gjest Slettet-df17e

Lenke til kommentar

Drømmemannen

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer