[Proto-Scripty] Re: issues with getElementBySelector
Sorry for this, i've found the error the variable l is used in both
the for loop for elements and later down in the code.
On Sep 18, 4:56 pm, kangax <[EMAIL PROTECTED]> wrote:
> banry wrote:
> > I'm trying to convert some code from mootools to prototype, but I can
> > get the first ul to work but none of the others add the hover class on
> > mouseover. its got something to do with the call to
> > getElementBySelector - any help appreciated
>
> > Event.onDOMReady(function(){
>
> A prototype way would be:
> document.observe('dom:loaded', function(){
> ...
>
> });
> > alert('DOM is loaded!');
> >element = $('menu')
> >if(!element.hasClassName('disabled')) {
> >var menu = new JMenu(element)
> >document.menu = menu
>
> Why not just:
> document.menu = new JMenu(element);
>
> >};
> > });
>
> > var JMenu = Class.create(); // added pd
> >JMenu.prototype = { // added pd
>
> Overwriting prototype property is not really necessary. Class.create
> already does this for you:
>
> Class.create({
> initialize: function(){ ... },
> ...
>
> });
>
> >initialize: function(el){
> >var elements = el.getElementsBySelector('li');
>
> It's usually safer to extend element before using any prototypejs-
> specific methods. `getElementsBySelector` is also deprecated.
>
> var elements = $(el).select('li');
>
> >alert(elements.length);
> >var nested = null;
> >for (var i = 0; i < elements.length; i++) {
>
> If you're using plain `for(;;)`, then why not make it even faster by
> not calculating `length` every time:
>
> for (var i=0, l=elements.length; i ...
>
> }
> >var element = elements[i];
> > //alert(elements.length);
> >Event.observe(element, 'mouseover', function(){
> >this.addClassName('hover');
> >});
> >Event.observe(element, 'mouseout', function(){
> >this.removeClassName('hover');
> >});
>
> >//find nested UL
> >//nested = $E('ul', element);
> >nested =
> > element.getElementsBySelector('ul').first;
>
> Did you want to get a first element in colleciton?
>
> nested = element.select('ul').first();
> // or even better
> nested = element.select('ul')[0];
>
> >if (!nested) {
> >continue;
> >}
>
> >//declare width
> >var offsetWidth = 0;
>
> >//find longest child
> >for (k = 0; k < nested.childNodes.length; k++) {
> >var node = nested.childNodes[k]
> >if (node.nodeName == "LI")
>
> Would be safer to "normalize" tagName before comparison:
>
> if (node.nodeName.toLowerCase() === 'li') {
> ...
>
> }
>
> [snip the rest of the code]
>
> Hope this helps.
>
> --
> 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: issues with getElementBySelector
thanks to kangax, justin, matt and bluezehn I now have firebug and
some semi-working code.
this almost works but for some reason the Organisation menu works
fine, the second menu - System setup gets the hover for the first ul
but doesn't for the li, and the reconcilation responses menu does
nada. - any ideas my hair is getting thinner by the minute
document.observe('dom:loaded', function(){
alert('DOM is loaded!');
element = $('menu');
if (!element.hasClassName('disabled')) {
document.menu = new JMenu(element);
}
});
//var JMenu = new Class({ // removed pd
var JMenu = Class.create({ // added pd
initialize: function(el){
// var elements = $ES('li', el);
// var elements = $('menu').getElementsBySelector('li');
var elements = $(el).select('li');
//alert(elements.length);
var nested = null;
for (var i=0, l=elements.length; i=
node.offsetWidth) ? offsetWidth :
node.offsetWidth;
}
//match longest child
for (l = 0; l < nested.childNodes.length; l++) {
var node = nested.childNodes[l]
if (node.nodeName.toLowerCase == 'li') {
$(node).setStyle('width',
offsetWidth + 'px');
}
}
$(nested).setStyle('width', offsetWidth + 'px');
}
}
});
--~--~-~--~~~---~--~~
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: issues with getElementBySelector
banry wrote:
> I'm trying to convert some code from mootools to prototype, but I can
> get the first ul to work but none of the others add the hover class on
> mouseover. its got something to do with the call to
> getElementBySelector - any help appreciated
>
> Event.onDOMReady(function(){
A prototype way would be:
document.observe('dom:loaded', function(){
...
});
> alert('DOM is loaded!');
> element = $('menu')
> if(!element.hasClassName('disabled')) {
> var menu = new JMenu(element)
> document.menu = menu
Why not just:
document.menu = new JMenu(element);
> };
> });
>
>
> var JMenu = Class.create(); // added pd
> JMenu.prototype = { // added pd
Overwriting prototype property is not really necessary. Class.create
already does this for you:
Class.create({
initialize: function(){ ... },
...
});
>
> initialize: function(el){
> var elements = el.getElementsBySelector('li');
It's usually safer to extend element before using any prototypejs-
specific methods. `getElementsBySelector` is also deprecated.
var elements = $(el).select('li');
> alert(elements.length);
> var nested = null;
> for (var i = 0; i < elements.length; i++) {
If you're using plain `for(;;)`, then why not make it even faster by
not calculating `length` every time:
for (var i=0, l=elements.length; i var element = elements[i];
> //alert(elements.length);
> Event.observe(element, 'mouseover', function(){
> this.addClassName('hover');
> });
> Event.observe(element, 'mouseout', function(){
> this.removeClassName('hover');
> });
>
> //find nested UL
> //nested = $E('ul', element);
> nested =
> element.getElementsBySelector('ul').first;
Did you want to get a first element in colleciton?
nested = element.select('ul').first();
// or even better
nested = element.select('ul')[0];
> if (!nested) {
> continue;
> }
>
> //declare width
> var offsetWidth = 0;
>
> //find longest child
> for (k = 0; k < nested.childNodes.length; k++) {
> var node = nested.childNodes[k]
> if (node.nodeName == "LI")
Would be safer to "normalize" tagName before comparison:
if (node.nodeName.toLowerCase() === 'li') {
...
}
[snip the rest of the code]
Hope this helps.
--
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: issues with getElementBySelector
On Thu, Sep 18, 2008 at 10:09 AM, Matt Foster <[EMAIL PROTECTED]> wrote: > > bluezehn, the $$ method just executes getElementsBySelector on the > document. http://prototypejs.org/api/element/getelementsbyselector Doesn't $$ use Element#select? Nobody should be using getElementsBySelector if you're running Prototype 1.6 or higher. -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: issues with getElementBySelector
bluezehn, the $$ method just executes getElementsBySelector on the
document. http://prototypejs.org/api/element/getelementsbyselector
You may be having trouble with the mouseover/out events because of
event propagation, the elements inside your s will actually
fire their own mouse events which are caught by your LI's which can
lead to some troublesome behavior. Instead of using alert, get
Firebug and use console.log, so you can inspect the objects more
thoroughly.
On Sep 18, 8:30 am, bluezehn <[EMAIL PROTECTED]> wrote:
> Apologies to double post, but you may also find the Array#each() and
> prototype's various enumerable functionalities useful as it seems
> you're taking the long way around in a lot of your code. Link
> again:http://www.prototypejs.org/api/enumerable
>
> If you're starting out with prototype I'd also strongly recommend
> Andrew Dupont's book on the subject as it's absolutely fantastic.
>
> On Sep 18, 2:28 pm, bluezehn <[EMAIL PROTECTED]> wrote:
>
> > I haven't read your post any more than seeing the expression
> > "getElementsBySelector", but that alone prompts me to forward you to
> > this link in the api:http://www.prototypejs.org/api/utility/dollar-dollar
>
> > That's the prototype way of doing what you're trying to do. Try it out
> > and if you have any further problems post back.
>
> > On Sep 18, 2:06 pm, banry <[EMAIL PROTECTED]> wrote:
>
> > > I'm trying to convert some code from mootools to prototype, but I can
> > > get the first ul to work but none of the others add the hover class on
> > > mouseover. its got something to do with the call to
> > > getElementBySelector - any help appreciated
>
> > > Event.onDOMReady(function(){
> > > alert('DOM is loaded!');
> > > element = $('menu')
> > > if(!element.hasClassName('disabled')) {
> > > var menu = new JMenu(element)
> > > document.menu = menu
> > > };
>
> > > });
>
> > > var JMenu = Class.create(); // added pd
> > > JMenu.prototype = { // added pd
>
> > > initialize: function(el){
> > > var elements = el.getElementsBySelector('li');
> > > alert(elements.length);
> > > var nested = null;
> > > for (var i = 0; i < elements.length; i++) {
> > > var element = elements[i];
> > > //alert(elements.length);
> > > Event.observe(element, 'mouseover',
> > > function(){
> > > this.addClassName('hover');
> > > });
> > > Event.observe(element, 'mouseout',
> > > function(){
> > > this.removeClassName('hover');
> > > });
>
> > > //find nested UL
> > > //nested = $E('ul', element);
> > > nested =
> > > element.getElementsBySelector('ul').first;
> > > if (!nested) {
> > > continue;
> > > }
>
> > > //declare width
> > > var offsetWidth = 0;
>
> > > //find longest child
> > > for (k = 0; k < nested.childNodes.length;
> > > k++) {
> > > var node = nested.childNodes[k]
> > > if (node.nodeName == "LI")
> > > offsetWidth =
> > > (offsetWidth >= node.offsetWidth) ? offsetWidth :
> > > node.offsetWidth;
> > > }
>
> > > //match longest child
> > > for (l = 0; l < nested.childNodes.length;
> > > l++) {
> > > var node = nested.childNodes[l]
> > > if (node.nodeName == "LI") {
> > > $(node).setStyle('width',
> > > offsetWidth + 'px');
> > > }
> > > }
>
> > > $(nested).setStyle('width', offsetWidth +
> > > 'px');
> > > }
> > > }
> > > };
>
> > >
>
> > >
> > >
> > > Organisation
> > >
> > > > > class="icon-16-cpanel">Companies > > li>
> > > > > class="separator">
> > > > > class="icon-16-
> > > cpanel">Business_streams
> > >
[Proto-Scripty] Re: issues with getElementBySelector
Apologies to double post, but you may also find the Array#each() and
prototype's various enumerable functionalities useful as it seems
you're taking the long way around in a lot of your code. Link again:
http://www.prototypejs.org/api/enumerable
If you're starting out with prototype I'd also strongly recommend
Andrew Dupont's book on the subject as it's absolutely fantastic.
On Sep 18, 2:28 pm, bluezehn <[EMAIL PROTECTED]> wrote:
> I haven't read your post any more than seeing the expression
> "getElementsBySelector", but that alone prompts me to forward you to
> this link in the api:http://www.prototypejs.org/api/utility/dollar-dollar
>
> That's the prototype way of doing what you're trying to do. Try it out
> and if you have any further problems post back.
>
> On Sep 18, 2:06 pm, banry <[EMAIL PROTECTED]> wrote:
>
> > I'm trying to convert some code from mootools to prototype, but I can
> > get the first ul to work but none of the others add the hover class on
> > mouseover. its got something to do with the call to
> > getElementBySelector - any help appreciated
>
> > Event.onDOMReady(function(){
> > alert('DOM is loaded!');
> > element = $('menu')
> > if(!element.hasClassName('disabled')) {
> > var menu = new JMenu(element)
> > document.menu = menu
> > };
>
> > });
>
> > var JMenu = Class.create(); // added pd
> > JMenu.prototype = { // added pd
>
> > initialize: function(el){
> > var elements = el.getElementsBySelector('li');
> > alert(elements.length);
> > var nested = null;
> > for (var i = 0; i < elements.length; i++) {
> > var element = elements[i];
> > //alert(elements.length);
> > Event.observe(element, 'mouseover',
> > function(){
> > this.addClassName('hover');
> > });
> > Event.observe(element, 'mouseout',
> > function(){
> > this.removeClassName('hover');
> > });
>
> > //find nested UL
> > //nested = $E('ul', element);
> > nested =
> > element.getElementsBySelector('ul').first;
> > if (!nested) {
> > continue;
> > }
>
> > //declare width
> > var offsetWidth = 0;
>
> > //find longest child
> > for (k = 0; k < nested.childNodes.length;
> > k++) {
> > var node = nested.childNodes[k]
> > if (node.nodeName == "LI")
> > offsetWidth = (offsetWidth
> > >= node.offsetWidth) ? offsetWidth :
> > node.offsetWidth;
> > }
>
> > //match longest child
> > for (l = 0; l < nested.childNodes.length;
> > l++) {
> > var node = nested.childNodes[l]
> > if (node.nodeName == "LI") {
> > $(node).setStyle('width',
> > offsetWidth + 'px');
> > }
> > }
>
> > $(nested).setStyle('width', offsetWidth +
> > 'px');
> > }
> > }
> > };
>
> >
>
> >
> >
> > Organisation
> >
> > > class="icon-16-cpanel">Companies > li>
> > > class="separator">
> > > class="icon-16-
> > cpanel">Business_streams
> > > class="separator">
>
> > > class="icon-16-user">Employees
> > > class="separator">
> > > class="icon-16-user">Users
> > > class="separator">
> > > class="icon-16-user">Roles
> > > class="separator">
> > > class="icon-16-cpanel">Periods
>
> > > class="separator">
> > > class="icon-16-cpanel">Accounts
> >
[Proto-Scripty] Re: issues with getElementBySelector
I haven't read your post any more than seeing the expression
"getElementsBySelector", but that alone prompts me to forward you to
this link in the api:
http://www.prototypejs.org/api/utility/dollar-dollar
That's the prototype way of doing what you're trying to do. Try it out
and if you have any further problems post back.
On Sep 18, 2:06 pm, banry <[EMAIL PROTECTED]> wrote:
> I'm trying to convert some code from mootools to prototype, but I can
> get the first ul to work but none of the others add the hover class on
> mouseover. its got something to do with the call to
> getElementBySelector - any help appreciated
>
> Event.onDOMReady(function(){
> alert('DOM is loaded!');
> element = $('menu')
> if(!element.hasClassName('disabled')) {
> var menu = new JMenu(element)
> document.menu = menu
> };
>
> });
>
> var JMenu = Class.create(); // added pd
> JMenu.prototype = { // added pd
>
> initialize: function(el){
> var elements = el.getElementsBySelector('li');
> alert(elements.length);
> var nested = null;
> for (var i = 0; i < elements.length; i++) {
> var element = elements[i];
> //alert(elements.length);
> Event.observe(element, 'mouseover',
> function(){
> this.addClassName('hover');
> });
> Event.observe(element, 'mouseout', function(){
> this.removeClassName('hover');
> });
>
> //find nested UL
> //nested = $E('ul', element);
> nested =
> element.getElementsBySelector('ul').first;
> if (!nested) {
> continue;
> }
>
> //declare width
> var offsetWidth = 0;
>
> //find longest child
> for (k = 0; k < nested.childNodes.length;
> k++) {
> var node = nested.childNodes[k]
> if (node.nodeName == "LI")
> offsetWidth = (offsetWidth >=
> node.offsetWidth) ? offsetWidth :
> node.offsetWidth;
> }
>
> //match longest child
> for (l = 0; l < nested.childNodes.length;
> l++) {
> var node = nested.childNodes[l]
> if (node.nodeName == "LI") {
> $(node).setStyle('width',
> offsetWidth + 'px');
> }
> }
>
> $(nested).setStyle('width', offsetWidth +
> 'px');
> }
> }
> };
>
>
>
>
>
> Organisation
>
> class="icon-16-cpanel">Companies li>
> class="separator">
> class="icon-16-
> cpanel">Business_streams
> class="separator">
>
> class="icon-16-user">Employees
> class="separator">
> class="icon-16-user">Users
> class="separator">
> class="icon-16-user">Roles
> class="separator">
> class="icon-16-cpanel">Periods
>
> class="separator">
> class="icon-16-cpanel">Accounts
> class="separator">
> class="icon-16-cpanel">Cost Centres a>
> class="separator">
> class="icon-16-cpanel">Cost
> Centre Accounts
> class="separator">
>
> class="icon-16-cpanel">Hierarchies a>
> class="separator">
>
>
>
> System Setup
>
>
