jQuery: calendar and datepicker plugins

Tweet

Holidays time - short post. I hope you find it useful.
Now on with the calendar and datepicker jQuery plugin parade!

wdCalendar – jQuery Based Google Calendar Clone
"wdCalendar is a jquery based google calendar clone. It cover most google calendar features. User can choose to have a daily view, weekly view or monthly view. User can easily create, update or remove events by drag & drop. It is very simple to to integrate wdCalendar with a database.
wdCalendar is free (open source LGPL license), easy to use, and with great functionalities."

Event Calendar
"Event Calendar is a jQuery and ColdFusion event calendar that works a lot like the Google Calendar system. With Event Calendar, you can share calendar information throughout your organization. There is also a simple user facade, that you can extend, to help control user rights."

jQuery.calendarPicker
"This component is a light-weight calendar/date-picker.
Some features:

• supports internationalization (supports do not necessary means it is implemented:-) )
• supports changing current date
• supports mouse wheel scrolling
• supporting (deferred) callback on date selection
• supports variable number of years, months and days
• supports next/prev arrows"

Date Picker - jQuery plugin 
"Date Picker component with a lot of options and easy to fit in your web application."

FullCalendar
"FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event). It is open source licensed under an MIT license."


jQuery Datepicker
"A jQuery plugin that attaches a popup calendar to your input fields or shows an inline calendar for selecting individual dates or date ranges."

Multiday Calendar Datepicker JQuery Plugin
"Multi-day, multi-month animated datepicker jQuery plugin that weighs in at 14KB with the uncompressed development version."

jQuery Frontier Calendar 
"Full month calendar jQuery plugin that looks like Google Calendar."

jQuery UI datepicker

Calendario
"Today we want to share a flexible calendar concept with you. Calendars can be a very tricky thing when it comes to their layout and responsiveness. This is an experiment for trying out some grid layouts that can be applied to calendars. We’ve created a jQuery plugin for the calendar itself and you can see some examples of how to use it in the demos. The aim is to provide a suitable layout for both, small and big screens and keeping the calendar structure fluid when possible. On large screens we want to show a grid-based layout while on smaller screens, we want to simply stack the days of the month."

jQuery: menu plugin and ideas

Tweet

If you want to create menus using jQuery, here is a good list of plugins and ideas to consider.

NavDock jQuery Plugin 1.2
"NavDock is a jQuery plugin that transforms your menu into a dock style menu." 

jQuery.tn34.facets 

jOrbital menu
"Group objects with similar functionality into one button. Save space and give users more interaction. Move your mouse over the share button to see what I mean."

jMenu : Horizontal navigations with unlimited dropdown sub-menus
"Menu is a jQuery plugin that enables us to create horizontal navigations with unlimited sub-menus.
Besides jQuery, it also requires jQuery UI and supports all the effects of this library (like fadeIn or slideDown).
The markup of the menu is pretty clean as it makes use of nested lists.
The look and feel of the output is set in a CSS file so updating it without touching the JS code is possible."

Drop Menu
"With this script you can make nice and interactive drop down menus. The advantage of this script is that it not only gives you the ability to make list drop down menu. You can also use a div as drop down element."

jQuery and CSS3 Awesome Slide Down Box Menu 
"we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering."

Apple Navigation with CSS3 
"Apple is known for very clean design and if you have been to their website in the last few years you’ve seen their primary navigation. It’s a staple of the apple website and today I wanted to take a crack at recreating the Apple navigation using CSS3 techniques."

jQuery: image gallery plug-ins

Tweet

 jQuery image gallery plugins! You all know there are so many of those plug-ins, however, here's a list of the best... in my opinion...



bxGallery
"bxGallery is jQuery image gallery plugin that contains automatic thumbnail generation."

Galleriffic
"Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth. I am not so great at spelling, and it was much later that I realized that the more appropriate spellings would be Gallerific or Gallerrific, but is too late now for a name change, so Galleriffic remains."

Pikachoose
"Pikachoose is a lightweight jQuery slideshow plugin, with tons of great features! jCarousel integrates smoothly with PikaChoose to give your gallery simple and effective carousel. PikaChoose now has API hooks for integrating lightboxes and other things."

YoxView
"YoxView is a free Lightbox-type media and image viewer jQuery plugin. It's easy to use and feature-rich."

GalleryView
"My goal with GalleryView is to provide an extensive set of options to the user. Not only will the user be able to adjust photo and thumbnail sizes, and transition speeds, but he will also have the ability to choose from a selection of element positions, transition styles and other features."

FlexSlider 2
"The best responsive slider. Period."

wmuSlider
"wmuSlider, a jQuery responsive slider"

ResponsiveSlides
"ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using list items inside <ul>. It works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don't natively support it. Only dependency is jQuery (1.4 and up supported) and that all the images are same size."

AD Gallery
"...It’s a gallery plugin that’s a bit different than plugins like Thickbox and Lightbox."

jQuery: cookies!

Tweet

I've already talked about cookies. We explored the way to use them with ASP, but have you ever wondered how to manage them with jQuery?

This is a very short article because I don't want re-write an already made guide...
We are talking about a jQuery plug-in called jquery-cookie which allows us to manage everything about cookies with jQuery.
We will be able to read, create and delete cookie sessions. The plug-in can manage session expiration and it can be configured in order to define a valid path for cookies.

Just go to the above page and see for yourself...

jQuery: dNotify - A simple user notification plugin for jQuery

Tweet

Today we are going to talk about dNotify, a simple user notification plugin for jQuery.
The way this simple plugin works is very interesting. Because I usually hate when popup message start to - well - pop up all over the web site, I've found dNotify quite unobtrusive. Moreover, we should consider the use of dNotify in web applications, where we do need to interact with the user more than in other situations.
What makes the plugin almost unique is the fact we can control everything about the notification.
Let's see how we can use it.

jQuery: image zoom plug-ins

Tweet

As one of the web thought visitors has commented a few days ago, there are many jQuery plug-ins that help us in creating zoom effects on images. Here's a list of the best.

Zoom
"A small (1.4kb) jQuery plugin to enlarge images on mouseover or mousedown."

jQuery Image Magnify
"jQuery Image Magnify enables any image on the page to be magnified by a desired factor when clicked on, via a sleek zoom in/out effect. The enlarged image is centered on the user's screen until dismissed. It works on both images with and without explicit width/height attributes defined. This means you can take a large image that by default would look out of place when shown, shrink it using explicit width/height attributes, then enable users to magnify it on demand to its original dimensions when the image is clicked on using this script."

Cloud Zoom
"Cloud Zoom is a free jQuery image zoom plugin, a comparable alternative to products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatability across browsers."

Zoomimage - jQuery plugin
"Present you images in stylish way. The links are unobtrusively highjacked to open the images in an inpage popup with drop shadow and border."

JQZoom
"JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework. jQzoom is a great and a really easy to use script to magnify what you want."

ImageLens – A jQuery plug-in for Lens Effect Image Zooming
"Use this jQuery plug-in to add lens style zooming effect to an image"

Easy Image Zoom
"I have been working on a little script for a client of mine, that required product image magnification. The task was to create a script that will allow users to see large details of the product while moving cursor over medium sized image. During the process I decided to create a jQuery plugin and share it with you guys!"

jQuery: loading content while user scrolls (infinite scroll)

Tweet

There's this new fashion of creating page with infinite scroll. In order to obtain the desired effect, there are some jQuery plug-ins out there.
Here are some.

jQuery: preloaders!

Tweet

Do we need preloaders? Maybe... maybe not. It's up to you.

Here is a short list of jQuery solutions for you.

QueryLoader2

"What QueryLoader2 does is simply scanning the given elements for images (and background images) and preloading them before the website is visible.
This version has been modified to make it easier for users to implement (especially those who are already into jQuery.)
QueryLoader currently works with jQuery v1.6.4 and in IE version > 7, Chrome, Safari and Firefox."

Spinner – A jQuery Preloader Plugin

"Spinner provides a simple approach for adding and removing a preloader for your web applications. Usage is as simple as calling $(‘elem’).spinner() and subsequently $(‘elem’).spinner(‘remove’). You may create your own custom preloaders at http://www.ajaxload.info. Please note that if you use a custom preloader, you must pass in the new height and width as options."

jQuery - Preloader

"This jQuery plugin preloads css, js, html and images with visual loader, fast and very small (~3Kb)."

jQuery.Preload

"This is an advanced multi-functional preloader, that has 4 modes integrated. Each mode suits a different, common situation."

Seriously easy jQuery preloader

"[...] We aren’t actually going to build a preloader in the way that a Flash preloader works. Essentially, what we’re going to do is hide everything until the site is loaded. You do this by creating a div that covers the entire window, so you can’t see the site loading behind it and then when the site is completely loaded, you remove the div. We aren’t technically preloading anything, but we’re faking it and mimicking what people are used to with Flash preloaders."

jquery preloader.js

"jquery preloader.js is an advanced multi-functional preloader, that has 4(actually 5) modes integrated.
Each mode suits a different, common situation."

Simple jQuery Preloader Plugin

"After several searches for a pre-loading plugin for jQuery I came up short – they either did too much and had hundreds of options I didn’t want, or they were packaged with something else had a lot of code I didn’t need. The following plugin will allow you to pass in a selector (div, body, any other element) and pre-load all images within it, the plugin is very lightweight with only 17 lines from start to finish."

jQuery UI Preloader plugin

"The main purpose of this plugin is to show indicator that some operation is in progress. As usually, it's rotating image or something like this." 

jQuery: embedding videos

Tweet

Ever wanted to embed a video in your blog or web site? I must admit I don't really like videos on web sites, however I understand that some sites heavily rely on videos. Usually when I open a home page, the presence of multiple videos - starting automatically - makes me go away. But, I do appreciate if an internal page offers the possibility of viewing a short video or animation... on demand.

Anyway, if you need to embed videos in your pages, here is a list of jQuery plugins that might be of some help.

jQuery: flexible text with FitText and BigText

Tweet

Following my posts about the new mobile generation and the consequent need to create web site compatible with mobile devices like tablets and smartphones, I would like to introduce two smart jQuery plug-ins that will handle font size.
FitText can be used with fluid layouts and it can scale headlines that fill the width of a parent element.

jQuery Components by Matteo Bicocchi

Tweet

While searching for some jQuery plugins on the web, I found a great blog. I was actually looking for a drag and drop jQuery solution, similar to Draggable and Droppable in jQuery UI. I found Matteo Bicocchi's Blog by chance and I've literally spent a few hours exploring his jQuery components. Apart from the fact that Matteo seems to me a very good programmer - not to say a very kind person - I believe that the jQuery code he created is simply great. Just after looking at the demos on the blog, I realized that the solutions are neat, well conceived and really interesting.

jQuery: BlockUI Plugin

Tweet

I recently needed to use AJAX requests and make the user aware of the fact that something was happening. If we use the classic XMLHttpRequest object in synchronous mode the entire web interface will freeze until the request is completed. You may understand that the user might be confused on what is going on in background, so we need to display simple and effective messages, explaining that the request is actually being sent and processed.

jQuery: enhancing html tables' usage with DataTables plugin

Tweet


Working with tables is a basic need for every web developer. Specifically when data fetched from a database must be tidily presented in your page, tables could be the only viable answer. We can enhance tables' usage with a great jQuery plug-in: DataTables.

 

jQuery: 9 plugins for forms

Tweet


When handling forms in a web site or application, jQuery can make things easier. Here I've gathered some very helpful plug-ins you might use when needed. Please let me know your thoughts!

jQuery: 5 useful file upload plugins

Tweet

Following my "ASP: Scripting.FileSystemObject... how to move, copy and delete a file or a folder" post I think that implementing a file management system for example on an Intranet, could be interesting indeed. In the mentioned post, I explained how to manipulate files already uploaded on the server. Now you could ask how to develop an upload system... so here we are.

jQuery: the magic wand

Tweet

I don't like CMSs. Well, I must admit: I really hate CMSs. I'm stating that just because I do like programming my own web site with complete freedom. And CMSs - even if they claim to be complete or complicated - are usually too tight for my needs.
Even though that is always true and I won't change my mind in the future, I do believe that sometimes programming everything in a web site is very hard and time consuming. So a little help - with complete freedom and customization - is welcome.

jQuery has nothing to do with CMSs