mouseout event doesn't work

35 views
Skip to first unread message

tab1ta

unread,
Dec 21, 2012, 9:46:08 AM12/21/12
to prototype-s...@googlegroups.com
I added an Event listener to the page, to catch every event but it doesn't work still. The code is more compact:

<?php
require_once("tabs.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
@import url(styles.css);
  </style>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
  <script type="text/javascript">
       document.observe('dom:loaded', function(){
            $('thing_1').on('mouseover', 'img', function(evt, elm){
                evt.stop();
                $('thing_1').replace('<div id="thing_1" class="gallerylink"><p><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p></div>');
});
            $('thing_2').on('mouseover', 'img', function(evt, elm){
                evt.stop();
                $('thing_2').replace('<div id="thing_2" class="gallerylink"><p><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p></div>');
 
});
            $('thing_3').on('mouseover', 'img', function(evt, elm){
                evt.stop();
                $('thing_3').replace('<div id="thing_3" class="gallerylink"><p><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p></div>');
 
});       
            $('thing_4').on('mouseover', 'img', function(evt, elm){
                evt.stop();
                $('thing_4').replace('<div id="thing_4" class="gallerylink"><p><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p></div>');
 
});
            $('thing_5').on('mouseover', 'img', function(evt, elm){
                evt.stop();
                $('thing_5').replace('<div id="thing_5" class="gallerylink"><p><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p></div>');
});   
            $('thing_6').on('mouseover', 'img', function(evt, elm){
                evt.stop();
                $('thing_6').replace('<div id="thing_6" class="gallerylink"><p><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p></div>');
 
});
            $('thing_1').on('mouseout', 'a', function(evt, elm){
                evt.stop();
                $('thing_1').replace('<img id="thing_1" class="galleryitem" src="images/gallery1.jpg.jpg" onmouseover="showResult1();" style="position:relative; top:0px; left: 0px;"/>');
});
            $('thing_2').on('mouseout', 'a', function(evt, elm){
                evt.stop();
                $('thing_2').replace('<img id="thing_2" class="galleryitem" src="images/3188832812_573db43c7d.jpg" onmouseover="showResult2();"/>');
});
            $('thing_3').on('mouseout', 'a', function(evt, elm){
                evt.stop();
                $('thing_3').replace('<img id="thing_3" class="galleryitem" src="images/3188858500_3437070b8f.jpg" onmouseover="showResult3();"/>');
});
            $('thing_4').on('mouseout', 'a', function(evt, elm){
                evt.stop();
                $('thing_4').replace('<img id="thing_4" class="galleryitem" src="images/3188063503_e2b752444f.jpg" onmouseover="showResult4();"/>');
});
            $('thing_5').on('mouseout', 'a', function(evt, elm){
                evt.stop();
                $('thing_5').replace('<img id="thing_5" class="galleryitem" src="images/3188039487_5fa50f0d02.jpg" onmouseover="showResult5();"/>');
});
            $('thing_6').on('mouseout', 'a', function(evt, elm){
                evt.stop();
                $('thing_6').replace('<img id="thing_6" class="galleryitem" src="images/3188061317_d7a4bb7c27.jpg" onmouseover="showResult6();"/>');
});
});           
                            </script>
<title>Python Speculative Interface</title>

</head>
<body>
   
       
<div class="main"><div id="header">
<?php tabs_start(); ?><div class="main">
        <img class="logo" src="images/psi.png" /></div>
<?php tab( "Concept"); ?>
       
            <div class="containere">
                <div class="boxtab">
                    <form action="http://joy.indivia.net/py/cgi-bin/OOpoetry.cgi" method="get">

                    <h>Python from a theoretical point of view</h>
                    <p>This interface aims to show and explain some communicative and theoretical aspects
                    inscribed in the mechanisms behind a programming language. The programming language named
                    Python is useful to achieve this goal as it provides an interpreter but it can even run
                    source code as object code.</p>
                    <p>If you search for a command of the python programming language in the form below you
                    will get the description of the logical and communicative process executed by it in the
                    machine. The explanation can be of a logical, mathematical or semiological nature.</p>
                    <p> This is an attempt to enhance python programming language as a signifying language,
                    which can execute not only algebrical processes but even what could be defined as meaning.</p><br />
                    <p>
                        <input id="example" name="stringx" value="type here"/>&nbsp;&nbsp;<input id="submit" type="submit" value="search"/></form></p>                       
                    </div>
<?php tab( "Wiki" ); ?>
        <img class="logo" src="images/psi.png" />
        <div class="main">
            <div class="containere">
                <div class="boxtab">
                    <h>Discussing about code and poetry</h>
                    <p>The various aspects of python programming language, and more in general of the object
                    oriented programming paradigm as a poetry, are discussed inside this
                    <a href="http://joy.indivia.net/wiki/index.php">wiki</a></p>
                    <p>Every command will be provided with a discussion about the most trustworthy interpretation
                    you can give of it, and the execution it causes inside the machine. We will end at the level of
                    binary alphabet if it will be necessary. The final definition of every command will be connected
                    to this interface.</p>
<p>    </p>               
                        </div>
                   
<?php tabs_end(); ?>
                        <ul><li>
                            <img id="thing_1" class="galleryitem" src="images/gallery1.jpg.jpg" style="position:relative; top:0px; left: 0px;"/>
                            </li><li>
                            <img id="thing_2" class="galleryitem" src="images/3188832812_573db43c7d.jpg"/>
                                </li><li>
                            <img id="thing_3" class="galleryitem" src="images/3188858500_3437070b8f.jpg"/>
                            </li><li>
                            <img id="thing_4" class="galleryitem" src="images/3188063503_e2b752444f.jpg"/>
                            </li><li>
                            <img id="thing_5" class="galleryitem" src="images/3188039487_5fa50f0d02.jpg"/>
                            </li><li>
                            <img id="thing_6" class="galleryitem" src="images/3188061317_d7a4bb7c27.jpg"/>
                            </li></ul>
                            </div></div></div>

</body>
</html>

Can anyone help?
Thanks Agnese

Walter Lee Davis

unread,
Dec 21, 2012, 10:55:43 AM12/21/12
to prototype-s...@googlegroups.com

On Dec 21, 2012, at 9:46 AM, tab1ta wrote:

> I added an Event listener to the page, to catch every event but it doesn't work still. The code is more compact:
>
> <?php
> require_once("tabs.php");
> ?>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
> <head>
> <style type="text/css">
> @import url(styles.css);
> </style>
> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
> <script type="text/javascript">
> document.observe('dom:loaded', function(){
> $('thing_1').on('mouseover', 'img', function(evt, elm){
> evt.stop();
> $('thing_1').replace('<div id="thing_1" class="gallerylink"><p><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p></div>');
> });

[snip]

> $('thing_1').on('mouseout', 'a', function(evt, elm){
> evt.stop();
> $('thing_1').replace('<img id="thing_1" class="galleryitem" src="images/gallery1.jpg.jpg" onmouseover="showResult1();" style="position:relative; top:0px; left: 0px;"/>');
> });
[snip]

> });
> </script>

[snip]

> Can anyone help?
> Thanks Agnese
>

Sure. Have a careful look at what's happening here. In your mouseover, you are completely replacing the content of #thing_1 with new content. The mouseout handlers that you defined do not have anything to apply to, so they are a no-op. Even if the content to which they would apply is added to the page later, they still won't do anything, because the handler has to be added to the element it applies to before it can act.

There's a second problem with this page, related to code (and memory) bloat. You're defining the same function over and over, once per element on the page, even though they all do exactly the same thing. If you look back to my example, you'll see that I wrote one function, applied it to the parent container (the UL) rather than one function per LI inside that list. You need to do the same thing here. Once you do, you'll gain the true value of the on() function: deferred observers.

The third problem is that you are replacing content with content stored in the JavaScript -- you're mixing metaphors -- and it's not serving anyone here very well. The few people who approach your page with JavaScript disabled will have a fundamentally broken experience, and you are suffering from having to edit HTML in the midst of your JS, with all the escaping and quote-wrangling that implies.

This whole thing could be rewritten as follows:

<ul id="myList">
<li>
<img class="galleryitem" src="images/gallery1.jpg.jpg" style="position:relative; top:0px; left: 0px;"/>
<div class="gallerylink"><p><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p></div>
</li>
...
</ul>

Then, in your script:

var divs = $$('#myList div');
var imgs = $$('#myList img');
function setup(){
divs.invoke('hide');
imgs.invoke('show');
};
setup();
$('myList').on('mouseover', 'li', function(evt, elm){
setup();
elm.down('img').hide();
elm.down('div').show();
});
$('myList').observe('mouseleave', setup);

That's it, one handler on mouseover for the whole list (mouseover "bubbles" up from the element that triggered it, the on() function dramatically simplifies figuring out which element actually triggered it), and one more handler on the entire list to clean up after you mouse out of the entire list element. There's no replace() going on, so your handlers persist from one event to the next. Dramatically less memory used (not critical in this tiny example, but significant on a larger page or a longer-running single-page application).

Note that I am observing the mouseover that bubbles up from the LI (parent of both the img and the div) and I have removed the illegal duplicate IDs from both img and div elements. All of the content will be visible when JavaScript is disabled.

Walter

> --
> You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
> To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/UWS-jIP99DYJ.
> To post to this group, send email to prototype-s...@googlegroups.com.
> To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.

Reply all
Reply to author
Forward
0 new messages