ajaxBlender.com— A Whole Lot of AJAX! Directory for Web 2.0 AJAX scripts, demos and tutorials. Custom AJAX Coding Service for Your Web 2.0 Website. http://www.ajaxblender.com A Whole Lot of AJAX! Mon, 02 May 2011 07:38:01 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 How to Create Custom AJAX Tabs using jQuery http://www.ajaxblender.com/howto-create-custom-jquery-tabs.html http://www.ajaxblender.com/howto-create-custom-jquery-tabs.html#comments Fri, 13 Nov 2009 18:56:29 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=1049 Today’s morning started a little hot here at ajaxBlender. We had some free time before starting the production meeting, and Mike (our lead developer guy) and Justin (newbie who joined us in November) started arguing about their respective abilities of creating cross-browser markup code (HTML, CSS, JS) by hand without mistakes, but also doing it really fast.The exchange went a little like this:

J: I am sure, there is no way you can create scripts from scratch fast. First thing is you integrate the 3rd party stuff. This is easy but when you have to create your custom code, it will require time for debugging, planning the structure, etc – even for small scripts.

M: Ha, do you want to try me? ;) You select a script and I do it. If I do it you owe me a pizza and make me coffee each morning for a week, otherwise I will for you.

J: Hm.. Sounds good. What about ajax tabs?

M: No problem :) How much time?

J: 10 minutes?

M: Great!

As you see, resolution to the matter involved a little fun and a wager (pizza).

Experience took its part – Justin lost. We recorded the process for proof ;) and now we’re posting it with a quick tutorial. You can watch Mike “cook” the code in the time-lapse YouTube video below, and you can download his AJAX tabs here.

That’s it ;) Click the Demo button to see it in action.

Here’s the code he created:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Tabs Demo</title>
     <link rel="stylesheet" href="./main.css" />
     <script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
     <script type="text/javascript" src="./main.js"></script>
</head>
<body>
     <div id="page">
          <ul id="tabs">
               <li><a href="./tabs/tab-1.html">Tab 1</a></li>
               <li><a href="./tabs/tab-2.html">Tab 2</a></li>
               <li><a href="./tabs/tab-3.html">Tab 3</a></li>
          </ul>
          <div id="tabs-container">
               Loading. Please Wait...
          </div>
</div>
</body>
</html>

CSS

BODY {
     margin: 20px;
     padding: 20px;
     font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
     font-size: 12px;
     color: #333333;
}
#page {
     margin: auto;
     width: 1000px;
}
UL.mytabs {
     position: relative;
     z-index: 2;
}
UL.mytabs, UL.mytabs LI {
     margin: 0;
     padding: 0;
     list-style: none;
     float: left;
}
UL.mytabs LI { padding: 0 5px; }
UL.mytabs LI A {
     float: left;
     padding: 7px;
     border: 1px solid #CCCCCC;
     border-bottom: 1px solid #E0E0E0;
     background: #F0F0F0;
     text-decoration: none;
     color: #333333;
     height: 22px;
}
UL.mytabs LI A:HOVER, UL.mytabs LI.current A {
     background: #FFFFFF;
}
UL.mytabs LI.current A {
     font-weight: bold;
     font-size: 14px;
     border-bottom: 1px solid #FFFFFF;
}
.mytabs-container {
     position: relative;
     z-index: 1;
     clear: both;
     border: 1px solid #E0E0E0;
     padding: 10px;
     top: -1px;
}

JavaScript


var containerId = '#tabs-container';

var tabsId = '#tabs';
$(document).ready(function(){
     // Preload tab on page load
     if($(tabsId + ' LI.current A').length > 0){
          loadTab($(tabsId + ' LI.current A'));
     }
     $(tabsId + ' A').click(function(){
          if($(this).parent().hasClass('current')){ return >false; }
          $(tabsId + ' LI.current').removeClass('current');
          $(this).parent().addClass('current');
          loadTab($(this));
          return >false;
     });
});
function loadTab(tabObj){
     if(!tabObj || !tabObj.length){ return; }
     $(containerId).addClass('loading');
     $(containerId).fadeOut('fast');
     $(containerId).load(tabObj.attr('href'), function(){
          $(containerId).removeClass('loading');
          $(containerId).fadeIn('fast');
     });
}
]]> http://www.ajaxblender.com/howto-create-custom-jquery-tabs.html/feed 37 qTip http://www.ajaxblender.com/qtip-jquery-tooltip-plugin.html http://www.ajaxblender.com/qtip-jquery-tooltip-plugin.html#comments Fri, 30 Oct 2009 13:09:34 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=929 qTip is an advanced tooltip plugin for jQuery framework.

]]> http://www.ajaxblender.com/qtip-jquery-tooltip-plugin.html/feed 0 Ajax Username Availability Checker Using MooTools http://www.ajaxblender.com/ajax-username-availability-checker-using-mootools.html http://www.ajaxblender.com/ajax-username-availability-checker-using-mootools.html#comments Fri, 02 Oct 2009 13:14:19 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=525 There a many examples of egregious usages of Ajax out there but every once in a while you find a great usage of Ajax. One great usage is the username availability checker. Why make the user submit their form if you can just use Ajax to let them know if it’s available right away? Read this tutorial to learn how you can implement a username available checker using Mootools.

]]> http://www.ajaxblender.com/ajax-username-availability-checker-using-mootools.html/feed 0 Creating an Ajax Application with Script.aculo.us & NetBeans http://www.ajaxblender.com/creating-an-ajax-application-with-script-aculo-us-netbeans.html http://www.ajaxblender.com/creating-an-ajax-application-with-script-aculo-us-netbeans.html#comments Wed, 30 Sep 2009 12:36:30 +0000 ajaxBlender.com http://www.ajaxblender.com/creating-an-ajax-application-with-script-aculo-us-netbeans.html This tutorial demonstrates the usage of the Java Persistence APIs to implement server side pagination (recommended for large sets of data) and to get and display the results in a text field featuring Ajax functionality.

]]> http://www.ajaxblender.com/creating-an-ajax-application-with-script-aculo-us-netbeans.html/feed 0 How to Make Tabs Reload and Evaluate Scripts using Ext.JS http://www.ajaxblender.com/how-to-make-tabs-reload-and-evaluate-scripts-using-ext-js.html http://www.ajaxblender.com/how-to-make-tabs-reload-and-evaluate-scripts-using-ext-js.html#comments Tue, 29 Sep 2009 17:44:46 +0000 ajaxBlender.com http://www.ajaxblender.com/how-to-make-tabs-reload-and-evaluate-scripts-using-ext-js.html You can execute JavaScript code loaded via AJAX into a tab panel using Ext.JS, but it will evaluate only once (after content is loaded). Many times you need it to reload if the user re-selects the tab. The author of this Ext.JS tutorial explains how to make it execute each time the Ext.JS tab is activated.

]]> http://www.ajaxblender.com/how-to-make-tabs-reload-and-evaluate-scripts-using-ext-js.html/feed 0 Shopping Cart using Script.aculo.us http://www.ajaxblender.com/shopping-cart-using-script-aculo-us.html http://www.ajaxblender.com/shopping-cart-using-script-aculo-us.html#comments Tue, 29 Sep 2009 16:32:43 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=419 This tutorial explains how to create a shopping cart which uses AJAX and drag and drop functionality to add products to it.

]]> http://www.ajaxblender.com/shopping-cart-using-script-aculo-us.html/feed 0 How to Create Auto Completer using Prototype, Script.aculo.us http://www.ajaxblender.com/how-to-create-auto-completer-using-script-aculo-us.html http://www.ajaxblender.com/how-to-create-auto-completer-using-script-aculo-us.html#comments Tue, 29 Sep 2009 16:13:58 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=415 If you use Gmail to send mails, you might recall that while typing the To address, Gmail shows a probable list of users from your address book. Nowadays most of the modern browsers also have this Auto Suggest control built in them, i.e when the user begins to type in a text box, a menu appears below the text offering completion suggestions.If you use Gmail to send mails, you might recall that while typing the To address, Gmail shows a probable list of users from your address book. Nowadays most of the modern browsers also have this Auto Suggest control built in them, i.e when the user begins to type in a text box, a menu appears below the text offering completion suggestions.

In this tutorial author explains how to create an Auto Suggest Box using Prototype, Script.aculo.us. The script.aculo.us auto suggest box (autocompleter) replicates this control, but gives the developer control of the probable suggestions.

]]> http://www.ajaxblender.com/how-to-create-auto-completer-using-script-aculo-us.html/feed 0 Creating a Dynamic Poll with jQuery and PHP http://www.ajaxblender.com/creating-a-dynamic-poll-with-jquery-and-php.html http://www.ajaxblender.com/creating-a-dynamic-poll-with-jquery-and-php.html#comments Tue, 29 Sep 2009 15:10:46 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=407 When you combine some neat functionality courtesy of PHP with the cleverness of jQuery you can produce some pretty cool results. In this tutorial author explains how to create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.

]]> http://www.ajaxblender.com/creating-a-dynamic-poll-with-jquery-and-php.html/feed 0 Submit A Form Without Page Refresh using jQuery http://www.ajaxblender.com/submit-a-form-without-page-refresh-using-jquery.html http://www.ajaxblender.com/submit-a-form-without-page-refresh-using-jquery.html#comments Tue, 29 Sep 2009 12:58:10 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=396 In this tutorial, the author demonstrates how to create a simple contact form with name, email and phone number and submit data from all fields to a PHP script on web server without page refresh. JavaScript code uses native jQuery functions so that you won’t need to download any extra plug-ins to make it work.

]]> http://www.ajaxblender.com/submit-a-form-without-page-refresh-using-jquery.html/feed 0 How to Create a Fancy Apple-style Search Suggestion http://www.ajaxblender.com/how-to-create-a-fancy-apple-style-search-suggestion.html http://www.ajaxblender.com/how-to-create-a-fancy-apple-style-search-suggestion.html#comments Tue, 29 Sep 2009 12:27:30 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=393 Learn how to create a fancy apple.com-style search suggestion control. The tutorial contains detailed step-by-step explanation.

]]> http://www.ajaxblender.com/how-to-create-a-fancy-apple-style-search-suggestion.html/feed 0