jQuery Hotspot Map – Powerful annotations and tooltips

    jQuery Hotspot Map - Powerful annotations and tooltips

    Hotspot is a plugin for easily adding annotations, text, or other stuff to an image, on the exact locations that you want. It’s an old concept with one exception. It comes with a powerful editor for precise drawing and positioning of the spots. You can also edit settings, see a preview of the final result and the editor will generate the HTML and JS code for you!

    One of the most powerful features of this plugin is the editor that it comes with. You don’t need to manually specify coordinates and dimensions of each spot on the image. It’s all visual – click to add a spot, or click and drag to draw a rectangle. Then dial the settings, click “Generate” and you will see a preview of the final result!

    Create a Sliding Navigation Menu with jQuery

    Create a Sliding Navigation Menu with jQuery

    Consider a situation where you include your blog categories in a navigation menu. If you have a long category list, a drop down navigation menu will exceed the page height and the user might need to scroll to navigate to the last part of the menu. These small things are enough for a user to navigate away from your site.

    To solve that, we are going to create a complete navigation menu using jQuery. I will explain how to compress large menus using sliding panels to keep the depth of your menu to a minimum level. Take a look at the demo before we get started. You can see that sub level menu items are hidden initially and displayed as sliding panels on click.

    JustGage : Animated Gauges in SVG & Raphaël library

    JustGage : Animated Gauges in SVG & Raphaël library

    JustGage is a handy JavaScript plugin for generating and animating nice & clean gauges. It is based on Raphaël library for vector drawing, so it’s completely resolution independant and self-adjusting.

    Oh yes, since it’s pure SVG, it works in almost any browser – IE6+, Chrome, Firefox, Safari, Opera, Android, etc.

    Lightbox 2 : Original lightbox script in jQuery

    Lightbox 2 : Original lightbox script in jQuery

    Lightbox is a simple, unobtrusive script used to overlay images on top of the current page. It’s a snap to setup and works on all modern browsers.

    Typist : Animated Typing Text jQuery Plugin

    Typist : Animated Typing Text jQuery Plugin

    Typist is a jQuery plugin that allows you to animate text as if it were being typed onto the screen.

    How to Create a Responsive Navigation in CSS3 & jQuery

    How to Create a Responsive Navigation in CSS3 & jQuery

    In this post, we are going to walk you through on how to build a simple navigation from the ground and using the CSS3 media queries and a little jQuery to display it in a small screen size like the smartphones properly.

    jQuery Animated Responsive Image Grid

    jQuery Animated Responsive Image Grid

    A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. This can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions.The idea is to have a list of images and define the number of columns and rows which will arrange the images into a grid. The remaining images will appear with different animations and delays. With some sizing options we can define how the grid should be laid out for different screen widths.

    This kind of component can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions.

    Animator jQuery Script

    Animator jQuery Script

    “Animator” gives you the possibility to animate almost every single HTML element on the page.It can’t be easier to do. Just add a class called “animate” + <<animation name>>

    Sometime you will need to do the animation faster. So, only add another class called “quick” and it will reduce the animation time.You have 50 different animations to choose. 29 to appear HTML elements and 21 disappear animations.Also I’ll give you a javascript function, to control the animation flow. Even if you don’t know anything about javascript, you will be able to change the animations in real time.It works amazing on iPhone, iPad and some other mobile devices.

    Also works in Chrome, Opera, Firefox. IE is not supported yet, but still perform the enter and exit animation.

    JZoopraxiscope : jQuery plugin for making animations from static images

    JZoopraxiscope : jQuery plugin for making animations from static images

    JZoopraxiscope is a jQuery plugin for making animations from static images inspired in Eadweard Muybridge’s Zoopraxiscope.Besides jQuery, it also uses jQuery UI and requires the frames to be animated as a single, horizontal image.It all works by calling a simple function where we define dimensions of the images and the frame.

    After that, JZoopraxiscope works with the help of play and pause buttons provided.Although it looks hard to use the resource widely, with a bit help of creativity, it can beautify a web page easily.