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

Events and Inputs

Expand Messages
  • gradescript
    hello all i was trying to work out a way how i can loop through all the INPUTS and TEXTAREAS and add borders to them well i am actually focusing on them, ive
    Message 1 of 9 , Aug 30, 2007
    • 0 Attachment
      hello all i was trying to work out a way how i can loop through all the INPUTS and TEXTAREAS and add borders to them well i am actually focusing on them, ive tried a few ways but it just seems like nothing is happening at all.

      function addFocus(element) {
          Event.on(element,'focus',
              function(event) {
                  Dom.Get(element).style.backgroundColor = '#FFFADA';
                  Dom.Get(element).style.border = "1px solid blue";
              }
          )
      };

      function addBlur(element) {
          Event.on(element,'blur',
              function(event) {
                  Dom.Get(element).style.backgroundColor = '#FFFFFF';
                  Dom.Get(element).style.border = "1px solid black";
              }
          )
      };

      function checkInputs() {
          elements = document.getElementsByTagName('input');
          for (var x = 0; x <= (elements.length - 1); x++)
          {
              addFocus(elements[x]);
              addBlur(elements[x]);   
          }
      };

      Event.on(window,'load',checkInputs());

      If anyone is able to help me with this i would be very obliged. I know how to do it with prototype which is very simple but im pretty sure YUI doesnt have the array support that prototype has, in prototype i used to use.

      Event.observe(window,'load',
          function() {
              $$('input').each(
                  function(element) {   
                      element.observe('focus',
                          function(event) {
                              $(element).style.backgroundColor = '#FFFADA';
                              $(element).style.border = "1px solid blue";
                          }
                      );
                  }
              )
          }
      );

      Event.observe(window,'load',
          function() {
              $$('input').each(
                  function(element) {   
                      element.observe('blur',
                          function(event){
                              $(element).style.backgroundColor = '#FFFFFF';
                              $(element).style.border = "1px solid black";
                          }
                      );
                  }
              )
          }
      );

    • Nick Fitzsimons
      ... should be Event.on(window, load ,checkInputs); // No () after checkInputs You want to pass a reference to the function; at present you are executing it,
      Message 2 of 9 , Aug 30, 2007
      • 0 Attachment
        --- In ydn-javascript@yahoogroups.com, "gradescript" <joshcow@...> wrote:

        > Event.on(window,'load',checkInputs());

        should be

        Event.on(window,'load',checkInputs); // No () after "checkInputs"

        You want to pass a reference to the function; at present you are
        executing it, with the result that you are trying to assign undefined
        as an event handler.


        HTH,

        Nick.
        --
        Nick Fitzsimons
        http://www.nickfitz.co.uk/
      • Josh Benham
        Nick that still doesnt do anything. The code i have doesnt error or do NOTHING. So i am not sure what i need to do, to get it working with YUI. Has anyone else
        Message 3 of 9 , Aug 30, 2007
        • 0 Attachment
          Nick that still doesnt do anything. The code i have doesnt error or do
          NOTHING. So i am not sure what i need to do, to get it working with YUI.

          Has anyone else attempted doing this ?

          --- In ydn-javascript@yahoogroups.com, "Nick Fitzsimons" <nick@...> wrote:
          >
          > --- In ydn-javascript@yahoogroups.com, "gradescript" <joshcow@> wrote:
          >
          > > Event.on(window,'load',checkInputs());
          >
          > should be
          >
          > Event.on(window,'load',checkInputs); // No () after "checkInputs"
          >
          > You want to pass a reference to the function; at present you are
          > executing it, with the result that you are trying to assign undefined
          > as an event handler.
          >
          >
          > HTH,
          >
          > Nick.
          > --
          > Nick Fitzsimons
          > http://www.nickfitz.co.uk/
          >
        • David Seruyange
          Hey everyone. I m wondering what the equivalent is for the onkeypress event in YUI. I ve looked around a bit and not found anything. I originally started
          Message 4 of 9 , Aug 30, 2007
          • 0 Attachment
            Hey everyone. 

            I'm wondering what the equivalent is for the "onkeypress" event in YUI. I've looked around a bit and not found anything. I originally started with this:
            YAHOO.util.Event.addListener("regexTextBox", "onkeypress", manualEnterHandler);   

            Thanks and check out my tool, http://www.nregex.com, which I built using YUI and .NET.

            David


            Park yourself in front of a world of choices in alternative vehicles.
            Visit the Yahoo! Auto Green Center.
          • dav.glass@yahoo.com
            David -- Try this: YAHOO.util.Event.on( regexTextBox , keypress , manualEnterHandler); You don t need to use the on part of the event name.. Dav Dav Glass
            Message 5 of 9 , Aug 30, 2007
            • 0 Attachment
              David --

              Try this:
              YAHOO.util.Event.on("regexTextBox", "keypress", manualEnterHandler);

              You don't need to use the "on" part of the event name..

              Dav

              Dav Glass
              dav.glass@...
              blog.davglass.com
               
               
              + Windows: n. - The most successful computer virus, ever. +
              + A computer without a Microsoft operating system is like a dog
              without bricks tied to its head +
              + A Microsoft Certified Systems Engineer is to computing what a
              McDonalds Certified Food Specialist is to fine cuisine +


              ----- Original Message ----
              From: David Seruyange <idmkid@...>
              To: ydn-javascript@yahoogroups.com
              Sent: Thursday, August 30, 2007 7:28:01 PM
              Subject: Re: [ydn-javascript] Re: Events and Inputs

              Hey everyone. 

              I'm wondering what the equivalent is for the "onkeypress" event in YUI. I've looked around a bit and not found anything. I originally started with this:
              YAHOO.util.Event. addListener( "regexTextBox" , "onkeypress" , manualEnterHandler) ;   

              Thanks and check out my tool, http://www.nregex. com, which I built using YUI and .NET.

              David


              Park yourself in front of a world of choices in alternative vehicles.
              Visit the Yahoo! Auto Green Center.

            • Josh Benham
              Dav Glass, any idea behind mine. Its been picking my brain for way to long, and i just cant work it out : ... YUI. I ve looked around a bit and not found
              Message 6 of 9 , Aug 30, 2007
              • 0 Attachment
                Dav Glass, any idea behind mine. Its been picking my brain for way to
                long, and i just cant work it out :\

                --- In ydn-javascript@yahoogroups.com, dav.glass@... wrote:
                >
                > David --
                >
                > Try this:
                > YAHOO.util.Event.on("regexTextBox", "keypress", manualEnterHandler);
                >
                > You don't need to use the "on" part of the event name..
                >
                > Dav
                >
                >
                > Dav Glass
                > dav.glass@...
                > blog.davglass.com
                >
                > + Windows: n. - The most successful computer virus, ever. +
                > + A computer without a Microsoft operating system is like a dog
                > without bricks tied to its head +
                > + A Microsoft Certified Systems Engineer is to computing what a
                > McDonalds Certified Food Specialist is to fine cuisine +
                >
                > ----- Original Message ----
                > From: David Seruyange <idmkid@...>
                > To: ydn-javascript@yahoogroups.com
                > Sent: Thursday, August 30, 2007 7:28:01 PM
                > Subject: Re: [ydn-javascript] Re: Events and Inputs
                >
                >
                >
                >
                >
                >
                >
                >
                >
                >
                >
                >
                >
                >
                > Hey everyone.
                >
                > I'm wondering what the equivalent is for the "onkeypress" event in
                YUI. I've looked around a bit and not found anything. I originally
                started with this:
                > YAHOO.util.Event. addListener( "regexTextBox" , "onkeypress" ,
                manualEnterHandler) ;
                >
                > Thanks and check out my tool, http://www.nregex com, which I built
                using YUI and .NET.
                >
                > David
                >
                >
                >
                >
                >
                >
                > Park yourself in front of a world of choices in alternative
                vehicles.
                > Visit the Yahoo! Auto Green Center.
                >
                >
                >
                >
                >
                >
                >
                >
                >
                > <!--
                >
                > #ygrp-mkp{
                > border:1px solid #d8d8d8;font-family:Arial;margin:14px
                0px;padding:0px 14px;}
                > #ygrp-mkp hr{
                > border:1px solid #d8d8d8;}
                > #ygrp-mkp #hd{
                >
                color:#628c2a;font-size:85%;font-weight:bold;line-height:122%;margin:10px
                0px;}
                > #ygrp-mkp #ads{
                > margin-bottom:10px;}
                > #ygrp-mkp .ad{
                > padding:0 0;}
                > #ygrp-mkp .ad a{
                > color:#0000ff;text-decoration:none;}
                > -->
                >
                >
                >
                > <!--
                >
                > #ygrp-sponsor #ygrp-lc{
                > font-family:Arial;}
                > #ygrp-sponsor #ygrp-lc #hd{
                > margin:10px 0px;font-weight:bold;font-size:78%;line-height:122%;}
                > #ygrp-sponsor #ygrp-lc .ad{
                > margin-bottom:10px;padding:0 0;}
                > -->
                >
                >
                >
                > <!--
                >
                > #ygrp-mlmsg {font-size:13px;font-family:arial, helvetica, clean,
                sans-serif;}
                > #ygrp-mlmsg table {font-size:inherit;font:100%;}
                > #ygrp-mlmsg select, input, textarea {font:99% arial, helvetica,
                clean, sans-serif;}
                > #ygrp-mlmsg pre, code {font:115% monospace;}
                > #ygrp-mlmsg * {line-height:1.22em;}
                > #ygrp-text{
                > font-family:Georgia;
                > }
                > #ygrp-text p{
                > margin:0 0 1em 0;}
                > #ygrp-tpmsgs{
                > font-family:Arial;
                > clear:both;}
                > #ygrp-vitnav{
                > padding-top:10px;font-family:Verdana;font-size:77%;margin:0;}
                > #ygrp-vitnav a{
                > padding:0 1px;}
                > #ygrp-actbar{
                > clear:both;margin:25px
                0;white-space:nowrap;color:#666;text-align:right;}
                > #ygrp-actbar .left{
                > float:left;white-space:nowrap;}
                > .bld{font-weight:bold;}
                > #ygrp-grft{
                > font-family:Verdana;font-size:77%;padding:15px 0;}
                > #ygrp-ft{
                > font-family:verdana;font-size:77%;border-top:1px solid #666;
                > padding:5px 0;
                > }
                > #ygrp-mlmsg #logo{
                > padding-bottom:10px;}
                >
                > #ygrp-vital{
                > background-color:#e0ecee;margin-bottom:20px;padding:2px 0 8px 8px;}
                > #ygrp-vital #vithd{
                >
                font-size:77%;font-family:Verdana;font-weight:bold;color:#333;text-transform:uppercase;}
                > #ygrp-vital ul{
                > padding:0;margin:2px 0;}
                > #ygrp-vital ul li{
                > list-style-type:none;clear:both;border:1px solid #e0ecee;
                > }
                > #ygrp-vital ul li .ct{
                >
                font-weight:bold;color:#ff7900;float:right;width:2em;text-align:right;padding-right:.5em;}
                > #ygrp-vital ul li .cat{
                > font-weight:bold;}
                > #ygrp-vital a{
                > text-decoration:none;}
                >
                > #ygrp-vital a:hover{
                > text-decoration:underline;}
                >
                > #ygrp-sponsor #hd{
                > color:#999;font-size:77%;}
                > #ygrp-sponsor #ov{
                > padding:6px 13px;background-color:#e0ecee;margin-bottom:20px;}
                > #ygrp-sponsor #ov ul{
                > padding:0 0 0 8px;margin:0;}
                > #ygrp-sponsor #ov li{
                > list-style-type:square;padding:6px 0;font-size:77%;}
                > #ygrp-sponsor #ov li a{
                > text-decoration:none;font-size:130%;}
                > #ygrp-sponsor #nc{
                > background-color:#eee;margin-bottom:20px;padding:0 8px;}
                > #ygrp-sponsor .ad{
                > padding:8px 0;}
                > #ygrp-sponsor .ad #hd1{
                >
                font-family:Arial;font-weight:bold;color:#628c2a;font-size:100%;line-height:122%;}
                > #ygrp-sponsor .ad a{
                > text-decoration:none;}
                > #ygrp-sponsor .ad a:hover{
                > text-decoration:underline;}
                > #ygrp-sponsor .ad p{
                > margin:0;}
                > o{font-size:0;}
                > .MsoNormal{
                > margin:0 0 0 0;}
                > #ygrp-text tt{
                > font-size:120%;}
                > blockquote{margin:0 0 0 4px;}
                > .replbq{margin:4;}
                > -->
                >
              • dav.glass@yahoo.com
                Josh -- Try using Dom.get instead of Dom.Get :) Dav Dav Glass dav.glass@yahoo.com blog.davglass.com + Windows: n. - The most successful computer virus, ever. +
                Message 7 of 9 , Aug 30, 2007
                • 0 Attachment
                  Josh --

                  Try using Dom.get instead of Dom.Get :)

                  Dav
                   
                  Dav Glass
                  dav.glass@...
                  blog.davglass.com
                   
                   
                  + Windows: n. - The most successful computer virus, ever. +
                  + A computer without a Microsoft operating system is like a dog
                  without bricks tied to its head +
                  + A Microsoft Certified Systems Engineer is to computing what a
                  McDonalds Certified Food Specialist is to fine cuisine +


                  ----- Original Message ----
                  From: gradescript <joshcow@...>
                  To: ydn-javascript@yahoogroups.com
                  Sent: Thursday, August 30, 2007 2:40:04 AM
                  Subject: [ydn-javascript] Events and Inputs

                  hello all i was trying to work out a way how i can loop through all the INPUTS and TEXTAREAS and add borders to them well i am actually focusing on them, ive tried a few ways but it just seems like nothing is happening at all.

                  function addFocus(element) {
                      Event.on(element, 'focus',
                          function(event) {
                              Dom.Get(element) .style.backgroun dColor = '#FFFADA';
                              Dom.Get(element) .style.border = "1px solid blue";
                          }
                      )
                  };

                  function addBlur(element) {
                      Event.on(element, 'blur',
                          function(event) {
                              Dom.Get(element) .style.backgroun dColor = '#FFFFFF';
                              Dom.Get(element) .style.border = "1px solid black";
                          }
                      )
                  };

                  function checkInputs( ) {
                      elements = document.getElement sByTagName( 'input');
                      for (var x = 0; x <= (elements.length - 1); x++)
                      {
                          addFocus(elements[ x]);
                          addBlur(elements[ x]);   
                      }
                  };

                  Event.on(window, 'load',checkInpu ts());

                  If anyone is able to help me with this i would be very obliged. I know how to do it with prototype which is very simple but im pretty sure YUI doesnt have the array support that prototype has, in prototype i used to use.

                  Event.observe( window,'load' ,
                      function() {
                          $$('input'). each(
                              function(element) {   
                                  element.observe( 'focus',
                                      function(event) {
                                          $(element).style. backgroundColor = '#FFFADA';
                                          $(element).style. border = "1px solid blue";
                                      }
                                  );
                              }
                          )
                      }
                  );

                  Event.observe( window,'load' ,
                      function() {
                          $$('input'). each(
                              function(element) {   
                                  element.observe( 'blur',
                                      function(event) {
                                          $(element).style. backgroundColor = '#FFFFFF';
                                          $(element).style. border = "1px solid black";
                                      }
                                  );
                              }
                          )
                      }
                  );


                • Josh Benham
                  Wow thanks so much for that its working now, is there any cleaner way to do it. Or would that be the best way. Its wierd how Dom.Get wasnt erroring. ...
                  Message 8 of 9 , Aug 30, 2007
                  • 0 Attachment
                    Wow thanks so much for that its working now, is there any cleaner way
                    to do it. Or would that be the best way.

                    Its wierd how Dom.Get wasnt erroring.

                    --- In ydn-javascript@yahoogroups.com, dav.glass@... wrote:
                    >
                    > Josh --
                    >
                    > Try using Dom.get instead of Dom.Get :)
                    >
                    > Dav
                    >
                    > Dav Glass
                    > dav.glass@...
                    > blog.davglass.com
                    >
                    > + Windows: n. - The most successful computer virus, ever. +
                    > + A computer without a Microsoft operating system is like a dog
                    > without bricks tied to its head +
                    > + A Microsoft Certified Systems Engineer is to computing what a
                    > McDonalds Certified Food Specialist is to fine cuisine +
                    >
                    > ----- Original Message ----
                    > From: gradescript <joshcow@...>
                    > To: ydn-javascript@yahoogroups.com
                    > Sent: Thursday, August 30, 2007 2:40:04 AM
                    > Subject: [ydn-javascript] Events and Inputs
                    >
                    >
                    >
                    >
                    >
                    >
                    >
                    >
                    >
                    >
                    >
                    >
                    >
                    > hello all i was trying to work out a way how i can loop
                    through all the INPUTS and TEXTAREAS and add borders to them well i am
                    actually focusing on them, ive tried a few ways but it just seems like
                    nothing is happening at all.
                    >
                    >
                    > function addFocus(element) {
                    > Event.on(element, 'focus',
                    > function(event) {
                    > Dom.Get(element) .style.backgroun dColor = '#FFFADA';
                    > Dom.Get(element) .style.border = "1px solid blue";
                    > }
                    > )
                    > };
                    >
                    > function addBlur(element) {
                    > Event.on(element, 'blur',
                    > function(event) {
                    > Dom.Get(element) .style.backgroun dColor = '#FFFFFF';
                    > Dom.Get(element) .style.border = "1px solid black";
                    > }
                    > )
                    > };
                    >
                    > function checkInputs( ) {
                    > elements = document.getElement sByTagName( 'input');
                    > for (var x = 0; x <= (elements.length - 1); x++)
                    > {
                    > addFocus(elements[ x]);
                    > addBlur(elements[ x]);
                    > }
                    > };
                    >
                    > Event.on(window, 'load',checkInpu ts());
                    >
                    > If anyone is able to help me with this i would be very obliged. I
                    know how to do it with prototype which is very simple but im pretty
                    sure YUI doesnt have the array support that prototype has, in
                    prototype i used to use.
                    >
                    > Event.observe( window,'load' ,
                    > function() {
                    > $$('input'). each(
                    > function(element) {
                    > element.observe( 'focus',
                    > function(event) {
                    > $(element).style. backgroundColor = '#FFFADA';
                    > $(element).style. border = "1px solid blue";
                    > }
                    > );
                    > }
                    > )
                    > }
                    > );
                    >
                    > Event.observe( window,'load' ,
                    > function() {
                    > $$('input'). each(
                    > function(element) {
                    > element.observe( 'blur',
                    > function(event) {
                    > $(element).style. backgroundColor = '#FFFFFF';
                    > $(element).style. border = "1px solid black";
                    > }
                    > );
                    > }
                    > )
                    > }
                    > );
                    >
                    >
                    >
                    >
                    >
                    >
                    >
                    >
                    >
                    >
                    >
                    >
                    > <!--
                    >
                    > #ygrp-mkp{
                    > border:1px solid #d8d8d8;font-family:Arial;margin:14px
                    0px;padding:0px 14px;}
                    > #ygrp-mkp hr{
                    > border:1px solid #d8d8d8;}
                    > #ygrp-mkp #hd{
                    >
                    color:#628c2a;font-size:85%;font-weight:bold;line-height:122%;margin:10px
                    0px;}
                    > #ygrp-mkp #ads{
                    > margin-bottom:10px;}
                    > #ygrp-mkp .ad{
                    > padding:0 0;}
                    > #ygrp-mkp .ad a{
                    > color:#0000ff;text-decoration:none;}
                    > -->
                    >
                    >
                    >
                    > <!--
                    >
                    > #ygrp-sponsor #ygrp-lc{
                    > font-family:Arial;}
                    > #ygrp-sponsor #ygrp-lc #hd{
                    > margin:10px 0px;font-weight:bold;font-size:78%;line-height:122%;}
                    > #ygrp-sponsor #ygrp-lc .ad{
                    > margin-bottom:10px;padding:0 0;}
                    > -->
                    >
                    >
                    >
                    > <!--
                    >
                    > #ygrp-mlmsg {font-size:13px;font-family:arial, helvetica, clean,
                    sans-serif;}
                    > #ygrp-mlmsg table {font-size:inherit;font:100%;}
                    > #ygrp-mlmsg select, input, textarea {font:99% arial, helvetica,
                    clean, sans-serif;}
                    > #ygrp-mlmsg pre, code {font:115% monospace;}
                    > #ygrp-mlmsg * {line-height:1.22em;}
                    > #ygrp-text{
                    > font-family:Georgia;
                    > }
                    > #ygrp-text p{
                    > margin:0 0 1em 0;}
                    > #ygrp-tpmsgs{
                    > font-family:Arial;
                    > clear:both;}
                    > #ygrp-vitnav{
                    > padding-top:10px;font-family:Verdana;font-size:77%;margin:0;}
                    > #ygrp-vitnav a{
                    > padding:0 1px;}
                    > #ygrp-actbar{
                    > clear:both;margin:25px
                    0;white-space:nowrap;color:#666;text-align:right;}
                    > #ygrp-actbar .left{
                    > float:left;white-space:nowrap;}
                    > .bld{font-weight:bold;}
                    > #ygrp-grft{
                    > font-family:Verdana;font-size:77%;padding:15px 0;}
                    > #ygrp-ft{
                    > font-family:verdana;font-size:77%;border-top:1px solid #666;
                    > padding:5px 0;
                    > }
                    > #ygrp-mlmsg #logo{
                    > padding-bottom:10px;}
                    >
                    > #ygrp-vital{
                    > background-color:#e0ecee;margin-bottom:20px;padding:2px 0 8px 8px;}
                    > #ygrp-vital #vithd{
                    >
                    font-size:77%;font-family:Verdana;font-weight:bold;color:#333;text-transform:uppercase;}
                    > #ygrp-vital ul{
                    > padding:0;margin:2px 0;}
                    > #ygrp-vital ul li{
                    > list-style-type:none;clear:both;border:1px solid #e0ecee;
                    > }
                    > #ygrp-vital ul li .ct{
                    >
                    font-weight:bold;color:#ff7900;float:right;width:2em;text-align:right;padding-right:.5em;}
                    > #ygrp-vital ul li .cat{
                    > font-weight:bold;}
                    > #ygrp-vital a{
                    > text-decoration:none;}
                    >
                    > #ygrp-vital a:hover{
                    > text-decoration:underline;}
                    >
                    > #ygrp-sponsor #hd{
                    > color:#999;font-size:77%;}
                    > #ygrp-sponsor #ov{
                    > padding:6px 13px;background-color:#e0ecee;margin-bottom:20px;}
                    > #ygrp-sponsor #ov ul{
                    > padding:0 0 0 8px;margin:0;}
                    > #ygrp-sponsor #ov li{
                    > list-style-type:square;padding:6px 0;font-size:77%;}
                    > #ygrp-sponsor #ov li a{
                    > text-decoration:none;font-size:130%;}
                    > #ygrp-sponsor #nc{
                    > background-color:#eee;margin-bottom:20px;padding:0 8px;}
                    > #ygrp-sponsor .ad{
                    > padding:8px 0;}
                    > #ygrp-sponsor .ad #hd1{
                    >
                    font-family:Arial;font-weight:bold;color:#628c2a;font-size:100%;line-height:122%;}
                    > #ygrp-sponsor .ad a{
                    > text-decoration:none;}
                    > #ygrp-sponsor .ad a:hover{
                    > text-decoration:underline;}
                    > #ygrp-sponsor .ad p{
                    > margin:0;}
                    > o{font-size:0;}
                    > .MsoNormal{
                    > margin:0 0 0 0;}
                    > #ygrp-text tt{
                    > font-size:120%;}
                    > blockquote{margin:0 0 0 4px;}
                    > .replbq{margin:4;}
                    > -->
                    >
                  • Gopal Venkatesan
                    ... A better way to improve performance and use up lesser memory is by using event delegation. I have a simple example explaining this:
                    Message 9 of 9 , Aug 30, 2007
                    • 0 Attachment
                      On Fri, Aug 31, 2007 at 04:52:08AM -0000, Josh Benham wrote:
                      > Wow thanks so much for that its working now, is there any cleaner way
                      > to do it. Or would that be the best way.
                      >

                      A better way to improve performance and use up lesser memory is by using
                      event delegation. I have a simple example explaining this:

                      http://gopalarathnam.com/examples/javascript/container-event.html

                      It is also excellently described in YUI Event examples:

                      http://developer.yahoo.com/yui/examples/event/event-delegation.html

                      --
                      Gopal Venkatesan

                      http://gopalarathnam.com/weblog/
                    Your message has been successfully submitted and would be delivered to recipients shortly.