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.

This is a quick blog post, but I thought it was worth sharing. There have been a few times where I haven't had control over all the code on a page, and something on the page insists on spitting out an alert. Often this happens at the worst possible times, like when I'm trying to load another page in an IFRAME. I work with a lot of different e-commerce platforms (the current system giving me grief is Network Solutions Commerce Space, formerly Monster Commerce), and each platform does things differently.

If I want to add an item to the shopping cart using an IFRAME, the CommerceSpace platform spits out a Javascript alert every time an item is added. That's a little ridiculous (not to mention so 2000 and late…). So here you go… drop this in the page as early as possible.

window.alert = function(str) { window.console && console.log("Alert: " + str); };

That's it. Now any unwanted alerts will be sent to the window.console instead. If you still want to be able to use window.alert later, make sure to save a reference to it first (see Prevent js alert() from pausing timers at Stack Overflow).

I just found out about window.stop() as well… I'm thinking this might be fun and useful as well. Preventing the little "page loading" jogger from running longer than necessary? Or as Jeff said…

(01:56:59 PM) Me: whoa! how have I never seen this before? http://www.java2s.com/Tutorial/JavaScript/0380__Window/windowstop.htm
(01:57:06 PM) Me: Floating Cart? I'm just saying...
(02:28:07 PM) Jeff: all this talk makes me hungry for ice cream

I was toying with the IE-only "filter" CSS property, trying to get it to reproduce the look of the new "box-shadow" property. There are several pages (such as Chris Casciano's blog) describing the problem, and some interesting solutions. I found two interesting pieces of code on the web during my search.

The first looks like a variation of the jQuery Box Shadow plugin mentioned on Chris's blog. It was originally part of the jQuery UI package, then it was spun off into a (now deprecated) jQuery Enchant library. A copy of the code can be viewed at http://dev.jquery.com/browser/trunk/fx/current/fx.shadow.js?rev=3827. What I found interesting was the use of IE-only CSS expressions to make sure the drop shadow was always absolutely positioned at the correct place on the page.

The second uses VML and IE behaviors to generate the drop shadow, and also supports rounded corners (http://code.google.com/p/box-shadow/). However, the author says there are some limitations with the VML that I know already have work-arounds (see the DD_roundies library). I'm curious if this could be extended a little more.

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.