Clientcide Examples & Tutorials

Request.JSONP

Aaron Newton — Mon, 07 Dec 2009 16:33:28 -0600

docs JSONP is a means by which to get JSON data from another domain than the one your page is on. If you try and use Ajax to request data from a different domain than the page, you'll get a security error. One way around this is a concept some call "JSONP". This is where you include a script tag in your document. This script tag points to an external javascript source and when the script tag loads it executes (like any other script tag).

OverText

Aaron Newton — Thu, 08 Oct 2009 18:17:30 -0600

docs OverText is a class that lets you overlay instructions above an input. You can accomplish a similar effecty by setting the value of the input as the instruction and then resetting the value when the user clicks into the input, but this method has three downsides: the instruction might get submitted by the form, you can't style the instruction text differently, if you're using a clientside form validator like FormValidator.js then the value will fail validation.

FormValidator

Aaron Newton — Tue, 08 Sep 2009 09:59:45 -0600

docs InputValidator The InputValidator class creates a single object that will validate a form input for a specific type of data. For instance, you might have an InputValidator for required fields that just makes sure the user has input something, while another InputValidator might check for a date format.

ToElement

Aaron Newton — Tue, 02 Jun 2009 11:12:08 -0600

docs MooTools has a not-well-known shortcut for its classes that allows you to pass an instance of a class to $ and have it return the DOM element to which the class is applied. This doesn't always make sense. While Fx.Tween obviously only points to a single DOM element, Accordion does not.

StickyWin.Modal

Aaron Newton — Tue, 02 Jun 2009 11:11:28 -0600

docs As outlined in the modalizer section, a modal window is one that grays out the page when it prompts the user to act. StickyWin.Modal is just modalizer+StickyWin: new StickyWin.Modal({content: $('stickyWinContent').get('value')}); You can pass it the same kind of info you can a StickyWin with an additional modalOptions object with settings for modalizer:

StickyWin.Fx

Aaron Newton — Tue, 12 May 2009 11:44:12 -0600

docs The StickyWinFx.js file extends StickyWin so that it fades in an out (woot). In addition to that, if you also include StickyWinFx.Drag.js, then you can make the popup resizable and/or draggable. The class (StickyWin) is used in all three cases. If you don't include StickyWinFx.Drag.js, then the options for dragging and resizing won't work, but it won't break or anything.

StickyWin.ui

Aaron Newton — Tue, 05 May 2009 17:08:30 -0600

docs StickyWin.ui() returns an html layout that is my default StickyWin skin. I got tired of authoring this over and over again, so it's just a quick way to wrap your content up in a nice window. Feel free to download it and change the styles to suit your needs.

External Assets

Aaron Newton — Mon, 27 Apr 2009 11:10:56 -0600

Clientcide's libraries include references to external images in several of its classes. These definitions are always configurable so you can overwrite them with your own values, but if you don't want to you can just use my images and styles. By default the code points to servers at cnet.com which host most of the files, but this isn't really that desirable because visitors to your site will have to open new connections to a different domain, and this will often be slower than requesting the fil…

Submitting Bugs

Aaron Newton — Sat, 25 Apr 2009 14:30:22 -0600

We use the issue tracker on Google Code to manage bugs and whatnot. You can find that here: http://github.com/anutron/clientcide/issues. Please provide as much detail as possible. When possible, post a link where we can see the issue and reproduce it.

Downloads & GIT

Aaron Newton — Sat, 25 Apr 2009 14:16:54 -0600

I'm using git for code source control: (Clientcide on Github). You can download files individually from our git repository here: Check out the code w/ git Additionally, you can check out the source code with svn thusly:

IframeShim

Aaron Newton — Sat, 25 Apr 2009 13:08:47 -0600

docs CSS provides a way to position elements on top of another with the z-index setting. If you've ever tried to position an element above a select input or some flash objects in IE 6 and below, you've no doubt discovered that you can't give it a high enough z-index no matter what you try (also, Firefox on the Mac has an issue with scroll bars, so this fixes that, too).

Dollar G - removed plural from document in second example

Luke Hoggett — Thu, 19 Mar 2009 17:04:16 -0600

This method is for "$Group" which returns a collection of elements (an array) no matter what you pass it: a DOM element, an id that references one, a selector, or an array of elements. This is useful if you want to have a class that accepts as it's arguments any number of elements. It always returns an array, though it may be empty.

FormValidator.Tips

Aaron Newton — Thu, 29 Jan 2009 16:14:14 -0600

docs This class extends the FormValidator class to use popup tips instead of in-line error messaging. It makes use of the StickyWin.PointyTip class for positioning, so you have a lot of flexibility about where the tips appear, what color they are, their size, etc.