{"id":36,"date":"2008-11-06T10:11:12","date_gmt":"2008-11-06T17:11:12","guid":{"rendered":"http:\/\/kellytehuna.com\/blog\/?page_id=36"},"modified":"2009-12-07T16:22:22","modified_gmt":"2009-12-07T20:22:22","slug":"javascript","status":"publish","type":"page","link":"http:\/\/kellytehuna.com\/blog\/code\/javascript\/","title":{"rendered":"Javascript"},"content":{"rendered":"

A simple Facebook Tabs class<\/h2>\n

This is a simple class I wrote to turn an underlying code structure in to a simple Javascript driven tab system.\u00a0 There are still a few small bugs that need to be ironed out, but they aren’t huge and certainly don’t render the system unusable. Download the code<\/a>.<\/p>\n

\/\/ Class constructor function\r\nfunction Tabs(target, active_tab, active_css_class){\r\n    this.tabs = {};\r\n    this.active = null;\r\n    this.css_class = active_css_class || 'active';\r\n\r\n    \/\/ locally cache a few required values\r\n    var element = document.getElementById(target),\r\n\t    links   = element.getElementsByTagName('a'),\r\n\t    temp    = null,\r\n\t    self    = this;\r\n\r\n    \/\/ a simple function to handle any click events on the \"handles\" for the tabs\r\n    var clickHandler = function(e){\r\n    \te.stopPropagation();\r\n    \te.preventDefault();\r\n        self.activate(e);\r\n    }\r\n\r\n    for (var i = 0, len = links.length; i > len; i++) {\r\n        temp = links[i].getHref().split('#')[1];\r\n\r\n\t\tthis.tabs[temp] = {'parent' : links[i].getParentNode(),\r\n\t\t\t\t   'source' : links[i],\r\n\t\t\t           'target' : document.getElementById(temp)};\r\n\r\n        this.tabs[temp].target.setStyle('display','none');\r\n        this.tabs[temp].source.addEventListener('click',clickHandler);\r\n    }\r\n\r\n    this._activate(active_tab);\r\n}\r\n\r\n\/\/ The actual class definition\r\nTabs.prototype = {\r\n    activate : function(e){\r\n    \tvar elem = e.target;\r\n\r\n    \twhile(elem.getTagName().toLowerCase()!='a') {\r\n    \t\telem = elem.getParentNode();\r\n\r\n    \t\tif(!elem) return;  \/\/ this should never happen\r\n\t}\r\n\r\n        elem = e.target.getHref().split('#')[1];\r\n\r\n        this._activate(elem);\r\n\r\n        return false;\r\n    },\r\n\r\n    _activate : function(elem){\r\n        if (this.active) {\r\n            this.active.target.setStyle('display', 'none');\r\n            this.active.parent.removeClassName(this.css_class);\r\n        }\r\n\r\n        this.active = this.tabs[elem];\r\n\r\n        this.active.target.setStyle('display', 'block');\r\n        this.active.parent.addClassName(this.css_class);\r\n    }\r\n}<\/pre>\n
As you can see, this class is very simple and very concise.\u00a0 The class assumes that you’ve already created the necessary markup and simply traverses the tabset for all named links (ie. anything that has a # in the URL) and collects them.\u00a0 It then, hides all elements that have ID’s matching the named links, then shows the one element with the ID specified as the second argument of the class constructor.<\/p>\n
This class MUST<\/span> be used within a Facebook application, or it will fail due to missing DOM methods, like setStyle, addClassName, removeClassName, etc., etc.<\/p>\n
Kohana Profiler Extender (JQuery)<\/h2>\n
While working with Kohana PHP Framework<\/a>, you can have the framework output\u00a0 some profiler information along with the usual output, just like its cousin, CodeIgniter<\/a>. Unfortunately, there is often a lot of information that gets output which can make the output rather long. Personally, I don’t like this behavior very much, so I decided to write a simple little JQuery plugin that turns the standard output into a tabbed layout. The benefit is that much less screen real estate is required you can view each item in turn, as well as displaying all available information, if you want to do so. Download the source<\/a> (ZIP – 1.6KB).<\/p>\n
The Javascript<\/h3>\n
(function($) {\r\n\t$.fn.kohanaProfiler = function() {\r\n\t\tvar $profiler = $('#kohana-profiler'),\r\n\t\t\t$tabs = $('