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! Thu, 03 Jun 2010 15:20:57 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 jShaker http://www.ajaxblender.com/jshaker.html http://www.ajaxblender.com/jshaker.html#comments Thu, 04 Mar 2010 15:18:19 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=1142 jShaker is a simple jQuery plugin which runs a shake, vibrate effect on a selected web page element and all its children emulating an shaker effect.

Why jShaker? Well, we added a new guy to the ajaxBlender team and one of his tasks was to create several sample jQuery plugins. The jShaker is one of them, but we don’t think the script will find a real use. (Actually we’d be surprised if you do. So, please share links with us.) We posted it, because it’s still a good little learning script.

Please note that the script will shake every children element of the parent running jShaker, and obviously the browser may slow down if there are a lot of nested elements, so be careful.  ;)

Features

  1. Light-weight script
  2. Easy to integrate
  3. Works with all modern browsers

How to Use

1.) Download jShaker script. The package already contains the jQuery framework.

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

<script src="../jquery-1.4.2.min.js" type="text/javascript"></script> <script src="../jshaker.js" type="text/javascript"></script>

3.) jShaker plugin will extend the jQuery function so that you can call it on any element such as:

<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
   $('.block').click(function(){
       $(this).jshaker();
   });
});
// ]]></script>

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

]]> http://www.ajaxblender.com/jshaker.html/feed 1 jSnow http://www.ajaxblender.com/jsnow.html http://www.ajaxblender.com/jsnow.html#comments Thu, 17 Dec 2009 15:21:33 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=1119 Adding an animation effect of falling snow with JavaScript is a quick and easy way to keep your site looking current during the holidays for your site’s users. jSnow, is a jQuery plug-in that adds falling snow effect to your website. jSnow is lightweight (2kb), doesn’t require any external files to run (css or images) and it’s very easy to use.

]]> http://www.ajaxblender.com/jsnow.html/feed 1 jAni http://www.ajaxblender.com/jani.html http://www.ajaxblender.com/jani.html#comments Mon, 23 Nov 2009 16:05:22 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=1090 jAni is a simple plugin for jQuery which allows you animate background images. The plugin is basically an alternative to the animated GIF but with several benefits. At first, it’s always better to use an animated GIF as this format is supported by all browsers without any JavaScript code or additional markup, but the “dark side” of it is that an animated GIF allows only 256 colors and you cannot control animation in any way. The jAni loads a long vertical image and changes its background position with the speed you setup, giving you more control of the animation.

Features

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

How to Use

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

<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../jani.js"></script>

3.) Add a style containing the url to your background with animation (this may be added to a separate CSS document or inside the <head>…</head> tag):

<style type="text/css">
.animation-1 {
background: url(./images/sample-animation.gif) no-repeat left top;
}
</style>

4.) Add an empty DIV which will display animation in your document:

<div id="animation-1"></div>

5.) Add the following code to your <head>…</head> tag to initialize jAni and start the animation.

<script type="text/javascript">
$(document).ready(function(){
$('#animation-1').jani({ frameWidth: 100, frameHeight: 100, speed: 100, totalFrames: 19 });
$('#animation-1').jani.play();
});
</script>

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

jAni Methods

jani.play()
Start playing animation.

jani.pause()
Pause animation.

jani.stop()
Stop animation.

Parameters

The table below contains a list of parameters accepted by the .jani() function.

Parameters Description
frameWidth Width of a single frame.
frameHeight Height of a single frame.
speed Animation speed.
totalFrames Total frames in the animation.
loop Loop an animation or not. By default, value is true.
]]> http://www.ajaxblender.com/jani.html/feed 3 jClip http://www.ajaxblender.com/jclip-plugin.html http://www.ajaxblender.com/jclip-plugin.html#comments Mon, 16 Nov 2009 16:41:32 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=1065 jClip is a simple jQuery plugin which allows image and content clipping. This is useful for when an image (or content area) is larger than the container where it resides. You are able to specify the dimensions of an absolutely positioned element which you want to be visible. The element is then clipped into the rectangular shape and displayed.

The function of jClip is similar to css “clip:rect” style but jClip provides a fully cross-browser implementation of this method with ability for you to animate the clipped content using standard jQuery animate functions.

Features

  1. Light-weight script
  2. Easy to integrate
  3. Works with all modern browsers

How to Use

1.) Download jClip script. The package already contains jQuery framework.
2.) Add the following code to your <head>…</head> tag to connect jQuery framework and jClip plugin. (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>

3.) Use the following code to apply the clipping function to an element, we recommend you run it in a domReady event. The code below will clip the element with ID #sample-1 from its top left corner with a width of 100 and a height of 100:

<script type="text/javascript">
     $(document).ready(function(){
          $('#sample-1').clip(0, 0, 100, 100);
          // The code above is equal to:
          $('#sample-1').clip(100, 100);
     });
</script>

4.) To remove clipping from an element, pass the keyword ‘remove’ to the jclip function:

<script type="text/javascript">
     $(document).ready(function(){
          $('#sample-1').clip('remove');
     });
</script>

5.) By default, jClip will start clipping from the top left corner of the element but you may specify Top and Left positions with the first two arguments. As seen in the sample below, jClip will start clipping with 20 pixel offset from top and left:

<script type="text/javascript">
     $(document).ready(function(){
          $('#sample-1').clip(20, 20, 100, 100);
     });
</script>

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

Parameters

The table below contains a list of parameters accepted by the .jclip() function.

Parameters Description
remove jclip(’remove’). Removes clipping from the element.
width, height jclip(width, height). Applies clipping to an element from top left corner with specified width and height.
left, top, width, height jclip(left, top, width, height). Applies clipping to an element from the specified left and top coordinate with a set width and height of the clipping area.
]]> http://www.ajaxblender.com/jclip-plugin.html/feed 0 bgStretcher http://www.ajaxblender.com/bgstretcher-jquery-stretch-background-plugin.html http://www.ajaxblender.com/bgstretcher-jquery-stretch-background-plugin.html#comments Thu, 05 Nov 2009 19:18:58 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=981 bgStretcher (Background Stretcher) is a jQuery plug-in which allows you to add a large image (or a set of images) to the background of your web page and will proportionally resize the image(s) to fill the entire window area. The plug-in will work as a slideshow if multiple images mode is used (the speed and duration for the slideshow is configurable).

Features

  1. Unobtrusive script, simple to setup
  2. Works with all modern browsers
  3. Supports single and multiple images

 

How to Use

1. Download bgStretcher script. The package already contains the jQuery framework.

2. Add the following code to your <head>…</head> tag to connect jQuery framework, bgStretcher 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="../bgstretcher.js"></script>
<link rel="stylesheet" href="../bgstretcher.css" />

3. Use the following code to initialize the bgStretcher (see Options section below for details):

<script type="text/javascript">
$(document).ready(function(){
//  Initialize Backgound Stretcher
$(document).bgStretcher({
images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg'], imageWidth: 1024, imageHeight: 768
});
});
</script>

4. Assign the content of your page to a DIV with the following CSS styles (we used a DIV#page for this sample):

#page {
z-index: 2;
position: relative;
}

5. Insert content of your page inside this DIV:

<body>
<div id="page">
Your content goes here...
</div>
</body>

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

Options

Configuration Option Default Value Description
imageContainer bgstretcher bgStretcher will automatically build structure for the images list in a DOM tree. This parameter is ID for the images holder. Try inspecting the tree with a FireBug to get an idea how it’s constructed.
resizeProportionally true Indicates if background image(s) will be resized proportionally or not.
resizeAnimate false Indicates if background image(s) will be resized with animation. (Be careful, this may slow down some PCs if your images are large.)
images empty An array containing list of images to be displayed on page’s background.
imageWidth 1024 Original image’s width.
imageHeight 768 Original image’s height.
nextSlideDelay 3000 (3 seconds) Numeric value in milliseconds. The parameter sets delay until next slide should start.
slideShowSpeed normal Numeric value in milliseconds or jQuery string value (’fast’, ‘normal’, ’slow’). The parameter sets the speed of transition between images.
slideShow true Allows or disallows slideshow functionality.

Methods

Method Name Description
$(objID).bgStretcher.play() Resume background slideshow
$(objID).bgStretcher.pause() Pause background slideshow
]]> http://www.ajaxblender.com/bgstretcher-jquery-stretch-background-plugin.html/feed 45 PNG Transparency Fix for IE6 using jQuery http://www.ajaxblender.com/png-transparency-fix-for-ie6-using-jquery.html http://www.ajaxblender.com/png-transparency-fix-for-ie6-using-jquery.html#comments Mon, 02 Nov 2009 15:33:11 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=939 jQuery-based pngFix plugin will adds the missing PNG-Transparency functionality into Windows Internet Explorer 5.5 & 6.

]]> http://www.ajaxblender.com/png-transparency-fix-for-ie6-using-jquery.html/feed 0 Blend Effect http://www.ajaxblender.com/blend-effect.html http://www.ajaxblender.com/blend-effect.html#comments Mon, 05 Oct 2009 12:49:02 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=564 A jQuery based animation / effects, progressive enhancement plugin for CSS backgrounds.A jQuery based animation / effects, progressive enhancement plugin for CSS backgrounds. This light-weight (only 1.4KB) plugin for jQuery adds a nice blend effect to your website. View demo to see it in action.

]]> http://www.ajaxblender.com/blend-effect.html/feed 0