Pikaday is a JavaScript datepicker with a light footprint and easy style-ability with modular CSS. Pikaday is packed below 5kb and isn’t even dependent on jQuery. It does play well with Moment.js if you need advanced formatting. This datepicker has literally been on my “projects to build” list for years. I’ve seen alternatives since but nothing I’ve been happy to develop further.
iPhone Style Radio and Checkbox Switches using jQuery and CSS
I created a great interface for an administration panel, complete with great looking forms and buttons. The one thing that stuck out like a sore thumb, however, were the ugly radio buttons and checkboxes I had to use repeatedly throughout the panel, so I decided to fix them. I found a few plugins that achieved what I wanted, however they were all pretty hefty in file size. My version doesn’t look as cool but makes up for it in file size, weighing less than 3kb and using only one image.
Accarousel : jQuery Accordion with Carousel
Before a week one my friend had requested me to suggest any jQuery plug-in that is carousel with accordion effect inside. I tried to find one suitable plugin – but couldn’t make it. That made to write my own custom plugin that consist both carousel and accordion effect. Another one requirement was to flyout the most closed sibling elements to outside and hide rest of all when accordion expands.
Flex : A fluid asymmetrical jQuery Animated Grid plugin
A fluid asymmetrical animated grid plugin for jQuery.Flex is an idea inspired by the old flash homepage on Adidas.com. Searching google for anything that resembled that effect, lead me to a few plugins that were similar, but not the same. Saw one person say it was “quite impossible”, thought it would be a fun challenge.
tabSwitch : jQuery tab/slider plugin
tabSwitch is a tab/slider plugin for jQuery. You could make a tab box system with the least of code and still fully customizable. Currently, you could choose from 7 different effects with 2 view styles. You could also hot swap the effects around in runtime.
- There is no limit what kind of HTML tag you use.
- You could move to next, prev tab or jump to a specific tab.
- All the controls could be anywhere in the website, on top of a tab, inside a tab…
- Multi-level tab system.
- You could change the style of the viewport, you could add a class for every single tab…
WideText jQuery Plugin
I was searching around the internet trying to find a responsive text solution that was lightweight and easy to use. The few that I stumbled upon didn’t work exactly how I wanted, or they had too many bells and whistles.
As always, I decided to mess around with each one to figure out the best approach I could take to simplify everything and get it working for me. In the end, I managed to put together a tight little jQuery plugin that gets the job done and nothing more.
optionTree : jQuery plugin to dynamically create Select Elements
jQuery plugin to dynamically create select elements with hierarchical options.This jquery plugin converts passed JSON option tree into dynamically created <select>elements allowing you to choose one nested option from the tree.It should be attached to a (most likely hidden) <input> element. It requires an option tree object. Object property names become labels of created select elements, each non-leaf node in the tree contains other nodes. Leaf nodes contain one value – it will be inserted into attached <input> element when chosen.
The plugin also supports loading additional levels via AJAX calls and preselecting given items at load.
File Style Plugin for jQuery
jQuery plugin for styling file input elements. Browsers do not let you style file inputs. File Style plugin fixes this problem. It enables you to use image as browse button. You can also style filename field as normal textfield using css. It is written using JavaScript and jQuery.
Plugin wraps vanilla file input with div. This div has button as background image. Image button is aligned with file inputs browse button. File input is then hidden by setting opacity to zero. Chosen file is shown in normal text input which mimics file input. This text input also inherits file inputs class. Use this class to style the text input.