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 Browser Detection http://www.ajaxblender.com/browser-detection.html http://www.ajaxblender.com/browser-detection.html#comments Wed, 24 Nov 2010 12:50:20 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=1190 Our friends at DevSlide recently launched a Labs area where they publish ideas, software, script, apps, etc., and we thought that this one could be interesting for JS developers and webmasters. It is a JavaScript browser detection tool that detects the user’s browser. If an old browser is detected, it will display a friendly suggestion for them to upgrade their browser to the latest version or download a new browser.

Background

Coding for old browsers (such as old versions of Internet Explorer, Firefox, Opera) can be a nightmare even for experienced web developers who hand code XHTML/CSS markup. It is difficult to find a balance of features, speed, and browser compatibility. It is particularly frustrating when you run a JS / CSS3 website and know that only a small percentage of your users are preventing you from using all the features of CSS3 (which, when used correctly, is feature rich, optimizes page load speeds and is easier to maintain).

Well, we have not opened a new world here :). But, this is a big problem and it is further complicated, because most users who are running such an out-dated browser do not even know where to go to upgrade their browser. The DevSlide team created a script written from scratch in JavaScript and will not conflict with any existing JavaScript frameworks such as jQuery, and MooTools. It displays a nicely styled and friendly message. You can choose from five predefined messages (professional, informal, goofy, technical, and even a mean one, lol) or customize your own message. There is also a cookie feature, so that the user can choose to ignore the message or ask to be reminded later.

How to Install It

It’s easy to add to your site and configure. There is even a configuration form where you can customize it and load it from the DevSlide servers or download and host it on your server.

1.) Go to DevSlide Labs and configure the script.
2.) Add generated code to your <head>…</head> tag.
3.) Help us all to eliminate out dated browsers ;)

That’s it ;) Click the links below to visit DevSlide Labs to download and configure the script.

]]> http://www.ajaxblender.com/browser-detection.html/feed 4 jFiller http://www.ajaxblender.com/jfiller.html http://www.ajaxblender.com/jfiller.html#comments Mon, 26 Apr 2010 08:08:30 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=1157 Our team often works on developing server-side scripts which sometimes have registration forms, large survey forms, etc. During testing our engineers might have to fill out a form 200-300 times a day, and this, of course, is a boring and tedious process ;)

That’s why we developed a quick but very useful jQuery plugin which prevent the developer from having to fill out the form manually during testing.  It automatically detects forms in your document and saves your filling preference. The jFiller plugin also provides proper data for the different types of fields: radio buttons, check boxes, text inputs, textareas, selects, etc. The only field type we cannot provide automatic data filling for is the file upload field, but the reason is obvious, right? :)

And at the end it won’t require any modifications, you just include it and use it. When the debug phase is complete, you can simply exclude it from your HTML document. We like this automatic form filling script, and hope others will find it useful during development too.

How to Use

1.) Download jFiller script. The package already contains jQuery framework.
2.) Add the following code to your <head>…</head> tag to connect jQuery framework and jFiller plugin. (Make sure paths to files are correct.)

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="jfiller.js"></script>
<style type="text/css" media="screen">
    @import url("jfiller.css");
</script>
<script type="text/javascript">
$(document).ready(function() {
    $('form').FillIt();
});
</script>

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

]]> http://www.ajaxblender.com/jfiller.html/feed 3 jNiceIt http://www.ajaxblender.com/jniceit.html http://www.ajaxblender.com/jniceit.html#comments Wed, 03 Mar 2010 14:25:23 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=1136 jNiceIt is a jQuery plugin which allows you to customize generic form controls and apply your customized design to them. You may use this plugin to emulate MS Windows, Linux or Apple MacOS controls or your own unique style.

Design of each control can be fully customized via CSS. The plugin supports both fixed and fluid page layouts because it does not use absolute positioning of skinned controls like most jNiceIt alternatives do.

Features

  1. Light-weight script
  2. Easy to integrate
  3. Fully customizable via CSS
  4. Works with all modern browsers
  5. Supports fixed and fluid page layouts
  6. The following controls supported:
    1. Button
    2. Text Input
    3. Check Box
    4. Radio Button
    5. File Upload Input
    6. Select Box
    7. List
    8. Text Area

How to Use

1.) Download jNiceIt script. The package already contains jQuery framework.

2.) Add the following code to your <head>…</head> tag to connect jQuery framework and jNiceIt plugin. (Make sure paths to files are correct.)

<style type="text/css" media="screen">
    @import url("../jniceit.css");
</style>
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../jniceit.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    //    This will skin the form with class '.NiceIt'
    $('form.NiceIt').NiceIt();
});
</script>

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

]]> http://www.ajaxblender.com/jniceit.html/feed 9 jQTouch http://www.ajaxblender.com/jqtouch.html http://www.ajaxblender.com/jqtouch.html#comments Wed, 18 Nov 2009 13:10:50 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=1079 A jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices.

]]> http://www.ajaxblender.com/jqtouch.html/feed 0 xBreadcrumbs http://www.ajaxblender.com/xbreadcrumbs.html http://www.ajaxblender.com/xbreadcrumbs.html#comments Wed, 11 Nov 2009 13:51:01 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=1038 xBreadcrumbs (Extended Breadcrumbs) is a jQuery plug-in to create categorized breadcrumbs for your site. This may be useful if your website has a deep structure and you want allow your visitors to quickly navigate through one section of the site to another. xBreadcrumbs works with unordered lists (UL/LI) which would make your breadcrumbs fully optimized for search engines. An SEO freindly breadcrumb has many benefits.

Features

  1. Light-weight script (~3Kb)
  2. Easy to integrate
  3. Fully customizable via CSS
  4. Works with all modern browsers

How to Use

1.) Download xBreadcrumbs script. The package already contains jQuery framework.
2.) Add the following code to your <head>…</head> tag to connect jQuery framework, xBreadcrumbs plugin and CSS. (Make sure paths to files are correct.)

<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../xbreadcrumbs.js"></script>
<link rel="stylesheet" href="../xbreadcrumbs.css" />

3.) Create your breadcrumbs structure inside of your <body>…</body> tag.

<ul id="breadcrumbs">
     <li>
          <a href="#">Home</a>
          <ul>
               <li><a href="#">Servers</a></li>
               <li><a href="#">Desktop Computers</a></li>
               <li><a href="#">Laptops</a></li>
          </ul>
     </li>
     <li>
          <a href="#">Laptops</a>
          <ul>
               <li><a href="#">Dell</a></li>
               <li><a href="#">HP</a></li>
               <li><a href="#">Apple</a></li>
               <li><a href="#">IBM</a></li>
          </ul>
     </li>
     <li>
          <a href="#">Apple</a>
          <ul>
               <li><a href="#">MacBook Pro</a></li>
               <li><a href="#">MacBook Air</a></li>
          </ul>
     </li>
     <li><a href="#">MacBook Air</a></li>
</ul>

4.) Use the following code (preferably inside of your <head>…</head> tag) to initialize xBreadcrumbs.

<script type="text/javascript">
     $(document).ready(function(){
          $('#breadcrumbs').xBreadcrumbs();
     });
</script>

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

Options

Configuration Option Default Value Description
showSpeed fast Numeric value in milliseconds or jQuery string value (’fast’, ‘normal’, ’slow’). The parameter sets speed of sub level to appear. If empty then no transition is used.
hideSpeed empty Numeric value in milliseconds or jQuery string value (’fast’, ‘normal’, ’slow’). The parameter sets speed of sub level to hide. If empty then no transition is used.
collapsible
 false Parameters enables collapsing of upper levels.
collapsedWidth
 10 (pixels) Width of collapsed level.
]]> http://www.ajaxblender.com/xbreadcrumbs.html/feed 36 jGrowl http://www.ajaxblender.com/jgrowl.html http://www.ajaxblender.com/jgrowl.html#comments Fri, 30 Oct 2009 10:31:23 +0000 ajaxBlender.com http://www.ajaxblender.com/jgrowl.html jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works.

]]> http://www.ajaxblender.com/jgrowl.html/feed 0 Custom Scrollbars http://www.ajaxblender.com/custom-scrollbars.html http://www.ajaxblender.com/custom-scrollbars.html#comments Fri, 30 Oct 2009 10:03:01 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=911 A simple and light-weight implementation of a customizable custom scroll bar using script.aculo.us.

]]> http://www.ajaxblender.com/custom-scrollbars.html/feed 0 BlockUI http://www.ajaxblender.com/blockui-jquery-plugin.html http://www.ajaxblender.com/blockui-jquery-plugin.html#comments Fri, 30 Oct 2009 09:19:19 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=896 jQuery BlockUI plugin let’s you block page or a part of the page (a form, for example) to prevent user activity until AJAX request will be completed. The jQuery plugin is highly customizable and provides various options and styles.

]]> http://www.ajaxblender.com/blockui-jquery-plugin.html/feed 0 MooTools Tree Component http://www.ajaxblender.com/mootools-tree-component.html http://www.ajaxblender.com/mootools-tree-component.html#comments Mon, 26 Oct 2009 18:30:56 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=821 This script is a implementation of well-known treeview UI component using Mootools. This implementation includes drag-n-drop and nodes sorting functionality.

]]> http://www.ajaxblender.com/mootools-tree-component.html/feed 0 Accordion http://www.ajaxblender.com/accordion.html http://www.ajaxblender.com/accordion.html#comments Mon, 12 Oct 2009 16:29:09 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=763 This jQuery 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.

]]> http://www.ajaxblender.com/accordion.html/feed 0