Here is a very simple way ho to create a heat map with jQuery. The idea is to track the clicks of a user and then display the click pattern with semi-transparent dots on an overlay. You can try out the demo by first clicking around on the page and then clicking “Analyze”. Since the dots are semi-transparent, spots that have been clicked on more often, will appear slightly darker. Click on the overlay to make it invisible again and continue with the “recording”.
Colorjoe : jQuery Scaleable color picker
Unlike many other colorpickers out there, colorjoe is truly scaleable. It is based on CSS and does not depend on external images. As a result, you can tweak its size to fit your purposes. Supports touch and AMD module definition as well.
colorjoe was somewhat inspired by ColorJack and RightJS Colorpicker. Unlike those it actually scales pretty well. Essentially this means that you’ll be able to define its actual dimensions and layout using a bit of CSS. This way the widget fits well responsive layouts.
In addition it’s relatively easy to implement missing functionality (RGB fields, whatnot) thanks to the simple API it provides.
PowerTip : jQuery plugin that creates hover tooltips
PowerTip features a very flexible design that is easy to customize, gives you a number of different ways to use the tooltips, has APIs for developers, and supports adding complex data to tooltips. It is being actively developed and maintained, and provides a very fluid user experience.
Features
- Straightforward implementation
- Supports static tooltips as well as tooltips that follow the mouse
- Ability to let users mouse on to the tooltips and interact with their content
- Mouse follow tooltips are constrained to the browser viewport
- Easy customization
- Works with keyboard navigation
- Smooth fade-ins and fade-outs
- Smart placement that (when enabled) will try to keep tooltips inside of the view port
- Multiple instances
- Works on any type of element
- Supports complex content (markup with behavior & events)
Status.js : Check your website for broken links with jQuery
Check for broken links in yout website with jQuery.Status.js is a full client side tool, but still it makes a lot of requests to the server to crawl the entire website. So please, do not DDoS me!
Status.js will scan the website it’s hosted on from the root (/) for links.Internal links will be followed (fetched through Ajax) and scanned again. Yes, it’s recursive.External links will be memorized and used for cross-referencies. You can’t check if an external link is broken with Status.js because of the cross-domain limitation of Ajax calls.
A table with some nice data will be populated in real time while Status.js is working.
Nice Sparkle Progress Bars with jQuery & CSS3
Shiny Sparkle Progress bars with percentage label. The sparkles inside the bars are created using a combination of linear-gradient and radial-gradient as the background and then animated using the animation and keyframes properties. However, the label for percentage is animated using jQuery.
How to add Floating share box to your website with jQuery
After spending couple of hours searching for floating share box plugin for WordPress, I finally decided not to use plugins. Those plugins were not good enough to produce what I thought of like menus on Mashable or Hongkiat. Then I came across this article Scroll/Follow Sidebar, Multiple Techniques by Chris Coyier.
In this tutorial, I will use same jQuery code from Chris Coyier’s article and will add some bits and pieces to build a floating share box. Keep in mind this is not a plugin, but can be integrated with static as well as dynamic sites.
Making an Interactive Wall of Images With jQuery
This is a little jQuery experiment I put together, just for kicks! Here is a list of things I wanted the wall to do, and things you’ll be learning to do:
- Simple HTML without need for much editing
- Group these divs depending on the width of the page, into divs that change as you resize the window
- When resizing the window the image rows should change to display the maximum number of images, so it’ll work on the maximum number of screens.
- On hover they should expand and become bigger, they might also be linked. (possibly optional depending on your needs)
- If a row is incomplete, images should be added to the end to fill a row, so it looks like a continuous block.