jQuery: scroll to the top, to a specific container and to the bottom of a page

Tweet

Some time ago I wrote an article where we discussed how to use JavaScript to create a smooth scroll to the top of the page.
Today we are going to see how to do it with jQuery, and we are going to do it in order to scroll to the top of the page and even to the bottom of the page. After that we are going to create a simple jQuery function that will scroll to a specific element of the page.

Interested? Ok... follow me.

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: chaining!

Tweet

We should all bless jQuery. It gives JavaScript a completely new face in terms of usability and easiness.
Considering the latest news about version 2.0, jQuery is quite alive and kicking...

I don't know how many of you know about chaining, but I think we should all try to understand how and why we should use it while writing jQuery code.

JavaScript: void(0) and links that do nothing

Tweet

What is a web page after all? Isn't it a bunch of information linked to something else?

As you know, web sites without links don't exist. And if they exist they are basically dead. When we insert a link in a page, we generally want people to click on it and go somewhere else. However, some times we need to create links that do nothing. Or to better say, links that do not take the user somewhere else.

With JavaScript we can create links which can perform different action from actually linking to another page.
However this is not new to us. We already know the possibility of using links to show or hide DOM elements (jQuery is a great tool in that matter and it's JavaScript as well).
On the other side, here we are talking about something different. We will see how to use void(0), but we will see something else and we will make some considerations about it.

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: snow effects for Christmas!

Tweet

As I did last year, here is a quick collection of Christmas effects. In particular we are talking about snow effects made exclusively with jQuery.

Ready for the holiday season? Here we go:

jQuery snow falling plugin
"Idea is to create one snowflake initially, clone that snowflake at some time interval and add random values for properties for each of them. And it’s done in less than 1kb minifed."

jQuery font flake / snow flake experiment
"was bored one night, had an hour charge left in the laptop, challenged myself with this."

jQuery Snowfall 1.5 update now with snow buildup!

jQuery Snow
"This extension decorates your webpage with falling snow."

Beautiful Christmas Santa Snow Falling Greetings with html5 css3 and jquery
"Hey, Still using old Flash Christmas Greetings ? For this Christmas, We are Introducing a Snow Fall Animation with HTML5 CSS3 and Jquery."

jQuery: get and set information for DOM elements

Tweet

jQuery is a great tool when we need to manipulate elements in our web page.
Today I would like to focus your attention on some useful methods that allow us to get or set information of DOM elements.
We are talking about:
1) .text()
2) .html()
3) .val()
4) .attr()

Let's see them one by one.

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 and JavaScript: generate and read a QR Code

Tweet

Hello everybody!
today we are going to see something really interesting that someone in the past asked me via email.
We are going to generate a QR code using a jQuery plug in and then we are going to use a JavaScript library to read the very same QR code.
What do you think, is it interesting enough?

jQuery: hide and show DOM elements

Tweet

I've recently talked with a friend of mine about jQuery. I soon realised that some common methods are not so easy to understand, especially for beginners.
That's why I decided to write this short post. We are going to see how to hide and show a DOM element. Not very complicated, but that's what beginners usually start to do the first time they use jQuery. Understanding the following tricks, will simplify the whole understanding of jQuery.
Follow me...

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.

DocHub: a reference to almost all programming things

Tweet

Today I would like to share a web site I recently found and which might be of interest for many of you.

The place is called DocHub - Instant Documentation Search and has references to all things in programming CSS, HTML, JavaScript, DOM, JQuery, PHP and Python.
Well, as you can see ASP is not there (while there's PHP and Python) but the resource is really incredible and it is a quick and complete guide to the above programming languages.

The site is made of two panels: the left one allow us to search the wanted term (and it's a free search box), while on the right panel the searched information are made available when selected.
Believe me when I say the database is very well done and it has many valuable information either for the experienced programmer or the newbie.

So... what you're waiting for? Go there and have a look for yourself!

jQuery: extract the page title and URL

Tweet

Sometimes we need to obtain the page title and URL that the user is viewing. This might be useful for different reasons: for example just to create breadcrumbs with customised menus, or simply because we need to gather where the user is.
We are going to use jQuery in order to do that.
Please follow me in this short example.

jQuery: the evolution of jQuery

Tweet

jQuery, the famous JavaScript library, today is a web development standard.
Started in 2005 by John Resig, the library gets to a 1.8 version (still in beta while I write) with many new features. Today jQuery is used by major companies in their web sites, and many web developers include the library in their projects.

jQuery: what if Google Libraries API is offline?

Tweet

When we build pages with jQuery, we have two possible way of including the library.
First we can actually save the .js file in a specific folder of our web site and then include it directly.
Another way is to use the Google Libraries API deposit and get it from there.

But what if the GLA is not available? In those cases some functionality might be lost.
Here I show you how to create a proper fallback.

ASP & jQuery: linked list boxes with AJAX

Tweet

Today, I would like to share a quick and easy solution to link 2 list boxes with jQuery and AJAX.
Situation: we have two list boxes. One (number) is already populated. The second (letter) is populated according to what is selected on the first list box, via AJAX (not reloading the page).
We need to build two ASP pages.
Let's start and have fun!

jQuery: how to use it only for mobile

Tweet

Developing responsive web sites is not always easy. We have seen something about it with media queries, but that was aimed to managing CSS stylesheets. Today I'm going to show you how to deal with jQuery.

I've found the following trick somewhere on the web, but I don't remember where, so if you are the author please leave a comment and I will give you credit for it.

Let's try to clear up a bit the situation. We want to trigger some jQuery or, generally speaking, some JavaScript code just when the visit is coming from a smartphone. Because we know that those devices mainly have a screen width of 480px, we are going to use that as condition.

jQuery, JavaScript & ASP: barcodes resources

Tweet

Following a brief exchange of thoughts with Carlo (one of the web thought readers), I have decided to publish a list of resources aimed to the creation of Barcodes. Originally, Carlo wanted to insert a barcode in a PDF document using FPDF, however the subroutine he found generates a HTML table that is almost impossible to embed in a PDF with FPDF.
Other solution are possible. The point is to create a Barcode image, save it on the server, and then insert it into the PDF. I haven't explored the above idea, but I think that the following resources might help some to accomplish the task.
Here's the list:

Barcode Coder (jQuery)

jQuery-Barcode (jQuery)

Pure ASP Barcode Generator (pure ASP)

ASP Barcode Script (pure ASP - Thanks to Carlo)

Barcode Generator (JavaScript)

Creating a Code 39 Barcode using HTML, CSS and Javascript (JavaScript)

Javascript Code128 Barcode (JavaScript)

jQuery: Simple Fixed Previous & Next Buttons

Tweet

The following article has been kindly submitted by Ben Rogerson. It shows a simple way of creating Previous & Next buttons with a short jQuery snippet and some CSS. I hope you like it!
 
Here's a simple little usability update you can quickly apply to your existing blog or results pages.

It will allow users that have a slightly larger running resolution to lessen the time taken to find the 'next page' and 'previous page' buttons which are normally at the bottom of your page.

The first task is to make sure your existing previous and next buttons at the bottom of the page have a class or id attached to them. This is so we can easily target them for replication.