SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    446
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    adding an event to a created element

    How do you add an event to a created element?

    I need the div I'm appending to have this event: onmouseover="coordinates(event)"

  2. #2
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    4,827
    Mentioned
    142 Post(s)
    Tagged
    0 Thread(s)
    Code:
    element.onmouseover = function() { .... }
    If you paste your code, I can assist you even further.

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    446
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the offer.

    Here's the relevant part of my code.
    Code:
               if (y > 463) {
            	var div = document.getElementById('wrapper'); 
    		var newAddition = document.createElement('div'); 
    		newAddition.style.margin = '0px 0px 10px 0px';
    		newAddition.style.width = '500px';
    		newAddition.style.height = '200px';
    		newAddition.style.background = 'blue';
    		newAddition.style.cssFloat = 'left';
    		//newAddition.element.onmouseover=coordinates(event);
    		div.appendChild(newAddition);
               }
    It successfully executes with the line in question commented-out. With it uncommented, it fails to execute.

    I need this in my div: onmouseover="coordinates(event)"

    How close was I?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    It successfully executes with the line in question commented-out. With it uncommented, it fails to execute.

    I need this in my div: onmouseover="coordinates(event)"

    How close was I?
    If you have a coordinates function, it is just the name of the function that you assign to the event.

    Code javascript:
    function coordinates(evt) {
        evt = evt || window.event;
        ...
    }
     
    ...
    newAddition.onmouseover = coordinates;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    446
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    is this what you had in mind:
    Code:
    newAddition.onmouseover = function(){coordinates(event)};
    Which successfully executes when put in the whole script (creates an infinite scroll):
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="description" content="Save money" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>infinite scroll</title> <script type="text/javascript">
     
    function coordinates(event) {
        var x=event.screenX;
        var y=event.screenY;
        var nextToLast = screen.availHeight;
        nextToLast =  nextToLast - 200;
        //alert(nextToLast);
        //if (y > nextToLast) {
        if (y > 463) {
            //alert("X=" + x + " Y=" + y);
            var div = document.getElementById('wrapper');
            var newAddition = document.createElement('div');
            newAddition.style.margin = '0px 0px 10px 0px';
            newAddition.style.width = '500px';
            newAddition.style.height = '200px';
            newAddition.style.background = 'blue';
            newAddition.style.cssFloat = 'left';
            newAddition.onmouseover = function(){coordinates(event)};
            div.appendChild(newAddition);
        }
    }
     
    </script>
    <style type="text/css">
    </style>
    </head>
    <body>
    <?php
                 
    echo '<div id="wrapper" style="float:left;width:600px;margin:0px">';
    echo '<div onmouseover="coordinates(event)" id="div1" style="float:left;height:200px;width:500px;margin:0px 0px 10px 0px;background:aqua;"></div>'; 
    echo '<div onmouseover="coordinates(event)" id="div2" style="float:left;height:200px;width:500px;margin:0px 0px 10px 0px;background:aqua;"></div>'; 
    echo '<div onmouseover="coordinates(event)" id="div3" style="float:left;height:200px;width:500px;margin:0px 0px 10px 0px;background:aqua;"></div>'; 
    echo '<div onmouseover="coordinates(event)" id="div4" style="float:left;height:200px;width:500px;margin:0px 0px 10px 0px;background:aqua;"></div>'; 
    echo '</div>'; 
    ?> </body> </html>

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    is this what you had in mind:
    Code:
    newAddition.onmouseover = function(){coordinates(event)};
    That's going to have issues on web browsers that don't use the global event variable, which is pretty much only used with Internet Explorer.
    All web browsers either provide the event information as the global variable, or pass it directly to the function itself, so there's no need to wrap the call.

    This does the job perfectly well, without needing the added complexity:

    Code javascript:
    newAddition.onmouseover = coordinates;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    446
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Wow! How does that work? Firebug says there's no event listener in the created div.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    Wow! How does that work? Firebug says there's no event listener in the created div.
    Here's an updated version of the above code, that demonstrates the technique.

    HTML Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="description" content="Save money" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>infinite scroll</title>
    <style type="text/css">
    #wrapper {
        float: left;
        width: 600px;
        margin: 0px;
    }
    #wrapper div {
        float: left;
        height: 200px;
        width: 500px;
        margin: 0px 0px 10px 0px;
        background: aqua;
    }
    </style>
    </head>
    <body>
    <?php
    echo '<div id="wrapper">';
    echo '<div id="div1"></div>'; 
    echo '<div id="div2"></div>'; 
    echo '<div id="div3"></div>'; 
    echo '<div id="div4"></div>'; 
    echo '</div>'; 
    ?>
    <script type="text/javascript">
    function coordinates(event) {
        var x=event.screenX;
        var y=event.screenY;
        var nextToLast = screen.availHeight;
        nextToLast =  nextToLast - 200;
        if (y > 463) {
            var div = document.getElementById('wrapper');
            var newAddition = document.createElement('div');
            newAddition.style.margin = '0px 0px 10px 0px';
            newAddition.style.width = '500px';
            newAddition.style.height = '200px';
            newAddition.style.background = 'blue';
            newAddition.style.cssFloat = 'left';
            newAddition.onmouseover = coordinates;
            div.appendChild(newAddition);
        }
    }
    </script>
    <script>
    document.getElementById('div1').onmouseover = coordinates;
    document.getElementById('div2').onmouseover = coordinates;
    document.getElementById('div3').onmouseover = coordinates;
    document.getElementById('div4').onmouseover = coordinates;
    </script>
    </body>
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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