jsPlumb provides a means for a developer to visually connect elements on their web pages. It uses SVG or Canvas in modern browsers, and VML on IE 8 and jQuery.jsPlumb adds an element to the DOM for each Endpoint, Connector and Overlay. So for a connection having visible Endpoints at each end and a label in the middle, jsPlumb adds four elements to the DOM. The actual elements it adds depend on the renderer in use (Canvas/SVG/VML).
Best jQuery Web Plugins & Tutorials with Demo
Dynamic TinyURL Links Generator using jQuery
There are so many web applications available for shortening URLs to share online. TinyURL is one of the originals and has been around longer than I can even remember. Their service is always online and it works perfectly for translating into tweets or posts on Facebook.
In this tutorial I want to build a mini-app which will generate tiny URLs right from your web browser. You could install this script on any domain and you’ll be able to generate dynamic links using Ajax without even refreshing the page! Their service doesn’t have a detailed API but it’s enough that we can pass a full URL and get the tiny version back as a result. And that’s just enough functionality for this app to hold some value when hosted on a 3rd party website.
Like & View – jQuery Facebook Content Locker
Increase advertising revenue and the number of visitors to your site using the content lock based on the Facebook Like Button. Lock the most interesting part of your articles, links, images, videos, etc. The plugin allows you to lock the specified content on the page until the user clicks on the Like button. It intrigues users and significantly increases the number of likes for pages that generates an additional traffic from the social network.
Features:
- Blocking any type of content: text, images, links, forms, etc.
- Smart lock depending on the type of the locked content. For example, the links are locked differently than text paragraphs.
- Unlimited number of locks using on the page with the blocked content.
- Full integration with the already installed Like Buttons.
- About 20 parameters to configure the plugin!
- Any url can be specified to like.
- Easy and completely ready to use plugin.
- Fully customizable appearance.
jBar : jQuery Plugin call to Action Bar
jBar is a simple and lightweight jQuery notification banner I’ve created which is an alternative to the Hellobar. It allows you to create a simple call to action and bring it forward for the user to see at the top of your website. The user can then toggle the visibility of the bar by clicking the ribbon.
CLEditor : WYSIWYG HTML editor in jQuery
CLEditor is an open source jQuery plugin which provides a lightweight, full featured, cross browser, extensible, WYSIWYG HTML editor that can be easily added into any web site.
In addition to the standard text formatting features found in other WYSIWYG editors, CLEditor also contains rich drop downs for font name, size, style, text color and highlight color. CLEditor allows you to insert images, hyperlinks and horizontal rules.
CLEditor provides a rich plugin development environment, allowing you to customize its user interface and functionality to fit your needs.
jQuery Heat Map
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”.
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.
