A lightbox allows to easily display information for the user without redirecting the user to a new page. In this tutorial, I will show you how to create a simple and nice lightbox effect with jQuery.
jQuery Notification Bar
In this tutorial we will create a neat and simple notification bar which allows you to integrate the notifications on your website. It can be used to create alert, success, error, warning, confirmation messages as an alternative to the standard alert dialog or to notify the visitors about the latest updates etc.
Once the page is loaded, our notification bar will slide down automatically. When we click the close button in the bar, it should slide up and a button should appear to show the bar again.
jQuery Sticky Header
In this tutorial we will create sticky header that is initially on its original place above the content, but as soon we start scrolling down the long page, it sticks at the top of the page. When scrolling up the page, the sticky header stops sticking and returns to its original position. We will use jQuery to create the sticky header.
Simple jQuery Tabs
The tabbed content is a great way to to place a lot of content in a limited space on a page without losing usability. In this tutorial we will build a simple tabbed content and make it function using jQuery.
Password Strength Checking with jQuery
Password strength checking is an easy way to show the strength of user password on the registration forms. It helps users to choose more secure password when filling the forms.
In this tutorial we will build a basic form field that provides live feedback to the users about the password strength. The basic idea is to evaluate the password string every time a user enters a character. We will check the password strength using a few regular expressions with jQuery.
Horizontal content scroll with jQuery
In this tutorial we will create a simple smooth horizontal content scrolling effect with just a few lines of jQuery without using any plugin. We will use HTML and CSS for the layout and jQuery for the scrolling.
Smooth Page Scroll to Top with jQuery
If the web page has lots of content, its a good idea to provide visitors with an easy way to quickly scroll to the top of the page. In this tutorial, we will create smooth page scrolling effect for returning to the top of the page using jQuery.
We will create a button at a fixed position on the bottom right of the page, so that we once click it, it scrolls up with an nice animation rether than a page refresh or a straight jump to the top. We will make the button visible only if the page is scrolled down, instead of being always visible.
HTML5 In-line text editing and storing to database
The HTML5 specification includes contentEditable attribute, which has been supported by most of browsers for quite some time. It gives ability to edit the page directly in the browser window. You can specify particular parts of a page which should be editable in a very easy way. At its simplest, all you have to do is to add the tag attribute contentEditable to the element. The contenteditable attribute can be applied to any HTML element, for example images, lists, and even video content. However, it allows to edit the text only, the other elements can be only removed.
Form validation with jQuery and CodeIgniter
In this tutorial you will learn how to validate form fields with jQuery and CodeIgniter. We will use jQuery to validate in client side and PHP with CodeIgniter framework to validate server side. Therefore it will be very easy to follow this tutorial if you have basic knowledge of jQuery and CodeIgniter. Even if you don’t have knowledge of jQuery or CodeIgniter, it should not be a problem as i will start from very basics.
At the end of this tutorial, you can find a working example as well as all files to download.
