Answers inline below...
On Sep 17, 2010, at 3:37 PM, Jane Hunter wrote:
Thanks very much, Walter. I'm inclined to try your approach, but I
have a couple of questions that,if you could answer them, will help
me understand it better. First, what is the difference between
observe...evt.stop() and stopObserving?
It's proactive -- trapping the click before it can go anywhere versus
trying to stop the click after it happens. By creating an element that
is above the rest of your page, and using it to catch the clicks, you
pretty much guarantee that the event will be caught there first.
And why would a new div catch the clicks, when
document.stopObserving('click'), which I've also tried, did not? How
does Z-index work here?
Imagine your page as a stack of sheets of glass or similar. Each sheet
has a z-index, and the higher it is, the closer to the visitor's eyes
it is. The page itself is at z-index 0. Each element on your page has
a z-index. If you don't explicitly set a z-index, or if you set it to
auto, then the browser will sort this out using source code order and
various layout rules to figure out what lies in front of what. For
example, if you had one element floated right, and another floated
left, and then you closed up your browser window so that they had to
overlap -- one element would slide under the other, and that's z-
index:auto at work. So in this case, setting the element to a
ridiculously high number makes it float way up above everything else
on the page.
I'm not familiar with "first()" and hope I'm correct that it makes
an element a first descendant?
first() is a Prototype thing, it finds the first element in an
enumerable object (in this case an array). Unless you set an id on
your page body and use $('my_body'), you can't access the
document.body in Prototype and extend it for use in all browsers. So
the double-dollar function, which I think of as a souped up example of
'find everything that matches this CSS selector', is used to find all
the 'body' tags in the document (there should only be one, right) and
then first() operates on the result of the double-dollar, and thus
returns the one and only body tag, extended and ready for work.
What makes the new inserted div a first descendent of the body is the
use of insert({top:cover});
insert can either take an object as an argument, or a hash. If you
send it a hash, the key must be one of the following: before, after,
top, or bottom. If you just pass it an object, that object will be
inserted at the bottom of the element, so insert({bottom:foo}) is the
same as insert(foo).
Either form can take a string as the argument, too, as long as it
represents a valid thing to insert. So if you wanted to
insert('<p>Hello</p>) or insert({top:'<hi>Hello</hi1>'}) you could do
that. It will fail quietly if you try to insert something where it
doesn't belong, like trying to add an li to a select or something
silly like that.
Walter
Again, many thanks; I'll try your approach this evening,
Jane
On Fri, Sep 17, 2010 at 2:43 PM, Walter Lee Davis
<wa...@wdstudio.com> wrote:
Off the top of my head, I would say observe clicks on a temporary
element placed over the top of the page and cause them to die,
rather than trying to disable clicks where you are. By the time your
clicks bubble from the element they were made on up to the outer
shell, it's already too late -- the click has fired on that element,
then bubbled up to the shell.
if(!$('cover')){
var cover = new Element('div',{id:'cover'});
cover.setStyle('position:fixed; width:100%;height:100%;z-
index:1000;top:0;left:0');
$$('body').first().insert({top:cover});
cover.observe('click',function(evt){evt.stop();});
}
later, when everything is ready
$('cover').stopObserving().remove();
Something like that.
Walter
On Sep 17, 2010, at 2:26 PM, Jane Hunter wrote:
Hello,
I'm making an html/javascript copy of a flash slide-show, probably
the first of several necessitated by the iPad. Thanks to Prototype,
everything works well in every browser -- EXCEPT, if the user clicks
one of the navigation buttons or image buttons before the images are
finished loading, the display image doesn't position itself
correctly. (The images are of varying sizes and I caculate their
position on the fly.) I've tried this (shell being my outermost
div), which has no effect at all:
<
script type="text/javascript">
document.observe(
"dom:loaded", function() {
$(
'shell').stopObserving('click');
firstimage();
});
</
script>
I can disable each of the buttons and inputs, individually, which is
really lame, plus would make me re-iterate through them to un-
disable them at the end of the load functions. It would be ideal to
disable all the buttons at the beginning of the load process and
then have an on-complete event that will re-enable them (and will
work in all browsers).
Is there a way to do that with Prototype? I'd be very grateful for
advice and suggestions.
Thank you!
Jane Hunter
--
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
.
--
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
.
--
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
.
--
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-scriptacul...@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.
