Rcarousel – A continuous jQuery UI carousel

Rcarousel – A continuous jQuery UI carousel

Right now you might be thinking, "Oh great, another content slider/carousel." But hold on for a minute because this one's got a few surprises up its sleeve. 

Called the rcarousel, this is basically a jQuery tutorials UI widget which latest version (v1.1) was just released recently. It is a continuous carousel and its inherent capabilities from its predecessor include custom events and a nice API.

What's new about this one is that it now supports HTML content: just place anything inside a DIV container, install the widget, and that's it. It is highly customizable, very easy to use, and like most sliders/carousels, you can either let the user navigate through the content through the use of bullets or set the scrolling to auto mode (without navigation).

What separates this carousel from the others is that it has the multi carousel feature! Check it out on this link (http://ryrych.github.com/rcarousel/examples/multi.html)!

Screen shot of the multi carousel

The rcarousel allows you to customize the appearance by letting you indicate the number of visible elements and a step (number of elements to scroll by). Another nice feature is loading elements on demand at runtime via API. With little effort you can fetch XML, JSON, parse them and then add elements with ‘append’ method.

Here's an outline of the other features:

·         Many options to choose from

·         Images (and other elements) with links

·         Vertical carousels, and much more!

Rcarousel supports many browsers, it's been tested successfully in the following browsers:

·         Internet Explorer 7+

·         Firefox 3.0+

·         Chrome

·         Opera 10.10+

·         Safari 4.0.5+

Interested? You can download it here (https://github.com/ryrych/rcarousel/zipball/1.1), while its source code can be found on github (https://github.com/ryrych/rcarousel). Encountered a bug? Report it here (https://github.com/ryrych/rcarousel/issues).

rcarousel was written and is maintained by Wojciech Ryrych during his spare time. He is a Poland-based front-end developer amateur, currently self-taught and is keen on Linux, Open Source.

By the way, if you're using a lightbox widget, you might want to consider using rlightbox2 (http://ryrych.github.com/rlightbox2/), which is a jQuery UI mediabox also written by Wojciech Ryrych.

3 Totally Cool jQuery Text Animation Plugins

3 Totally Cool jQuery Text Animation Plugins

jQuery is without a doubt a very awesome JavaScript library. It doesn't just let you create great-looking Image gallery and Menus but also attractive text effects as well. Out of the great text animation plugins out there, I found these three to be most creative AND refreshing.

Textualizer – First one on our list is a text animator plugin created by Kiro. Called Textualizer, it is an extremely lightweight jQuery tutorials plugin at just around 4kb. It is capable of rotating any number of words and even sentences beautifully. 

Once a sentence transitions into another one, their common letters move into their new locations using several effects that you are free to choose from: fadeIn, slideLeft, slideTop, and random. You can also define the duration that each item will be displayed and also the duration of the transitions.

Download, Download min version

Shuffle Letters Effect – Aside from the plugin itself, this includes a tutorial as well. As the name states, it shuffles the text content of the DOM element, which is great for headings, logos, and slideshows. If you look at the screenshot below, it’s in the process of shuffling through the last letters of the phrase. Then again, why settle for a screenshot when you see it in action? Go ahead and click on the demo link under it!

Download, Demo

NuvuType – This plugin takes words inside a selected container and then prints them word per word on another container using the available animation effects that you have applied. You do this by simply including a few lines of code on your page wherein you can set the typing speed, delay, and font colors. The linked page also allows you to try out the plugin and customize the animation yourself so you can have fun with it.

Options include:

·         Four different customizable color options, with customized colors for each option.

·         Set a trigger element or auto load the text when the page loads.

·         Set a delay for the text when triggered or auto loaded.

·         Set a speed for the text typing animation.

·         Grow or shrink the text to any size.

·         Lightweight – only 7Kb min version.

Download

Loading Animation Without Images Using jQuery

Loading Animation Without Images Using jQuery

Keith

This tutorial will teach us to create a loading animation without using any image files. With a little bit of CSS, we're going to show you how to incorporate this jQuery tutorial snippet into your web page to provide you a decent replacement for a graphic loading animation.

DIV Tags – We'll start off by creating a series of <div> tags, which will be used to display the animation. In this example, we want to display 8 boxes as our progress indicators so we'll make 8 of these DIVs but feel free to add or remove any loaderBox DIVS as you prefer.

<div id="jQuerySnipsLoadAnim">                 <div class="loaderBox"></div>                 <div class="loaderBox"></div>                 <div class="loaderBox"></div>                 <div class="loaderBox"></div>                 <div class="loaderBox"></div>                 <div class="loaderBox"></div>                 <div class="loaderBox"></div>                 <div class="loaderBox"></div> </div>

CSS Style – You have the option to either place this CSS inside the <head> area of your html or in a separate .css file. Again, you are free to change the names below just as long as you make sure that your wrapper DIV tag id corresponds to that of the jQuerySnipsLoadAnim id. Also, the .loaderBox class specification should correspond to the internal DIVs.

<style>     #jQuerySnipsLoadAnim {                 display: block;                 width: 200px;     }     .loaderBox {        display: none;     } </style>

jQuery Setting – This is the part where we'll indicate how we want the boxes to look and behave once the animation is activated. We can change the size and color of the boxes, the background color, the speed of the animation, and whatnot.

var jqsOptions = new Array(); jqsOptions["jQuerySnipsLoadAnim"] = {       'bgcolor'          : '#abc',       'position'         : 'relative',       'float'            : 'left',       'width'            : '20px',       'height'           : '20px',       'margin'           : '2px',       'opacity'          : '.5',       'display'          : 'none',       'widthOffset'      : '+=5px',       'heightOffset'     : '+=5px',       'animationSpeed'   : '500' }; var jqsTimer = new Array(); var jqsInt   = new Array();

Start/Stop Animation – Basically, any event trigger can be used to start and stop the loading animation but for demonstration purposes, we'll be using the click event to achieve both results. Everything in the loaderStart event is needed to start the loading animation and everything in the loaderStop is needed to stop it. Again, if you're going to change the DIV tags, don't forget to change jQuerySnipsLoadAnim as well.

$("#loaderStart").click(function(){                 jqsDiv = "jQuerySnipsLoadAnim";                 jqsInit(jqsDiv);                 jqsTimer[jqsDiv] = setInterval("jqsLoader('"+jqsDiv+"')",jqsOptions[jqsDiv].animationSpeed); }); $("#loaderStop").click(function(){                 clearInterval(jqsTimer["jQuerySnipsLoadAnim"]); });

Supporting Functions – Lastly, of course, are the supporting functions. Any part of this need not be changed.

function jqsInit(jqsDiv) {                  $(this).stop();                  $(this).clearQueue();                  clearInterval(jqsTimer[jqsDiv]);                  jqsInt[jqsDiv] = 0;      $("#"+jqsDiv+" > div").css({                 "display"          : "inline",                 "background-color" : jqsOptions[jqsDiv].bgcolor,                 "position"         : jqsOptions[jqsDiv].position,                     "float"            : jqsOptions[jqsDiv].float,                     "width"            : jqsOptions[jqsDiv].width,                     "height"           : jqsOptions[jqsDiv].height,                     "margin"           : jqsOptions[jqsDiv].margin,                     "opacity"          : jqsOptions[jqsDiv].opacity      }); } function jqsLoader(jqsDiv) {                 var jqsBox   = $("#"+jqsDiv+" > div");                 var jqsBoxes = $("#"+jqsDiv+" > div").size();                 $(jqsBox[jqsInt[jqsDiv]]).show().animate({                 "display": "inline",                 "width": jqsOptions[jqsDiv].widthOffset,                 "height": jqsOptions[jqsDiv].heightOffset,                 "opacity": jqsOptions[jqsDiv].opacity}, {queue: false, duration: jqsOptions[jqsDiv].animationSpeed, complete: function() {                                 $(this).animate({                                                 "width": jqsOptions[jqsDiv].width,                                                 "height": jqsOptions[jqsDiv].height,                                                 "opacity": jqsOptions[jqsDiv].opacity}, {queue: false, duration: jqsOptions[jqsDiv].animationSpeed});                                 }                 });                 jqsInt[jqsDiv]++;                 if (jqsInt[jqsDiv] == jqsBoxes) { jqsInt[jqsDiv] = 0; } }

Here is the Full Code.

<!DOCTYPE html>                 <html>                 <head>                   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>                 </head>                 <body><style>     #jQuerySnipsLoadAnim {                 display: block;                 width: 200px;     }                 .loaderBox {                   display: none;                 } </style> <button id="loaderStart">Start Loading Animation</button>&nbsp;&nbsp;<button id="loaderStop">Stop Loading Animation</button> <div id="jQuerySnipsLoadAnim">                 <div class="loaderBox"></div>                 <div class="loaderBox"></div>                 <div class="loaderBox"></div>                 <div class="loaderBox"></div>                 <div class="loaderBox"></div>                 <div class="loaderBox"></div>                 <div class="loaderBox"></div>                 <div class="loaderBox"></div> </div> <script> var jqsOptions = new Array(); jqsOptions["jQuerySnipsLoadAnim"] = {       'bgcolor'          : '#abc',       'position'         : 'relative',       'float'            : 'left',       'width'            : '20px',       'height'           : '20px',       'margin'           : '2px',       'opacity'          : '.5',       'display'          : 'none',       'widthOffset'      : '+=5px',       'heightOffset'     : '+=5px',       'animationSpeed'   : '500' }; var jqsTimer = new Array(); var jqsInt   = new Array(); $("#loaderStart").click(function(){                 jqsDiv = "jQuerySnipsLoadAnim";                 jqsInit(jqsDiv);                 jqsTimer[jqsDiv] = setInterval("jqsLoader('"+jqsDiv+"')",jqsOptions[jqsDiv].animationSpeed); }); $("#loaderStop").click(function(){                 clearInterval(jqsTimer["jQuerySnipsLoadAnim"]); }); function jqsInit(jqsDiv) {                  $(this).stop();                  $(this).clearQueue();                  clearInterval(jqsTimer[jqsDiv]);                  jqsInt[jqsDiv] = 0;      $("#"+jqsDiv+" > div").css({                 "display"          : "inline",                 "background-color" : jqsOptions[jqsDiv].bgcolor,                 "position"         : jqsOptions[jqsDiv].position,                     "float"            : jqsOptions[jqsDiv].float,                     "width"            : jqsOptions[jqsDiv].width,                     "height"           : jqsOptions[jqsDiv].height,                     "margin"           : jqsOptions[jqsDiv].margin,                     "opacity"          : jqsOptions[jqsDiv].opacity      }); } function jqsLoader(jqsDiv) {                 var jqsBox   = $("#"+jqsDiv+" > div");                 var jqsBoxes = $("#"+jqsDiv+" > div").size();                 $(jqsBox[jqsInt[jqsDiv]]).show().animate({                 "display": "inline",                 "width": jqsOptions[jqsDiv].widthOffset,                 "height": jqsOptions[jqsDiv].heightOffset,                 "opacity": jqsOptions[jqsDiv].opacity}, {queue: false, duration: jqsOptions[jqsDiv].animationSpeed, complete: function() {                                 $(this).animate({                                                 "width": jqsOptions[jqsDiv].width,                                                 "height": jqsOptions[jqsDiv].height,                                                 "opacity": jqsOptions[jqsDiv].opacity}, {queue: false, duration: jqsOptions[jqsDiv].animationSpeed});                                 }                 });                 jqsInt[jqsDiv]++;                 if (jqsInt[jqsDiv] == jqsBoxes) { jqsInt[jqsDiv] = 0; } } </script>                 </body>                 </html>

Click here to view the demo.