[Proto-Scripty] Re: Inheritance question
Thats a good idea. This code works actually. I just cannot (really)
override existing methods. If I include methods with the same name in
MySortable, they are not called, because within Sortable all methods
are called with Sortable.nameOfMethod() - they don't use
this.nameOfMethod().
On 14 Jan., 18:03, nlloyds nllo...@gmail.com wrote:
Cyrus,
On Jan 14, 1:50 am, Cyrus arianglan...@googlemail.com wrote:
I am seeing myself copying the whole Sortable because it cannot be
inherited.
I don't know if it's been mentioned, but you since Sortable is just an
object you could try extending it with your own methods like this
var MySortable = Object.extend({
hover : function hover() { ... },
...
}, Sortable);
Don't know if it will work in practice, though.
Nathan
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
[Proto-Scripty] Sortable and lists of labels/checkboxes
Hi,
I decided to open a new thread (this is the old one:
http://groups.google.com/group/prototype-scriptaculous/t/303d050dd9c07329),
because it is a general question how to use the Sortable of
script.aculo.us correctly.
Simple HTML-Code:
ul id=list
li id=item1labelinput type=checkbox / Item 1/label/li
li id=item2labelinput type=checkbox / Item 2/label/li
/ul
Javascript:
Sortable.create('list');
Works in all browsers. I just have a problem with Gecko and WebKit.
Using the dragdrop by clicking on the labels also changes the state
of the checkbox (checked/unchecked).
I tried a lot of different thinks to avoid that behaviour. I think it
would be the best solution to stop the whole event, after an item was
dropped.
Sortable.create offers two callbacks: onChange and onUpdate:
onChange is called whenever the an item changes a position during the
dragging. It has the item thats being dragged as a parameter.
onUpdate is called when the item is actually dropped and the list has
a new order. It has the whole list as parameter. Unfortunately I don't
have an event object here, so I could work with that.
What I did: I saved the checkbox that is dragged within onChange:
onChange: function(element) {
this.checkbox = element.select('input')[0];
}
Within onUpdate I set this checkbox disabled. So the automatic click
on it would have no effect:
onUpdate: function(element) {
if (Prototype.Browser.WebKit || Prototype.Browser.Gecko) {
this.checkbox.disable();
}
}
Now I just need to add another click handler for the label and list to
enable the checkbox:
onClick = function(evt) {
if (this.checkbox) {
this.checkbox.enable();
evt.stop();
}
};
$$('#list label').invoke('observe', 'click', onClick.bind(this));
$$('#list li').invoke('observe', 'click', onClick.bind(this));
This works now really good, just one thing keeps bugging me.
When I press the mousebutton on a label to start dragging and
releasing it not on the label, but somewhere else, the click event is
not fired, so the checkbox remains disabled. This also happens the
other way round: Start dragging on the list-item and releasing
dropping it while the mouse is over the label.
I could add even another mouse event handlers to the whole list:
mouse = function(evt) {
if (this.checkbox) {
this.checkbox.enable();
}
};
$('list').observe('mouseover', mouse.bind(this)).observe('mousemove',
mouse.bind(this));
If you are not moving your mouse you can still see the disabled
checkbox.
I have no further ideas. I hope you can help me out.
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Sortable and lists of labels/checkboxes
Ok - I think I solved the problem.
I exchanged the disabled/enabled with addClassName('dropped')/
removeClassName('dropped').
So the user doesn't see if the class is still attached to the
checkbox. If he moves the mouse it will be gone. The final code looks
like this, maybe you need it yourself:
function init() {
// Extra code is needed to prevent changing the checkbox status when
clicking the label in Safari and Firefox
var checkbox;
Sortable.create('list', {
onChange: function(element) {
if (Prototype.Browser.WebKit ||
Prototype.Browser.Gecko) {
this.checkbox = element.select('input')[0];
}
}.bind(this),
onUpdate: function(element) {
if (Prototype.Browser.WebKit ||
Prototype.Browser.Gecko) {
this.checkbox.addClassName('dropped');
}
}.bind(this)
});
if (Prototype.Browser.WebKit || Prototype.Browser.Gecko) {
$$('#list label').invoke('observe', 'click', function(evt) {
if (this.checkbox
this.checkbox.hasClassName('dropped')) {
this.checkbox.removeClassName('dropped');
evt.stop();
}
}.bind(this));
$('list').observe('mousemove', function(evt) {
if (this.checkbox
this.checkbox.hasClassName('dropped')) {
this.checkbox.removeClassName('dropped');
}
}.bind(this));
}
}
// when the dom is fully loaded, execute these scripts
document.observe(dom:loaded, init);
On 15 Jan., 10:16, Cyrus arianglan...@googlemail.com wrote:
Hi,
I decided to open a new thread (this is the old
one:http://groups.google.com/group/prototype-scriptaculous/t/303d050dd9c0...),
because it is a general question how to use the Sortable of
script.aculo.us correctly.
Simple HTML-Code:
ul id=list
li id=item1labelinput type=checkbox / Item 1/label/li
li id=item2labelinput type=checkbox / Item 2/label/li
/ul
Javascript:
Sortable.create('list');
Works in all browsers. I just have a problem with Gecko and WebKit.
Using the dragdrop by clicking on the labels also changes the state
of the checkbox (checked/unchecked).
I tried a lot of different thinks to avoid that behaviour. I think it
would be the best solution to stop the whole event, after an item was
dropped.
Sortable.create offers two callbacks: onChange and onUpdate:
onChange is called whenever the an item changes a position during the
dragging. It has the item thats being dragged as a parameter.
onUpdate is called when the item is actually dropped and the list has
a new order. It has the whole list as parameter. Unfortunately I don't
have an event object here, so I could work with that.
What I did: I saved the checkbox that is dragged within onChange:
onChange: function(element) {
this.checkbox = element.select('input')[0];
}
Within onUpdate I set this checkbox disabled. So the automatic click
on it would have no effect:
onUpdate: function(element) {
if (Prototype.Browser.WebKit || Prototype.Browser.Gecko) {
this.checkbox.disable();
}
}
Now I just need to add another click handler for the label and list to
enable the checkbox:
onClick = function(evt) {
if (this.checkbox) {
this.checkbox.enable();
evt.stop();
}
};
$$('#list label').invoke('observe', 'click', onClick.bind(this));
$$('#list li').invoke('observe', 'click', onClick.bind(this));
This works now really good, just one thing keeps bugging me.
When I press the mousebutton on a label to start dragging and
releasing it not on the label, but somewhere else, the click event is
not fired, so the checkbox remains disabled. This also happens the
other way round: Start dragging on the list-item and releasing
dropping it while the mouse is over the label.
I could add even another mouse event handlers to the whole list:
mouse = function(evt) {
if (this.checkbox) {
this.checkbox.enable();
}
};
$('list').observe('mouseover', mouse.bind(this)).observe('mousemove',
mouse.bind(this));
If you are not moving your mouse you can still see the disabled
checkbox.
I have no further ideas. I hope you can help me out.
--~--~-~--~~~---~--~~
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
[Proto-Scripty] Re: Best way to apply an effect on page load?
Hi Matt,
Yes, *slightly*: Element#select() and $$() both return an array of
matching (extended) elements. So you need to index into it.
If you know there will only be one and don't mind if the effect
applies to all of them if (for whatever reason) there's more than one,
Enumerable#each makes for a concise bit of code:
document.observe(dom:loaded, function() {
$('editProducts').select('div.test').each(Effect.SlideDown);
});
Or you can combine the $() and select() using descendant selectors
with $$():
document.observe(dom:loaded, function() {
$$('#editProducts div.test').each(Effect.SlideDown);
});
(I haven't compared the performance differences between those.)
Alternately, if you really only want to do it once even if there are
multiple matches:
document.observe(dom:loaded, function() {
var pageBox = $('editProducts').select('div.test')[0];
// or var pageBox = $$('#editProducts div.test')[0];
if (pageBox) {
Effect.SlideDown(pageBox);
}
});
Side notes:
* You don't need to return false from dom:loaded handlers.
* You don't have to extend elements returned by $$() or Element#select
() by passing them through $() -- that's already been done for you.
* kangax tells me dom:loaded is unreliable in its current
implementation on IE. (I haven't seen a problem, but he knows this
stuff better than I do.) I haven't had a chance to search lighthouse
yet to find out the whens/wherefores of that. I believe 1.6.0.4 is
meant to address it.
HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Jan 14, 5:07 pm, Matt guitarroman...@gmail.com wrote:
After some tests, I can see that my code above isn't selecting the
element properly - am I using select() wrong?
Thanks
Matt
On Jan 13, 3:10 pm, Matt guitarroman...@gmail.com wrote:
Hi TJ, thanks for the reply - that does sound about right for what I
want, congrats!
I tried this code:
document.observe(dom:loaded, function() {
var pageBox = $('editProducts').select('div.test');
Effect.SlideDown($(pageBox)); return false;
});
the 'editProducts' part is the bit that needs to be dynamic,
basically, but for now I'm trying to test it using hardcoded
variables. The #editProducts div/tab definitely contains a div with a
class 'test' but it doesn't run the effect when I display it. Is my
syntax wrong?
On Jan 13, 1:48 pm, T.J. Crowder t...@crowdersoftware.com wrote:
Hi,
Would the dom:loaded event[1] provide the trigger you're looking for?
Or am I missing the point, as seems likely. :-) If the real issue is
identifying the correct div or something, it depends on how the tabs
are being done, but you should be able to figure out which tab is
visible and then find the appropriate error box (perhaps by
classname by using Element#select[2] on the tab's element).
Apologies if I've completely misunderstood and told you things you
already know. :-)
[1]http://prototypejs.org/api/document/observe
[2]http://prototypejs.org/api/element/select
HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Jan 13, 11:28 am, Matt guitarroman...@gmail.com wrote:
Hi everyone.
I'm producing an admin control panel script in PHP. It uses our
favourite JS library to produce a tabbed interface. I have a div used
for response text which displays to the user the result of their
actions, eg, an error (price must be a number) or success (product
was added!).
I want that box to fade in (or some other highlighting effect) on page
load. The problem is, I have 5 of the boxes positioned, one for each
tab of the interface (depending on what the user's doing at the time).
How can I run a custom pageload function so that when the page
refreshes, it applies a fade in effect to a specific div? Ideally I'd
have a function like:
function loadBox(boxID)
{
Effect.SlideDown($(boxID)); return false;
}
and then call it like loadBox(addProductResponse) on the relevant
tab area. Does this make sense? How can I do it?!
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
[Proto-Scripty] Stoping observing
Afternoon Guys / Gals ..
I'm having a slight headache with stop observing
i'll try to explain my code ...
upon click of an element (in this case a form submit) my javascript
goes through some calculations and if needed calls a function to
create an error message .. this function creates a fixed position div
ontop of the page with the error message inside it.
Now doing all this is fine but i need an
Event.observe(document,'click', function() {
removeTheElementIJustAdded();
}
on the end of it .
this also works well and fine BUT !! do i need to stop observing
the document click else it will try to call that function every
time?
P.S i cannot stop all click observers because i have more on the page
that i need to listen to
All i want to do is simple .. create the div (done) and watch for a
click event on the entire document that removes it
but it seems to be a bit headachy for me for some reason.!!! - i think
its due to me not wanting to have multiple Event.observe;s created!!
Regards
Alex
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Stoping observing
Since your function is creating the div, you can put a conditional in
it to check for the existence of the div before attempting to add it.
Event.observe(document,'click', function() {
if($('divYouJustAdded'){
removeTheElementIJustAdded();
} else {
addTheElement();
}
}
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: reserved words for prototype and/or scriptaculous?
Geoff,
'afraid I'm not able to follow all you've written but could you just
explain what you mean by avoiding inline event handlers?
input type=button name=send disabled=disabled value=Send
onClick=getData(this.form)
Would above have to be changed/replaced?
An inline event handler means you're putting scripts in html elements
instead of separating them out, which is almost always preferred. So,
you can keep the html as (with an added id attribute):
input type=button name=send id=send disabled=disabled
value=Send
/
and add a script tag to the bottom of you're page:
document.observe(dom:loaded, function () {
if ($(send)) {
$(send).observe(click, function (evt) {
evt.stop();
getData(evt.element().form);
});
}
});
Or something like that. So observe the DOM loaded event, and then
observe clicks on the element.
Thanks,
Nathan
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Stoping observing
There's probably a correct event model way to do this, but, in the meantime, how about setting the 'removeErrorElement' equal to an empty function? --~--~-~--~~~---~--~~ 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 -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Stoping observing
I scrapped the idea and made it dissapear after a certain time .. was to much a headache !! - Original Message - From: bflanagan flanag...@gsicommerce.com To: Prototype script.aculo.us prototype-scriptaculous@googlegroups.com Sent: Thursday, January 15, 2009 2:38 PM Subject: [Proto-Scripty] Re: Stoping observing There's probably a correct event model way to do this, but, in the meantime, how about setting the 'removeErrorElement' equal to an empty function? --~--~-~--~~~---~--~~ 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 -~--~~~~--~~--~--~---
[Proto-Scripty] Re: asynchronous file upload
If you can't utilize a Flash solution, the only other way is an IFRAME. i had a need for this too, and spent a long time developing quite an elaborate Prototype-based JS class for the client side, and a PHP handler on the server side. If you're interested, let me know and i'll be happy to share (i'll have to work on more detailed docs though). Maybe it'll be useful, maybe not. -joe t. On Jan 14, 10:58 am, jason maina jason.ma...@gmail.com wrote: Hi all, Cutting to the chase, how do I do an asynchronous file upload, been googling all day with nothing really positive, may be been looking in all the wrong places. Assistance will be Kind regards Jason --~--~-~--~~~---~--~~ 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 -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Best way to apply an effect on page load?
TJ,
Just to confuse issues slightly, wouldn’t it be better to use #map
instead of #each?
Edd
P.S., I haven’t tested, so #map may not work.
If you know there will only be one and don't mind if the effect
applies to all of them if (for whatever reason) there's more than one,
Enumerable#each makes for a concise bit of code:
document.observe(dom:loaded, function() {
$('editProducts').select('div.test').each(Effect.SlideDown);
});
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: asynchronous file upload
Thanks joe, I wouldn't mind getting my hands on your code work, currently trying to understand SWFUpload flash/javascript. Dont worry to much about the documentation i will ask where things get to hit the rocks. Kind regards Jason On Thu, Jan 15, 2009 at 5:26 PM, joe t. thooke...@gmail.com wrote: If you can't utilize a Flash solution, the only other way is an IFRAME. i had a need for this too, and spent a long time developing quite an elaborate Prototype-based JS class for the client side, and a PHP handler on the server side. If you're interested, let me know and i'll be happy to share (i'll have to work on more detailed docs though). Maybe it'll be useful, maybe not. -joe t. On Jan 14, 10:58 am, jason maina jason.ma...@gmail.com wrote: Hi all, Cutting to the chase, how do I do an asynchronous file upload, been googling all day with nothing really positive, may be been looking in all the wrong places. Assistance will be Kind regards Jason --~--~-~--~~~---~--~~ 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 -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Stoping observing
Hi Alex,
Apologies if I'm missing the point, but can't you use
document.stopObserving[1]?
[1] http://prototypejs.org/api/document/stopObserving
E.g.:
* * * *
function showErrorDiv(msg) {
var div = new Element('div', {
'id':'errDiv',
'class': 'error'
});
div.update(msg);
document.body.appendChild(div);
Element.observe.defer(document, 'click', removeErrDiv);
}
function removeErrDiv() {
var div = $('errDiv');
if (div) {
div.remove();
}
document.stopObserving('click', removeErrDiv);
}
* * * *
Or if you really need it to be a closure and not use a specific ID:
* * * *
function showErrorDiv(msg) {
var div = new Element('div', {
'class': 'error'
});
div.update(msg);
document.body.appendChild(div);
Element.observe.defer(document, 'click', function(){
try {
div.remove();
} catch (e) {}
document.stopObserving('click', arguments.callee);
});
}
* * * *
The defer is there in my case because I was using a click event to
trigger showErrorDiv, and of course because of bubbling that same
click eventually got given to the document and removed the div right
away -- deferring it lets me not worry about that. (I could have just
stopped it in my click handler on my test button; either works.)
FWIW,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Jan 15, 2:11 pm, Jeztah webmas...@thecarmarketplace.com wrote:
Afternoon Guys / Gals ..
I'm having a slight headache with stop observing
i'll try to explain my code ...
upon click of an element (in this case a form submit) my javascript
goes through some calculations and if needed calls a function to
create an error message .. this function creates a fixed position div
ontop of the page with the error message inside it.
Now doing all this is fine but i need an
Event.observe(document,'click', function() {
removeTheElementIJustAdded();}
on the end of it .
this also works well and fine BUT !! do i need to stop observing
the document click else it will try to call that function every
time?
P.S i cannot stop all click observers because i have more on the page
that i need to listen to
All i want to do is simple .. create the div (done) and watch for a
click event on the entire document that removes it
but it seems to be a bit headachy for me for some reason.!!! - i think
its due to me not wanting to have multiple Event.observe;s created!!
Regards
Alex
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Best way to apply an effect on page load?
Thanks TJ, think I get it now!
One question - since I do have multiple divs with a class of 'test',
it might just be easier to make them all do the same effect at once
(the user will only see one at a time anyway due to the tabs and I
can't figure out how to make the script aware of which one's current -
this value's passed in the URL so it could be admin.php#addProduct or
admin.php#addRange etc).
If I was to use this code:
document.observe(dom:loaded, function() {
$$(div.test').each(Effect.SlideDown);
});
This applies it to all the div.tests - fine. But how can I add effect
options? I tried this and it didn't work:
document.observe(dom:loaded, function() {
$$('#editProducts div.test').each(Effect.Fade({ duration: 3.0, from:
0, to: 1 });
});
Thanks
Matt
On Jan 15, 1:38 pm, T.J. Crowder t...@crowdersoftware.com wrote:
Hi Matt,
Yes, *slightly*: Element#select() and $$() both return an array of
matching (extended) elements. So you need to index into it.
If you know there will only be one and don't mind if the effect
applies to all of them if (for whatever reason) there's more than one,
Enumerable#each makes for a concise bit of code:
document.observe(dom:loaded, function() {
$('editProducts').select('div.test').each(Effect.SlideDown);
});
Or you can combine the $() and select() using descendant selectors
with $$():
document.observe(dom:loaded, function() {
$$('#editProducts div.test').each(Effect.SlideDown);
});
(I haven't compared the performance differences between those.)
Alternately, if you really only want to do it once even if there are
multiple matches:
document.observe(dom:loaded, function() {
var pageBox = $('editProducts').select('div.test')[0];
// or var pageBox = $$('#editProducts div.test')[0];
if (pageBox) {
Effect.SlideDown(pageBox);
}
});
Side notes:
* You don't need to return false from dom:loaded handlers.
* You don't have to extend elements returned by $$() or Element#select
() by passing them through $() -- that's already been done for you.
* kangax tells me dom:loaded is unreliable in its current
implementation on IE. (I haven't seen a problem, but he knows this
stuff better than I do.) I haven't had a chance to search lighthouse
yet to find out the whens/wherefores of that. I believe 1.6.0.4 is
meant to address it.
HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Jan 14, 5:07 pm, Matt guitarroman...@gmail.com wrote:
After some tests, I can see that my code above isn't selecting the
element properly - am I using select() wrong?
Thanks
Matt
On Jan 13, 3:10 pm, Matt guitarroman...@gmail.com wrote:
Hi TJ, thanks for the reply - that does sound about right for what I
want, congrats!
I tried this code:
document.observe(dom:loaded, function() {
var pageBox = $('editProducts').select('div.test');
Effect.SlideDown($(pageBox)); return false;
});
the 'editProducts' part is the bit that needs to be dynamic,
basically, but for now I'm trying to test it using hardcoded
variables. The #editProducts div/tab definitely contains a div with a
class 'test' but it doesn't run the effect when I display it. Is my
syntax wrong?
On Jan 13, 1:48 pm, T.J. Crowder t...@crowdersoftware.com wrote:
Hi,
Would the dom:loaded event[1] provide the trigger you're looking for?
Or am I missing the point, as seems likely. :-) If the real issue is
identifying the correct div or something, it depends on how the tabs
are being done, but you should be able to figure out which tab is
visible and then find the appropriate error box (perhaps by
classname by using Element#select[2] on the tab's element).
Apologies if I've completely misunderstood and told you things you
already know. :-)
[1]http://prototypejs.org/api/document/observe
[2]http://prototypejs.org/api/element/select
HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Jan 13, 11:28 am, Matt guitarroman...@gmail.com wrote:
Hi everyone.
I'm producing an admin control panel script in PHP. It uses our
favourite JS library to produce a tabbed interface. I have a div used
for response text which displays to the user the result of their
actions, eg, an error (price must be a number) or success (product
was added!).
I want that box to fade in (or some other highlighting effect) on page
load. The problem is, I have 5 of the boxes positioned, one for each
tab of the interface (depending on what the user's doing at the time).
How can I run a custom pageload function so that when the page
refreshes, it applies a fade in effect to a specific div? Ideally I'd
have a function like:
function loadBox(boxID)
{
Effect.SlideDown($(boxID)); return false;
}
[Proto-Scripty] Re: Stoping observing
Thanks TJ i didnt think about it like that, the second way would work ...
its oky now as i just mke it fade away after 10 seonds or something
Thanks again
Alex
- Original Message -
From: T.J. Crowder t...@crowdersoftware.com
To: Prototype script.aculo.us prototype-scriptaculous@googlegroups.com
Sent: Thursday, January 15, 2009 4:26 PM
Subject: [Proto-Scripty] Re: Stoping observing
Hi Alex,
Apologies if I'm missing the point, but can't you use
document.stopObserving[1]?
[1] http://prototypejs.org/api/document/stopObserving
E.g.:
* * * *
function showErrorDiv(msg) {
var div = new Element('div', {
'id':'errDiv',
'class': 'error'
});
div.update(msg);
document.body.appendChild(div);
Element.observe.defer(document, 'click', removeErrDiv);
}
function removeErrDiv() {
var div = $('errDiv');
if (div) {
div.remove();
}
document.stopObserving('click', removeErrDiv);
}
* * * *
Or if you really need it to be a closure and not use a specific ID:
* * * *
function showErrorDiv(msg) {
var div = new Element('div', {
'class': 'error'
});
div.update(msg);
document.body.appendChild(div);
Element.observe.defer(document, 'click', function(){
try {
div.remove();
} catch (e) {}
document.stopObserving('click', arguments.callee);
});
}
* * * *
The defer is there in my case because I was using a click event to
trigger showErrorDiv, and of course because of bubbling that same
click eventually got given to the document and removed the div right
away -- deferring it lets me not worry about that. (I could have just
stopped it in my click handler on my test button; either works.)
FWIW,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Jan 15, 2:11 pm, Jeztah webmas...@thecarmarketplace.com wrote:
Afternoon Guys / Gals ..
I'm having a slight headache with stop observing
i'll try to explain my code ...
upon click of an element (in this case a form submit) my javascript
goes through some calculations and if needed calls a function to
create an error message .. this function creates a fixed position div
ontop of the page with the error message inside it.
Now doing all this is fine but i need an
Event.observe(document,'click', function() {
removeTheElementIJustAdded();}
on the end of it .
this also works well and fine BUT !! do i need to stop observing
the document click else it will try to call that function every
time?
P.S i cannot stop all click observers because i have more on the page
that i need to listen to
All i want to do is simple .. create the div (done) and watch for a
click event on the entire document that removes it
but it seems to be a bit headachy for me for some reason.!!! - i think
its due to me not wanting to have multiple Event.observe;s created!!
Regards
Alex
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Best way to apply an effect on page load?
if you want to work out whats currently selected you can add a click event
to the tab headings and store the value in a hidden field somewhere .. then
you can allways access it whenever you need to
Regards ALex
- Original Message -
From: Matt guitarroman...@gmail.com
To: Prototype script.aculo.us prototype-scriptaculous@googlegroups.com
Sent: Thursday, January 15, 2009 5:11 PM
Subject: [Proto-Scripty] Re: Best way to apply an effect on page load?
Thanks TJ, think I get it now!
One question - since I do have multiple divs with a class of 'test',
it might just be easier to make them all do the same effect at once
(the user will only see one at a time anyway due to the tabs and I
can't figure out how to make the script aware of which one's current -
this value's passed in the URL so it could be admin.php#addProduct or
admin.php#addRange etc).
If I was to use this code:
document.observe(dom:loaded, function() {
$$(div.test').each(Effect.SlideDown);
});
This applies it to all the div.tests - fine. But how can I add effect
options? I tried this and it didn't work:
document.observe(dom:loaded, function() {
$$('#editProducts div.test').each(Effect.Fade({ duration: 3.0, from:
0, to: 1 });
});
Thanks
Matt
On Jan 15, 1:38 pm, T.J. Crowder t...@crowdersoftware.com wrote:
Hi Matt,
Yes, *slightly*: Element#select() and $$() both return an array of
matching (extended) elements. So you need to index into it.
If you know there will only be one and don't mind if the effect
applies to all of them if (for whatever reason) there's more than one,
Enumerable#each makes for a concise bit of code:
document.observe(dom:loaded, function() {
$('editProducts').select('div.test').each(Effect.SlideDown);
});
Or you can combine the $() and select() using descendant selectors
with $$():
document.observe(dom:loaded, function() {
$$('#editProducts div.test').each(Effect.SlideDown);
});
(I haven't compared the performance differences between those.)
Alternately, if you really only want to do it once even if there are
multiple matches:
document.observe(dom:loaded, function() {
var pageBox = $('editProducts').select('div.test')[0];
// or var pageBox = $$('#editProducts div.test')[0];
if (pageBox) {
Effect.SlideDown(pageBox);
}
});
Side notes:
* You don't need to return false from dom:loaded handlers.
* You don't have to extend elements returned by $$() or Element#select
() by passing them through $() -- that's already been done for you.
* kangax tells me dom:loaded is unreliable in its current
implementation on IE. (I haven't seen a problem, but he knows this
stuff better than I do.) I haven't had a chance to search lighthouse
yet to find out the whens/wherefores of that. I believe 1.6.0.4 is
meant to address it.
HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Jan 14, 5:07 pm, Matt guitarroman...@gmail.com wrote:
After some tests, I can see that my code above isn't selecting the
element properly - am I using select() wrong?
Thanks
Matt
On Jan 13, 3:10 pm, Matt guitarroman...@gmail.com wrote:
Hi TJ, thanks for the reply - that does sound about right for what I
want, congrats!
I tried this code:
document.observe(dom:loaded, function() {
var pageBox = $('editProducts').select('div.test');
Effect.SlideDown($(pageBox)); return false;
});
the 'editProducts' part is the bit that needs to be dynamic,
basically, but for now I'm trying to test it using hardcoded
variables. The #editProducts div/tab definitely contains a div with a
class 'test' but it doesn't run the effect when I display it. Is my
syntax wrong?
On Jan 13, 1:48 pm, T.J. Crowder t...@crowdersoftware.com wrote:
Hi,
Would the dom:loaded event[1] provide the trigger you're looking
for?
Or am I missing the point, as seems likely. :-) If the real issue is
identifying the correct div or something, it depends on how the tabs
are being done, but you should be able to figure out which tab is
visible and then find the appropriate error box (perhaps by
classname by using Element#select[2] on the tab's element).
Apologies if I've completely misunderstood and told you things you
already know. :-)
[1]http://prototypejs.org/api/document/observe
[2]http://prototypejs.org/api/element/select
HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Jan 13, 11:28 am, Matt guitarroman...@gmail.com wrote:
Hi everyone.
I'm producing an admin control panel script in PHP. It uses our
favourite JS library to produce a tabbed interface. I have a div
used
for response text which displays to the user the result of their
actions, eg, an error (price must be a number) or success
(product
was added!).
I want that box to fade in (or
[Proto-Scripty] Re: Best way to apply an effect on page load?
Hi Edd,
Just to confuse issues slightly, wouldn’t it be better to use #map
instead of #each?
Why? He isn't using the return value, so no need to create the return
array.
One concern in both cases, though, is whether Effect.SlideDown will be
bothered by the extra parameter provided by both #each and #map's
calls to the iterator. According to the scripty docs, it expects the
element and an optional options object, whereas #each and #map will
pass it the element and the element's index in the array. Oops. -
grin-
So perhaps better to replace
.each(Effect.SlideDown);
...in the various examples with something more expicit:
.each(function(elm) {
Effect.SlideDown(elm);
});
...or something like that.
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Jan 15, 3:19 pm, redheat ecouch...@googlemail.com wrote:
TJ,
Just to confuse issues slightly, wouldn’t it be better to use #map
instead of #each?
Edd
P.S., I haven’t tested, so #map may not work.
If you know there will only be one and don't mind if the effect
applies to all of them if (for whatever reason) there's more than one,
Enumerable#each makes for a concise bit of code:
document.observe(dom:loaded, function() {
$('editProducts').select('div.test').each(Effect.SlideDown);
});
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
[Proto-Scripty] Protosafe??
Hi, I have been trying to find a way of making prototype play nicely with mootools. There seems to be a perfect solution in protosafe, but all the links to it seem to have gone dead. Does anybody know where I can get it, have a copy they can send me or know of any alternatives. Cheers Chris --~--~-~--~~~---~--~~ 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 -~--~~~~--~~--~--~---
[Proto-Scripty] Re: reserved words for prototype and/or scriptaculous?
Thanks Nathan - will work on that.
Cheers
Geoff
On Jan 15, 2:29 pm, nlloyds nllo...@gmail.com wrote:
Geoff,
'afraid I'm not able to follow all you've written but could you just
explain what you mean by avoiding inline event handlers?
input type=button name=send disabled=disabled value=Send
onClick=getData(this.form)
Would above have to be changed/replaced?
An inline event handler means you're putting scripts in html elements
instead of separating them out, which is almost always preferred. So,
you can keep the html as (with an added id attribute):
input type=button name=send id=send disabled=disabled
value=Send
/
and add a script tag to the bottom of you're page:
document.observe(dom:loaded, function () {
if ($(send)) {
$(send).observe(click, function (evt) {
evt.stop();
getData(evt.element().form);
});
}
});
Or something like that. So observe the DOM loaded event, and then
observe clicks on the element.
Thanks,
Nathan
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: reserved words for prototype and/or scriptaculous?
Nathan,
I am not getting this yet!
Say I have following simple form - what is
getData(evt.element().myform);
sending to getData()?
Cheers,
Geoff
form name=myform1 action=#
input type=text name=info
input type=button name=send id=send value=enter
/form
script
document.observe(dom:loaded, function () {
if ($(send)) {
$(send).observe(click, function (evt) {
evt.stop();
getData(evt.element().myform);
});
}
});
/script
On Jan 15, 2:29 pm, nlloyds nllo...@gmail.com wrote:
Geoff,
'afraid I'm not able to follow all you've written but could you just
explain what you mean by avoiding inline event handlers?
input type=button name=send disabled=disabled value=Send
onClick=getData(this.form)
Would above have to be changed/replaced?
An inline event handler means you're putting scripts in html elements
instead of separating them out, which is almost always preferred. So,
you can keep the html as (with an added id attribute):
input type=button name=send id=send disabled=disabled
value=Send
/
and add a script tag to the bottom of you're page:
document.observe(dom:loaded, function () {
if ($(send)) {
$(send).observe(click, function (evt) {
evt.stop();
getData(evt.element().form);
});
}
});
Or something like that. So observe the DOM loaded event, and then
observe clicks on the element.
Thanks,
Nathan
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Memory Leaks in IE7, Prototype or Prototip2?
Wanted to update this thread, I just took some screen captures running 9 page refreshes on the Prototip2 demo page, showing an increase in memory usage with every page refresh. See image: http://farm4.static.flickr.com/3370/3198951197_55e5869fbc_o.png --~--~-~--~~~---~--~~ 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 -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Memory Leaks in IE7, Prototype or Prototip2?
Hey kangax, I just cloned prototype's git source, ran the tests to generate the HTML test files, then edited the _destroyCache() method to include the following: for (var element in Element.cache) Element.cache[element] = null; (it already includes code to stopObserving all events) I then loaded up dom_test.html in IE7, with process explorer running, and refreshed the page 10 times. Initially the memory went up after a refresh (the first 2 refreshes, memory increased) but then every refresh after that created no change whatsoever in memory. See below image (the spikes in the CPU Usage are page loads). You can see that over time, the memory doesn't even dip down when the page is being redrawn. Compare that to the previously linked memory usage charts on the Prototip demo page. http://sandbox.enjoybeing.net/prototype-dom-test-memory-ie7.jpg Thanks for your help -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 prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] document.observe etc for multiple forms?
Hello,
I have
document.observe(dom:loaded, function () {
if ($(send1)) {
$(send1).observe(click, function (evt) {
evt.stop();
getData(evt.element().form);
});
}
});
in which the send1 is the id of the button in a form
input type=button id=send1 value=Send
If I have multiple forms how do I create general code to cope with say
20 forms?
The following loop idea does not work
for (var count=1;count21;count++) {
document.observe(dom:loaded, function () {
if ($(send + count)) {
$(send + count).observe(click, function (evt) {
evt.stop();
getData(evt.element().form);
});
}
});
}
Cheers,
Geoff
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: document.observe etc for multiple forms?
2009/1/15 geoffcox g...@freeuk.com:
Hello,
I have
document.observe(dom:loaded, function () {
if ($(send1)) {
$(send1).observe(click, function (evt) {
evt.stop();
getData(evt.element().form);
});
}
});
in which the send1 is the id of the button in a form
input type=button id=send1 value=Send
If I have multiple forms how do I create general code to cope with say
20 forms?
The following loop idea does not work
for (var count=1;count21;count++) {
document.observe(dom:loaded, function () {
if ($(send + count)) {
$(send + count).observe(click, function (evt) {
evt.stop();
getData(evt.element().form);
});
}
});
}
Cheers,
Geoff
You could add the same class to each element and ...
$$('.classname').invoke('observe', 'click', function(ev) { ... });
--
-
Richard Quadling
Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498r=213474731
Standing on the shoulders of some very clever giants!
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: document.observe etc for multiple forms?
2009/1/16 geoffcox g...@freeuk.com:
You could add the same class to each element and ...
$$('.classname').invoke('observe', 'click', function(ev) { ... });
Many thanks Chris - that's done the trick!
Chris?
Cheers,
Geoff
--
-
Richard Quadling
Zend Certified Engineer :http://zend.com/zce.php?c=ZEND002498r=213474731
Standing on the shoulders of some very clever giants!- Hide quoted text -
- Show quoted text -
--
-
Richard Quadling
Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498r=213474731
Standing on the shoulders of some very clever giants!
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Memory Leaks in IE7, Prototype or Prototip2?
Well unfortunately there is a 1MB leak in IE7 when you run the
event_test on the latest version of prototype. Since there is
significant changes in this version compared to the publicly available
1.6.0.3 version, I am guessing you guys are getting close to releasing
1.6.0.4?
FWIW, I took the checked out version (still labeled 1.6.0.3) and made
the following changes to _destroyCache:
function _destroyCache() {
-for (var i = 0, length = CACHE.length; i length; i++)
+for (var i = 0, length = CACHE.length; i length; i++){
Event.stopObserving(CACHE[i]);
+ CACHE[i] = null;
+}
+
+for (var element in Element.cache) Element.cache[element] = null;
}
And a re-ran my tests and guess what? No memory leak. Wonderful except
that it looks like a lot of the Event stuff has been re-written so
applying these changes to the publicly available 1.6.0.3 version is
not completely straight-forward. I am still working on patching mine
but should have an update tomorrow by midday.
-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
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
