Loading ...
Sorry, an error occurred while loading the content.

still can't get transitions to work (was I have no idea)

Expand Messages
  • Patrick Sullivan
    Blank Animation Test
    Message 1 of 10 , May 24 11:48 AM
    • 0 Attachment
      Blank<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <title>Animation Test</title>
      <script language="JavaScript" type="text/javascript"
      src="Moon/yui/build/yahoo/yahoo.js"></script>
      <script language="JavaScript" type="text/javascript"
      src="Moon/yui/build/event/event.js"></script>
      <script language="JavaScript" type="text/javascript"
      src="Moon/yui/build/dom/dom.js"></script>
      <script language="JavaScript" type="text/javascript"
      src="Moon/yui/build/animation/animation.js"></script>
      <script type="text/javascript">

      YAHOO.namespace('myAnim.anim');

      YAHOO.myAnim.anim.init = function() {
      var attributes = {
      width: { from: 0, to: 120, unit: 'px' },
      height: { from: 0, to: 120, unit: 'px' },
      opacity: { from: 0.0, to: 1.0}
      };
      var myAnim = new YAHOO.util.Anim('test', attributes);
      myAnim.animate();
      };
      </script>

      <style type="text/css">
      #test {
      background:#ccc;
      width:0px;
      height:0px;
      }
      </style>

      </head>
      <body>
      <div id="test">
      TEST
      </div>
      </body>
      </html>
    • Nige White
      ... Come on! You re not *calling* the function that does the animation! _____________________________________________________________________ This message has
      Message 2 of 10 , May 25 3:35 AM
      • 0 Attachment
        Patrick Sullivan wrote:

        >Blank<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
        >"http://www.w3.org/TR/html4/strict.dtd">
        ><html>
        ><head>
        ><title>Animation Test</title>
        ><script language="JavaScript" type="text/javascript"
        >src="Moon/yui/build/yahoo/yahoo.js"></script>
        ><script language="JavaScript" type="text/javascript"
        >src="Moon/yui/build/event/event.js"></script>
        ><script language="JavaScript" type="text/javascript"
        >src="Moon/yui/build/dom/dom.js"></script>
        ><script language="JavaScript" type="text/javascript"
        >src="Moon/yui/build/animation/animation.js"></script>
        ><script type="text/javascript">
        >
        >YAHOO.namespace('myAnim.anim');
        >
        >YAHOO.myAnim.anim.init = function() {
        >var attributes = {
        > width: { from: 0, to: 120, unit: 'px' },
        > height: { from: 0, to: 120, unit: 'px' },
        > opacity: { from: 0.0, to: 1.0}
        >};
        >var myAnim = new YAHOO.util.Anim('test', attributes);
        >myAnim.animate();
        >};
        ></script>
        >
        >

        Come on! You're not *calling* the function that does the animation!

        _____________________________________________________________________
        This message has been checked for all known viruses. Virus scanning
        powered by Messagelabs http://www.messagelabs.com For more information
        e-mail : hostmaster@...
      • Scott Schiller
        I believe test is a reserved word in Javascript - actually a method. Try using a different id, eg. anim-test or something. There are a few others that IE
        Message 3 of 10 , May 25 9:28 AM
        • 0 Attachment
          I believe "test" is a reserved word in Javascript - actually a method. Try using a different id, eg. anim-test or something.
          There are a few others that IE doesn't like, eg "tags". Eric Meyer has a few findings.
          ----- Original Message ----
          From: Patrick Sullivan <psully99@...>
          To: ydn-javascript@yahoogroups.com
          Sent: Wednesday, May 24, 2006 11:48:27 AM
          Subject: [ydn-javascript] still can't get transitions to work (was I have no idea)

          Blank<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
          "http://www.w3.org/TR/html4/strict.dtd";>
          <html>
          <head>
          <title>Animation Test</title>
          <script language="JavaScript" type="text/javascript"
          src="Moon/yui/build/yahoo/yahoo.js"></script>
          <script language="JavaScript" type="text/javascript"
          src="Moon/yui/build/event/event.js"></script>
          <script language="JavaScript" type="text/javascript"
          src="Moon/yui/build/dom/dom.js"></script>
          <script language="JavaScript" type="text/javascript"
          src="Moon/yui/build/animation/animation.js"></script>
          <script type="text/javascript">

          YAHOO.namespace('myAnim.anim');

          YAHOO.myAnim.anim.init = function() {
          var attributes = {
              width: { from: 0, to: 120, unit: 'px' },
              height: { from: 0, to: 120, unit: 'px' },
          opacity: { from: 0.0, to: 1.0}
          };
          var myAnim = new YAHOO.util.Anim('test', attributes);
          myAnim.animate();
          };
          </script>

          <style type="text/css">
          #test {
             background:#ccc;
             width:0px;
             height:0px;
          }
          </style>

          </head>
          <body>
             <div id="test">
             TEST
             </div>
          </body>
          </html>




          ------------------------ Yahoo! Groups Sponsor --------------------~-->
          You can search right from your browser? It's easy and it's free.  See how.
          http://us.click.yahoo.com/_7bhrC/NGxNAA/yQLSAA/edFolB/TM
          --------------------------------------------------------------------~->


          Yahoo! Groups Links

          <*> To visit your group on the web, go to:
              http://groups.yahoo.com/group/ydn-javascript/

          <*> To unsubscribe from this group, send an email to:
              ydn-javascript-unsubscribe@yahoogroups.com

          <*> Your use of Yahoo! Groups is subject to:
              http://docs.yahoo.com/info/terms/

        • Patrick Sullivan
          Ok, I added myanim to the window load event, and changed my dic id to testme . Still, all it does is display a static TEST with a static grey background.
          Message 4 of 10 , May 25 12:05 PM
          • 0 Attachment
            Ok, I added myanim to the window load event, and changed my dic id to "testme". Still, all it does is display a static "TEST" with a static grey background. Thanks for the help so far.
             
            <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
            <html>
            <head>
            <title>Animation Test</title>
            <script language="JavaScript" type="text/javascript" src="Moon/yui/build/yahoo/yahoo.js"></script>
            <script language="JavaScript" type="text/javascript" src="Moon/yui/build/event/event.js"></script>
            <script language="JavaScript" type="text/javascript" src="Moon/yui/build/dom/dom.js"></script>
            <script language="JavaScript" type="text/javascript" src="Moon/yui/build/animation/animation.js"></script>
            <script type="text/javascript">
             
            YAHOO.namespace('myAnim.anim');
             
            YAHOO.myAnim.anim.init = function() {   
            var myAnim = new YAHOO.util.Anim('testme', {  
                width: { from: 0, to: 320, unit: 'px' },  
                height: { from: 0, to: 320, unit: 'px' },
             opacity: { from: 0.0, to: 1.0}  
            },1)  
             
            };
            </script>
             
            <style type="text/css">
            #testme {
               background:#ccc;
               width:0px;
               height:0px;
            }
            </style>
             
            </head>
             
            <script type="text/javascript">
            YAHOO.util.Event.addListener(window, "load", myAnim('testme'));
            myAnim.animate();
            </script>
            <body>
             
            <div id="testme">TEST</div>
            </body>
            </html>

            Patrick Sullivan, AA-BA, BA-IT
            ----- Original Message -----
            Sent: Thursday, May 25, 2006 11:28 AM
            Subject: Re: [ydn-javascript] still can't get transitions to work (was I have no idea)

            I believe "test" is a reserved word in Javascript - actually a method. Try using a different id, eg. anim-test or something.
            There are a few others that IE doesn't like, eg "tags". Eric Meyer has a few findings.
          • Nige White
            ... I d quit this if I were you. The third arg to addListener is a function, NOT the *results* of a function call. You re attempting to call the non-existent
            Message 5 of 10 , May 25 11:54 PM
            • 0 Attachment
              Patrick Sullivan wrote:

              > Ok, I added myanim to the window load event, and changed my dic id to
              > "testme". Still, all it does is display a static "TEST" with a static
              > grey background. Thanks for the help so far.
              >
              > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
              > "http://www.w3.org/TR/html4/strict.dtd">
              > <html>
              > <head>
              > <title>Animation Test</title>
              > <script language="JavaScript" type="text/javascript"
              > src="Moon/yui/build/yahoo/yahoo.js"></script>
              > <script language="JavaScript" type="text/javascript"
              > src="Moon/yui/build/event/event.js"></script>
              > <script language="JavaScript" type="text/javascript"
              > src="Moon/yui/build/dom/dom.js"></script>
              > <script language="JavaScript" type="text/javascript"
              > src="Moon/yui/build/animation/animation.js"></script>
              > <script type="text/javascript">
              >
              > YAHOO.namespace('myAnim.anim');
              >
              > YAHOO.myAnim.anim.init = function() {
              > var myAnim = new YAHOO.util.Anim('testme', {
              > width: { from: 0, to: 320, unit: 'px' },
              > height: { from: 0, to: 320, unit: 'px' },
              > opacity: { from: 0.0, to: 1.0}
              > },1)
              >
              > };
              > </script>
              >
              > <style type="text/css">
              > #testme {
              > background:#ccc;
              > width:0px;
              > height:0px;
              > }
              > </style>
              >
              > </head>
              >
              > <script type="text/javascript">
              > YAHOO.util.Event.addListener(window, "load", myAnim('testme'));
              > myAnim.animate();
              > </script>
              > <body>
              >
              > <div id="testme">TEST</div>
              > </body>
              > </html>

              I'd quit this if I were you. The third arg to addListener is a function,
              NOT the *results* of a function call. You're attempting to call the
              non-existent function "myAnim" immediately, before the page is loaded
              during the setup of addListener Give it the name of a function which exists.

              _____________________________________________________________________
              This message has been checked for all known viruses. Virus scanning
              powered by Messagelabs http://www.messagelabs.com For more information
              e-mail : hostmaster@...
            • Patrick Sullivan
              Nige said, I d quit this if I were you. The third arg to addListener is a function, NOT the *results* of a function call. You re attempting to call the
              Message 6 of 10 , May 26 5:35 AM
              • 0 Attachment
                Nige said,
                "I'd quit this if I were you. The third arg to addListener is a function,
                NOT the *results* of a function call. You're attempting to call the
                non-existent function "myAnim" immediately, before the page is loaded
                during the setup of addListener Give it the name of a function which
                exists."


                I know it is easy for you. However, "documentation does not seem to be
                highly regarded with most of these libraries." - Sergio Pereira, 2006
                http://www.sergiopereira.com/articles/advjs.html


                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                <title>Animate: try 4</title>
                </head>

                <style type="text/css">
                #sample{
                opacity; 0;
                width: 0;
                height: 0;
                background-color:#999999;
                }
                </style>

                <script language="javascript">

                animtest.init = function() {
                var animtest = new YAHOO.util.Anim("sample",
                {opacity: {from: 0, to: 1}, width: {to: 400}, height: {to: 400}}, 1);

                var animate = function(e) {
                animtest.animate();
                return false;};
                YAHOO.util.Event.addListener(document, "load", animate);
                };

                YAHOO.util.Event.addListener(window, 'load', animtest.init);
                </script>
                <body>

                <div id="sample">
                TESTme
                </div>
                </body>
                </html>
              • Eric Miraglia
                Patrick, A few things here: 1. animtest.init can t be defined until animtest exists; let s create an empty object, animtest, then add animtest.init to that
                Message 7 of 10 , May 26 8:13 AM
                • 0 Attachment
                  Patrick,

                  A few things here:

                  1.  animtest.init can't be defined until animtest exists; let's create an empty object, animtest, then add animtest.init to that

                  var animtest = {};
                  animtest.init = function() {

                  2.  You're reusing the variable name animtest to refer to your instance of YAHOO.util.Anim.  That could work under some circumstances, but there's no reason to add confusion, so let's rename that one to myAnim:

                  var myanim = new YAHOO.util.Anim("sample"...

                  3.  It looks to me as though you have an event handler to fire animtest.init on page load, but then in the init function you are tying the animate method page load as well; because that second event attachment is being attached after pageload, it will never get triggered.  So let's attach the animate to a click event instead of page load:

                  YAHOO.util.Event.addListener(document, "click", animate);

                  With that, your example works well for me, testing in FF and Safari on my Mac.  Here's the main code block, with just the minor tweaks from above:

                  <style type="text/css">
                  #sample{
                  opacity; 0;
                  width: 0;
                  height: 0;
                  background-color:#999999;
                  }
                  </style>

                  <script language="javascript">
                  var animtest = {};
                  animtest.init = function() {
                  var myanim = new YAHOO.util.Anim("sample",
                  {opacity: {from: 0, to: 1}, width: {to: 400}, height: {to: 400}}, 1);

                  var animate = function(e) {
                  myanim.animate();
                  return false;};
                  YAHOO.util.Event.addListener(document, "click", animate);
                  };

                  YAHOO.util.Event.addListener(window, 'load', animtest.init);
                  </script>
                  <body>

                  <div id="sample">
                  TESTme
                  </div>
                  </body>
                  </html>

                  Regards,
                  Eric









                  On May 26, 2006, at 5:35 AM, Patrick Sullivan wrote:

                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

                  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                  <html xmlns="http://www.w3.org/1999/xhtml">

                  <head>

                  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

                  <title>Animate: try 4</title>

                  </head>


                  <style type="text/css">

                  #sample{

                  opacity; 0;

                  width: 0;

                  height: 0;

                  background-color:#999999;

                  }

                  </style>


                  <script language="javascript">


                  animtest.init = function() {

                  var animtest = new YAHOO.util.Anim("sample",

                  {opacity: {from: 0, to: 1}, width: {to: 400}, height: {to: 400}}, 1);


                   var animate = function(e) {

                   animtest.animate();

                   return false;};

                   YAHOO.util.Event.addListener(document, "load", animate);

                  };


                  YAHOO.util.Event.addListener(window, 'load', animtest.init);

                  </script>

                  <body>


                  <div id="sample">

                  TESTme

                  </div>

                  </body>

                  </html>


                • Patrick Sullivan
                  Thanks Eric. Some of that made sense. But 1. It still does not work with IE6. 2. I want it to start changing without having to click anything. All the samples
                  Message 8 of 10 , May 29 1:38 PM
                  • 0 Attachment
                    Thanks Eric. Some of that made sense. But
                    1. It still does not work with IE6.
                    2. I want it to start changing without having to click anything. All the
                    samples I have seen use clicks, and they work. I was just trying to get one
                    to work without clicking

                    I copied the code you sent to a new page after just trying the modifications
                    in the old page(modifying did not help). I changed the doctype from "XHTML"
                    to "HTML 4 strict" to avoid the IE6 quirks mode, but I am not sure if XHTML
                    mode had anything to do with IE6 quirks. Do I have the closing head tag in
                    the right place? I moved it too, but it doesn't make any difference.

                    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                    "http://www.w3.org/TR/html4/strict.dtd">
                    <head>
                    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
                    <title>Untitled Document</title>

                    <style type="text/css">

                    #sample{
                    opacity: 0;
                    width: 0;
                    height: 0;
                    background-color:#999999;
                    }
                    </style>

                    <script language="JavaScript" type="text/javascript">

                    var animtest = {};
                    animtest.init = function() {
                    var myanim = new YAHOO.util.Anim("sample",
                    {opacity: {from: 0, to: 1}, width: {to: 400}, height: {to: 400}}, 1};

                    var animate = function(e) {
                    myanim.animate();
                    return false;};
                    YAHOO.util.Event.addListener(document, "click", animate);
                    };

                    YAHOO.util.Event.addListener(window, 'load', animtest.init);
                    </script>
                    </head>
                    <body>
                    <div id="sample">
                    TESTme
                    </div>
                    </body>
                    </html>
                  • Eric Miraglia
                    Patrick, Nothing big here -- your myanim instantiation has a typo; the last curly brace should be a closing paren. And making it animate on pageload is as
                    Message 9 of 10 , May 30 8:16 AM
                    • 0 Attachment
                      Patrick,

                      Nothing big here -- your myanim instantiation has a typo; the last curly brace should be a closing paren.

                      And making it animate on pageload is as simple as taking the myanim.animate() line out of the animate function that is currently deferred until click.  If it runs in the init function, it will run on pageload automatically.

                      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      <head>
                      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
                      <title>Untitled Document</title>
                      <?php include("labs/shared/yuil.php");?>
                      <style type="text/css">

                      #sample{
                      opacity: 0;
                      width: 0;
                      height: 0;
                      background-color:#999999;
                      }
                      </style>

                      <script language="JavaScript" type="text/javascript">

                      var animtest = {};
                      animtest.init = function() {
                      var myanim = new YAHOO.util.Anim("sample", {opacity: {from: 0, to: 1}, width: {to: 400}, height: {to: 400}}, 1);
                      myanim.animate();
                      };

                      YAHOO.util.Event.addListener(window, 'load', animtest.init);
                      </script>
                      </head>
                      <body>
                      <div id="sample">
                      TESTme
                      </div>
                      </body>
                      </html>

                      Hope this helps.  Good luck with your project!

                      Regards,
                      Eric


                      On May 29, 2006, at 1:38 PM, Patrick Sullivan wrote:

                      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

                      "http://www.w3.org/TR/html4/strict.dtd">

                      <head>

                      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

                      <title>Untitled Document</title>


                      <style type="text/css">


                      #sample{

                      opacity: 0;

                      width: 0;

                      height: 0;

                      background-color:#999999;

                      }

                      </style>


                      <script language="JavaScript" type="text/javascript">


                      var animtest = {};

                      animtest.init = function() {

                      var myanim = new YAHOO.util.Anim("sample",

                      {opacity: {from: 0, to: 1}, width: {to: 400}, height: {to: 400}}, 1};


                      var animate = function(e) {

                      myanim.animate();

                      return false;};

                      YAHOO.util.Event.addListener(document, "click", animate);

                      };


                      YAHOO.util.Event.addListener(window, 'load', animtest.init);

                      </script>

                      </head>

                      <body>

                      <div id="sample">

                      TESTme

                      </div>

                      </body>

                      </html>


                    • Patrick Sullivan
                      THANKS Eric! Finally it basically just works, with.no errors. And thanks to everyone else who made suggestions, too. Now I am back to my original problem. How
                      Message 10 of 10 , May 30 11:38 AM
                      • 0 Attachment
                        THANKS Eric! Finally it basically just works, with.no errors. And thanks to everyone else who made suggestions, too.

                        Now I am back to my original problem. How can I make the text inside the div expand? I was hoping the YUI Library could help. All the js samples I have seen involve changing <font> tags on the fly. Is that the only way?

                        I have thought of turning the text into images that are easy to maniplulate, but that would involve an extra step if I ever wanna change it again. Or maybe, something like

                        for (i=0:1<100;i++) {
                        idt=getelementbyid(el)
                        idt.text-size += 0.1; //where el is in ems
                        }

                        Patrick Sullivan, AA-BA, BA-IT

                        ----- Original Message -----
                        From: "Eric Miraglia" <miraglia@...>
                        To: <ydn-javascript@yahoogroups.com>
                        Sent: Tuesday, May 30, 2006 10:16 AM
                        Subject: Re: [ydn-javascript] still can't get transitions to work (was I have no idea)


                        > Patrick,
                        >
                        > Nothing big here -- your myanim instantiation has a typo; the last
                        > curly brace should be a closing paren.
                        >
                        > And making it animate on pageload is as simple as taking the
                        > myanim.animate() line out of the animate function that is currently
                        > deferred until click. If it runs in the init function, it will run
                        > on pageload automatically.
                        >
                        > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                        > "http://www.w3.org/TR/html4/strict.dtd">
                        > <head>
                        > <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
                        > <title>Untitled Document</title>
                        > <?php include("labs/shared/yuil.php");?>
                        > <style type="text/css">
                        >
                        > #sample{
                        > opacity: 0;
                        > width: 0;
                        > height: 0;
                        > background-color:#999999;
                        > }
                        > </style>
                        >
                        > <script language="JavaScript" type="text/javascript">
                        >
                        > var animtest = {};
                        > animtest.init = function() {
                        > var myanim = new YAHOO.util.Anim("sample", {opacity: {from: 0, to:
                        > 1}, width: {to: 400}, height: {to: 400}}, 1);
                        > myanim.animate();
                        > };
                        >
                        > YAHOO.util.Event.addListener(window, 'load', animtest.init);
                        > </script>
                        > </head>
                        > <body>
                        > <div id="sample">
                        > TESTme
                        > </div>
                        > </body>
                        > </html>
                        >
                        > Hope this helps. Good luck with your project!
                        >
                        > Regards,
                        > Eric
                        >
                        >
                        > On May 29, 2006, at 1:38 PM, Patrick Sullivan wrote:
                        >
                        > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                        > > "http://www.w3.org/TR/html4/strict.dtd">
                        > > <head>
                        > > <meta http-equiv="Content-Type" content="text/html;
                        > > charset=iso-8859-1">
                        > > <title>Untitled Document</title>
                        > >
                        > > <style type="text/css">
                        > >
                        > > #sample{
                        > > opacity: 0;
                        > > width: 0;
                        > > height: 0;
                        > > background-color:#999999;
                        > > }
                        > > </style>
                        > >
                        > > <script language="JavaScript" type="text/javascript">
                        > >
                        > > var animtest = {};
                        > > animtest.init = function() {
                        > > var myanim = new YAHOO.util.Anim("sample",
                        > > {opacity: {from: 0, to: 1}, width: {to: 400}, height: {to: 400}}, 1};
                        > >
                        > > var animate = function(e) {
                        > > myanim.animate();
                        > > return false;};
                        > > YAHOO.util.Event.addListener(document, "click", animate);
                        > > };
                        > >
                        > > YAHOO.util.Event.addListener(window, 'load', animtest.init);
                        > > </script>
                        > > </head>
                        > > <body>
                        > > <div id="sample">
                        > > TESTme
                        > > </div>
                        > > </body>
                        > > </html>
                        >
                        >


                        --------------------------------------------------------------------------------


                        No virus found in this incoming message.
                        Checked by AVG Free Edition.
                        Version: 7.1.392 / Virus Database: 268.7.4/351 - Release Date: 5/29/2006
                      Your message has been successfully submitted and would be delivered to recipients shortly.