[jQuery] toggleClass and removeClass

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 10 (filtered)">
<style>

</style>
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
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
<a href="http://www.eyeonsolutions.com">www.eyeonsolutions.com</a>
 
</div>
</body>
</html>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

[jQuery] toggleClass and removeClass

[jQuery] toggleClass and removeClass

Topic Participants

mdlincoln

george.jquery

limodou

enchos

brandon_aaron