Subject: prototype EventObserver on radio option elements - msg#00008

Previous Message by Date: click to view message preview

Highlight of the droppable zone

Hello everyone. I have interesting problem I want to Highlight the droppable zone, the simplest solution is: give the droppable area a hover class. But there is a problem, in this case the droppable arrea is the png image and I don't want to cover image by hover class. The best way will be transparent or half transparent hover class, but i don't know is it possible? Is it possible? I start thinkig about the problem, and maybe using effect Highlight will give a solution? I start looking on the code effect Highlight and i saw that this not gone to work because Highlight effect temporary change background image to none, then sets Highlight and after that restore backgroundimage. So is it possible to give a droppable a hover class that not cover the "context" of the droppable? Best Wishes Grzegorz Ślusarek ---------------------------------------------------- Największe akrobatyczne show świata. Chiński Cyrk Akrobatyczny z Shaanxi w Twoim mieście! Zobacz: http://klik.wp.pl/?adr=http%3A%2F%2Fadv.reklama.wp.pl%2Fas%2Fchc.html&sid=558

Next Message by Date: click to view message preview

Re: prototype EventObserver on radio option elements

Running with the idea of defining a single EventObserver for a whole group of radio elements, I came up with something like this. I'm sure this is a much more elegent way of integrating it with the existing EventObserver. My Javascript isn't that strong. I had to remove the "initialize" function from the Abstract.EventObserver and therefore mess with the existing hierarchy. <form id="myFormId"> <label><input type="radio" name="myradio" value="a" id="myradio.a">Value A</label> <label><input type="radio" name="myradio" value="b" id="myradio.b">Value B</label> </form> <script type="text/javascript"> Form.Element.RadioEventObserver = Class.create(); Form.Element.RadioEventObserver.prototype = (new Abstract.EventObserver()).extend({ initialize: function(form, name, callback) { this.elements = Form.getElements(form, 'radio', name); this.callback = callback; this.lastValue = this.getValue(); for (var i = 0; i < this.elements.length; i++) { this.registerCallback(this.elements[i]); } }, getValue: function() { for (var i = 0; i < this.elements.length; i++) { var value = Form.Element.getValue(this.elements[i]); if (value) { return value; } } }, onElementEvent: function() { var value = this.getValue(); if (this.lastValue != value) { for (var i = 0; i < this.elements.length; i++) { if (Form.Element.getValue(this.elements[i])) { this.callback(this.elements[i], value); } } this.lastValue = value; } } }); new Form.Element.RadioEventObserver( 'myFormId', 'myradio', function(element, value) { alert("radio " + element.id + ", " + element.name + ", last value: " + this.lastValue + ", value: " + value); } ); Improvements and suggestions appreciated, Thanks, Tim Tim Morrow wrote: Hi all, I just started using prototype 1.3.1. I've successfully used Form.Element.EventObserver on a select list and recently tried to add it to radio options. However, I think there is a flaw in how it works with radio options. Radio options are a little unusual in that there are multiple distinct elements, tied together by a common name, where changing one element causes a change to another element. That is, selecting a radio option causes it to become "checked" and _unchecks_ a different element. The behavior is not on a single element. It entirely possible that I missed some simple solution already hiding within the prototype library. Please enlighten me if that is so. I started by adding an EventObserver to each radio element in the same group of radio options. However, the event (which is tied to onclick) was only fired once per element. It seems that the EventObserver records the "lastValue" and only fires if it hasn't changed. For a radio element, it only changes once: when you first click on it (and it becomes checked) its value changes from "undefined" to the value of the radio option. Clicking on a different radio element unchecks the first element, but the EventObserver never sees this and this never resets "lastValue". Which means the events never fire again. Its easy to reproduce: <label><input type="radio" name="myradio" value="a" id="myradio.a">Value A</label> <label><input type="radio" name="myradio" value="b" id="myradio.b">Value B</label> <script type="text/javascript"> new Form.Element.EventObserver( 'myradio.a', function(element, value) { alert(element.id + ", " + element.name + ", last value: " + this.lastValue + ", value: " + value); } ); new Form.Element.EventObserver( 'myradio.b', function(element, value) { alert(element.id + ", " + element.name + ", last value: " + this.lastValue + ", value: " + value); } ); A simple workaround you can put in your own code is to reset the "lastValue" of all EventObservers on related radio options. But this requires you to assign each EventObserver to a variable and know about all the others. Another workaround is to modify prototype to make the Radio option events fire on "onchange", then eliminate the code that checks to see if the value has changed (of course only for elements of input type radio). The onchange will only fire when that radio option changes. This is fairly straightforward. Finally, it seems a little unwieldy to have to define multiple EventObservers for a single group of radio options. Perhaps the best solution would be to somehow define an EventObserver with a single callback for the entire set of radio elements that have the same name, fired on the onchange event of any radio option. This would simply client code greatly. Anyone have any thoughts on this? Thanks, Tim _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@xxxxxxxxxxxxxxxx http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

Previous Message by Thread: click to view message preview

Highlight of the droppable zone

Hello everyone. I have interesting problem I want to Highlight the droppable zone, the simplest solution is: give the droppable area a hover class. But there is a problem, in this case the droppable arrea is the png image and I don't want to cover image by hover class. The best way will be transparent or half transparent hover class, but i don't know is it possible? Is it possible? I start thinkig about the problem, and maybe using effect Highlight will give a solution? I start looking on the code effect Highlight and i saw that this not gone to work because Highlight effect temporary change background image to none, then sets Highlight and after that restore backgroundimage. So is it possible to give a droppable a hover class that not cover the "context" of the droppable? Best Wishes Grzegorz Ślusarek ---------------------------------------------------- Największe akrobatyczne show świata. Chiński Cyrk Akrobatyczny z Shaanxi w Twoim mieście! Zobacz: http://klik.wp.pl/?adr=http%3A%2F%2Fadv.reklama.wp.pl%2Fas%2Fchc.html&sid=558

Next Message by Thread: click to view message preview

Re: prototype EventObserver on radio option elements

Running with the idea of defining a single EventObserver for a whole group of radio elements, I came up with something like this. I'm sure this is a much more elegent way of integrating it with the existing EventObserver. My Javascript isn't that strong. I had to remove the "initialize" function from the Abstract.EventObserver and therefore mess with the existing hierarchy. <form id="myFormId"> <label><input type="radio" name="myradio" value="a" id="myradio.a">Value A</label> <label><input type="radio" name="myradio" value="b" id="myradio.b">Value B</label> </form> <script type="text/javascript"> Form.Element.RadioEventObserver = Class.create(); Form.Element.RadioEventObserver.prototype = (new Abstract.EventObserver()).extend({ initialize: function(form, name, callback) { this.elements = Form.getElements(form, 'radio', name); this.callback = callback; this.lastValue = this.getValue(); for (var i = 0; i < this.elements.length; i++) { this.registerCallback(this.elements[i]); } }, getValue: function() { for (var i = 0; i < this.elements.length; i++) { var value = Form.Element.getValue(this.elements[i]); if (value) { return value; } } }, onElementEvent: function() { var value = this.getValue(); if (this.lastValue != value) { for (var i = 0; i < this.elements.length; i++) { if (Form.Element.getValue(this.elements[i])) { this.callback(this.elements[i], value); } } this.lastValue = value; } } }); new Form.Element.RadioEventObserver( 'myFormId', 'myradio', function(element, value) { alert("radio " + element.id + ", " + element.name + ", last value: " + this.lastValue + ", value: " + value); } ); Improvements and suggestions appreciated, Thanks, Tim Tim Morrow wrote: Hi all, I just started using prototype 1.3.1. I've successfully used Form.Element.EventObserver on a select list and recently tried to add it to radio options. However, I think there is a flaw in how it works with radio options. Radio options are a little unusual in that there are multiple distinct elements, tied together by a common name, where changing one element causes a change to another element. That is, selecting a radio option causes it to become "checked" and _unchecks_ a different element. The behavior is not on a single element. It entirely possible that I missed some simple solution already hiding within the prototype library. Please enlighten me if that is so. I started by adding an EventObserver to each radio element in the same group of radio options. However, the event (which is tied to onclick) was only fired once per element. It seems that the EventObserver records the "lastValue" and only fires if it hasn't changed. For a radio element, it only changes once: when you first click on it (and it becomes checked) its value changes from "undefined" to the value of the radio option. Clicking on a different radio element unchecks the first element, but the EventObserver never sees this and this never resets "lastValue". Which means the events never fire again. Its easy to reproduce: <label><input type="radio" name="myradio" value="a" id="myradio.a">Value A</label> <label><input type="radio" name="myradio" value="b" id="myradio.b">Value B</label> <script type="text/javascript"> new Form.Element.EventObserver( 'myradio.a', function(element, value) { alert(element.id + ", " + element.name + ", last value: " + this.lastValue + ", value: " + value); } ); new Form.Element.EventObserver( 'myradio.b', function(element, value) { alert(element.id + ", " + element.name + ", last value: " + this.lastValue + ", value: " + value); } ); A simple workaround you can put in your own code is to reset the "lastValue" of all EventObservers on related radio options. But this requires you to assign each EventObserver to a variable and know about all the others. Another workaround is to modify prototype to make the Radio option events fire on "onchange", then eliminate the code that checks to see if the value has changed (of course only for elements of input type radio). The onchange will only fire when that radio option changes. This is fairly straightforward. Finally, it seems a little unwieldy to have to define multiple EventObservers for a single group of radio options. Perhaps the best solution would be to somehow define an EventObserver with a single callback for the entire set of radio elements that have the same name, fired on the onchange event of any radio option. This would simply client code greatly. Anyone have any thoughts on this? Thanks, Tim _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@xxxxxxxxxxxxxxxx http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs