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-scriptaculous@googlegroups.com.
> To unsubscribe from this group, send email to
> prototype-scriptaculous+unsubscr...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/prototype-scriptaculous?hl=en.
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
