Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: In-code events

  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question In-code events

    Hello,
    how do I use events in-code?
    For instance, if I have created an object and I want it to change color when mouse goes over it; how do I do that?



    Thanks,
    Shaffer.

  • #2
    New Coder TripperTreats's Avatar
    Join Date
    Oct 2006
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If it's a div tag you want to affect, you would write this for example:

    <div onmouseover="this.style.backgroundColor = 'blue';" onmouseout="this.style.backgroundColor = 'red';">......

    Here, red is the normal color of the div, and blue is what it changes to only when the mouse is hovered over it.
    Psychedelic digital art at www.trippertreats.com.

    "And in the end, the love you take
    is equal to the love you make
    ."

  • #3
    New Coder
    Join Date
    Oct 2006
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That I know, thanks.
    What I meant is...
    I have created an object that I want it's properties to change onEvents.



    Thanks,
    Shaffer.

  • #4
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It can be set through oElement.style.cssText as you can see if you try the following example.

    Try out this.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
      <head>
        <title>Set CSS in New Element</title>
        <script type="text/javascript">
          function doIt() {
            var d = document.createElement("span");
            d.style.cssText = "color:blue; background-color:yellow";
            d.innerHTML = "New Element";
    
            var adiv = document.getElementById("adiv");
            adiv.appendChild(d);
          }
        </script>
      </head>
      <body>
        <div>
          <button onclick="doIt();">Create New Element</button>
          <br />
          <div id="adiv"> </div>
        </div>
      </body>
    </html>
    david_kw

  • #5
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    And with additional mouseover and mouseout events in case that was your question instead of the cssText part.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
      <head>
        <title>Set CSS in New Element</title>
        <script type="text/javascript">
          function doIt() {
            var d = document.createElement("span");
            d.style.cssText = "color:blue; background-color:yellow";
            d.innerHTML = "New Element";
            d.onmouseover = function () { this.style.cssText = "background-color:lightgreen"; }
            d.onmouseout = function () { this.style.cssText = "background-color:yellow"; }
    
            var adiv = document.getElementById("adiv");
            adiv.appendChild(d);
          }
        </script>
      </head>
      <body>
        <div>
          <button onclick="doIt();">Create New Element</button>
          <br />
          <div id="adiv"> </div>
        </div>
      </body>
    </html>
    david_kw

  • #6
    New Coder
    Join Date
    Oct 2006
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey,
    Thanks alot so much. I really needed this.

  • #7
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I would have been consequent and would have used DOM methods all over (innerHTML is not a standard DOM method). And I would have changed directly the CSS property, not the entire CSSText, otherwise, in your example, you have set useless the font color as later onmouseover you change the entire CSSText (not only the background color).
    On more note: If you decided to use an XHTML doctype, as a general rule you'd better isolate the javascript code inside a CDATA island, otherwise, if you would have used operators like < > &, the XML would have consider it literally as parts of it's coding, and that will bring you an error:
    Code:
    <script type="text/javascript">
    /*<![CDATA[*/
    function doIt() {
            var d = document.createElement("span");
            d.style.cssText = "color:blue; background-color:yellow";
            d.appendChild(document.createTextNode("New Element"));
            d.onmouseover = function () { this.style.backgroundColor = "lightgreen"; }
            d.onmouseout = function () { this.style.backgroundColor = "yellow"; }
    
            var adiv = document.getElementById("adiv");
            adiv.appendChild(d);
          }
    /*]]>*/
    </script>
    On the other hand, I would have had rather written two CSS classes and switch them onmouseover/onmouseout, to keep content separate from behaviour:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>Set CSS in New Element</title>
    <script type="text/javascript">
    /*<![CDATA[*/
          function doIt() {
            var d = document.createElement('span');
            d.className='rollout';
            d.appendChild(document.createTextNode('New Element'));
            d.onmouseover = function(){this.className='rollon'}
            d.onmouseout = function(){ this.className='rollout'}
            var adiv = document.getElementById('adiv');
            adiv.appendChild(d);
          }
    /*]]>*/
    </script>
    <style type="text/css">
    /*<![CDATA[*/
    .rollon{
    color:blue;
    background-color:lightgreen;
    }
    .rollout{
    color:blue;
    background-color:yellow;
    }
    /*]]>*/
    </style>
    </head>
      <body>
        <div>
          <button onclick="doIt();">Create New Element</button>
          <br />
          <div id="adiv"></div>
        </div>
      </body>
    </html>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #8
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    All good points.

    As for innerHTML, it seems very well supported and I've read it is quite a bit faster. So do you avoid using it altogether? Or do you ever use it when it has a benefit over the existing standard DOM methods?

    Thanks.

    david_kw

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Well, yes, innerHTML is a quite useful method, and now is crossbrowser. Yes, is faster, in case a lot of elements are to be appended. It depends only what you are using it for. If you need to simply display new elements, is good. If you want to really add new elements in the DOM tree (and perhaps handle them dynamically later) DOM methods are indicated.

    It's just that is somehow better to use a standard method, and I am used to think on DOM first. Anyway, it is no harm to use innerHTML, at least so far.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •