» Birthday Bundle - Over $400 worth of Envato files for just $20
Browse: AJAX (asynchronous JavaScript and XML)

According to Wikipedia: "With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page"

Catch404 is a jQuery and CSS3 Modal Plugin for showing broken links and 404 errors without users even having to leave the page after they click the actual link. The plugin uses the power of AJAX to check the target clicked link in the background. If the URL is not broken nor generates a 404 error, then the page will load for the user. Otherwise, the visitor would be prompted through an Inline jQuery Modal Window that he is trying to access a non-workable URL address.

Let’s pretend that this is a broken link. Can you imagine that when your users click this link, instead of them being redirected to a 404 error on your site, a friendly modal message pops up on your current page saying that it’s not available?. In that same message box you can then give them a sense of direction so that they’re not lost – you could ask them to click on a contact link to report the link’s broken, offer an alternative mirror, recommend they do a site search for the file or just say that you’re experiencing hosting issues and the file will be back up soon.

Back in the autumn of 2008, I have written a tutorial about how you can create a basic AJAX Contact Form that works with PHP Back-end. The post is one of the most popular here on BitRepository having over 4,000 monthly page views and over 200 comments so far. Since many people asked me how they can do this and even hired me to offer them assistance with this application, I have decided to write a more advanced script with many features including CAPTCHA and Real-time Validation. Unlike 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. Moreover, you can specify whether to show letter, numbers or both on the verification image.


Most Popular Script from BitRepository.com

Interested in downloading the AJAX Contact Form? Click here!

iJab is a free web based instant messaging program for XMPP/Jabber. Users can run their own instant messaging, complimenting the XMPP philosophy of a distributed network. iJab is interpreted purely by the client web browser. Hence, it does not require downloading and installing any additional software. iJab also developed iJabBar, a Facebook styled web chat client.

Features include:

  • Based on XMPP protocol and it’s standard
  • Support MSN, AIM transport and any transports in XMPP server
  • Written with GWT and compiled to Javascript files
  • Cross-browser compatible
  • Easy integration with website
  • Supports theme – you can add your own theme
  • Support for 3 modes: stand-alone application, web chat bar in page and live support
  • Sound support
  • User search
  • Smiles support

dhtmlxGrid is an AJAX-driven JavaScript Grid Control that allows easy implementation of nice looking DHTML tables with rich-in-cell editing, fixed multi-line headers/footers, resizable, sortable and draggable columns, built-in searching, grouping and data validation capabilities.

The grid view component is easy to use and provides great flexibility due to its rich client-side API. This grid control is 100% client-side and loads data dinamically through AJAX calls. Thus, it can be integrated with any server side technology (PHP, ASP, Coldfusion, JSP, Ruby-on-rails etc.), providing the possibility to save and update data into the database in real time without page refresh.

Features include:

  • Full control with JavaScript API
  • Simple JavaScript or XML configuration
  • Built-in filtering, searching, grouping
  • Auto-calculated values in footer/header
  • Support for including other grids as subgrids
  • Drag-and-drop rows/columns within grid
  • Different keyboard mappings
  • Easy styling with CSS or predefined skins
  • Detailed documentation
  • Source: http://dhtmlx.com/docs/products/dhtmlxGrid/index.shtml
  • Licenses: Open Source – GPL: Free | Commercial: $199 | Enterprise: $449

Bumpbox is a lightbox that besides the support for opening images, html files, FLV videos, and SWF files, can also be used to open PDF files. The integration of the script is quite simple: you add the scripts in the head section of the page, classes to the links that should use bumpbox and define a rel tag with the size that the lightbox should have. The nice thing about this lightbox is that it detects what kind of file you wish to show in the box, so you do not need to specify the type, easing the process of integration.

bumpbox

Web Based AJAX Events Calendar/Scheduler

Posted on July 24, 2009, Filled under AJAX, JavaScript,  Bookmark it

dhtmlxScheduler is a lightweight and fast-performing Web Based JavaScript events calendar that provides rich and intuitive scheduling solution similar to Microsoft Outlook Calendar, Apple’s iCal or Google Calendar. Since the data is loading via AJAX, the calendar events can be added, modified, and deleted without refreshing the browser’s page. The application offers a built-in solution for recurring events which can be configured on daily, weekly, monthly or yearly basis.

Features include:

  • Ability to create custom views
  • Extended possibilities for customization of the look and feel.
  • Full control with script API
  • Intuitive interface
  • Support for iCal format
  • Compatibility with dhtmlxConnector

dhtmlx-scheduler

dhtmlxScheduler can be integrated with server database by means of dhtmlxConnector or your own server-side code written in any language (PHP, Java, ASP, etc.). Only a couple of code strings needed to set up client-server communication between in-browser events calendar and back-end database.

JS LightBoxes with Fancy Zoom Effect

Posted on July 10, 2009, Filled under AJAX, JavaScript,  Bookmark it

Do you need to implement a lightbox that has the zoom effect when it is triggered? Take a look at the following resources! Some of the frameworks used to develop the scripts are JQuery, MooTools, and Prototype.

fancy-zoom.1.1

FancyZoom 1.1 is a LightBox designed to view images inline without reloading the web page. It provides a smooth, clean, truly Mac-like effect. It’s very simple to implement in the pages of your website and it doesn’t use any JavaScript libraries.

Features include:

  • Easy to implement (requires just two lines of code in your HTML page)
  • Focuses on the smoothest, most polished zooming animation possible
  • Preloads full-size images in the background on link mouseover
  • Offsets the full-size image from the page by drawing a nice drop shadow under it
  • Uses Safari 3′s “box-shadow” feature to draw the drop shadow natively, no images required

jquery-fancy-zoom

jQuery plugin: Fancy Zoom – This is the JQuery version of the FancyZoom script. It comes with a few changes:

  • Fixed the overlay bug in IE6
  • images are resized if size is bigger than document screen
  • FancyZoom can be applied directly on an image, no more link wrapper needed.

Zoomy JavaScript based loosely on Fancy Zoom by Cabel Sasser – Developer John Nunemaker rewrote the original FancyZoom script, making some changes to it such as:

  • Implementation of box rounded corners
  • Works with any HTML (images, text, headings, flash)
  • Width and Height of Zoom Box are configurable through optional setting or CSS

The package contains FancyZoom versions for JQuery, MooTools and Prototype.

jQuery Tools is a collection of the most important user-interface components for today’s websites. It’s a single .js file that weights only 5.8 kb.

Tabs, ToolTips, Overlay, Expose, Flashembed and many more awesome features

The following tools are available:

  • jQuery library
  • Tabs (One of the most popular JavaScript tool on the web)
  • Tooltip (Great looking tooltips. Big or small. Pluggable effects.)
  • Scrollable (Allows you to scroll your HTML in wildly different ways)
  • Overlay (Visually appealing overlays. This tool is a significant part of the JavaScript/Web 2.0 landscape.)
  • Expose (Make your HTML elements stand out)
  • Flashembed

You can use all individual tools and or select only a combination of the tools you need.

The file size is definitely not the primary reason why this library speeds up your site. The fact that this tool is a single file makes it performance friendly. According to Yahoo experts, this is the first rule for making highly responsive websites.

Do you want to have a nice protection against SPAM on the forms of your website? Checkout the following scripts:

ajax-fancy-captcha-jquery-plugin

AJAX Fancy Captcha is a jQuery plugin useful to prevent your forms from being automatically submitted by bots. The coll thing about it is that you don’t have to type a security code to prove that you are a human. You only need to drag & drop an object into a specific area.

Catpcha’s security level is medium with the emphasis of nice looking and user friendly quality, while still offering reasonable protection against unwanted “guests”.

The basic design and its elements can be easily changed and customized.

s3-captcha-jquery-plugin

s3Captcha is a jQuery plugin made by an example of WebDesignBeach Ajax Fancy Captcha. Instead oftyping hardly readable letters and number you just have to select an icon from a set of icons.

Quick features:

  • It’s a very small and simple to setup script
  • Compatible with most modern browsers
  • Customizable: you can add new icons or change the current ones