Ajax Updates

Posted by education training on Monday, August 31, 2009

Ajax Updates

LightboxXL – Prototype Plugin

Posted: 31 Aug 2009 08:19 AM PDT

We all know how good and how famous lightbox is around the web. Most of us probably have used it or any of its different children (lightbox++, lightbox JS blah blah, etc…)

I had a personal project in mind, an online tool that allow me to search among different providers and view the videos without refreshing pages… lightbox was on my mind. So looking around the net, I found lightbox++, quite good but with some bugs that I had to fix in order to view the videos lightbox style.

lightbox++ only allow one movie and also, it had to end with a .SWF extension, otherwise won’t work. I builded a solution, I put it the name of lightboxXL but I DO NOT WANT ANY RECOGNITION for this work, give it to the guys of CONFIDENTIALITY.

How it works
Check the following:

 HTML |  copy code |? 
1
< -- a title="TITLE" tag="SWF" height="355" width="425" rel="lightbox" href="http://www.whereisthemovielocated.com/"-->content< --/a--> 
2
 Tags Explained:

    * TITLE: title of the image or movie
    * TAG: here we set IMG or SWF to tell lightboxXL if it is a flash movie or an image
    * HEIGHT: height of the image or movie
    * WIDTH: width of the image or movie
    * REL: this is a MUST if the link is part of a set you do REL="lightbox[SETNAME]"
    * HREF: where is the movie located?


There are plenty websites explaining how it works, this version requires prototype.js library and the difference is the TAG attribute.

I have included a full demo within the zip file but if you wish to see a working demo, go and visit my site: http://www.antcut.com, search videos by RSS or META, view them lightbox style and (in some providers) download them to your computer.

Demo: http://www.antcut.com/
Download: http://www.antcut.com/xtras/lightboxXL.zip
Source: http://webeaters.blogspot.com/2008/02/lightboxxl-for-prototypejs.html
 
   
tafbutton blue16 LightboxXL   Prototype Plugin
  
Related Listings:
  1. jQuery Lightbox Plugin jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra...
  2. Multifaceted Lightbox A script (JavaScript) that allows you to focus the users...
  3. Embed QuickTime : jQuery Plugin Embed QuickTime is a jQuery plugin that helps you embed...
 		 
 
  
 Accordion Plugin using Jquery Script 
 
 Posted: 31 Aug 2009 07:48 AM PDT
 
This plugin is now part of jQuery UI and this standalone version won't be updated anymore. The page will remain as a reference.

This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs. Options are available to specify the structure, if necessary, the active element (to display at first) and to customize animations. The navigation-option automatically activates a part of the accordion based on the current location (URL) of the page.

Make the selected elements Accordion widgets. Semantic requirements:

The markup of your accordion container needs pairs of headers and content panels. By default, the header elements are anchors, assuming the following structure:

 HTML |  copy code |? 
1
<div id="accordion"> 
2
    <a href="#">First header</a> 
3
    <div>First content</div> 
4
    <a href="#">Second header</a> 
5
    <div>Second content</div> 
6
</div>
 
If you use a different element for the header, specify the header-option with an appropriate selector, eg. header: 'h3'. The content element must be always next to its header.

If you have links inside the accordion content and use a-elements as headers, add a class to them and use that as the header, eg. header: 'a.header'.

Use activate(Number) to change the active content programmatically.
[edit]
NOTE: If you want multiple sections open at once, don't use an accordion

An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this. Usually it can be written with a few lines of jQuery instead, something like this:

 Javascript |  copy code |? 
1
jQuery(document).ready(function(){ 
2
	$('.accordion .head').click(function() { 
3
		$(this).next().toggle(); 
4
		return false; 
5
	}).next().hide(); 
6
});
 
Or animated:
 Javascript |  copy code |? 
1
 
2
jQuery(document).ready(function(){ 
3
	$('.accordion .head').click(function() { 
4
		$(this).next().toggle('slow'); 
5
		return false; 
6
	}).next().hide(); 
7
});
 
Dependencies

    * UI Core
    * UI Effects Core (Optional - only for non-default animations)

Demo: http://jquery.bassistance.de/accordion/demo/
Download: http://jquery.bassistance.de/accordion/jquery.accordion.zip
Source: http://bassistance.de/jquery-plugins/jquery-plugin-accordion/
 
   
tafbutton blue16 Accordion Plugin using Jquery Script
  
Related Listings:
  1. jQuery hover accordion Script This is yet another accordion script, except you don’t have...
  2. jQuery hover accordion This is yet another accordion script, except you don’t have...
  3. jQuery plugin – Tooltip Ajax Script The content of a tooltip is by default the title...
 		 
 
  
 Ajax Manager : jQuery Plugin 
 
 Posted: 31 Aug 2009 07:46 AM PDT
 
Ajax Manager helps you to manage AJAX requests and responses (i.e. abort requests, block requests, order requests). It is inspired by the AJAX Queue Plugin and the AjaxQueue document in the jQuery-Wiki.
$.manageAjax.create (uniqueName, options)

Creates a new ajaxmanager and returns it. Takes a list of options:

    * normal jQuery-Ajax-Options
    * queue: (true|false|’clear’) the queue-type specifies the queue-behaviour. The clear option clears the queue, before it adds a new ajax-task to the queue (last in first out)
    * abortOld (true|false: aborts all “older” requests, if there is a response to a newer request
    * maxRequests: (number (1)) limits the number of simultaneous request in the queue.
    * preventDoubbleRequests (true|false): prevents multiple equal requests (compares url, data and type)
    * cacheResponse (true|false): caches the response data of succesfull responses (The cache will affect all Ajaxmanagers)

Your constructed ajaxmanager knows three methods:

    * add: ([uniqueName], options) returns an id of your XHR object and takes the following options:
          o normal jQuery-Ajax-Options
          o ‘abort’ ([function]): a function that will be called, if the request is aborted
    * clear: ([uniqueName], [shouldAbort: true|false]) Clears the ajax queue of waiting requests. If the second parameter is true, all requests in proccess will be aborted, too.
    * abort: ([uniqueName], [id]) Aborts all managed XHR-requests. If you pass the optional index number of your XHR object only this XHR will be aborted.

Example:

 Javascript |  copy code |? 
01
//create an ajaxmanager named cacheQueue  
02
var ajaxManager = $.manageAjax.create('cacheQueue', {  
03
    queue: true,   
04
    cacheResponse: true  
05
});  
06
//and add an ajaxrequest with the returned function  
07
ajaxManager.add({  
08
  success: function(html) {  
09
      $('ul').append('<li>'+html+'</li>');  
10
  },  
11
  url: 'test.html'  
12
}); 
13
 
14
 or only with the uniqueName parameter

 Javascript |  copy code |? 
01
//generate an ajaxmanger named clearQueue  
02
$.manageAjax.create('clearQueue', {queue: 'clear', maxRequests: 2});  
03
//and add an ajaxrequest with the name parameter  
04
$.manageAjax.add('clearQueue', {  
05
  success: function(html) {  
06
      $('ul').append('<li>'+html+'</li>');  
07
  },  
08
  url: 'test.html'  
09
}); 
10
 
Demo: http://www.protofunc.com/scripts/jquery/ajaxManager/
Download: http://www.protofunc.com/scripts/jquery/ajaxManager/jquery.ajaxmanager.js
Source: http://www.protofunc.com/scripts/jquery/ajaxManager/
 
   
tafbutton blue16 Ajax Manager : jQuery Plugin
  
Related Listings:
  1. Impromptu – prompt jQuery plugin for Forms jQuery Impromptu is an extention to help provide a more...
  2. jClock : jQuery Clock Plugin Simple clock – display 12-hour or 24-hour time notation, local...
  3. jQuery plugin – Tooltip Ajax Script The content of a tooltip is by default the title...
 		 
 
  
 






































0
comments:
        












Post a Comment






Note: Only a member of this blog may post a comment.