CODEWITHSUNDEEP
javascripthtmlcssmootoolsmootools-events
Jhecht
Jhecht

Reputation: 4435

MooTools events not firing

I've recently been asked to work on a few websites. One of these websites wants to be "more interactive" and they showed me a site they would like to emulate.

I'm not very good with writing my own scripts, especially with regards to DHTML, so I use MooTools to deal with the more interface-y changes.

In my HTML code I have two Div tags, and I want for it to happen that when you mouseover one, it shrinks the other one and expands the one you're looking at, but no events that I try to attach are firing at all (nothing happens, and nothing appears in the console).

Here is my HTML, I am just using the stock mootools downloaded from their website.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Cnergi - Splash </title>
        <link rel="stylesheet" href="main.css" type="text/css" />
        <script type="text/javascript" src="mootools.js"></script>
        <script type="text/javascript">
            document.addEvent('domready',function(){

                $('employee').set('opacity', 0.5).addEvents({
                    mouseenter: function(){
                      // This morphes the opacity and backgroundColor
                      this.morph({
                        'opacity': 0.6,
                        'background-color': '#E79D35'
                      });
                    },
                    mouseleave: function(){
                      // Morphes back to the original style
                      this.morph({
                        opacity: 0.5,
                        backgroundColor: color
                      });
                    }
                  });

            });
        </script>
    </head>
    <body>
        <div id="wrapper">

            <div class="employee" id="employee">
                Employee test
            </div>
            <div class="client" id="client">
                Client Test
            </div>

        </div>
    </body>
</html>

Further Description of Problem

Basically, if I call the morph straight from the 'domready' function, it works, but the event calls that are supposed to come from the mouseenter (also tried mouseover, and even click. none work) never happen. No errors are being thrown. I am honestly befuddled, I've never had this problem before.

Any ideas?

EDIT

Currently attempting this code, still nothing shows up.

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <link rel="stylesheet" href="main.css" type="text/css" />
        <script type="text/javascript" src="mootools.js"></script>

    </head>
    <body>
        <div id="wrapper">
            <div id="employee" class="employee">
                Something
            </div>
        </div>
        <script type="text/javascript">
            document.addEvent('domready',function(){

                var s = $('employee');
                s.addEvent('click',function(){
                    alert('I was clicked!');
                });

            });//End document.addEvent domready
        </script>
    </body>
</html>

EDIT 2

Has something to do with my stylesheet declaration; if I remove it, the events fire as they should.

It's actually appears to be any styling at all. The moment I put a tag into the file it stopped working.

"Wut." is my only response.

Edit 3

I changed my CSS to this, and it works. I haven't gone through my previous CSS file to figure out why it doesn't work with it, just thought I would update everyone. I posted 2 JS fiddle links, one with my base CSS (please remember this was a work in progress, and that I am partially colorblind so the bright colors help me see the differences), and the other with the CSS below, which runs fine.

In summary: Today I learned that CSS can keep javascript events from firing.

html, body, body>div{
                height:100%;
            }

            body > div{
                width:900px;
                text-align:left;
                margin:0 auto 0 auto;
                background-color:white;

            }

            body{
                text-align:center;
                background-color:grey;
                padding:0;
            }

            #wrapper{

                position:relative;
                width:inherit;
                height:inherit;
            }

            #footer{
                position:absolute;
                bottom:0px;
                text-align:center;
                width:inherit;
            }

Upvotes: 1

Views: 159

Answers (2)

csuwldcat
csuwldcat

Reputation: 8249

The MooTools domready event is only available on the window object - here's your example in working order: http://jsbin.com/rucaz/1/edit

For reference: http://mootools.net/docs/core/Utilities/DOMReady

Upvotes: 1

NoGray
NoGray

Reputation: 1149

I think you have a syntax error in background: color

this.morph({
    opacity: 0.5,
    backgroundColor: color // is color defined?
});

Upvotes: 1

Related Questions