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
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/
[jQuery] toggleClass and removeClass
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/
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=15494local=yquery=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/
[jQuery] toggleClass and removeClass
George, I noticed the reports of this bug. Unfortunately, it was annoying me in the jQuery stuff I was working on, so I looked for a solution. I just figured I would save someone else the headache of tracking it down. 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/