Re: [Proto-Scripty] Looking for a way to disable buttons, inputs while images load
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-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.
Re: [Proto-Scripty] Looking for a way to disable buttons, inputs while images load
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? 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? I'm not familiar with first() and hope I'm correct
that it makes an element a first descendant?
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.comwrote:
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.comprototype-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.comprototype-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.
Re: [Proto-Scripty] Looking for a way to disable buttons, inputs while images load
Thanks, but that won't work. Everything I make is in divs,but I can't hide
these divs or there'd be little to show on the page.
On Fri, Sep 17, 2010 at 2:48 PM, Phil Petree phil.pet...@gmail.com wrote:
place the buttons in a div and show/hide the div
On Fri, Sep 17, 2010 at 2:26 PM, Jane Hunter jane...@gmail.com 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.comprototype-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.comprototype-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.
Re: [Proto-Scripty] Looking for a way to disable buttons, inputs while images load
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('pHello/p) or insert({top:'hiHello/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
Re: [Proto-Scripty] Looking for a way to disable buttons, inputs while images load
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.comwrote:
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('pHello/p) or insert({top:'hiHello/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
Re: [Proto-Scripty] Looking for a way to disable buttons, inputs while images load
IE doesn't understand position:fixed. thats where i would start looking.
if (Prototype.BrowserIE){
cover.setStyle('position:absolute');
//do something here to make cover the same height as the entire
page
}
walter
On Sep 17, 2010, at 6:40 PM, Jane Hunter wrote:
Walter,
Again my thanks. It works very well -- in all browsers but IE!! In
this instance, it doesn't matter, since IE wasn't having the
positioning issues that the other browsers were. But I'm going to do
some debugging and see what's going on there. If anything of
interest, I'll write again.
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.
