event handlers not working and im gonna tear my face off

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

event handlers not working and im gonna tear my face off

Post by daedalus__ »

okay i was trying to get this to work right before i posted anything about it because i thought it was neat. remember that custom scrollbar thing? well i never finished it. but today i was so angry at select elements i sort of re-implemented them. well, if i try to add event handlers like this:

Code: Select all

 
element.addEventListener('onmouseup', javascript_is_stupid, false);
 
or this:

Code: Select all

 
element.onmouseup = javascript_is_stupid;
 
or this

Code: Select all

 
element.onmouseup = function (e)
{
    alert('javascript really is stupid');
}
 
i get nothing

but if i say

Code: Select all

 
<li onmouseup="javascript&#058; javascript_is_stupid(e)">i just love javascript!</li>
 
it works better than alcohol gets me hyphy.

i could really use a hand because i don't understand what the deal is. i tried to look all up and down through firebug but apparently you cant see what events are assigned to an element or when an event is being fired by an element.

Code: Select all

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Conforming XHTML 1.1 Template</title>
    <style type="text/css">
    @CHARSET "UTF-8";
 
    div.select
    {
        display: inline-block;
 
        position: relative;
    }
 
    div.select input.selected
    {
        display: inline-block;
    
        width: 92%;
    
        padding-left: 0.5em;
    
        border: 0;
    
        color: inherit;
    
        background-color: inherit;
    
        cursor: default;
    
        vertical-align: middle;
    
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
    }
 
    div.select > span
    {
        display: inline-block;
 
        position: absolute;
        top: 0;
        right: 0.00em;
 
        width: 1.3em;
        height: 1.3em;
    
        padding-top: 0.1em;
    
        text-align: center;
        vertical-align: middle;
    }
 
    div.select > ul
    {
        display: none;
    
        position: absolute;
        top: 1.5em;
        left: 0;
    
        margin: 0;
        padding: 0;
    
        background-color: inherit;
    
        cursor: default;
    }
 
    div.select > ul > li
    {
        padding-left: 0.5em;
    
        list-style: none;
    
        color: inherit;
    
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
    }
 
    div.select:active > ul
    {
        display: block;
    
        width: inherit;
    }
 
    div.select:active > ul > li.selected
    {
        display: none;  
    }
 
    /*
     * make it pretty down here
     */
 
    /* set the width here
     *
     * we have to set the width for both elements because
     * ul.options needs absolute positioning to keep it
     * from expanding the parent of div.select and
     * absolute positioning prevents ul.options
     * from inheriting the width of div.select
     */
    div.select, div.select > ul
    {
        width: 12em;
    }
    
    /* set the fonts here. keep in mind that
     * if you start making things different fonts sizes
     * that you will break the layout
     * and have to adjust elements individually
     */
    div.select, div.select input, div.select span, div.select li
    {
        font-family: sans;
        font-size: 12pt;
    }
    
    div.select
    {
        color: white; /* font color is inherited by all children */
    
        border: 3px double #3f3f3f;
        border-top-style: solid;
        border-bottom-style: solid;
        
        background-color: #4f5f6f;
    }
 
    /* CRITICAL:
     * set a z-index here if your page uses a lot of absolute positioning.
     * you don't want things to start overlapping funny
     */
    div.select > ul
    {
        
        border: 3px double;
        border-color: inherit;
        border-top-style: none;
        border-bottom-style: solid;
        -moz-border-radius: 0;
        left: -3px; /* compensate for any borders/padding */
    }
 
    /*
     * adjust the height, position, or font-size
     * here if the button doesn't sit right
     * it's very finnicky
     */
    div.select > span
    {
        color: inherit;
    
        background-color: #1f2f8f;
    }
 
    div.select > ul > li:hover
    {
        background-color: #5f5f5f;
    }
 
    div.select, div.select > *:not(ul)
    {
        -moz-border-radius: 1em;
    }
 
    div.select:active
    {
        -moz-border-radius-bottomleft: 0;
    }
 
    div.select:active, div.select:active > span
    {
        -moz-border-radius-bottomright: 0;
    }
    
    input[type="radio"]
    {
        color: white;
        border: 1px solid black;
    }
    </style>
    <script type="text/javascript">
    function getElementsByClass(searchClass, node, tag)
    {
        var classElements = new Array();
    
        if ( node == null )
            node = document;
        if ( tag == null )
            tag = '*';
        
        var els = node.getElementsByTagName(tag);
        var elsLen = els.length;
        var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    
        for (i = 0, j = 0; i < elsLen; i++) {
            if ( pattern.test(els[i].className) ) {
                classElements[j] = els[i];
                j++;
            }
        }
        return classElements;
    }
    
    function optionSelected(e)
    {
        if (!e) var e = window.event;
 
        lis = e.parentNode.childNodes;
        for (i = 0; i < lis.length; i++)
        {
            if (lis[i].className = "selected")
            {
                lis[i].className = "";
            }
        }
        e.className = "selected";
        e.parentNode.parentNode.childNodes[0].value = e.innerHTML;
    }
    
        
    window.onload = function()
    {
        // get all select divs
        selects = document.getElementsByClassName("select", null, "div");
        for (i = 0; i < selects.length; i++)
        {
            // get all list items for this select div
            lis = selects[i].getElementsByTagName("li");
            // get the input for this select div
            input = selects[i].firstChild;
            for (n = 0; n < lis.length; n++)
            {
                // since we are already here 
                // lets put the default option in the input 
                if (lis[i].className = "selected")
                {
                    //input.value = lis[i].innerHTML;
                }
                
                lis[i].onmouseup = optionSelected;
            }
        }
    }
    </script>
</head>
<body>
    <h1>Example of a styleable select element</h1>
    <div class="select"><input type="text" class="selected" value="check javascript" disabled="disabled" /><span>&bull;</span>
        <ul class="options">
            <li class="selected">artist</li>
            <li>album</li>
            <li>song</li>
        </ul>
    </div>
    <p>this is an example of a stylable drop down built with html, css, and javascript</p>
    <p>i can't imagine why a current day client would have javascript disabled when most popular websites use it in one way or another.</p>
    <p>there have been other examples of this but none that i was pleased with. the one i liked most replicated the events fired when you use a select but i did not like that approach because the list box would still be styled by the os.</p>
    <p>this is a very immature example and the code is likely not cross-browser compliant. personally, i test with firefox 3.5.5 and opera 10.10</p>
</body>
</html>
 
now at first i thought hey maybe its just the window onload acting a fool

but lets say i say something like

Code: Select all

 
if (lis[i].onmouseup = optionSelected)
    alert('hey am i making you angry.. wait dont answer that');
 
let me just say, yeah, its making me angry.

addEventListener returns false though. leaving me even more confused.

'preciate it!
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: event handlers not working and im gonna tear my face off

Post by kaszu »

Code: Select all

element.addEventListener('onmouseup', javascript_is_stupid, false);
should be

Code: Select all

element.addEventListener('mouseup', javascript_is_stupid, false);
I don't know why other options doesn't work.
Merry xmas :)
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: event handlers not working and im gonna tear my face off

Post by daedalus__ »

i'll try that when i get home, hopefully it will work :) merry christmas
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: event handlers not working and im gonna tear my face off

Post by daedalus__ »

well the only other idea i had is that perhaps the events arent firing because of the topography of the page. though i thought default behavior of event listener was the inner-most div first. im gonna try contructing the heirarchy piece by piece and seeing where it stops recognizing the events. i hope thats what it is. maybe i just need to arrange z-indexes. check it let ya know
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: event handlers not working and im gonna tear my face off

Post by daedalus__ »

well i realized what was wrong after i started thinking that there must be a very simple answer since nobody is responding.

Code: Select all

 
             for (n = 0; n < lis.length; n++)
             {           v--------------------------- WRONG
                 if (lis[i].className = "selected")
 
Post Reply