Re: [jQuery] toggleClass Voodoo
On Jan 21, 2007, at 12:11 PM, Karl Swedberg wrote:
http://test.learningjquery.com/boundlink.htm
The first link uses this code:
$(document).ready(function() {
$('a.keepbound').click(function() {
$(this)
.removeClass('keepbound')
.next()
.html($(this).next().html() + ' and repeat');
});
});
The second uses this code:
$(document).ready(function() {
$('a.losebinding').one('click',function() {
$(this)
.removeClass('losebinding')
.next()
.html($(this).next().html() + ' ever');
return false;
});
});
Okay, so I lost my mind for a minute. Doesn't affect my argument,
but... The lines with .html() ? Ignore them. :)
They should be ...
.append(' and repeat');
...and...
.append(' ever');
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] toggleClass Voodoo
On Jan 21, 2007, at 4:00 AM, Steve Jones wrote:
Thanks Karl [Rudd].
Consider thread closed
SJ
Not so fast! :)
While it's true that your script is adding a class to the space-
separated "array" (and then removing it), that's not the real reason
why the links are still bound to the click event.
Even if you remove the class, it won't remove its binding
automatically. It's bound on $(document).ready after the DOM has
loaded, and JavaScript is going to stick with the set of elements
that are matched at that point, whether you remove the class or not.
To demonstrate this, I set up a little test page with two links. Both
links have a click event bound to their respective classes and both
remove those classes, but one will keep triggering its click event
while the other will stop after the first:
http://test.learningjquery.com/boundlink.htm
The first link uses this code:
$(document).ready(function() {
$('a.keepbound').click(function() {
$(this)
.removeClass('keepbound')
.next()
.html($(this).next().html() + ' and repeat');
});
});
The second uses this code:
$(document).ready(function() {
$('a.losebinding').one('click',function() {
$(this)
.removeClass('losebinding')
.next()
.html($(this).next().html() + ' ever');
return false;
});
});
Hope this helps explain what's going on.
cheers,
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Jan 21, 2007, at 4:00 AM, Steve Jones wrote:
Thanks Karl.
Consider thread closed
SJ
On 21 Jan 2007, at 8:45, Karl Rudd wrote:
Yes Steve an element can have "two classes". :) The "class" attribute
of an element contains a list of space seperated "words". Think of
them more has "tags" rather than actual "OO programming" classes.
Karl Rudd
On 1/21/07, Steve Jones <[EMAIL PROTECTED]> wrote:
A question about toggleClass... everything below works, so its not a
problem as such...
http://www.g-raff.co.uk/jquery/basic.html
I added a statement to the code to change the appearance of
headings
that had been clicked, and back again when they were clicked a
second
time.
function init() {
// set first section to be open on launch
$("a.open_btn:eq(0)").toggleClass("down_state");
// now iterate through objects to
add click
methods to open corresponding
$("a.open_btn").each(function(index) {
$(this).click(function() {
$(this).toggleClass("down_state");
$('div.expandedSection:eq(' + index +
')').slideToggle("normal");
return false;
});
});
};
What I'm wondering about are the inner workings of toggleClass.
In the script above, I have applied the click method to all
instances
of a.open_btn - but of course when it's clicked, there is a "change
of class" to .down_state - yet the click method still works.
I'm just wondering how the toggleClass method is implemented, as
this
seems like voodoo to me - an element can't have 2 classes, can it?
Yet, when an "a.open_btn" becomes "a.down_state", it still retains
the click methods belonging to instances of "a.open_btn" - don't get
me wrong, I'm glad it works! But I'd prefer to understand WHY it
works.
I think I might give up Flash. This is too good...
Cheers
SJ
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] toggleClass Voodoo
Thanks Karl.
Consider thread closed
SJ
On 21 Jan 2007, at 8:45, Karl Rudd wrote:
Yes Steve an element can have "two classes". :) The "class" attribute
of an element contains a list of space seperated "words". Think of
them more has "tags" rather than actual "OO programming" classes.
Karl Rudd
On 1/21/07, Steve Jones <[EMAIL PROTECTED]> wrote:
A question about toggleClass... everything below works, so its not a
problem as such...
http://www.g-raff.co.uk/jquery/basic.html
I added a statement to the code to change the appearance of headings
that had been clicked, and back again when they were clicked a second
time.
function init() {
// set first section to be open on launch
$("a.open_btn:eq(0)").toggleClass("down_state");
// now iterate through objects to add
click
methods to open corresponding
$("a.open_btn").each(function(index) {
$(this).click(function() {
$(this).toggleClass("down_state");
$('div.expandedSection:eq(' + index +
')').slideToggle("normal");
return false;
});
});
};
What I'm wondering about are the inner workings of toggleClass.
In the script above, I have applied the click method to all instances
of a.open_btn - but of course when it's clicked, there is a "change
of class" to .down_state - yet the click method still works.
I'm just wondering how the toggleClass method is implemented, as this
seems like voodoo to me - an element can't have 2 classes, can it?
Yet, when an "a.open_btn" becomes "a.down_state", it still retains
the click methods belonging to instances of "a.open_btn" - don't get
me wrong, I'm glad it works! But I'd prefer to understand WHY it
works.
I think I might give up Flash. This is too good...
Cheers
SJ
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] toggleClass Voodoo
Yes Steve an element can have "two classes". :) The "class" attribute
of an element contains a list of space seperated "words". Think of
them more has "tags" rather than actual "OO programming" classes.
Karl Rudd
On 1/21/07, Steve Jones <[EMAIL PROTECTED]> wrote:
> A question about toggleClass... everything below works, so its not a
> problem as such...
>
> http://www.g-raff.co.uk/jquery/basic.html
>
> I added a statement to the code to change the appearance of headings
> that had been clicked, and back again when they were clicked a second
> time.
>
> function init() {
> // set first section to be open on launch
> $("a.open_btn:eq(0)").toggleClass("down_state");
>
> // now iterate through objects to add click
> methods to open corresponding
> $("a.open_btn").each(function(index) {
> $(this).click(function() {
> $(this).toggleClass("down_state");
> $('div.expandedSection:eq(' + index +
> ')').slideToggle("normal");
> return false;
> });
> });
> };
>
> What I'm wondering about are the inner workings of toggleClass.
>
> In the script above, I have applied the click method to all instances
> of a.open_btn - but of course when it's clicked, there is a "change
> of class" to .down_state - yet the click method still works.
>
> I'm just wondering how the toggleClass method is implemented, as this
> seems like voodoo to me - an element can't have 2 classes, can it?
> Yet, when an "a.open_btn" becomes "a.down_state", it still retains
> the click methods belonging to instances of "a.open_btn" - don't get
> me wrong, I'm glad it works! But I'd prefer to understand WHY it works.
>
> I think I might give up Flash. This is too good...
>
> Cheers
>
> SJ
>
>
>
>
>
>
>
>
>
>
>
>
> ___
> jQuery mailing list
> discuss@jquery.com
> http://jquery.com/discuss/
>
>
>
>
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] toggleClass and removeClass
This solved my problems. Thanks!
Brandon
On 9/22/06, Jörn Zaefferer <[EMAIL PROTECTED]> wrote:
> Mark D. Lincoln schrieb:
> >
> > I have found a couple of fixes for the problem of using toggleClass
> > and removeClass in Internet Explorer (IE). It seems the root of the
> > problem is that when you have multiple classes assigned to the
> > className property of an element in IE ("class1 class2") and you
> > remove one of the classes from the className property, you can be left
> > with a className property containing classes with leading spaces ("
> > class2"). What is even worse, if you remove both classes multiple
> > times, you can end up with the className property containing just
> > blank spaces (" "). It is these leading spaces which are causing
> > toggleClass and removeClass to fail with multiple classes assigned to
> > the className property. This problem does not seem to exist in Firefox
> > since it seems to remove leading and trailing spaces when the
> > className property is changed.
> >
> Hi Mark,
>
> I tested your fix. While it worked for IE, Opera did fail even with
> removing a single class, with or without your fix.
> My solution, that I added to subversion and at least works with FF1.5,
> IE6 and Opera9, does not use a regular expression at all.
> Please check if this fix is a solution for your particlar problem. If
> not, it would be great if you could provide additional tests.
>
> -- Jörn
>
> ___
> jQuery mailing list
> discuss@jquery.com
> http://jquery.com/discuss/
>
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] toggleClass and removeClass
Mark D. Lincoln schrieb: > > I have found a couple of fixes for the problem of using toggleClass > and removeClass in Internet Explorer (IE). It seems the root of the > problem is that when you have multiple classes assigned to the > className property of an element in IE (“class1 class2”) and you > remove one of the classes from the className property, you can be left > with a className property containing classes with leading spaces (“ > class2”). What is even worse, if you remove both classes multiple > times, you can end up with the className property containing just > blank spaces (“ “). It is these leading spaces which are causing > toggleClass and removeClass to fail with multiple classes assigned to > the className property. This problem does not seem to exist in Firefox > since it seems to remove leading and trailing spaces when the > className property is changed. > Hi Mark, I tested your fix. While it worked for IE, Opera did fail even with removing a single class, with or without your fix. My solution, that I added to subversion and at least works with FF1.5, IE6 and Opera9, does not use a regular expression at all. Please check if this fix is a solution for your particlar problem. If not, it would be great if you could provide additional tests. -- Jörn ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] toggleClass and removeClass
On 9/22/06, Mark D. Lincoln <[EMAIL PROTECTED]> wrote:
>
>
>
>
> I have found a couple of fixes for the problem of using toggleClass and
> removeClass in Internet Explorer (IE). It seems the root of the problem is
> that when you have multiple classes assigned to the className property of an
> element in IE ("class1 class2") and you remove one of the classes from the
> className property, you can be left with a className property containing
> classes with leading spaces (" class2"). What is even worse, if you remove
> both classes multiple times, you can end up with the className property
> containing just blank spaces (""). It is these leading spaces which are
> causing toggleClass and removeClass to fail with multiple classes assigned
> to the className property. This problem does not seem to exist in Firefox
> since it seems to remove leading and trailing spaces when the className
> property is changed.
>
>
>
> After doing some research, I have come up with two possible solutions. The
> first solution involves modifying the regular expression used to remove the
> class from the className property. On line 345 of the jQuery source code,
> you will find the following:
>
>
>
> new RegExp("(^|\\s*\\b[^-])"+c+"($|\\b(?=[^-]))", "g"), "") );
>
>
>
> Change the regular expression to the following:
>
>
>
> new RegExp("(^\\s*\\b[^-]|)"+c+"($\\b(?=[^-])|)", "g"), "") );
>
>
>
> Note the position of the pipe (|) characters. This solution will enable the
> removal of the specified class from the className property in IE, however,
> it does not solve the problem of the extra spaces. Although the class being
> toggled or removed can now be found within the className property, the
> className property will continue to grow with extraneous blank spaces each
> time a class is removed. The blank spaces do not seem to cause any short
> term problem, however, they might if the user uses the Web application for
> more than a short period.
>
>
>
> The other solution is more of a sledgehammer approach as it involves
> removing the extraneous blank spaces from the className property anytime a
> class is removed. This solution involves trimming the spaces from the
> className during the class removal. On lines 343 to 345 of the jQuery
> source code you will see the following implementation of the "remove" method
> of the className property:
>
>
>
> o.className = !c ? "" :
>
>o.className.replace(
>
> new RegExp("(^|\\s*\\b[^-])"+c+"($|\\b(?=[^-]))",
> "g"), "");
>
>
>
> If you change this code to use the "trim" method of the jQuery class, you
> will have the following:
>
>
>
> o.className = jQuery.trim( !c ? "" :
>
>o.className.replace(
>
> new RegExp("(^|\\s*\\b[^-])"+c+"($|\\b(?=[^-]))",
> "g"), "") );
>
>
>
> This solution does not require changing the regular expression since the
> extraneous spaces will no longer appear within the className property. This
> is the solution I am currently using, however, if someone has a better
> solution, please let me know.
>
>
>
>
>
Thanks, the great work fix the ie bug in my project. I used the later
solution, and I think the solution should be merged into svn. :)
--
I like python!
My Blog: http://www.donews.net/limodou
UliPad Site: http://wiki.woodpecker.org.cn/moin/UliPad
UliPad Maillist: http://groups.google.com/group/ulipad
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] toggleClass and removeClass
Hello Mark,
Nice to see this bug progressing. A search on keywords "
http://www.nabble.com/forum/Search.jtp?forum=15494&local=y&query=classname+space
classname space " in the Nabble jquery forum reveals that quite a few of us
have reported this in one form or another.
Cheers,
George
Mark D. Lincoln wrote:
>
> I have found a couple of fixes for the problem of using toggleClass and
> removeClass in Internet Explorer (IE). It seems the root of the problem
> is
> that when you have multiple classes assigned to the className property of
> an
> element in IE ("class1 class2") and you remove one of the classes from the
> className property, you can be left with a className property containing
> classes with leading spaces (" class2"). What is even worse, if you
> remove
> both classes multiple times, you can end up with the className property
> containing just blank spaces (""). It is these leading spaces which
> are
> causing toggleClass and removeClass to fail with multiple classes assigned
> to the className property. This problem does not seem to exist in Firefox
> since it seems to remove leading and trailing spaces when the className
> property is changed.
>
>
>
> After doing some research, I have come up with two possible solutions.
> The
> first solution involves modifying the regular expression used to remove
> the
> class from the className property. On line 345 of the jQuery source code,
> you will find the following:
>
>
>
> new RegExp("(^|\\s*\\b[^-])"+c+"($|\\b(?=[^-]))", "g"), "") );
>
>
>
> Change the regular expression to the following:
>
>
>
> new RegExp("(^\\s*\\b[^-]|)"+c+"($\\b(?=[^-])|)", "g"), "") );
>
>
>
> Note the position of the pipe (|) characters. This solution will enable
> the
> removal of the specified class from the className property in IE, however,
> it does not solve the problem of the extra spaces. Although the class
> being
> toggled or removed can now be found within the className property, the
> className property will continue to grow with extraneous blank spaces each
> time a class is removed. The blank spaces do not seem to cause any short
> term problem, however, they might if the user uses the Web application for
> more than a short period.
>
>
>
> The other solution is more of a sledgehammer approach as it involves
> removing the extraneous blank spaces from the className property anytime a
> class is removed. This solution involves trimming the spaces from the
> className during the class removal. On lines 343 to 345 of the jQuery
> source code you will see the following implementation of the "remove"
> method
> of the className property:
>
>
>
> o.className = !c ? "" :
>
>o.className.replace(
>
> new RegExp("(^|\\s*\\b[^-])"+c+"($|\\b(?=[^-]))", "g"), "");
>
>
>
> If you change this code to use the "trim" method of the jQuery class, you
> will have the following:
>
>
>
> o.className = jQuery.trim( !c ? "" :
>
>o.className.replace(
>
> new RegExp("(^|\\s*\\b[^-])"+c+"($|\\b(?=[^-]))", "g"), "") );
>
>
>
> This solution does not require changing the regular expression since the
> extraneous spaces will no longer appear within the className property.
> This
> is the solution I am currently using, however, if someone has a better
> solution, please let me know.
>
>
>
>
>
> Mark D. Lincoln
>
>
>
> Mark D. Lincoln, Director of Research & Development
>
> Eye On Solutions, LLC
>
> (866) 253-9366x101
>
> www.eyeonsolutions.com
>
>
>
>
> ___
> jQuery mailing list
> discuss@jquery.com
> http://jquery.com/discuss/
>
>
--
View this message in context:
http://www.nabble.com/toggleClass-and-removeClass-tf2313152.html#a6432990
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] toggleClass > hoverClass & pressClass...
I was wrong, toogleClass has nothing to do with click events, it basically fires the function inmediatly. Enrique Meléndez Estrada ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] ToggleClass and parents();
Klaus Hartl wrote:
>
>
> Andrew Buzzell schrieb:
>> With a checkbox inside of a label, I was trying to toggle a class on
>> the label based on whether the input was checked or not. I tried
>> every permutation of:
>>
>> $(".checkbox").change(function(){
>> $(this).parent().toggleClass('selected');
>> });
>>
>> $(this).parent().toggleClass('selected');
> });
>
Actually, that still doesn't work. It adds the class, but won't remove it.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] ToggleClass and parents();
Andrew Buzzell schrieb:
> With a checkbox inside of a label, I was trying to toggle a class on the
> label based on whether the input was checked or not. I tried every
> permutation of:
>
> $(".checkbox").change(function(){
> $(this).parent().toggleClass('selected');
> });
>
> http://jquery.com/discuss/
Re: [jQuery] .toggleClass()
> I don't like to start calling methods based on the source code ... > However, is doing so a reasonable approach to learn jQuery's full capabilities? I am a big believer in reading the source. All the documentation about how a particular method behaves is there. I agree that some of it may be private behavior or methods, but it's better to ask "is it safe to use toggleClass" or "should toggleClass behave like this" than "does toggleClass exist?" You'll see toggleClass used quite a bit in responses posted on this list, so really even that is answered by some searching. Most of the methods in jQuery are a dozen lines or less--admittedly sometimes a dense dozen lines but still it's generally possible to figure out what's going on. Except for the fx module. That is a module for laying down and avoiding! It looks like John's gotten a great start on the reference documentation (see the "Early Docs Prototype" thread). I'd also like to see a how-to and FAQ, much of it based on the questions and answers posted on this list. is anyone working on that? If so I'd like to help. If not I'd like to start! ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] .toggleClass()
This is a frustration that I imagine will not go away until jQuery development settles down a bit. Most of the good stuff can be found in the archives of this list. http://jquery.com/discuss/ (Search it with google by including site:jquery.com in your query.) I also found a lot of otherwise undocumented functions in this blog post http://jquery.com/blog/2006/06/30/jquery-10-alpha-release/ The documentation on this (temporary) wiki seems more complete: http://proj.jquery.com/docs/Overview/ I haven't even started on the plugins! On 09/08/06, Antonio Collins <[EMAIL PROTECTED]> wrote: > Thanks for your reply. One other question though. > > Since the docs that I know of (jquery.com/docs and > jquery.com/images/jQuery-Map.png) made no mention of .toggleClass(), is > additional documentation available at another location? ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] .toggleClass()
Thanks for your reply. One other question though. Since the docs that I know of (jquery.com/docs and jquery.com/images/jQuery-Map.png) made no mention of .toggleClass(), is additional documentation available at another location? I don't like to start calling methods based on the source code since a) I can't distinguish between published API methods and internal-use-only methods which might be subject to change b) I might misinterpret the purpose/usage of a method. However, is doing so a reasonable approach to learn jQuery's full capabilities? -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Dave Methvin Sent: Tuesday, August 08, 2006 6:03 PM To: 'jQuery Discussion.' Subject: Re: [jQuery] .toggleClass() > Is a .toggleClass( className ) method (or similar) available? Yes, toggleClass is there and has been for some time. Please check before posting to keep the list traffic manageable. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] .toggleClass()
> Is a .toggleClass( className ) method (or similar) available? Yes, toggleClass is there and has been for some time. Please check before posting to keep the list traffic manageable. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
