[Javascript] Help with closures

[Aaron Bassett]

I got asked about something similar on a forum not long ago I'll c&p my
response here incase its of use to you:

Ok this isn't the quickest way to go about it but it allows you to use
classes to toggle visibility rather than applying the style directly.

The most part of it is a butchered piece of prototype.js so if you are using
a library/framework with its own class handling methods you can simply use
them instead.

Oh and this is in no way actually guaranteed to work - I've just written
this out quickly and it is completely 100% untested. Its only meant as an
idea incase you want to do something similar.

 Code:

/*
*  Example usage:
*      notice.toggle(id);
*      notice.show(id);
*      notice.hide(id);
*/

notice={

	hideClass"hide",
	
	toggle:function(id) {
		if(this.hasClassName(id this.hideClass)) {
			this.removeClassName(id this.hideClass);
		} else {
			this.addClassName(id this.hideClass);
		}
	},
	
	show:function(id) {
		this.addClassName(id this.hideClass);
	},
	
	hide:function(id) {
		this.removeClassName(id this.hideClass);
	},

	// Modified from prototype.js [ http://prototype.conio.net/ ]
	hasClassName:function(id, cName) {
		if(!document.getElementById(id)) return;
		var elClass = document.getElementById(id).className;
		if (elClass.length == 0) return false;
		if (elClass == cName || elClass.match(new RegExp("(^|\\s)" + cName +
"(\\s|$)"))) return true;
		return false;
	},

	addClassName: function(id, cName) {
		if(!document.getElementById(id)) return;
		var el = document.getElementById(id);
		if(!this.hasClassName(id, cName)) el.className = el.className + " " + cName;
	},
	
	removeClassName:function(id, cName) {
		if(!document.getElementById(id)) return;
		if(!this.hasClassName(id, cName)) return;
		var el = document.getElementById(id);
		var elClass = el.className;
		if (elClass.length == 0) return;
		var newClass = "";
		var classes = elClass.split(' ');
		for(var i = classes.length-1; i >= 0; --i){
			if(classes[i] != cName) newClass += classes[i] + " ";
		}
		var sp = /^\s*(.*?)\s*$/;
		el.className = newClass.replace(sp, "");
	}
}



On 1/12/07, Alex Turner <Alex.Turner at project-network.com> wrote:
>
> Dood,
>
> I would place call onclick like this:
>
> <span class="click" onclick='toggleMe(this)'>Hide this content</span>
>
> Then the toggle event handler gets a reference to the node from which it
> was called and hence has no chance of ambiguity :-)
>
> The other way that is also easy - but messier - is the way I did the
> selectable rows in a table - see nerds-central.blogspot.com
>
> Cheers
>
> AJ
>
> Dr Alexander J Turner
> Project Network
> +44 (0) 7917 065072
> Con Call: 0870 241 3425/3342654#
>
> ________________________________
>
> From: javascript-bounces at LaTech.edu on behalf of Bill Moseley
> Sent: Thu 1/11/2007 23:57
> To: javascript at LaTech.edu
> Subject: [Javascript] Help with closures
>
>
>
> Or I think this is a closure issue.
>
> I have a really simple and common task (that I'm likely making hard),
> where I
> want to create a hide/show block.
>
> So, the block of HTML looks basically like this:
>
>     <div class="hidable">
>
>         <div class="content">
>             <span class="click">Hide this content</span><br />
>             content here
>         </div>
>
>         <div class="hidden">
>             <span class="click">Show the content</span>
>         </div>
>
>     </div>
>
> So clicking on "Show" or "Hide", well shows or hides that block with
> content.
>
> The problem is when I have two of those blocks clicking on the "hide"
> seems to get the right event but is hiding the wrong block.
>
> Here's a working demo:
>
>     http://hank.org/hide.html
>
>
>
> So, a page can have any number of the above blocks.  The javascript
> finds the blocks by looking for all "hidable" classes using Prototype's
> getElementsByClassName();
>
> The onclick events are assigned to the spans with "click".  When the
> even first I look at the parentNode's class name to know if should
> hide or to show.
>
> Basically in pseudo code I set up the events like so:
>
>     for div in get_by_class( 'hidable' ) {
>
>         // get <div> elements for the two inner sections
>         var content_div = get_class( 'content', div );
>         var hidden_div  = get_class( 'hidden', div );
>
>         // get the span for setting the events
>         var show_span   = get_class( 'click', content_div );
>         var hide_span   = get_class( 'click', hidden_div );
>
>         // closure to call the toggle passing in the two <div>s
>         var click_event = function(e) {
>             toggle( e, content_div, hidden_div );
>         }
>
>         Event.observe( show_span, 'click', show_event, false );
>         Event.observe( hide_span, 'click', show_event, false );
>     }
>
>
> Then the event does:
>
> function toggle ( event, content_div, hidden_div ) {
>
>     look at event element's parent's class name to determine if should
>     hide or show.
>
> }
>
>
>
> --
> Bill Moseley
> moseley at hank.org
>
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
>
>
>
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
>
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20070112/e6b2551a/attachment.htm>