Category: jQuery

Plugins, Tutorials

AJAX Contact Form Builder | Powered by jQuery | PHP Backend

We all know that creating forms can be an unpleasant, error-prone and time consuming process, especially when you are doing the coding my hand.

Skip all that tedious process with AJAX Contact Form Builder. It was created to improve the functionality of your website by offering an interactive user experience for your visitors that need to reach you. It’s very easy to use and can be setup on your website in minutes.

Preview Download

The script is very easy to integrate into any .PHP or .HTML page (using the iFrame method). Here are the key features of this application:

RealTime Validator

This makes the form completion process interactive. The errors show/hide as the user fills the form. If this feature is disabled, then all the errors will show above the form after the user clicks the submit button.

CAPTCHA: Anti-Spam Verification Image

You may use letters, numbers or both (could be} enabled/disabled). The verification image can be refreshed if the user has trouble discerning the characters. As the user types the security code the script verifies it in the background. If the user types the correct code, it automatically shows (in real-time) a successful message. As opposed to many AJAX CAPTCHAs out there that rely on JavaScript as an Anti-spam measure and have a medium security level, the one I have chosen to implement uses PHP to securely generate and register the required code in the background. The comparison is a case-insensitive one in order to make the completing process simpler without irritating the one who fills thee security code.

[Read more…]

Animated WordPress-Like Row Change Status Effect: Powered by jQuery

Greetings my fellow readers,

While using WordPress, I’ve seen a very cool effect when I either approved or deleted comments. When you click “Delete” it uses AJAX to call the PHP script that will perform the action as well as highlighting that row with a fading color change effect. If you are a web developer and need to implement a similar approach in your scripts (using AJAX with UI state effect) then this post is for you.

We’ll need jQuery and jQuery UI Effects (for the background fading) libraries for this.

[Read more…]

In-Depth Instant CSS Documentation Search: InstaCSS

If often happens, especially for beginner developers, to forget the right property value that should be applied to a style. InstaCSS is aimed to help you finding information about CSS properties and their possible values. The website is constantly improved and it also has a database of searchable HTML tags and JavaScript functions (with usage examples). Moreover, each property page has a “Browse Compatibility” chart.

Having mostly text (loads very fast) and a live search, InstaCSS is a very attractive and useful tool for CSS designers.

Image Slider and Accordion: The Slidorion, A jQuery Plugin

A mixture of an image slider and an accordion, Slidorion features beautiful images along with a variable length description. Having images associated with each tab, and accompanied by a large variety of effects, this plugin is an excellent alternative to the conventional jQuery slider.

Available options:

  • autoPlay – Automatically plays the slidorion (boolean)
  • easing – The easing of the animations (string)
  • effect – The effect of the animation (string)
  • first – The first slide to show (the rel of that slide) (string)
  • hoverPause – The slidorion pauses when hovered over (boolean)
  • interval – The time between each slide (number)
  • speed – The speed of the animation (number)

CSS Spinners and Bars Generators: For AJAX & jQuery

After a long quiet sleep, the developers of well-known have finally woken up. Couple of months ago they launched the second version of and released from beta having added dozens of new features and templates to both projects (including APNG support in the first one and a completely new search engine for the second project). But these two projects are not even in the middle of the developers’ plan. Right now they are developing 3 new projects and very recently launched a new generator –

CSS load – first online CSS spinners and bars code generator with the given features and variety of templates. The aim of the project is to provide developers and designers with animations that indicate loading of AJAX and JQuery requests made with the means pure CSS (CSS3) and HTML. Right now there are 8 templates of different animation templates available, but there will be more in the nearest future.

The concept of generating the animations is very simple and alike with the Preloaders project. Just select your template in the left column, then set the coloring scheme, size and the speed of animation. All animations previews are generated automatically each time you change any parameter. Having acquired a desired preloader, click on the “Get code” button and you will be provided the code to copy.

The project right now is an alpha version with some little modifications pending. The main problem is that CSS3 animations are not yet supported by Internet Explorer and Opera web-browsers, but the project developers hope that very soon it will not be a problem anymore.

WhatFont: An Easy Way to Inspect Fonts in Webpages

While we navigate through web pages we often see fonts that we really like and want to know the name of that font in case we would like to use it in our web pages. WhatFont aims in helping you get the font name when you hover the cursor over a text and image.

Getting the font name you want is just a click away. This tool not only saves you time but also detects services used for serving the font. Now supports Typekit and Google Font API.

It is available as a bookmarklet and has a Chrome/Safari extension.

Full support: Firefox 3.6+, Chrome 9+, Safari 4+, Internet Explorer 9.
Limited support: Internet Explorer 8.