<pedrocorreia.net ⁄>
corner
<mySearch ⁄> <mySearch ⁄>

corner
 
corner
<mySnippets order="rand" ⁄> <mySnippets order="rand" ⁄>

corner
 
corner
<myContacts ⁄> <myContacts ⁄>

<email ⁄>


pc@pedrocorreia.net

<windows live messenger ⁄>


pedrojacorreia@hotmail.com

<myCurriculum type="pdf" ⁄>


Download
corner
 
corner
<myBlog show="last" ⁄> <myBlog show="last" ⁄>

corner
 
corner
<myNews show="rand" ⁄> <myNews show="rand" ⁄>

corner
 
corner
<myNews type="cat" ⁄> <myNews type="cat" ⁄>

corner
 
corner
<myQuote order="random" ⁄> <myQuote order="random" ⁄>

corner
 
corner
<myPhoto order="random" ⁄> <myPhoto order="random" ⁄>

<pedrocorreia.net ⁄>
corner
 
corner
<myAdSense ⁄> <myAdSense ⁄>

corner
 
corner
<myVisitorsMap ⁄> <myVisitorsMap ⁄>

corner
 
 

<jQuery Switch/ Replace/ Change class name ⁄ >




clicks: 28368 28368 2010-04-21 2010-04-21 goto mySnippets mySnippets javascript  Download  Bookmark This Bookmark This



Well I'm just trying to clean the dust in my snippets section ^_^''

I said it before, but I'll try to write more often in this section, but time's always running short and I almost left this section for last.


A few weeks ago in my work we had to build a full-ajax environment website, this is, no postbacks.
However all the links are crawlable, this is, bots will still be able to follow links and index its content, but in an user point-of-view, the website couldn't/ mustn't had any page refresh.


This website had multiple themes, such as:

  • in a products page, we have, for instance, a green theme;

  • in a sales page we have a yellow theme;

  • and so on, and so on, ...



Although not all the webpage would switch theme, for example, header and footer would always keep its company base colors.


The CSS had all the color themes, so basically what JavaScript had to do, was change an html object class name, for example:

<div class="green_theme"> (contents) </div>

Would had to turn to:
<div class="yellow_theme"> (contents) </div>


And so on, and so on...


So let's just build a basic plugin, called SwithClass.


It'll work, either, as a standalone function; and as a jQuery custom function (extending jQuery, so that we can benefit all its selector power). You'll see the examples ahead.


note: I didn't test it against jQuery >=1.4




style.css, a simple stylesheet
  1. body{font-family: Tahoma, Verdana;}
  2.  
  3. .red{color: #B02B2C;}
  4.  
  5. .dark_gray{color: #666;}
  6.  
  7. .orange{color: #FF7400;}
  8.  
  9. .blue {color: #4096EE;}





jquery.SwitchClass.js, our plugin. It will work in the following two manners:

  • $.SwitchClass(element, oldClassName, newClassName);

  • $("selector[s]").SwitchClass(oldClassName, newClassName);


  1. /**
  2. *
  3. * jquery.SwitchClass.js - A jQuery Plugin
  4. *
  5. * @version: 0.1
  6. * @author pedrocorreia.net
  7. * @date 2010-04-21
  8. * @projectDescription: Switch/ Replace/ Change an object's class name
  9. * @requires jquery.js (tested with 1.3.2)
  10. */
  11. (function($){
  12.  
  13. /**
  14. * Switch element(s) Class Name
  15. *
  16. * @author pedrocorreia.net
  17. *
  18. * @param Object || Array Selector(s) -> Syntax: [ {elem, old_class, new class}, ... ]
  19. */
  20. $.SwitchClass = function (selectors){
  21. var _selectors = [], //our selectors array container, it will hold all our objects
  22.  
  23. /**
  24. * Switch Class
  25. *
  26. * @private
  27. * @param Jquery Object
  28. * @param String Old Class Name
  29. * @param String New Class Name
  30. */
  31. _Switch = function(o, oldClass, newClass){
  32. if(o && oldClass && newClass && o.hasClass(oldClass)){
  33. o.removeClass(oldClass).addClass(newClass);
  34. }
  35. };
  36.  
  37. //check if we have an object or an array of objects,
  38. //the "selectors" will always be in an array, even if we
  39. //specify an Object, this will be added to our selectors Array
  40. if($.isArray(selectors)){ _selectors = selectors; }
  41. else{ _selectors.push(selectors); }
  42.  
  43. //do we have any elements in our, selectors, array?
  44. if (_selectors.length === 0) { return; }
  45.  
  46. //iterate over selectors Array
  47. $.each(_selectors, function(idx, selector){
  48. _Switch($(selector.elem), selector.old_class, selector.new_class);
  49. });
  50. };
  51.  
  52. /**
  53. * Switch element(s) Class Name
  54. * jQuery custom function
  55. *
  56. * @author pedrocorreia.net
  57. *
  58. * @param String Old Class Name
  59. * @param String New Class Name
  60. * @extends jQuery
  61. */
  62. $.fn.SwitchClass = function(old_class, new_class){
  63. return this.each(function(){
  64. $.SwitchClass({elem: this, old_class: old_class, new_class: new_class});
  65. });
  66. };
  67.  
  68. })(jQuery);












Init.js, a few working examples
  1. $(document).ready(function() {
  2.  
  3. //switch class by using an object
  4. $.SwitchClass({
  5. elem: "span",
  6. old_class: "red",
  7. new_class: "dark_gray"
  8. }
  9. );
  10.  
  11. //switch class by using an array of objects
  12. $.SwitchClass([
  13. {
  14. elem: "#my_header",
  15. old_class: "red",
  16. new_class: "orange"
  17. },
  18. {
  19. elem: "h4",
  20. old_class: "red",
  21. new_class: "blue"
  22. }
  23. ]);
  24.  
  25. //using jQuery selector
  26. $("strong, a").SwitchClass("red", "dark_gray");
  27.  
  28. //using jQuery selector and jQuery chaining
  29. $("#my_other_div")
  30. .SwitchClass("dark_gray", "red")
  31. .find("p:first")
  32. .append("... and this text will be added");
  33.  
  34. });




Our html file
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. <link rel="stylesheet" href="style.css" />
  6.  
  7. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  8. <script type="text/javascript" src="jquery.SwitchClass.js"></script>
  9. <script type="text/javascript" src="Init.js"></script>
  10.  
  11. <title>jQuery SwitchClass</title>
  12. </head>
  13.  
  14. <body>
  15.  
  16. <div id="my_div">
  17. <span class="red">This is a span</span>,
  18. <strong class="red">this is bold</strong>,
  19. <a href="http://www.pedrocorreia.net" class="red">this is a link</a>.
  20. <h3 id="my_header" class="red">This is a Header 3</h3>
  21. <h4 class="red">This is a Header 4</h4>
  22. </div>
  23.  
  24. <div id="my_other_div" class="dark_gray">
  25. <p>This paragraph, initially will be dark gray, but it'll turn to <strong>red</strong>.</p>
  26. </div>
  27.  
  28. </body>
  29.  
  30. </html>




Here's 2 screenshots.

Before applying jquery.SwitchClass:







After applying jquery.SwitchClass.js:









Simple!


If you have any doubt or found any error, please drop me an email.









clicks: 28368 28368 2010-04-21 2010-04-21 goto mySnippets mySnippets javascript  Download  Bookmark This Bookmark This