Custom Object property not working

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Jesse Wade
    #1

    Custom Object property not working

    I'm trying to create a custom js object to display help text when you
    move the mouse over controls on a form. I've got two issues that are
    troubling:

    1) The 'color' and 'backgroundColo r' properties only have values
    immediately after you set them. Trying to access them from within the
    object later with this.color yields "undefined"

    2) Having trouble with the syntax for addEventListene r. Can't get
    that to work in IE6 so I'm currently overwriting any preexisting
    'onmouseover' events.

    Any ideas on how to get either of these to work?

    Thanks,
    Jesse


    <html>
    <head>
    <meta name="vs_target Schema"
    content="http://schemas.microso ft.com/intellisense/ie5">
    <TITLE></TITLE>
    <STYLE>
    BODY{ margin:.5em; font-family:sans-serif}
    DIV{ margin:0px; padding:.5em; height:3em; width:50%;
    float:left; }
    H6{ margin:0px; }
    INPUT{ width:100% }
    </STYLE>
    <script>

    function HelpText(color, bgColor){
    var _lastEl;

    this.color=colo r;
    this.background Color=bgColor;

    this.doMouseOve r=
    function(){
    //Exit if the pointer is over the same control
    el=window.event .srcElement;
    if(el == _lastEl) return false;
    _lastEl=el;

    //Get the div above this control
    while(el.tagNam e != "DIV" && el.tagName != "BODY"){
    el=el.parentNod e;
    }

    if(el.help && el.help.length != 0){
    dvHelp.innerHTM L=el.help;
    dvHelp.style.di splay="inline";
    dvHelp.style.co lor=this.color;
    dvHelp.style.ba ckgroundColor=t his.backgroundC olor;
    window.status = this.background Color;
    }

    }

    this.doMouseOut =
    function(){
    dvHelp.innerHTM L="";
    dvHelp.style.di splay="none";
    }
    dvHelp=document .createElement( "DIV")
    dvHelp.style.di splay="none";
    window.document .body.appendChi ld(dvHelp);

    window.document .body.onmouseov er=this.doMouse Over;
    window.document .body.onmouseou t=this.doMouseO ut;
    //window.document .addEventListen er("onmouseout" ,
    this.doMouseOut , false);
    }
    </script>
    </head>
    <BODY onload="var oHelp=new HelpText('black ','yellow');">
    <DIV help="First name of customer as it appears on credit card">
    <H6>First Name</H6>
    <INPUT type="text" ID="Text1" NAME="Text1">
    </DIV>
    <DIV help="Last name of customer as it appears on credit card">
    <H6>Last Name</H6>
    <INPUT type="text" ID="Text2" NAME="Text2">
    </DIV>
    <DIV help="Preferred shackle chain color">
    <H6>Chain Color</H6>
    <INPUT type="text" ID="Text3" NAME="Text3">
    </DIV>
    <DIV help="Name of customer's fantasy alter ego">
    <H6>Alter Ego</H6>
    <INPUT type="text" ID="Text4" NAME="Text4">
    </DIV>
    </BODY>
    </html>
    Tags: None
    • Ekkehard Morgenstern
      #2
      Re: Custom Object property not working


      "Jesse Wade" <jwade@rubytues day.com> schrieb im Newsbeitrag news:9d573e3b.0 401171038.7debc 27e@posting.goo gle.com...[color=blue]
      > I'm trying to create a custom js object to display help text when you
      > move the mouse over controls on a form. I've got two issues that are
      > troubling:
      >
      > 1) The 'color' and 'backgroundColo r' properties only have values
      > immediately after you set them. Trying to access them from within the
      > object later with this.color yields "undefined"
      >
      > 2) Having trouble with the syntax for addEventListene r. Can't get
      > that to work in IE6 so I'm currently overwriting any preexisting
      > 'onmouseover' events.
      >
      > Any ideas on how to get either of these to work?[/color]

      For browser-independent event listeners, you could use my ISKEET
      library v0.0.4 or later.

      http://www.iskeet.de


      It also simplifies the handling of page elements.

      To find an element on the page, define a tag with an ID field,
      which you've already done, as in:

      <input id="text1" name="text1" type="text">

      Then, you can use ISKEET_DEO.find ElementById() in the script
      to retrieve the element:

      var text1elem = ISKEET_DEO.find ElementById( "text1" );
      if ( text1elem != undefined ) {
      ...
      }

      To set an event handler for it, simply do

      ISKEET_DEO.addE ventHandler( "mouseover" , text1elem, doMouseOver );
      ISKEET_DEO.addE ventHandler( "mouseout", text1elem, doMouseOut );

      So, you can do something like:

      var text1elem = ISKEET_DEO.find ElementById( "text1" );
      if ( text1elem != undefined ) {
      ISKEET_DEO.addE ventHandler( "mouseover" , text1elem, doMouseOver );
      ISKEET_DEO.addE ventHandler( "mouseout", text1elem, doMouseOut );
      }

      To add a load handler for a window, write:

      ISKEET_DEO.addE ventHandler( "load", window, doLoad );

      I hope this helps! :-)


        Comment

        • Ekkehard Morgenstern
          #3
          Re: Custom Object property not working


          "Ekkehard Morgenstern" <ekkehard.morge nstern@onlineho me.de> wrote:[color=blue]
          > var text1elem = ISKEET_DEO.find ElementById( "text1" );[/color]

          duh, this should read:

          var text1elem = ISKEET_DEO.getE lementById( "text1" );


            Comment

            • Jesse Wade
              #4
              Re: Custom Object property not working

              While I appreciate the reply, your response doesn't help me learn why my
              custom object doesn't work, does it? I figured half of it out on my
              own. The property references don't work because "this" in the context
              of the event handler doesn't refer to the custom object.


              Best Regards,

              Jesse Wade


              *** Sent via Developersdex http://www.developersdex.com ***
              Don't just participate in USENET...get rewarded for it!

                Comment

                • Ekkehard Morgenstern
                  #5
                  Re: Custom Object property not working


                  "Jesse Wade" <jwade@rubytues day.com> wrote:[color=blue]
                  > While I appreciate the reply, your response doesn't help me learn why my
                  > custom object doesn't work, does it? I figured half of it out on my
                  > own. The property references don't work because "this" in the context
                  > of the event handler doesn't refer to the custom object.[/color]

                  this, and addEventListene r() is only supported by DOM 2.0 events,
                  which are not supported by IE 6, hence that wouldn't work. ;-)


                    Comment

                    Previous template Next
                    Working...