A better way for new feature introduction and step-by-step users guide for your website and project.
Countable.js : live word-counting in JavaScript
Countable is a JavaScript function to add live paragraph-, word- and character-counting to an HTML element. Countable does not rely on any libraries and is very small in size.
Countable takes the value from an HTML element and counts paragraphs, words and characters (without and with spaces). Those numbers are then returned in an object, accessible by a single parameter in the callback function.
Thumbnail Grid with Expanding Preview in jQuery & CSS
A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.If you have searched images on Google recently, you might have noticed the interesting expanding preview for a larger image when you click on a thumbnail. It’s a really nice effect and it is very practical, making a search much easier. Today we want to show you how to create a similar effect on a thumbnail grid. The idea is to open a preview when clicking on a thumbnail and to show a larger image and some other content like a title, a description and a link.
The interesting part is to calculate the correct preview height and to scroll the page to the right position. We’ll expand the preview in a way so that we can see the respective thumbnail row and cover the rest of the remaining page. Note that we don’t use very large images for the preview in the demo so you might see a lot of empty space on large monitors.
jQuery Horizontal Tree
jQuery Horizontal Tree is a jQuery plugin for visualising data in a tree structure. This plugin supports add, edit, delete functionality with ajax and also supports drag and drop for re-organisation of nodes.
A plugin that allows you to render structures with nested elements in a tree structure. To build the tree you need is to just make a single line call to the plugin and set parameter and supply the HTML element Id for a nested unordered list element that is representative of the data you’d like to display.
Unlimited Grid Layout in CSS & JavaScript
During my work as a frontend developer I coded many sites with a full page layout, both before and after the Flash decline.
Coding this type of layout was, every time, one step forward towards a better and more maintainable CSS structure; however, even if every single length was expressed as a relative and flexible unit, we need to know the number of pages.
For example: if we have an horizontal structure of 6 pages we set the pages’ container width to 600% and every single child page width to 16.66%. But if the number of pages changed to 5 or 7 we have to edit the CSS.
