Use jQuery to fix code that sucks
If you’re working inside of an institutional structure chances are you occasionally have to deal with code that sucks. I know I do! We have some third party apps at the institution where I work. I believe they were designed in the early 90s before anyone knew the word “standards” or “css” and have not been revisited. While working on one of these code bases I had the idea of using jQuery to remedy my brow furrowing.
Problem
No IDs or class names on the the template code. The templates were static and I didn’t want to do a global find and replace to try and fix the problem.
jQuery to the Rescue
With jQuery’s selector support, I decided that I could use that to add the vital css, classes or ids I need to make the layout work. Example:
1: $(document).ready(function(){
2: // standard document formatting
3: $("BODY DIV:first").css("width", "800px").css("margin", "0 auto 0 auto");
4: });
Instead of injecting css directly, I could have added a class and added my styling in the stylesheet like this:
1: $(document).ready(function(){
2: // standard document formatting
3: $("BODY DIV:first").attr("class", "fixthishoriblecode");
4: });
There you have it. As simple as including the jQuery library and adding some lines of JavaScript. [of course is javascript is turned off, this is not going to work.. but I didn’t say this was a miracle solution for fixing your bad code, just a patch].
If you’ve had to deal with these types of code bases, share your story below of how you fixed the problem.
One Comment, Comment or Ping
Mike
Wow,
attr() was not meant for classes. Take a look at the src code.
$("BODY DIV:first").addClass("fixthishoriblecode");
…There you are
Jan 31st, 2009
Reply to “Use jQuery to fix code that sucks”