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"

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

A tooltip is a short and informative text that appears in a box that pops out when you hover the mouse cursor over an element (link, button, div etc.).

1. DHTML JavaScript Tool Tips is a JavaScript Cross Browser library to create tool tips (information pop-up boxes). This script can be customized in multiple ways and may contain plain-text as well as HTML (images, line breaks).

dhtml-javascript-tool-tips

* Implementation
1. Download the JS File: wz_tooltip.js.
2. Include the library in your HTML page by inserting the following line in the BODY section of your page (it can be added after the last tag containing a tool tip):

<script language="JavaScript" type="text/javascript" src="http://www.your-domain-name.com/path/to/wz_tooltip.js"></script>

3. Each of the tags requires only the onMouseOver attribute (onMouseOut is not required):

<a href="photos.htm" onmouseover="return escape('Your text here')">Photos</a>

* Browsers Compatibility: Netscape 4 and 6+, Mozilla, Galeon, Opera 5, 6 and 7+, MSIE 4, 5+, Konqueror 3

2. Fading JavaScript Tooltips 2kb is an animated JS tool tip script that is very easy to use and lightweight. To see how the script is implemented check the index.html file from the ZIP archive.

fading-javascript-tooltips

Tested in: IE6+, FireFox, Opera, Safari

To see a walk-through of the code and the logic check this post.

Read more from this entry…

Shows up when the user is going to click close [X] button

Do you need to show a specific message to the visitors that leave your website? You can do that by initiating a modal box before they close the browser window.

To do this we need to include 2 JQuery files (the actual library and a plugin written by Eric Martin), the modal box’s CSS and the file that triggers the modal box based on the user’s action.

Read the rest of this entry…

Do you need to integrate an AJAX Login Form into a Modal Box? This tutorial will show you how you can do that using the powerful library JQuery. The modal box that I’ve chosen is a JQuery Plugin written by Eric Martin.

Modal Login Boxes

Let’s start making the html file where the modal box is triggered:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Modal Ajax Login Form</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="javascript/jquery.simplemodal.js"></script>
<script type="text/javascript" src="javascript/init.js"></script>

<link type='text/css' href='style/stylesheet.css' rel='stylesheet' media='screen' />

<link type='text/css' href='style/basic.css' rel='stylesheet' media='screen' />

</head>

<body>

Click the login link to launch the modal box:<br />

<span style="font-size: 15px;">
<a id="login_link" href="#">LOGIN</a> | MEMBERS AREA</a>

</span>


<div id="login_form" style='display:none'>

<div id="status" align="left" style="margin-top: 20px; width: 310px;">

<center><h1><img src="images/key.png" align="absmiddle">&nbsp;LOGIN</h1>

<div id="login_response"><!-- spanner --></div> </center>

<form id="login" action="javascript:alert('success!');">
<input type="hidden" name="action" value="user_login">
<input type="hidden" name="module" value="login">

<label>E-Mail</label><input type="text" name="email"><br />  
<label>Password</label><input type="password" name="password"><br />  

<label>&nbsp;</label><input value="Login" name="Login" id="submit" class="big" type="submit" />

<div id="ajax_loading">
<img align="absmiddle" src="images/spinner.gif">&nbsp;Processing...
</div>

</form>

 </div>

</div>

</body>
</html>


Read more from this entry…

Free AJAX GIF Preloaders

Posted on February 7, 2009, Filled under AJAX,  Bookmark it

An AJAX image preloader will definitely give a professional look to your applications. Here are 2 online tools that can be used to generate the gif loaders:

ajaxload-logo

Ajaxload is an awesome tool that can be used to generate AJAX Loader Icons. To create one, you just need to select the indicator type, its background and foreground. Also, you can specify if you want to use a transparent color.

preloaders_net Preloaders.net is an excellent tool useful to generate GIF loaders from different categories: 3 dimensional (3D), Rectangular, Circular, Horizontal.


- the background and foreground color can be specified. A transparent background can be used too.
- you can specify custom sizes of the preloader
- an animation speed of the preloader can be set

Good luck!

Creating an AJAX Login Form using MooTools

Posted on December 21, 2008, Filled under AJAX,  Bookmark it

Login without Page Refresh

This is a tutorial useful to learn how to Ajaxify a basic login form. To do that we’ll use the powerful framework MooTools:

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

First, let’s start creating the login page. I will explain you the code in details.

login.php

<?php
require_once 'config.php';

// Is the user already logged in? Redirect him/her to the private page

if(isSet($_SESSION['username']))
{
header("Location: private.php");
exit;
}
?>

We start with the inclusion of the config.php file. Beside the configuration variables, in this file the session data is initialized. This is neccesary in order to check if the ‘username’ session is already registered when login.php is accessed. If it is, the user will be redirect to the members area.

Now it’s time to add the HTML code in the file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>AJAX Login Form</TITLE>

  <META name="Author" Content="Bit Repository">

  <META name="Keywords" Content="ajax, login, form, mootools">
  <META name="Description" Content="A nice & simple AJAX Login Form">

  <script type="text/javascript" src="js/mootools-1.2.1-core-yc.js"></script>
  <script type="text/javascript" src="js/process.js"></script>

  <link rel="stylesheet" type="text/css" href="style.css" />
</HEAD>

As you can notice, the ‘js’ folder contains: mootools-1.2.1-core-yc.js (the compact JavaScript framework) & process.js. The latter is the file that ajaxifies the login form.

Read the rest of this entry…