Posts Tagged ‘html’

Javascript Circular Selection Knob (IE6 Compatible)

August 23rd, 2010
Polished Knob Logo

An inherent problem with the internet is that the UI elements are disconnected from the real world. People in the world are accustomed to things like switches, knobs and the like.

One thing that has been missing (at least I couldn’t find anything?) from HTML UI elements is the knob. An element that you can spin around to assign a value to some property. The functionality of a knob is basically the same as a slider — only the shape is different.

Up until now, you only had horizontal and vertical sliders to choose from. Boring. The look of them is generally ugly and there is nothing special about the design or intuitivityness.

» Read more: Javascript Circular Selection Knob (IE6 Compatible)

SimpleTabs: A pure javascript easy tab implementation

February 18th, 2010

I’ve written — and lost — at least two reusable tab components in Javascript before. So I’m posting this one here as a reminder to myself to never, ever, ever write one of these again.

There are tons of HTML tabbing classes/functions/extensions/plugins/blahblah out there but almost every one I’ve ever found has been a plugin for [insert Javascript library here]. I don’t see a point in using [insert Javascript library here] just to have 3 tabs on a page, do you?

So here it is, a simple tab class with callbacks that could be extended to do all your tabbing needs at 1.7kb min’d. You could probably get that down to 1k if you really wanted to and didn’t need callbacks. What’s an extra 1.7kb in your Javascript file? You are including a single JS file instead of ten 5kb files, aren’t you?

Source/examples after the break.

» Read more: SimpleTabs: A pure javascript easy tab implementation

pr() a print_r enhancement for your HTML web page

January 18th, 2010
function pr ($mixed)
{
	echo '<pre>' . htmlentities( utf8_encode( print_r( $mixed, true ) ), ENT_QUOTES, 'utf-8' ) . '</pre>' ;
}

When writing PHP, I often find that I need quick debug access to an Object or Array to see what it contains. PHP provides print_r, which works great–except that the data appears without all the tabbing in regular ol’ HTML. This is annoying for large Arrays or complex Objects.

That is why I created the pr() function. It basically just wraps the output of print_r in pre tags and then your formatting is back.

Depending on the encoding of the data you are passing to and getting from print_r, you may run across problems when combining print_r and htmlentities (with utf-8). If the encodings don’t match, it may return nothing at all! This could either mean that the variable is some kind of empty, or it could mean that htmlentities didn’t like the encoding that was returned by print_r, and crapped all over itself.

So, you first have to convert the data returned by print_r to utf8 (or whatever the encoding of your web page is) before passing it along to htmlentities. Since I try to keep every web page I work on in utf8, I keep this function set up to compliment that.

As long as you have a working utf8_encode, this function should always output pretty, utf-8 encoded data in HTML. If you need to convert to some other encoding beside utf8, you can use mb_convert_encoding.

Facelift Image Replacement v1.1 is Available

July 30th, 2008

facelift image replacement

After receiving some feedback from Daniel Schoone letting me know that facelift didn’t work when prototype was in use, I decided to work on an updated release.

Change Log

Download Facelift v1.1