Thank you so much! This is very helpful. I hate using code that I don't
understand. I'm bemused that I never understood z-index's behavior in
bubbling, but glad that I now do!
On Fri, Sep 17, 2010 at 4:24 PM, Walter Lee Davis <wa...@wdstudio.com>wrote:
> 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-scriptacul...@googlegroups.com.
>> To unsubscribe from this group, send email to
>> prototype-scriptaculous+unsubscr...@googlegroups.com<prototype-scriptaculous%2bunsubscr...@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<prototype-scriptaculous%2bunsubscr...@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<prototype-scriptaculous%2bunsubscr...@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<prototype-scriptaculous%2bunsubscr...@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.
