FLEXSLIDER jQuery Slider Plugin

15January

FLEXSLIDER is an awesome, fully responsive jQuery plugin. FLEXSLIDER is:

  • Simple, semantic markup
  • Supported in all major browsers
  • Horizontal/vertical slide and fade animations
  • Multiple slider support, Callback API, and more
  • Hardware accelerated touch swipe support
  • Custom navigation options
  • Use any html elements in the slides
  • Built for beginners and pros, alike
  • Free to use under the MIT license
flexslider

Step 1 – Link files

<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script src="jquery.flexslider.js"></script>

Step 2 – Add markup

<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
  </ul>
</div>

Step 3 – Hook up the slider

<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>

Step 4 – Tailor to your needs

animation: "fade",              //String: Select your animation type, "fade" or "slide"
slideDirection: "horizontal",   //String: Select the sliding direction, "horizontal" or "vertical"
slideshow: true,                //Boolean: Animate slider automatically
slideshowSpeed: 7000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
animationDuration: 600,         //Integer: Set the speed of animations, in milliseconds
directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
keyboardNav: true,              //Boolean: Allow slider navigating via keyboard left/right keys
mousewheel: false,              //Boolean: Allow slider navigating via mousewheel
prevText: "Previous",           //String: Set the text for the "previous" directionNav item
nextText: "Next",               //String: Set the text for the "next" directionNav item
pausePlay: false,               //Boolean: Create pause/play dynamic element
pauseText: 'Pause',             //String: Set the text for the "pause" pausePlay item
playText: 'Play',               //String: Set the text for the "play" pausePlay item
randomize: false,               //Boolean: Randomize slide order
slideToStart: 0,                //Integer: The slide that the slider should start on. Array notation (0 = first slide)
animationLoop: true,            //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
controlsContainer: "",          //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
manualControls: "",             //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
end: function(){}               //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)

Browser Support

Safari 4+
Chrome 4+
Firefox 3.6+
Opera 10+
IE7+
iOS and Android devices

Textualizer – cool text effect for your paragraphs

4January

Textualizer is a very cool jQuery plugin that gives you the ability to add nice transition effects to your text.

The effects that are currently supported by the plugin are: fadeIn, slideLeft, slideTop, and random.
The API is pretty simple . Below you have an example that shows you the usage of the API.

Here is an image representing the effect that you can obtain by using this jQuery plugin.

Textualizer jQuery plugin

Textualizer jQuery plugin

For creating a similar effect to the one above all you have to do is:

  • Go to Textualizer page and download the textualizer plugin
  • Insert into the head section the code from below (use the jQuery version at your choice)
    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
    <script src="textualizer.js">
    </script>
    
  • Define the style for you textualizer div. For example:
        <style type="text/css">
            #txtlzr
            {
                font-size: 40px;
    			color:#ffffff;
                width: 400px;
                height: 300px;
                margin-left: 100px;
                margin-top: 50px;
    			background: #33AA33;
                border: 1px solid black;
    			-moz-border-radius: 15px;
    			border-radius: 15px;
    			padding:5px;
    			text-align:center;
    			text-shadow: 2px 2px 2px #000;
            }
        </style>
    
  • Declare the paragraphs you want to textualize into your container:
        <div id="container"> 
            <div id="txtlzr">
            	<p>Textualizer is a jQuery plug-in that allows you to 
    transition through blurbs of text. </p>
    		<p>When transitioning to a new blurb, any character 
    that is common to the nextblurb is kept on the screen, and moved to its
    new position.</p>
    		<p>Textualize: verb - to put into text, set down as 
    concrete and unchanging. Use Textualizer to transition through blurbs
    of text.</p>
    		<p>Blurb: noun - a short summary or some words of praise 
    accompanying a creative work.  A promotional description.</p>
            </div> 
        </div> 
    
  • Insert the jQuery code that creates the effect. Example below:
    <script type="text/javascript"> 
        $(function() {
              var txt = $('#txtlzr'); 
    		  
              txt.textualizer();
              txt.textualizer('start');
        })
      </script> 
    

Browser support:
Full support: Chrome, Safari 4+, Firefox 3.5+, IE 6,7,8,9+, Opera 10.6+, Mobile Safari (iOS 4)

Meerkat jQuery plugin – deliver your advertisments, promotions or announcements in a simple cool way

4January

Meerkat is a little jQuery plugin created by Jarod Taylor that gives you a simple way of delivering your advertisments or promotions.

The Meerkat plugin gives you the possibility to deliver the advertisments simple like below:

Meerkat Advertisment Example

Meerkat Advertisment Example


The plugin comes with some nice choices for the developer like providing a close option which will simply close the Meerkat advertisment until the page has been reloaded, a dontShow option which closes Meerkat advertisment until the browser session has ended or for a set amount of days depending on the options the developer has defined.

For using the Meerkat plugin you have a few simple steps to pass:

  • Include the needed libraries:
    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="jquery.meerkat.js" type="text/javascript"></script>
    
  • Choose the HTML element that you want to have Meerkat attached. As in the demo you could use a div with a specified class name that is declared right before the ending body tag.
    <div class="meerkatAdvertisment">
    	Meerkat content goes here
    </div>
    
  • Now simply call Meerkat inside the well known jQuery document ready function:
    $(document).ready(function(){
    	$('.meerkatAdvertisment').meerkat({
    	    background: 'url(images/meerkatadvertisment-bg.png) 
    repeat-x left top',
    	    height: '120px',
    	    width: '100%',
    	    position: 'bottom',
    	    close: '.close-meerkat',
    	    dontShowAgain: '.dont-show',
    	    animationIn: 'slide',
    	    animationSpeed: 500
    	});
    });
    
  • You can change the position of the advertisment, the effect that is used or add a timer so that the advertisment is automatically closed after a specified period.

hoverFlow Plugin – solution to animation queue buildup in jQuery

2January

The hoverFlow plugin represents the solution for the animation queue buildup problem.
This jQuery plugin serves a single mouseover or mouseout with a full animation cycle while preventing animation queue buildup.

The problem with animation queue buildup is that when you stop the mouse after hovering in and out an area that has different animations set up for it the animations will continue since we’ve built up the animation with every mouse movement. The effect is pretty annoying since it takes a few seconds maybe more before all the animations run.
The code for adding an animation that has this problem is:

$(".myclass a").hover(function(){
  $(this).animate({ left : 20 }, 'fast');
},
function(){
  $(this).animate({ left : 0 }, 'fast');
});

The tip for this kind of situations would be to just call stop() for preventing animation queue buildup. This is half a remedy for the problem as this produces another issue: when doing a fast hover over the area nothing will happen which is a little weird.
The code modified with this half remedy is:

$(".myclass a").hover(function(){
  $(this).stop().animate({ left : 20 }, 'fast');
},
function(){
  $(this).stop().animate({ left : 0 }, 'fast');
});

For solving this issue the hoverFlow plugin created by Ralf Stoltze is the right jQuery plugin which gives your animated area the expected behavior.
For using the plugin you just have to:

  • Include the jQuery and the JavaScript files into your document
            <script type="text/javascript" src="jquery-1.3.2.js"></script>
            <script type="text/javascript" src="jquery.hoverflow.js"></script>
            
  • Make sure that the DOM is ready by using the famous jQuery construction
            $(document).ready(function(){
            });
            
  • Use the hoverFlow plugin like this:
            $('.myClass a').hover(function(e) {
                  $(this).hoverFlow(e.type, { left: 20 }, 'fast');
            }, function(e) {
                  $(this).hoverFlow(e.type, { left: 0 }, 'fast');
            });
            

By using the hoverFlow plugin a mouseover animation will only run if the mouse is currently over the element and a mouseout animation will only run if the mouse is currently not over the element.

Browser support:
Full support:Firefox 2+,Internet Explorer 7+,Opera 9.6,Chrome 1
Partial support:Internet Explorer 6

GMAP3 – jQuery plugin for easy Google maps integration

1January

GMap3 is one of the best jQuery Google maps plugin.
The basic setup of the plugin takens less than 1 minute.
It involves:

  • including the google maps script in the head section of your page
  • including the gmap3 script in the head section

and this is it; now you are good to start taking advantage of the Gmap3 plugin.

The plugin is very well documented and a handful of advanced examples are also presented like:

  • how to create a context menu
    Context Menu GMap3 jQuery

    Context Menu GMap3 jQuery

  • how to create a search address feature with autocompletion
    Search autocomplete Google Maps

    Search autocomplete Google Maps

  • how to display a streetview in a InfoWindow
    Streetview in InfoWindow

    Streetview in InfoWindow

  • and many others like adding an animation on Google maps markers, pan to markers etc

The features of GMap3 include:

  • multi-instance: using several maps in the same page
  • full jQuery: all the CSS selectors can be used with no restiction
  • full Google Maps: it allows the developer to use all the google map API natively
  • contextual: the div element which invokes gmap3 is the this context of the
    callback and event functions

For a very basic example of initializing the map and adding a few markers below is the code :

$().gmap3(
	{action:'init',
	 options:{
		center: [43.421, 25.324]	
	 }
	},
	{action:'addMarker',
	 latlng:[43.2,25.212]
		
	},
	{action:'addMarker',
	 latlng:[43.113,25.554]
		
	}

);

On the Gmap3 site you can find examples for every API function that you can access.
Please check out the links below :

Website: http://gmap3.net/

jQuery idleTimer plugin – cool plugin to check when a user is idle

29December

jQuery idleTimer plugin brings you the idea of knowing when your user is idle.
Why would someone need this kind of functionality. Well there are a few pretty good reasons:

  • you want to make your users come back to your site so you need to grab their attention
  • you want to try and preload more assets
  • you want to use it for your chat client
  • you may want to use it for implementing session time
  • maximize the video screen when user idle for more than x seconds

If you think you need any of the above functionality than you should check out this JQuery plugin created by Paul Irish.

It is really very simple to use the plugin:


// idleTimer() takes an optional argument that defines the idle timeout
// timeout is in milliseconds; defaults to 30000
$.idleTimer(10000);
 
 
$(document).bind("idle.idleTimer", function(){
 // function you want to fire when the user goes idle
});
 
 
$(document).bind("active.idleTimer", function(){
 // function you want to fire when the user becomes active again
});
 
// pass the string 'destroy' to stop the timer
$.idleTimer('destroy');
posted under jQuery, Plugins | No Comments »

jQuery Tools in Action

26December

jQuery Tools is a collection of important user-interface components (tabs, accordions, tooltips, overlays, exposing effects and scrollables).  The UI part of this library weighs 4.45 Kb.

Let’s see some of the examples:

TABS:

Slideshow Plugin:

You can find more on the jQuery Tools website.

Browser Support

jQuery Tools have been proven to work with the following browsers:

Page 2 of 3123