1 Reply Latest reply on Mar 14, 2012 2:25 AM by ockley

    transform: translate < javascript control

    a178Design

      Hi,

       

      Is it possible that when a webpage loads I can have javascript change the class of a div from:

       

      .up {

      transform: translate(0px,-500px)

      transition: all 5s ease-in;

      }

       

      to

       

      .down {

      transform: translate(0px,0px)

      transition: all 5s ease-in;

      }

       

      Essentially I would like a div to move down into place from the top of screen to the middle of screen after the page has loaded.

       

      Some thing like this?:

       

       

      <script type="text/javascript">

      function transform()

      {

         document.getElementById("content").className = "down";


      < </script>



      <div id="content" class "up" onload="transform()">


      </div>

      </html>

       

       

      would this work or is there a better way?

       

      Adrian.

        • 1. Re: transform: translate < javascript control
          ockley Level 1

          You could do something like this:

           

          <!doctype html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title>Untitled Document</title>
          <style>
          .up {
          transform: translate(0px,-500px)
          transition: all 5s ease-in;
          background-color:#C60;
          }
          .down {
          transform: translate(0px,0px)
          transition: all 5s ease-in;
          background-color:#09C;
          }
          </style>
          </head>
          
          
          <body>
          <div id="content" class="up">
          <h1>Text in here</h1>
          </div>
          <script type="text/javascript">
          (function transform()
          {
             document.getElementById('content').className='down';
          })();
          </script>
          </body>
          </html>
          
          
          <body>
          <div id="content" class="up">
          <h1>Text in here</h1>
          </div>
          <script type="text/javascript">
          (function transform()
          {
             document.getElementById('content').className='down';
          })();
          </script>
          </body>
          </html>
          

           

          I have written it as a self executing function, surrounding it with (function goes here!)(); If you don't know that possibility, try googling it (or ask again of course) :-)

           

          If you will use the onLoad() instead, it has to go with the body-tag. I have entered the script last in the code (after the div) to make sure, that is is present in the DOM before JavaScript looks it up.

           

          Hope it helps.