Anyone else notice odd behaviors when using effects from prototype.js
(current version) like Effect.Squish, where child elements of the
Squished elements don''t have the effects applied to them?
<a id="squishlink" href="#" onclick="new
Effect.Squish($(''squish''));
new Effect.Squish($(''squishlink'')); return
false;">squish!</a><br />
<div id="squish">
this will get squished properly
<p>but this wont</p>
<ol>
<li>children of a div that will be squished</li>
<li>these elements don''t get squished, but their
containing
div does</li>
<li>this results in a lot of repositioning elements as the
child element does not get scaled the same</li>
</ol>
</div>
Basically Squish does not apply to any child elements, but probably
should as the decreasing size of the containing div make for a lot of
repositioning as the still unSquished full sized children are
squeezed into an ever smaller parent element. If you paste the above
snippet into a prototype.js enabled page you''ll see what I mean.
Is this worthy of a bug? It seems it would be nicer if we selected
all child elements to apply the effect to as well so the Squish makes
everything get squished to the same proportions rather than the child
elements getting all big and skinny and pushing everything else around.
I''ve been trying to get something working that would recurse through
all the child nodes and apply Effect.Squish but I''m getting the error:
Error: this.element.style has no properties
Source File: http://xxxx:3000/javascripts/prototype.js
Line: 635
I''m pretty new to javascript, so I think I''m going about it
the right
way. Heres the code for Effect.Squish starting at line 681 of
prototype.js:
Effect.Squish = Class.create();
Effect.Squish.prototype = {
initialize: function(element) {
this.element = $(element);
// new code to select and recurse through childNodes
for (var x=0; x<this.element.childNodes.length; x++) {
new Effect.Squish(this.element.childNodes[x]);
}
// end new code
new Effect.Scale(this.element, 1, { complete:
this.hide.bind(this) } );
},
hide: function() {
this.element.style.display = ''none'';
}
}
It worked before I added the new code, so I think I''m not
understanding something here... Nodes are different from Elements? It
seems that the element does not contain childNodes? Or is it
something else entirely?
if i try a different attack, like:
Effect.Squish.prototype = {
initialize: function(element) {
this.element = $(element);
// new code to select and recurse through childNodes
if (this.element.firstChild) new Effect.Squish
(this.element.firstChild);
if (this.element.nextSibling) new Effect.Squish
(this.element.nextSibling)
// end new code
new Effect.Scale(this.element, 1, { complete:
this.hide.bind(this) } );
},
hide: function() {
this.element.style.display = ''none'';
}
}
I get the error
Error: this.element.style has no properties
Source File: http://xxxx:3000/javascripts/prototype.js
Line: 635
So it seems I''m selecting the nodes correctly, but they''re
Nodes not
Elements? and don''t have style properties to be altered.
Any other ideas?
On May 4, 2005, at 1:16 PM, Craig Beck wrote:
> Anyone else notice odd behaviors when using effects from
> prototype.js (current version) like Effect.Squish, where child
> elements of the Squished elements don''t have the effects applied
to
> them?
>
> <a id="squishlink" href="#" onclick="new
Effect.Squish($
> (''squish'')); new
Effect.Squish($(''squishlink'')); return
> false;">squish!</a><br />
> <div id="squish">
> this will get squished properly
> <p>but this wont</p>
> <ol>
> <li>children of a div that will be squished</li>
> <li>these elements don''t get squished, but their
containing
> div does</li>
> <li>this results in a lot of repositioning elements as the
> child element does not get scaled the same</li>
> </ol>
> </div>
>
> Basically Squish does not apply to any child elements, but probably
> should as the decreasing size of the containing div make for a lot
> of repositioning as the still unSquished full sized children are
> squeezed into an ever smaller parent element. If you paste the
> above snippet into a prototype.js enabled page you''ll see what I
mean.
>
> Is this worthy of a bug? It seems it would be nicer if we selected
> all child elements to apply the effect to as well so the Squish
> makes everything get squished to the same proportions rather than
> the child elements getting all big and skinny and pushing
> everything else around.
> _______________________________________________
> Rails mailing list
> Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails
>
_______________________________________________
Rails mailing list
Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails
Not every node is an element .. and not every node or element has the style
attribute... what you should do is check to see if the element has style
defined...
so add this to your code:
*// new code to select and recurse through childNodes*
* for (var x=0; x<this.element.childNodes.length; x++) {*
* var el = this.element.childNodes[x];
if(el.nodeName != ''#text'' && el.style) {
new Effect.Squish(el);
}
*
* }*
* // end new code*
my syntax might be a little off, but i''m sure you can debug that and
figure
out the rest. I''m just too busy at this second to test it out. But each
node
has a nodeName. if its a text node, then you cant apply the squish to it.
On 5/4/05, Craig Beck <craigbeck-sUNYKzuJffo33s2pWanAEQ@public.gmane.org>
wrote:>
> I''ve been trying to get something working that would recurse
through all
> the child nodes and apply Effect.Squish but I''m getting the error:
> Error: this.element.style has no properties Source File:
> http://xxxx:3000/javascripts/prototype.js
> Line: 635
>
> I''m pretty new to javascript, so I think I''m going about
it the right way.
> Heres the code for Effect.Squish starting at line 681 of prototype.js:
>
> Effect.Squish = Class.create();
> Effect.Squish.prototype = {
> initialize: function(element) {
> this.element = $(element);
> *// new code to select and recurse through childNodes*
> * for (var x=0; x<this.element.childNodes.length; x++) {*
> * new Effect.Squish(this.element.childNodes[x]);*
> * }*
> * // end new code*
> new Effect.Scale(this.element, 1, { complete: this.hide.bind(this) } );
> },
> hide: function() {
> this.element.style.display = ''none'';
> }
> }
>
> It worked before I added the new code, so I think I''m not
understanding
> something here... Nodes are different from Elements? It seems that the
> element does not contain childNodes? Or is it something else entirely?
>
> if i try a different attack, like:
>
> Effect.Squish.prototype = {
> initialize: function(element) {
> this.element = $(element);
> // new code to select and recurse through childNodes
> if (this.element.firstChild) new Effect.Squish(this.element.firstChild);
> if (this.element.nextSibling) new Effect.Squish(this.element.nextSibling)
> // end new code
> new Effect.Scale(this.element, 1, { complete: this.hide.bind(this) } );
> },
> hide: function() {
> this.element.style.display = ''none'';
> }
> }
>
> I get the error
>
> Error: this.element.style has no properties
> Source File: http://xxxx:3000/javascripts/prototype.js
> Line: 635
>
> So it seems I''m selecting the nodes correctly, but
they''re Nodes not
> Elements? and don''t have style properties to be altered.
>
> Any other ideas?
>
>
> On May 4, 2005, at 1:16 PM, Craig Beck wrote:
>
> Anyone else notice odd behaviors when using effects from
prototype.js(current version) like
> Effect.Squish, where child elements of the Squished elements don''t
have
> the effects applied to them?
>
> <a id="squishlink" href="#" onclick="new
Effect.Squish($(''squish'')); new
> Effect.Squish($(''squishlink'')); return
false;">squish!</a><br />
> <div id="squish">
> this will get squished properly
> <p>but this wont</p>
> <ol>
> <li>children of a div that will be squished</li>
> <li>these elements don''t get squished, but their containing
div does</li>
> <li>this results in a lot of repositioning elements as the child
element
> does not get scaled the same</li>
> </ol>
> </div>
>
> Basically Squish does not apply to any child elements, but probably should
> as the decreasing size of the containing div make for a lot of
repositioning
> as the still unSquished full sized children are squeezed into an ever
> smaller parent element. If you paste the above snippet into a
prototype.jsenabled page you''ll see what I mean.
>
> Is this worthy of a bug? It seems it would be nicer if we selected all
> child elements to apply the effect to as well so the Squish makes
everything
> get squished to the same proportions rather than the child elements getting
> all big and skinny and pushing everything else around.
> _______________________________________________
> Rails mailing list
> Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails
>
>
>
> _______________________________________________
> Rails mailing list
> Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails
>
>
>
--
- Ramin
http://www.getintothis.com/blog
_______________________________________________
Rails mailing list
Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails
An Element is a type of node. Yes, there are lots of nodes (comments, xml processing instructings, element attributes, text, cdata, etc). I''m sure there''s good official documentation somewhere, but I use http://devguru.com/Technologies/xmldom/quickref/xmldom_intro.html a lot. On 5/4/05, Craig Beck <craigbeck-sUNYKzuJffo33s2pWanAEQ@public.gmane.org> wrote:> I''ve been trying to get something working that would recurse through all the > child nodes and apply Effect.Squish but I''m getting the error: > > Error: this.element.style has no properties > Source File: http://xxxx:3000/javascripts/prototype.js > Line: 635 > > I''m pretty new to javascript, so I think I''m going about it the right way. > Heres the code for Effect.Squish starting at line 681 of prototype.js: > > Effect.Squish = Class.create(); > Effect.Squish.prototype = { > initialize: function(element) { > this.element = $(element); > // new code to select and recurse through childNodes > for (var x=0; x<this.element.childNodes.length; x++) { > new Effect.Squish(this.element.childNodes[x]); > } > // end new code > new Effect.Scale(this.element, 1, { complete: > this.hide.bind(this) } ); > }, > hide: function() { > this.element.style.display = ''none''; > } > } > > It worked before I added the new code, so I think I''m not understanding > something here... Nodes are different from Elements? It seems that the > element does not contain childNodes? Or is it something else entirely? > > if i try a different attack, like: > > Effect.Squish.prototype = { > initialize: function(element) { > this.element = $(element); > // new code to select and recurse through childNodes > if (this.element.firstChild) new > Effect.Squish(this.element.firstChild); > if (this.element.nextSibling) new > Effect.Squish(this.element.nextSibling) > // end new code > new Effect.Scale(this.element, 1, { complete: > this.hide.bind(this) } ); > }, > hide: function() { > this.element.style.display = ''none''; > } > } > > I get the error > > Error: this.element.style has no properties > Source File: http://xxxx:3000/javascripts/prototype.js > Line: 635 > > So it seems I''m selecting the nodes correctly, but they''re Nodes not > Elements? and don''t have style properties to be altered. > > Any other ideas? > > > > On May 4, 2005, at 1:16 PM, Craig Beck wrote: > > Anyone else notice odd behaviors when using effects from prototype.js > (current version) like Effect.Squish, where child elements of the Squished > elements don''t have the effects applied to them? > > <a id="squishlink" href="#" onclick="new Effect.Squish($(''squish'')); new > Effect.Squish($(''squishlink'')); return false;">squish!</a><br /> > <div id="squish"> > this will get squished properly > <p>but this wont</p> > <ol> > <li>children of a div that will be squished</li> > <li>these elements don''t get squished, but their containing div > does</li> > <li>this results in a lot of repositioning elements as the child > element does not get scaled the same</li> > </ol> > </div> > > Basically Squish does not apply to any child elements, but probably should > as the decreasing size of the containing div make for a lot of repositioning > as the still unSquished full sized children are squeezed into an ever > smaller parent element. If you paste the above snippet into a prototype.js > enabled page you''ll see what I mean. > > Is this worthy of a bug? It seems it would be nicer if we selected all child > elements to apply the effect to as well so the Squish makes everything get > squished to the same proportions rather than the child elements getting all > big and skinny and pushing everything else around. > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails > > > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails > > >-- rick http://techno-weenie.net
Yeah, i guess i had my terminology all wrong.. element is a node, but text nodes dont have style attributes nonetheless. you still need to check for those nodes that the Squish effect cant be applied to. On 5/4/05, Rick Olson <technoweenie-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > An Element is a type of node. Yes, there are lots of nodes (comments, > xml processing instructings, element attributes, text, cdata, etc). > I''m sure there''s good official documentation somewhere, but I use > http://devguru.com/Technologies/xmldom/quickref/xmldom_intro.html a > lot. > > On 5/4/05, Craig Beck <craigbeck-sUNYKzuJffo33s2pWanAEQ@public.gmane.org> wrote: > > I''ve been trying to get something working that would recurse through all > the > > child nodes and apply Effect.Squish but I''m getting the error: > > > > Error: this.element.style has no properties > > Source File: http://xxxx:3000/javascripts/prototype.js > > Line: 635 > > > > I''m pretty new to javascript, so I think I''m going about it the right > way. > > Heres the code for Effect.Squish starting at line 681 of prototype.js: > > > > Effect.Squish = Class.create(); > > Effect.Squish.prototype = { > > initialize: function(element) { > > this.element = $(element); > > // new code to select and recurse through childNodes > > for (var x=0; x<this.element.childNodes.length; x++) { > > new Effect.Squish(this.element.childNodes[x]); > > } > > // end new code > > new Effect.Scale(this.element, 1, { complete: > > this.hide.bind(this) } ); > > }, > > hide: function() { > > this.element.style.display = ''none''; > > } > > } > > > > It worked before I added the new code, so I think I''m not understanding > > something here... Nodes are different from Elements? It seems that the > > element does not contain childNodes? Or is it something else entirely? > > > > if i try a different attack, like: > > > > Effect.Squish.prototype = { > > initialize: function(element) { > > this.element = $(element); > > // new code to select and recurse through childNodes > > if (this.element.firstChild) new > > Effect.Squish(this.element.firstChild); > > if (this.element.nextSibling) new > > Effect.Squish(this.element.nextSibling) > > // end new code > > new Effect.Scale(this.element, 1, { complete: > > this.hide.bind(this) } ); > > }, > > hide: function() { > > this.element.style.display = ''none''; > > } > > } > > > > I get the error > > > > Error: this.element.style has no properties > > Source File: http://xxxx:3000/javascripts/prototype.js > > Line: 635 > > > > So it seems I''m selecting the nodes correctly, but they''re Nodes not > > Elements? and don''t have style properties to be altered. > > > > Any other ideas? > > > > > > > > On May 4, 2005, at 1:16 PM, Craig Beck wrote: > > > > Anyone else notice odd behaviors when using effects from prototype.js > > (current version) like Effect.Squish, where child elements of the > Squished > > elements don''t have the effects applied to them? > > > > <a id="squishlink" href="#" onclick="new Effect.Squish($(''squish'')); new > > Effect.Squish($(''squishlink'')); return false;">squish!</a><br /> > > <div id="squish"> > > this will get squished properly > > <p>but this wont</p> > > <ol> > > <li>children of a div that will be squished</li> > > <li>these elements don''t get squished, but their containing div > > does</li> > > <li>this results in a lot of repositioning elements as the child > > element does not get scaled the same</li> > > </ol> > > </div> > > > > Basically Squish does not apply to any child elements, but probably > should > > as the decreasing size of the containing div make for a lot of > repositioning > > as the still unSquished full sized children are squeezed into an ever > > smaller parent element. If you paste the above snippet into a > prototype.js > > enabled page you''ll see what I mean. > > > > Is this worthy of a bug? It seems it would be nicer if we selected all > child > > elements to apply the effect to as well so the Squish makes everything > get > > squished to the same proportions rather than the child elements getting > all > > big and skinny and pushing everything else around. > > _______________________________________________ > > Rails mailing list > > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > > http://lists.rubyonrails.org/mailman/listinfo/rails > > > > > > _______________________________________________ > > Rails mailing list > > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > > http://lists.rubyonrails.org/mailman/listinfo/rails > > > > > > > > -- > rick > http://techno-weenie.net > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails >-- - Ramin http://www.getintothis.com/blog _______________________________________________ Rails mailing list Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails
Hi there,
You need to use em-based font-sizes and heights/widths inside all
child elements:
<div onclick="new Effect.Squish(this)"
style="font-size:1em;">
TEST
<span style="font-size:2em;">TEST</span>
<div style="width:20em;height:20em;background-
color:red;">testing...</div>
</div>
--
Thomas
Am 04.05.2005 um 22:16 schrieb Craig Beck:
> Anyone else notice odd behaviors when using effects from
> prototype.js (current version) like Effect.Squish, where child
> elements of the Squished elements don''t have the effects applied
to
> them?
>
> <a id="squishlink" href="#" onclick="new
Effect.Squish($
> (''squish'')); new
Effect.Squish($(''squishlink'')); return
> false;">squish!</a><br />
> <div id="squish">
> this will get squished properly
> <p>but this wont</p>
> <ol>
> <li>children of a div that will be squished</li>
> <li>these elements don''t get squished, but their
containing
> div does</li>
> <li>this results in a lot of repositioning elements as the
> child element does not get scaled the same</li>
> </ol>
> </div>
>
> Basically Squish does not apply to any child elements, but probably
> should as the decreasing size of the containing div make for a lot
> of repositioning as the still unSquished full sized children are
> squeezed into an ever smaller parent element. If you paste the
> above snippet into a prototype.js enabled page you''ll see what I
mean.
>
> Is this worthy of a bug? It seems it would be nicer if we selected
> all child elements to apply the effect to as well so the Squish
> makes everything get squished to the same proportions rather than
> the child elements getting all big and skinny and pushing
> everything else around.
> _______________________________________________
> Rails mailing list
> Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails
>