Warning: Use of undefined constant DOWNLOADTABLE - assumed 'DOWNLOADTABLE' (this will throw an Error in a future version of PHP) in /home/customer/www/bitrepository.com/public_html/wp-content/plugins/wp-downloadcounter/downloadcounter-config.php on line 22

Warning: Use of undefined constant DOWNLOADTRACKTABLE - assumed 'DOWNLOADTRACKTABLE' (this will throw an Error in a future version of PHP) in /home/customer/www/bitrepository.com/public_html/wp-content/plugins/wp-downloadcounter/downloadcounter-config.php on line 23
AJAX Archives - Page 3 of 5 - Bit Repository
Reader
You are here: Home / Archives for AJAX

JS LightBoxes with Fancy Zoom Effect

Last updated on by Gabriel Livan

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 – A Collection of the Most Important UI Components

Last updated on by Gabriel Livan

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.

Fancy (jQuery) AJAX Captchas – For an Awesome User Experience

Last updated on by Gabriel Livan

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

Collection of Free ToolTips using AJAX, JavaScript & CSS

Last updated on by Gabriel Livan

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…

Creating an Exit Modal Box using the jQuery library

Last updated on by Gabriel Livan

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…