blog.gatherage.com

I wanted a nice, almost 100% CSS styled layout for my Javascript tabs. So with the help of the CSS Gradient Generator I set about doing that. All the gradients and rounded edges are CSS3-based, with the exception of the gradients used by IE (PNGs generated by the aforementioned website). Please check out the demo, let me know what you think. I have a feeling some fixes will be necessary for IE6, but I'm getting there…

I am also struggling to add CSS3 drop shadows to the tabs. I'm not sure if there's a simple way to do it so the tabs don't overlap onto the area below the tab. If someone wants to take a swing at it, please let me know.

Hey, I have a new calendar in the works. I have all the essential working pieces written, and now the code just needs cleaned (pretty badly...). It's based off of the layout and code of Stefano Verna's "iCal-like Calendars". I modified his Coda popup bubbles code to make sure the bubble always displayed inside of the viewable area. I also added code to generate a calendar for the current month, display next/previous month, and add events on-the-fly.

My sloppy demo is up at http://stuffs.gatherage.com/jCal/. Enjoy.

After using the jQuery "live" function for a few months, I realized it'd be nifty to use switch in the event handler. Yes, this could be handled by a huge "if" statement, but don't you think you deserve something a little more elegant? Here's an example that extends the jQuery object.

<!-- HTML code -->
<div class="actionBar">
	<img src="images/pencil.png" alt="Edit" />
	<img src="images/cut.png" alt="Cut" />
	<img src="images/delete.png" alt="Delete" />
</div>

// Javascript code

// Extend the jQuery object with our own custom "selectorSwitch" function
jQuery.fn.selectorSwitch = function(args) {
	var val = this;
	for (var selector in args) {
		if (this.is(selector)) {
			val = args[selector].call(this);
			break;
		}
	}
	return val;
};

// Now we bind an event delegation listener. When it's triggered, we use our new function to compare the clicked element against a list of selectors. When the function finds a selector that matches our clicked element, it runs the associated code.
$(".actionBar img").live("click", function() {
	$(this).selectorSwitch({
		"img[alt='Edit']": function() {
			// Handle an "edit" action
		},
		"img[alt='Cut']": function() {
			// Handle a "delete" action
		},
		"img[alt='Delete']": function() {
			// Handle a "delete" action
		}
	});
});

A demo is available here. And remember, always use an event context when possible.