[Proto-Scripty] Autocompleter and Modalbox
Hi, I have a small issue, which I can't find a solution to on the web. Perhaps you can help. Using Prototype and Scriptaculous I have created an autocompleter which calls an ASP.NET web service and works fine. However when I put it onto a Panel which is made visible by a modalbox.Show() the autocompleter no longer fires. I am using the latest version of Prototype.cs and the scriptaculous files. Here is the code div id=Panel1 table cellspacing=3 cellpadding=3 tr td Possible Values br / %--asp:ListBox ID=lbPossiblefiltervalues runat=server Height=500px Width=150px/asp:ListBox--% div id=div1 class=autocompleteContainer h3 Custom autocomplete using AJAX and parameters/h3 div id=divDetails5 nbsp;/div input id=autocomplete5 type=text / div id=autocomplete_choices5 class=autocomplete /div /div /td /tr /table input type=button value=Save onclick=onSavePopup() / input type=button value=Cancel onclick=Modalbox.hide();return false; / /div just let me reiterate the control works fine outside the modal box, just not in the panel when the modal box is active. I've checked the rendered html and the id's are correct. Any help would be appreciated, Best Regards CB --~--~-~--~~~---~--~~ 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 [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Autocompleter and Modalbox
Hi, I have a small issue, which I can't find a solution to on the web. Perhaps you can help. Using Prototype and Scriptaculous I have created an autocompleter which calls an ASP.NET web service and works fine. However when I put it onto a Panel which is made visible by a modalbox.Show() the autocompleter no longer fires. I am using the latest version of Prototype.cs and the scriptaculous files. Here is the code div id=Panel1 table cellspacing=3 cellpadding=3 tr td Possible Values br / %--asp:ListBox ID=lbPossiblefiltervalues runat=server Height=500px Width=150px/asp:ListBox--% div id=div1 class=autocompleteContainer h3 Custom autocomplete using AJAX and parameters/h3 div id=divDetails5 nbsp;/div input id=autocomplete5 type=text / div id=autocomplete_choices5 class=autocomplete /div /div /td /tr /table input type=button value=Save onclick=onSavePopup() / input type=button value=Cancel onclick=Modalbox.hide();return false; / /div just let me reiterate the control works fine outside the modal box, just not in the panel when the modal box is active. I've checked the rendered html and the id's are correct. Any help would be appreciated, Best Regards CB --~--~-~--~~~---~--~~ 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 [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Autocompleter and Modalbox
Hi, I am using the latest version of Prototype.cs and the scriptaculous files. The latest version is a very slippery concept. Specific versions? -- T.J. Crowder tj / crowder softare / com On Oct 3, 9:16 am, CallinBollig [EMAIL PROTECTED] wrote: Hi, I have a small issue, which I can't find a solution to on the web. Perhaps you can help. Using Prototype and Scriptaculous I have created an autocompleter which calls an ASP.NET web service and works fine. However when I put it onto a Panel which is made visible by a modalbox.Show() the autocompleter no longer fires. I am using the latest version of Prototype.cs and the scriptaculous files. Here is the code div id=Panel1 table cellspacing=3 cellpadding=3 tr td Possible Values br / %--asp:ListBox ID=lbPossiblefiltervalues runat=server Height=500px Width=150px/asp:ListBox--% div id=div1 class=autocompleteContainer h3 Custom autocomplete using AJAX and parameters/h3 div id=divDetails5 nbsp;/div input id=autocomplete5 type=text / div id=autocomplete_choices5 class=autocomplete /div /div /td /tr /table input type=button value=Save onclick=onSavePopup() / input type=button value=Cancel onclick=Modalbox.hide();return false; / /div just let me reiterate the control works fine outside the modal box, just not in the panel when the modal box is active. I've checked the rendered html and the id's are correct. Any help would be appreciated, Best Regards CB --~--~-~--~~~---~--~~ 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 [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Coming from jquery (be gentle)
Hello Kris, and welcome!
When I first started with Prototype, I sat down and read through the
API docs from front to back. It took about an hour (and I'm a slow
reader), and was hugely useful -- so useful, in fact, that when I
started reading this group (well, its predecessor) to gain further
knowledge, I was actually able to answer some of people's questions.
So as a first step, I would recommend doing that. It'll literally
take an hour for the first read-through, and I think you'll find that
you'll learn a huge amount from it.
I don't know jQuery at all, so I can't translate your jQuery to
Prototype reliably, but it would probably look something like this:
function toggleContent(evt)
{
var elm;
elm = evt.element();
elm.next('div.bopCategoryDetails').toggle();
elm.toggleClassName('expanded');
}
$$(ul.bopCategories li h3).each(function (elm) {
elm.observe('click', toggleContent);
});
E.g.:
1. Use $$ to select elements by CSS rule
http://prototypejs.org/api/utility/dollar-dollar
2. Use Enumerable.each to loop through the resulting array
http://prototypejs.org/api/enumerable/each
3. Hook the click event on an element with Event.observe
http://prototypejs.org/api/event/observe
4. Find a following sibling according to a CSS rule via Element.next
http://prototypejs.org/api/element/next
5. Toggle visibility with Element.toggle
http://prototypejs.org/api/element/toggle
6. Toggle classname with Element.toggleClassName
http://prototypejs.org/api/element/toggleClassName
Although this could be done with nested closures instead of named
function, I think a named function is both clearer and more efficient.
HTH,
--
T.J. Crowder
tj / crowder software / com
On Oct 3, 10:11 am, Kris Northfield [EMAIL PROTECTED]
wrote:
Hi all,
Trying to get used to prtotype, I've written this code in jquery but
need a prototype equivalent. I've trawled the web for ages and read
pretty much a whole book (the Manning one with the turk on the front)
but I'm still none the wiser. Any help would be much appreciated. I've
got this html:
ul class=bopCategories
li
h3 class=expandedHeading One/h3
div class=bopCategoryDetails
Lorem ipsum dolor sit amet.
/div
/li
li
h3 class=expandedHeading Two/h3
div class=bopCategoryDetails
Lorem ipsum dolor sit amet.
/div
/li
/ul
which I then toggle the showing/hiding of the divs when the h3s
are clicked with this jquery code:
$(ul.bopCategories li h3).click(function(){
$(this).siblings(div.bopCategoryDetails).toggle(fast);
$(this).toggleClass(expanded);
});
How on earth do I do this with Prototype? So far I've only managed to
add an onclick event to every h3 and pass the id of the specific
div. Like so:
h3 onclick=$('divvy2').toggle();Event/h3
div id=divvy2
Test test test test test test test test ets test test test test test
/div
Obviously this is going to get cumbersome when I have 20 or so list
items.
Thanks.
--~--~-~--~~~---~--~~
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 [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Coming from jquery (be gentle)
Between me and T.J's post you should be able to get something decent
working now, plenty of code for you!
On Oct 3, 10:38 am, bluezehn [EMAIL PROTECTED] wrote:
So get that javascript out of the html and use observers.
So the code you have so far is much better in prototype as this:
h3Event/h3
div id=divvy2
Test test test test test test test test ets test test test
test test
/div
!-- IN JAVASCRIPT --
document.observe('dom:loaded', function()
{
$$('h3').each(function(h3) {
h3.observe('click', function() {
this.down('div').toggle();
}.bindAsEventListener(h3));
});
});
So I've tried to use a really compact bit of code there not
necessarily to do exactly what you want, but to demonstrate loads of
cool prototype-ish features.
First, 'dom:loaded' is a custom event fired by prototype when the dom
has loaded BUT not necessarily all the images, flash files or whatever
else you may have on the page. Clearly this is better than onLoad for
the body or window. You can see that this event is observed by calling
the observe method on an object and specifying a function to run when
the event fires. Here the function is defined inline.
Moving down the code, $$ returns an array of everything that matches
that css definition. So in this case, all 'h3' tags in the dom. The
each method can be applied to all enumerables in prototype and is kind
of like a foreach language structure. So it's saying apply this
function to each h3 element.
You'll probably from jquery be familiar with the .down method, it's
kind of self explanatory, but then you'll notice as well the
bindAsEventListener function at the end there. What that effectively
does is make sure that the variable this inside the preceding
function refers to the parameter given in bindAsEventListener.
Any more qs let us know.
On Oct 3, 10:11 am, Kris Northfield [EMAIL PROTECTED]
wrote:
Hi all,
Trying to get used to prtotype, I've written this code in jquery but
need a prototype equivalent. I've trawled the web for ages and read
pretty much a whole book (the Manning one with the turk on the front)
but I'm still none the wiser. Any help would be much appreciated. I've
got this html:
ul class=bopCategories
li
h3 class=expandedHeading One/h3
div class=bopCategoryDetails
Lorem ipsum dolor sit amet.
/div
/li
li
h3 class=expandedHeading Two/h3
div class=bopCategoryDetails
Lorem ipsum dolor sit amet.
/div
/li
/ul
which I then toggle the showing/hiding of the divs when the h3s
are clicked with this jquery code:
$(ul.bopCategories li h3).click(function(){
$(this).siblings(div.bopCategoryDetails).toggle(fast);
$(this).toggleClass(expanded);
});
How on earth do I do this with Prototype? So far I've only managed to
add an onclick event to every h3 and pass the id of the specific
div. Like so:
h3 onclick=$('divvy2').toggle();Event/h3
div id=divvy2
Test test test test test test test test ets test test test test test
/div
Obviously this is going to get cumbersome when I have 20 or so list
items.
Thanks.
--~--~-~--~~~---~--~~
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 [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: event.observer oncontextmenu
Hi, http://prototypejs.org/api/event/stop It's worth taking an hour and reading through the API docs from beginning to end. It literally takes that long, and it saves you a lot more time than that in the long run: http://prototypejs.org/api Hope this helps, -- T.J. Crowder tj / crowder software / com On Oct 3, 7:20 am, Maikel Punie [EMAIL PROTECTED] wrote: hmm, it seems that i was not verry clear in the explenation if i use document.body.oncontextmenu = ContextShow; the browsers contextmenu is not showen because i return false in the ContextShow function. when i do the same with Event.observer( document.body, 'contextmenu', ContextShow); the browser window and my context menu are showen, so the return false in ContextShow does not seem to work ... Any ideas how to fix this? Maikel On Thu, Oct 2, 2008 at 8:51 PM, Justin Perkins [EMAIL PROTECTED]wrote: On Thu, Oct 2, 2008 at 12:47 PM, kangax [EMAIL PROTECTED] wrote: It could, if you are using an older version. Latest one doesn't check against a list of event names, so observing an event on document.body should work. Yes it does. I thought it was only a window event but sure enough it works fine on the body as well. -justin --~--~-~--~~~---~--~~ 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 [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Coming from jquery (be gentle)
Hi, Brilliant. Both answered a lot of questions and expanded my prototype knowledge ten fold. Thanks very much. Kris. --~--~-~--~~~---~--~~ 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 [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Coming from jquery (be gentle)
So get that javascript out of the html and use observers.
So the code you have so far is much better in prototype as this:
h3Event/h3
div id=divvy2
Test test test test test test test test ets test test test
test test
/div
!-- IN JAVASCRIPT --
document.observe('dom:loaded', function()
{
$$('h3').each(function(h3) {
h3.observe('click', function() {
this.down('div').toggle();
}.bindAsEventListener(h3));
});
});
So I've tried to use a really compact bit of code there not
necessarily to do exactly what you want, but to demonstrate loads of
cool prototype-ish features.
First, 'dom:loaded' is a custom event fired by prototype when the dom
has loaded BUT not necessarily all the images, flash files or whatever
else you may have on the page. Clearly this is better than onLoad for
the body or window. You can see that this event is observed by calling
the observe method on an object and specifying a function to run when
the event fires. Here the function is defined inline.
Moving down the code, $$ returns an array of everything that matches
that css definition. So in this case, all 'h3' tags in the dom. The
each method can be applied to all enumerables in prototype and is kind
of like a foreach language structure. So it's saying apply this
function to each h3 element.
You'll probably from jquery be familiar with the .down method, it's
kind of self explanatory, but then you'll notice as well the
bindAsEventListener function at the end there. What that effectively
does is make sure that the variable this inside the preceding
function refers to the parameter given in bindAsEventListener.
Any more qs let us know.
On Oct 3, 10:11 am, Kris Northfield [EMAIL PROTECTED]
wrote:
Hi all,
Trying to get used to prtotype, I've written this code in jquery but
need a prototype equivalent. I've trawled the web for ages and read
pretty much a whole book (the Manning one with the turk on the front)
but I'm still none the wiser. Any help would be much appreciated. I've
got this html:
ul class=bopCategories
li
h3 class=expandedHeading One/h3
div class=bopCategoryDetails
Lorem ipsum dolor sit amet.
/div
/li
li
h3 class=expandedHeading Two/h3
div class=bopCategoryDetails
Lorem ipsum dolor sit amet.
/div
/li
/ul
which I then toggle the showing/hiding of the divs when the h3s
are clicked with this jquery code:
$(ul.bopCategories li h3).click(function(){
$(this).siblings(div.bopCategoryDetails).toggle(fast);
$(this).toggleClass(expanded);
});
How on earth do I do this with Prototype? So far I've only managed to
add an onclick event to every h3 and pass the id of the specific
div. Like so:
h3 onclick=$('divvy2').toggle();Event/h3
div id=divvy2
Test test test test test test test test ets test test test test test
/div
Obviously this is going to get cumbersome when I have 20 or so list
items.
Thanks.
--~--~-~--~~~---~--~~
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 [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Coming from jquery (be gentle)
Hi all,
Trying to get used to prtotype, I've written this code in jquery but
need a prototype equivalent. I've trawled the web for ages and read
pretty much a whole book (the Manning one with the turk on the front)
but I'm still none the wiser. Any help would be much appreciated. I've
got this html:
ul class=bopCategories
li
h3 class=expandedHeading One/h3
div class=bopCategoryDetails
Lorem ipsum dolor sit amet.
/div
/li
li
h3 class=expandedHeading Two/h3
div class=bopCategoryDetails
Lorem ipsum dolor sit amet.
/div
/li
/ul
which I then toggle the showing/hiding of the divs when the h3s
are clicked with this jquery code:
$(ul.bopCategories li h3).click(function(){
$(this).siblings(div.bopCategoryDetails).toggle(fast);
$(this).toggleClass(expanded);
});
How on earth do I do this with Prototype? So far I've only managed to
add an onclick event to every h3 and pass the id of the specific
div. Like so:
h3 onclick=$('divvy2').toggle();Event/h3
div id=divvy2
Test test test test test test test test ets test test test test test
/div
Obviously this is going to get cumbersome when I have 20 or so list
items.
Thanks.
--~--~-~--~~~---~--~~
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 [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Coming from jquery (be gentle)
I'll throw in a Low Pro [1] version as well:
Event.addBehavior({
'ul.bopCategories .bopCategoryDetails' : function() {
this.hide();
},
'ul.bopCategories li h3:click' : function(e) {
elm = e.element();
elm.next('div.bopCategoryDetails').toggle();
elm.toggleClassName('expanded');
}
});
The first function will pre-hide the details. Remove it if it's not
something you want to happen.
//jarkko
[1] http://jlaine.net/2007/8/3/from-rails-ajax-helpers-to-low-pro-part-i
On 3.10.2008, at 12.37, T.J. Crowder wrote:
Actually, let me revise that:
function toggleContent(evt)
{
var elm;
elm = evt.element();
elm.next('div.bopCategoryDetails').toggle();
elm.toggleClassName('expanded');
}
function initPage()
{
$$(ul.bopCategories li h3).each(function (elm) {
elm.observe('click', toggleContent);
});
}
Event.observe(document, 'dom:loaded', initPage);
The dom:loaded event is fired when the DOM is ready (before
window.onload, usually).
--
T.J. Crowder
tj / crowder software / com
--
Jarkko Laine
http://jlaine.net
http://dotherightthing.com
http://www.railsecommerce.com
http://odesign.fi
smime.p7s
Description: S/MIME cryptographic signature
[Proto-Scripty] Re: Question regarding Element.observe and Element.stopObserving
Hi,
Ah right, that's fair enough. When I wrote that post I didn't realize
that you could simply pass a function reference into the each method.
Personally I prefer to take advantage of the slightly higher level
interfaces provided by Prototype to avoid possible difficulties in
future releases.
I did encounter one problem which was relatively simple to solve. If a
form, or input element is nested within the specified element
hierarchy, a JavaScript error is reported. By testing for the presence
of 'stopObserving' method, it is possible to determine whether that
method is appropriate on a per element basis:
Object.extend(Element.Methods, {
stopObservingNested: function(element) {
element.stopObserving();
element.descendants().each(function(element) {
if (element.stopObserving !== undefined)
element.stopObserving();
});
}
});
2008/10/3 kangax [EMAIL PROTECTED]:
On Oct 2, 6:15 pm, Lea Hayes [EMAIL PROTECTED] wrote:
Or as puckpuck suggested with the 'descendants' method instead of the
CSS selector for greatly improved performance.
`Element.descendants` uses `Element.select` internally. That's why I
used `select` directly (to avoid an extra function call). `_each` is
there to avoid try/catch which is not really needed as far as I can
see. Also, passing `Event.stopObserving` as an iterator avoids an
extra function : )
Object.extend(Element.prototype, {
stopObservingNested: function() {
this.stopObserving();
this.descendants().each(function(el) {
el.stopObserving(); });
}
});
I have tested the above, and it appears to work fine.
Best regards,
Lea Hayes
--
kangax
--~--~-~--~~~---~--~~
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 [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: IE evalScript problem
If you would try a google search with those words and read the first 2-3 topics you would understand exactly what I'm talking about. I'm new to Prototype and web in general so I can't explain exactly, but others are explaining. On Oct 2, 11:07 pm, kangax [EMAIL PROTECTED] wrote: On Oct 2, 5:42 am, Cristisor [EMAIL PROTECTED] wrote: Because the returned HTML includes JS code, IE gives me an error on line 395 in prototype.js, and this is the evalScript function. After searching on the Internet I discovered that others have this problem also. Try a google search with the following text: evalScript IE bug or prototype evalScript bug and you will understand what I mean. It would help if you could file a bug and state the problem clearly. Searching web for possible problems with `evalScripts` doesn't sound like a good idea to me. Best, -- kangax --~--~-~--~~~---~--~~ 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 [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] 'hoverclass' option for draggables?
With the Droppable class, there is an option 'hoverclass', which allows us to temporarily add a css class when an acceptable draggable is hovering it. I was wondering if such an option exists for the Draggable class? To add a css class to the draggable instead of the droppable in this case? If it does not exists, do you have a suggestion on how to do it using the onDrag callback? Thanks in advance, -Laurent --~--~-~--~~~---~--~~ 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 [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Autocompleter and Modalbox
OK apologies for being so vague. Versions are from the .js files Modalbox.js VERSION 1.6.0 Last Modified: 12/13/2007 Prototype.js Prototype JavaScript framework, version 1.6.0.2 script.aculo.us scriptaculous.js v1.8.1 hope this clears up any confusion On Oct 3, 9:38 am, T.J. Crowder [EMAIL PROTECTED] wrote: Hi, I am using the latest version of Prototype.cs and the scriptaculous files. The latest version is a very slippery concept. Specific versions? -- T.J. Crowder tj / crowder softare / com On Oct 3, 9:16 am, CallinBollig [EMAIL PROTECTED] wrote: Hi, I have a small issue, which I can't find a solution to on the web. Perhaps you can help. Using Prototype and Scriptaculous I have created an autocompleter which calls an ASP.NET web service and works fine. However when I put it onto a Panel which is made visible by a modalbox.Show() the autocompleter no longer fires. I am using the latest version of Prototype.cs and the scriptaculous files. Here is the code div id=Panel1 table cellspacing=3 cellpadding=3 tr td Possible Values br / %--asp:ListBox ID=lbPossiblefiltervalues runat=server Height=500px Width=150px/asp:ListBox--% div id=div1 class=autocompleteContainer h3 Custom autocomplete using AJAX and parameters/h3 div id=divDetails5 nbsp;/div input id=autocomplete5 type=text / div id=autocomplete_choices5 class=autocomplete /div /div /td /tr /table input type=button value=Save onclick=onSavePopup() / input type=button value=Cancel onclick=Modalbox.hide();return false; / /div just let me reiterate the control works fine outside the modal box, just not in the panel when the modal box is active. I've checked the rendered html and the id's are correct. Any help would be appreciated, Best Regards CB --~--~-~--~~~---~--~~ 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 [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: event.observer oncontextmenu
You want to call event.preventDefault() in your handler. This prevents the default action (showing the context menu, in this case) from happening. Cheers, Andrew On Oct 3, 1:20 am, Maikel Punie [EMAIL PROTECTED] wrote: hmm, it seems that i was not verry clear in the explenation if i use document.body.oncontextmenu = ContextShow; the browsers contextmenu is not showen because i return false in the ContextShow function. when i do the same with Event.observer( document.body, 'contextmenu', ContextShow); the browser window and my context menu are showen, so the return false in ContextShow does not seem to work ... Any ideas how to fix this? Maikel On Thu, Oct 2, 2008 at 8:51 PM, Justin Perkins [EMAIL PROTECTED]wrote: On Thu, Oct 2, 2008 at 12:47 PM, kangax [EMAIL PROTECTED] wrote: It could, if you are using an older version. Latest one doesn't check against a list of event names, so observing an event on document.body should work. Yes it does. I thought it was only a window event but sure enough it works fine on the body as well. -justin --~--~-~--~~~---~--~~ 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 [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: 'hoverclass' option for draggables?
onDrag runs continuously as you drag the item. Use onStart and onEnd.
Like this:
new Draggable('sample',{onStart:function(){$
('sample').addClassName('dark')},onEnd:function(){$
('sample').removeClassName('dark')}})
On Oct 3, 10:16 am, lfortin [EMAIL PROTECTED] wrote:
With the Droppable class, there is an option 'hoverclass', which
allows us to temporarily add a css class when an acceptable draggable
is hovering it.
I was wondering if such an option exists for the Draggable class? To
add a css class to the draggable instead of the droppable in this
case?
If it does not exists, do you have a suggestion on how to do it using
the onDrag callback?
Thanks in advance,
-Laurent
--~--~-~--~~~---~--~~
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 [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: 'hoverclass' option for draggables?
I'm not sure that answered your question.
What conditions are required for the hover?
On Oct 3, 11:10 am, Diodeus [EMAIL PROTECTED] wrote:
onDrag runs continuously as you drag the item. Use onStart and onEnd.
Like this:
new Draggable('sample',{onStart:function(){$
('sample').addClassName('dark')},onEnd:function(){$
('sample').removeClassName('dark')}})
On Oct 3, 10:16 am, lfortin [EMAIL PROTECTED] wrote:
With the Droppable class, there is an option 'hoverclass', which
allows us to temporarily add a css class when an acceptable draggable
is hovering it.
I was wondering if such an option exists for the Draggable class? To
add a css class to the draggable instead of the droppable in this
case?
If it does not exists, do you have a suggestion on how to do it using
the onDrag callback?
Thanks in advance,
-Laurent
--~--~-~--~~~---~--~~
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 [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: can I calculate the file size?
You would have to have the server tell you, and use Ajax to poll that information. It can be done, but it would depend on your server-side code. On Oct 3, 11:22 am, Cristisor [EMAIL PROTECTED] wrote: Hi everyone. I'm trying to build a photo uploader that tells me in real time what percent was uploaded but I don't know how to calculate the file size. I'm sorry if my question is not 100% related to the group discussions. Thank you. --~--~-~--~~~---~--~~ 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 [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Coming from jquery (be gentle)
On Oct 3, 5:38 am, bluezehn [EMAIL PROTECTED] wrote:
So get that javascript out of the html and use observers.
So the code you have so far is much better in prototype as this:
h3Event/h3
div id=divvy2
Test test test test test test test test ets test test test
test test
/div
!-- IN JAVASCRIPT --
document.observe('dom:loaded', function()
{
$$('h3').each(function(h3) {
h3.observe('click', function() {
this.down('div').toggle();
}.bindAsEventListener(h3));
This is a common misunderstanding of `bindAsEventListener` : ) Plain
`bind` is actually sufficient unless you need to curry (prefill with
arguments) an event handler. Also, `h3` (which `bindAsEventListener`
uses) seems to be `undefined` here. Finally, invoking `down` without
arguments (i.e. when you only need to step one level down) is usually
faster than using an expression:
$$('h3').invoke('observe', 'click', function() {
this.down().toggle();
});
});
});
So I've tried to use a really compact bit of code there not
necessarily to do exactly what you want, but to demonstrate loads of
cool prototype-ish features.
First, 'dom:loaded' is a custom event fired by prototype when the dom
has loaded BUT not necessarily all the images, flash files or whatever
else you may have on the page. Clearly this is better than onLoad for
the body or window. You can see that this event is observed by calling
the observe method on an object and specifying a function to run when
the event fires. Here the function is defined inline.
Moving down the code, $$ returns an array of everything that matches
that css definition. So in this case, all 'h3' tags in the dom. The
each method can be applied to all enumerables in prototype and is kind
of like a foreach language structure. So it's saying apply this
function to each h3 element.
You'll probably from jquery be familiar with the .down method, it's
kind of self explanatory, but then you'll notice as well the
bindAsEventListener function at the end there. What that effectively
does is make sure that the variable this inside the preceding
function refers to the parameter given in bindAsEventListener.
Any more qs let us know.
--
kangax
--~--~-~--~~~---~--~~
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 [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: 'hoverclass' option for draggables?
Thanks for your reply.
The required condition is that the draggable is being moved over a
droppable which can accept the draggable.
In fact, the same behavior as the droppable 'hoverclass' option, but
add the css class to the draggable instead of the droppable.
Is it possible?
On Oct 3, 11:26 am, Diodeus [EMAIL PROTECTED] wrote:
I'm not sure that answered your question.
What conditions are required for the hover?
On Oct 3, 11:10 am, Diodeus [EMAIL PROTECTED] wrote:
onDrag runs continuously as you drag the item. Use onStart and onEnd.
Like this:
new Draggable('sample',{onStart:function(){$
('sample').addClassName('dark')},onEnd:function(){$
('sample').removeClassName('dark')}})
On Oct 3, 10:16 am, lfortin [EMAIL PROTECTED] wrote:
With the Droppable class, there is an option 'hoverclass', which
allows us to temporarily add a css class when an acceptable draggable
is hovering it.
I was wondering if such an option exists for the Draggable class? To
add a css class to the draggable instead of the droppable in this
case?
If it does not exists, do you have a suggestion on how to do it using
the onDrag callback?
Thanks in advance,
-Laurent
--~--~-~--~~~---~--~~
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 [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Autocompleter doesn't cancel pending requests
Very nice! I'd like to see this added to Scriptaculous.
On Thu, Oct 2, 2008 at 10:38 AM, dinken [EMAIL PROTECTED] wrote:
Bug with Autocompleter not canceling pending Ajax requests causing
potential race condition for onComplete logic.
//I added this function to the Ajax.Autocompleter class
clearPendingRequests: function(){
this.pendingRequests.each(function(el){if(el)
{el.transport.abort();}});
this.pendingRequests.clear();
}
//then updating the last line of the getUpdatedChoices method to be
this.clearPendingRequests();
this.pendingRequests.push(new Ajax.Request(this.url, this.options));
//I also added some simple initialization of the array in the
initialize method
this.pendingRequests= new Array();
this worked to cancel pending requests before they had a chance to
come back to the onComplete method.
--~--~-~--~~~---~--~~
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 [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Prototype IE 7 error
Hi, I' using protoype in combination with the great symfony framework, everything worked fine, until now. I just got an email from an user of my webservice that the drag'n drop function doesn't work anymore. Sadly, he's using the internet explorer 7 and 8beta, and as I'm running on a Mac, I can't say how long this problem persists. The ie debug-tool says (translated from german, could be expressed otherwise in english): 'Droppables' is undefined and 'Draggables' is undefined And thats the point. It works fine with Opera, Safari, Firefox... Even epiphany and konqueror have no problems with this simple drag'n drop thing. I can't say anything about IE6, because there are less than 2 % using it on my website. If you need to see the website, go on, i created a demo-account: www.ld-host.de/login User: Demo Password: demo Navigate to Bilderverwaltung or www.ld-host.de/editfolder/0 and try to drag an image from the right side to a folder on the left side (Unsortiert, Einer zu viel, ...) I hope you guys could tell me a solution. Thanks so long.. :) --~--~-~--~~~---~--~~ 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 [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Prototype IE 7 error
I could not access any .js file there. You might check out the given permissions. On Fri, Oct 3, 2008 at 11:39 AM, ljungi [EMAIL PROTECTED] wrote: Hi, I' using protoype in combination with the great symfony framework, everything worked fine, until now. I just got an email from an user of my webservice that the drag'n drop function doesn't work anymore. Sadly, he's using the internet explorer 7 and 8beta, and as I'm running on a Mac, I can't say how long this problem persists. The ie debug-tool says (translated from german, could be expressed otherwise in english): 'Droppables' is undefined and 'Draggables' is undefined And thats the point. It works fine with Opera, Safari, Firefox... Even epiphany and konqueror have no problems with this simple drag'n drop thing. I can't say anything about IE6, because there are less than 2 % using it on my website. If you need to see the website, go on, i created a demo-account: www.ld-host.de/login User: Demo Password: demo Navigate to Bilderverwaltung or www.ld-host.de/editfolder/0 and try to drag an image from the right side to a folder on the left side (Unsortiert, Einer zu viel, ...) I hope you guys could tell me a solution. Thanks so long.. :) -- Believe nothing, no matter where you read it, or who said it, no matter if I have said it, unless it agrees with your own reason and your own common sense. --~--~-~--~~~---~--~~ 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 [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Prototype IE 7 error
I get the same JS error in Firebug - 'Draggables undefined.' On Oct 3, 9:35 am, Douglas [EMAIL PROTECTED] wrote: I could not access any .js file there. You might check out the given permissions. On Fri, Oct 3, 2008 at 11:39 AM, ljungi [EMAIL PROTECTED] wrote: Hi, I' using protoype in combination with the great symfony framework, everything worked fine, until now. I just got an email from an user of my webservice that the drag'n drop function doesn't work anymore. Sadly, he's using the internet explorer 7 and 8beta, and as I'm running on a Mac, I can't say how long this problem persists. The ie debug-tool says (translated from german, could be expressed otherwise in english): 'Droppables' is undefined and 'Draggables' is undefined And thats the point. It works fine with Opera, Safari, Firefox... Even epiphany and konqueror have no problems with this simple drag'n drop thing. I can't say anything about IE6, because there are less than 2 % using it on my website. If you need to see the website, go on, i created a demo-account: www.ld-host.de/login User: Demo Password: demo Navigate to Bilderverwaltung orwww.ld-host.de/editfolder/0and try to drag an image from the right side to a folder on the left side (Unsortiert, Einer zu viel, ...) I hope you guys could tell me a solution. Thanks so long.. :) -- Believe nothing, no matter where you read it, or who said it, no matter if I have said it, unless it agrees with your own reason and your own common sense. --~--~-~--~~~---~--~~ 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 [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Autocompleter doesn't cancel pending requests
That's a good idea. I prefer to leave the prototype and scriptaculous source files in pristine condition whenever possible so that when I update to a newer version I don't have to keep track of what I changed and having to reapply those changes. So here is the same idea, but extending Ajax.Autocompleter instead of altering the code directly. This code would go in a separate file that is included after controls.js is included. http://pastie.org/284326 -justin --~--~-~--~~~---~--~~ 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 [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Strange Fade/Appear behavior in IE
Thanks for your response. I tried as you mentioned, but couldn't get
the afterFinish:function() part to work properly, and it didn't help
with IE's behavior.
Out of pure luck, I think I've stumbled upon the solution--add
Overflow: Hidden to the style of each frame's DIV.
On Oct 3, 9:38 pm, Diodeus [EMAIL PROTECTED] wrote:
For starters, don't use setTimeout to control the flipping of slides.
Use the built-in delay function.
Instead of this:
setTimeout(Effect.Appear('slideshow + frame + ');, 1000);
Do this:
new Effect.Appear('slideshow'+frame,{delay:1.0})
If you need to call another function after the effect runs, do this:
new Effect.Appear('slideshow'+frame,{delay:1.0, afterFinish:function()
{somethingElse()}})
--~--~-~--~~~---~--~~
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 [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Autocompleter and Modalbox
I'm having some problems with ModalBox as well. It doesn't appear to be very well supported and despite a number of open issues it's going on a year without an update. It seems its author's have abandoned it and I am considering the same. On Oct 3, 10:18 am, CallinBollig [EMAIL PROTECTED] wrote: updated to prototype 1.6.0.3 but no change in behaviour. On Oct 3, 2:41 pm, T.J. Crowder [EMAIL PROTECTED] wrote: Hi, And that's the value of hard numbers: That's not the latest version of Prototype, v1.6.0.3 was released on the 28th. Probably nothing to do with it, but... -- T.J. ;-) On Oct 3, 2:07 pm, CallinBollig [EMAIL PROTECTED] wrote: OK apologies for being so vague. Versions are from the .js files Modalbox.js VERSION 1.6.0 Last Modified: 12/13/2007 Prototype.js Prototype JavaScript framework, version 1.6.0.2 script.aculo.us scriptaculous.js v1.8.1 hope this clears up any confusion On Oct 3, 9:38 am, T.J. Crowder [EMAIL PROTECTED] wrote: Hi, I am using the latest version of Prototype.cs and the scriptaculous files. The latest version is a very slippery concept. Specific versions? -- T.J. Crowder tj / crowder softare / com On Oct 3, 9:16 am, CallinBollig [EMAIL PROTECTED] wrote: Hi, I have a small issue, which I can't find a solution to on the web. Perhaps you can help. Using Prototype and Scriptaculous I have created an autocompleter which calls an ASP.NET web service and works fine. However when I put it onto a Panel which is made visible by a modalbox.Show() the autocompleter no longer fires. I am using the latest version of Prototype.cs and the scriptaculous files. Here is the code div id=Panel1 table cellspacing=3 cellpadding=3 tr td Possible Values br / %--asp:ListBox ID=lbPossiblefiltervalues runat=server Height=500px Width=150px/asp:ListBox--% div id=div1 class=autocompleteContainer h3 Custom autocomplete using AJAX and parameters/h3 div id=divDetails5 nbsp;/div input id=autocomplete5 type=text / div id=autocomplete_choices5 class=autocomplete /div /div /td /tr /table input type=button value=Save onclick=onSavePopup() / input type=button value=Cancel onclick=Modalbox.hide();return false; / /div just let me reiterate the control works fine outside the modal box, just not in the panel when the modal box is active. I've checked the rendered html and the id's are correct. Any help would be appreciated, Best Regards CB --~--~-~--~~~---~--~~ 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 [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Dropdownmenu and observe
Very clever! Thanks!
Walter
On Oct 3, 2008, at 12:27 PM, Hector Virgen wrote:
In my experience I've had success using two different mouseover events
instead of a mouseover/mouseout combination.
The first mouseover observer is a simple one:
$('nav').observe('mouseover', function(event) {
$('nav').show();
});
The second observer observes the entire document and checks to see if
$('nav') is found by Event:findElement. If it's not found hide the
nav.
document.observe('mouseover', function(event) {
if (!event.findElement('#nav')) $('nav').hide();
});
This has worked for me in IE and FF but I think cross-browser
mouseleave /
mouseenter could be better.
-Hector
--~--~-~--~~~---~--~~
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 [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Autocompleter and Modalbox
Hi CB, You could try and assign a zIndex higher than 10.000 to #div1. I'm using both together without problems, but had to increase the zIndex of the results div in order to show it above the layer. Maybe that helps, Miguel MikeFeltman wrote: I'm having some problems with ModalBox as well. It doesn't appear to be very well supported and despite a number of open issues it's going on a year without an update. It seems its author's have abandoned it and I am considering the same. On Oct 3, 10:18 am, CallinBollig[EMAIL PROTECTED] wrote: updated to prototype 1.6.0.3 but no change in behaviour. On Oct 3, 2:41 pm, T.J. Crowder[EMAIL PROTECTED] wrote: Hi, And that's the value of hard numbers: That's not the latest version of Prototype, v1.6.0.3 was released on the 28th. Probably nothing to do with it, but... -- T.J. ;-) On Oct 3, 2:07 pm, CallinBollig[EMAIL PROTECTED] wrote: OK apologies for being so vague. Versions are from the .js files Modalbox.js VERSION 1.6.0 Last Modified: 12/13/2007 Prototype.js Prototype JavaScript framework, version 1.6.0.2 script.aculo.us scriptaculous.js v1.8.1 hope this clears up any confusion On Oct 3, 9:38 am, T.J. Crowder[EMAIL PROTECTED] wrote: Hi, I am using the latest version of Prototype.cs and the scriptaculous files. The latest version is a very slippery concept. Specific versions? -- T.J. Crowder tj / crowder softare / com On Oct 3, 9:16 am, CallinBollig[EMAIL PROTECTED] wrote: Hi, I have a small issue, which I can't find a solution to on the web. Perhaps you can help. Using Prototype and Scriptaculous I have created an autocompleter which calls an ASP.NET web service and works fine. However when I put it onto a Panel which is made visible by a modalbox.Show() the autocompleter no longer fires. I am using the latest version of Prototype.cs and the scriptaculous files. Here is the code div id=Panel1 table cellspacing=3 cellpadding=3 tr td Possible Values br / %--asp:ListBox ID=lbPossiblefiltervalues runat=server Height=500px Width=150px/asp:ListBox--% div id=div1 class=autocompleteContainer h3 Custom autocomplete using AJAX and parameters/h3 div id=divDetails5 nbsp;/div input id=autocomplete5 type=text / div id=autocomplete_choices5 class=autocomplete /div /div /td /tr /table input type=button value=Save onclick=onSavePopup() / input type=button value=Cancel onclick=Modalbox.hide();return false; / /div just let me reiterate the control works fine outside the modal box, just not in the panel when the modal box is active. I've checked the rendered html and the id's are correct. Any help would be appreciated, Best Regards CB --~--~-~--~~~---~--~~ 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 [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Help needed with element.offsetHeight
hey everyone, yeah, i know this is a stupid newb questions, but it seems to be slipping my mind. I have ye olde code using ye olde version prototype 1.6.0.2 var pos = Position.cumulativeOffset(element); landing.style.top = pos[1] + element.offsetHeight + 'px'; the positioning is pretty much spot on for ie7, ff2 and ff3, but of course ie6 it's about ~150 pixels too far south on the screen. Could there be a css reason for this that i could write an ie6 specific css rule for? Or how do i calculate a correct positioning. thanks! --~--~-~--~~~---~--~~ 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 [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
