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

can I reference the text inside a div?

Expand Messages
  • Patrick Sullivan
    Can I make the Amin function reference the SOMETEXT inside div sample ? var myanim = new YAHOO.util.Anim( sample , {opacity: {from: 0, to: 1}, width: {to:
    Message 1 of 3 , May 30 12:29 PM
    • 0 Attachment
      Can I make the Amin function reference the "SOMETEXT" inside div "sample"?

      var myanim = new YAHOO.util.Anim('sample', {opacity: {from: 0, to: 1}, width:
      {to: 300}, height: {to: 250}}, 2);

      <div id="sample">SOMETEXT</div>

      Patrick Sullivan, AA-BA, BA-IT
    • Matt Warden
      Patrick, ... AFAIK, you cannot set such style elements to text nodes themselves. Try this (generalized in case your example was oversimplified):
      Message 2 of 3 , May 30 12:52 PM
      • 0 Attachment
        Patrick,

        On 5/30/06, Patrick Sullivan <psully99@...> wrote:
        > Can I make the Amin function reference the "SOMETEXT" inside div "sample"?
        >
        > var myanim = new YAHOO.util.Anim('sample', {opacity: {from: 0, to: 1}, width:
        > {to: 300}, height: {to: 250}}, 2);
        >
        > <div id="sample">SOMETEXT</div>

        AFAIK, you cannot set such style elements to text nodes themselves.
        Try this (generalized in case your example was oversimplified):

        <div id="sample"><span>SOMETEXT</span></div>

        var attrs = {opacity: {from: 0, to: 1}, width: {to: 300}, height: {to: 250}};
        var spans = YAHOO.util.Dom.getElementsBy(
        function(el){return el.firstChild.nodeValue=='SOMETEXT';},
        'span', 'sample');
        for (var i=0; i<spans.length; i++) {
        anims[anims.length] = new YAHOO.util.Anim(spans[i], attrs, 2);
        }

        If you are just rying to get the text to animate while keeping the
        container constant, you could just do this:


        <div id="sample"><span id="sampletext">SOMETEXT</span></div>

        var myanim = new YAHOO.util.Anim('sampletext', {opacity: {from: 0, to:
        1}, width: {to: 300}, height: {to: 250}}, 2);

        hth,

        --
        Matt Warden
        Oxford, OH, USA
        http://mattwarden.com


        This email proudly and graciously contributes to entropy.
      • Patrick Sullivan
        wow, that easy? I tried a span but still got a div-like result, but did not do it like you. I will show ya ll the site if I ever get it right. Trying to do
        Message 3 of 3 , May 30 1:40 PM
        • 0 Attachment
          wow, that easy? I tried a span but still got a div-like result, but did not do it like you. I will show ya'll the site if I ever get it right. Trying to do fireworks macromedia stuff with js sux.
          But so does macromedia fireworks.

          What I want is just the text to grow and get more opacity. I have an iframe with a bg color black, and want to display a scrolling array of white phrases that start invisible and grow in size and opacity one after the other. As I've mentioned before, I can do either one separately (grow via fontsize or get more opaque) but not both. I want a movie or TV effect. Thank you, Matt.

          OK, what you sent does the opacity, but no re-sizing. Here is what I have now:

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
          <html>
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
          <title>Untitled Document</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/dom/dom.js"></script>
          <script language="JavaScript" type="text/javascript" src="Moon/yui/build/animation/animation.js"></script>
          <script language="JavaScript" type="text/javascript" src="Moon/yui/build/event/event.js"></script>

          <script type="text/javascript">

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

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

          </script>
          </head>

          <div id="sample"><span id="sampletext">SOMETEXT</span></div>

          <body>
          </body>
          </html>

          Patrick Sullivan, AA-BA, BA-IT

          ----- Original Message -----
          From: "Matt Warden" <mwarden@...>
          To: <ydn-javascript@yahoogroups.com>
          Sent: Tuesday, May 30, 2006 2:52 PM
          Subject: Re: [ydn-javascript] can I reference the text inside a div?


          > Patrick,
          >
          > On 5/30/06, Patrick Sullivan <psully99@...> wrote:
          > > Can I make the Amin function reference the "SOMETEXT" inside div "sample"?
          > >
          > > var myanim = new YAHOO.util.Anim('sample', {opacity: {from: 0, to: 1}, width:
          > > {to: 300}, height: {to: 250}}, 2);
          > >
          > > <div id="sample">SOMETEXT</div>
          >
          > AFAIK, you cannot set such style elements to text nodes themselves.
          > Try this (generalized in case your example was oversimplified):
          >
          > <div id="sample"><span>SOMETEXT</span></div>
          >
          > var attrs = {opacity: {from: 0, to: 1}, width: {to: 300}, height: {to: 250}};
          > var spans = YAHOO.util.Dom.getElementsBy(
          > function(el){return el.firstChild.nodeValue=='SOMETEXT';},
          > 'span', 'sample');
          > for (var i=0; i<spans.length; i++) {
          > anims[anims.length] = new YAHOO.util.Anim(spans[i], attrs, 2);
          > }
          >
          > If you are just rying to get the text to animate while keeping the
          > container constant, you could just do this:
          >
          >
          > <div id="sample"><span id="sampletext">SOMETEXT</span></div>
          >
          > var myanim = new YAHOO.util.Anim('sampletext', {opacity: {from: 0, to:
          > 1}, width: {to: 300}, height: {to: 250}}, 2);
          >
          > hth,
          >
          > --
          > Matt Warden
          > Oxford, OH, USA
          > http://mattwarden.com
          >
          >
        Your message has been successfully submitted and would be delivered to recipients shortly.