Extremely Flexible jQuery Color Picker – ExColor

Extremely Flexible jQuery Color Picker – ExColor:

ExColor is a jQuery plugin for enabling users to select colors from a Photoshop-like color picker.

It is attached to <input> fields and can be activated by simply calling a single-line function.

The color picker's design is so flexible as every element used in the picker comes with 10 different design options to select from.

Also, a web-based editor helps choosing each design element, their colors and various other options to create a unique look.

Special Downloads: Ajaxed Add-To-Basket Scenarios With jQuery And PHP Free Admin Template For Web Applications jQuery Dynamic Drag’n Drop ScheduledTweets

How to Create Automatic Image Montage with jQuery

How to Create Automatic Image Montage with jQuery:

Arranging images in a montage like fashion can be a challenging task when considering certain constraints, like the window size when using fullscreen, the right image number to fill all the available space or also the size of the images in use.

With Automatic Image Montage with jQuery you can automatically create a montage, either for a liquid container or a fixed size container (including fullscreen), with the option to fill all the gaps.

Requirements: jQuery Framework Demo: http://tympanus.net/Development/AutomaticImageMontage/ License: License Free

Shuffle Letters Effect: a jQuery Plugin

Shuffle Letters Effect: a jQuery Plugin:

In this short tutorial we will be making a jQuery plugin that will shuffle the text content of any DOM element – an interesting effect that can be used in headings, logos and slideshows.

The Code

The first step is to write the backbone of our jQuery plugin. We will place the code inside a self-executing anonymous function, and extend $.fn.

assets/js/jquery.shuffleLetters.js

(function($){

	$.fn.shuffleLetters = function(prop){

		// Handling default arguments
		var options = $.extend({
			// Default arguments
		},prop)

		return this.each(function(){
			// The main plugin code goes here
		});
	};

	// A helper function

	function randomChar(type){
		// Generate and return a random character
	}

})(jQuery);

Next we will turn our attention to the randomChar() helper function. It will take a type argument (one of “lowerLetter“, “upperLetter” or “symbol“) and return a random character.

function randomChar(type){
	var pool = "";

	if (type == "lowerLetter"){
		pool = "abcdefghijklmnopqrstuvwxyz0123456789";
	}
	else if (type == "upperLetter"){
		pool = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
	}
	else if (type == "symbol"){
		pool = ",.?/\\(^)![]{}*&^%$#'\"";
	}

	var arr = pool.split('');
	return arr[Math.floor(Math.random()*arr.length)];
}

We could have used a single pool string for all types of characters, but this will do for a better effect.

The Plugin In Action

Now lets write the body of the plugin!

$.fn.shuffleLetters = function(prop){

	var options = $.extend({
		"step"	: 8,	// How many times should the letters be changed
		"fps"	: 25,	// Frames Per Second
		"text"	: "" 	// Use this text instead of the contents
	},prop)

	return this.each(function(){

		var el = $(this),
			str = "";

		if(options.text) {
			str = options.text.split('');
		}
		else {
			str = el.text().split('');
		}

		// The types array holds the type for each character;
		// Letters holds the positions of non-space characters;

		var types = [],
			letters = [];

		// Looping through all the chars of the string

		for(var i=0;i<str.length;i++){

			var ch = str[i];

			if(ch == " "){
				types[i] = "space";
				continue;
			}
			else if(/[a-z]/.test(ch)){
				types[i] = "lowerLetter";
			}
			else if(/[A-Z]/.test(ch)){
				types[i] = "upperLetter";
			}
			else {
				types[i] = "symbol";
			}

			letters.push(i);
		}

		el.html("");			

		// Self executing named function expression:

		(function shuffle(start){

			// This code is run options.fps times per second
			// and updates the contents of the page element

			var i,
				len = letters.length,
				strCopy = str.slice(0);	// Fresh copy of the string

			if(start>len){
				return;
			}

			// All the work gets done here
			for(i=Math.max(start,0); i < len; i++){

				// The start argument and options.step limit
				// the characters we will be working on at once

				if( i < start+options.step){
					// Generate a random character at this position
					strCopy[letters[i]] = randomChar(types[letters[i]]);
				}
				else {
					strCopy[letters[i]] = "";
				}
			}

			el.text(strCopy.join(""));

			setTimeout(function(){

				shuffle(start+1);

			},1000/options.fps);

		})(-options.step);

	});
};

The plugin will take either the contents of the DOM element it was called on, or the text property of the object passed as an argument. It then splits the string into characters and determines the type of each one. The shuffle function then uses setTimeout() to call itself and randomize the string, updating the DOM element on each step.

When you head on to the demo you will see that you are able to type your own text and test it out. Here is how I did it:

assets/js/script.js

$(function(){

	// container is the DOM element;
	// userText is the textbox

	var container = $("#container")
		userText = $('#userText');

	// Shuffle the contents of container
	container.shuffleLetters();

	// Bind events
	userText.click(function () {

	  userText.val("");

	}).bind('keypress',function(e){

		if(e.keyCode == 13){

			// The return key was pressed

			container.shuffleLetters({
				"text": userText.val()
			});

			userText.val("");
		}

	}).hide();

	// Leave a 4 second pause

	setTimeout(function(){

		// Shuffle the container with custom text
		container.shuffleLetters({
			"text": "Test it for yourself!"
		});

		userText.val("type anything and hit return..").fadeIn();

	},4000);

});

The fragment above also shows how you can use the plugin and the custom text parameter.

Pop From Top Notification

Pop From Top Notification:

Have you seen that design pattern where a notification pops down from the top of the browser window, then slides away? We can rock that in pure CSS.

View Demo Download Files

We'll just make a div:

<div id="note">
  You smell good.
</div>

Then we'll style it and put it on the top of the screen:

#note {
  position: absolute;
  z-index: 101;
  top: 0;
  left: 0;
  right: 0;
  background: #fde073;
  text-align: center;
  line-height: 2.5;
  overflow: hidden;
  -webkit-box-shadow: 0 0 5px black;
  -moz-box-shadow:    0 0 5px black;
  box-shadow:         0 0 5px black;
}

Let's animate it

With a keyframe animation, we can "hide" it above the browser window and bring it down for a short while:

@-webkit-keyframes slideDown {
  0%, 100% { -webkit-transform: translateY(-50px); }
  10%, 90% { -webkit-transform: translateY(0px); }
}
@-moz-keyframes slideDown {
  0%, 100% { -moz-transform: translateY(-50px); }
  10%, 90% { -moz-transform: translateY(0px); }
}

Er... let's consider other browsers quick

But let's consider browsers that don't have transforms and animations for a second. For those, we'd want to default to just showing the notification bar at all times, with the ability to dismiss it.

So we'll make a custom build of Modernizr to test for transforms and animations, load that up, then we can write CSS to test for those features and only fire off the animations if we're in a browser that supports them.

.cssanimations.csstransforms #note {
  -webkit-transform: translateY(-50px);
  -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
  -moz-transform:    translateY(-50px);
  -moz-animation:    slideDown 2.5s 1.0s 1 ease forwards;
}

The 1.0s in there is the delay before the animation runs. Best to wait a minute to make the notification more noticeable.

Now we'll add a close button into the HTML:

<div id="note">
  You smell good. <a id="close">[close]</a>
</div>

And a tiny bit of JavaScript at the bottom of the page so that the non-supporting browsers can close the notification.

<script>
close = document.getElementById("close");
close.addEventListener('click', function() {
 note = document.getElementById("note");
 note.style.display = 'none';
}, false);
</script>

Look ma, no libraries.

Since we don't need that close button in browsers that do support the animations, we'll hide it:

.cssanimations.csstransforms #close {
display: none;
}

For the record, this should work OK on mobile browsers (tested Mobile Safari). There is no fixed positioning used here, only absolute, and that's going to be less of a problem moving forward anyway (might want to consider making it fixed so even if the user is scrolled down the page they'll get it).

Enjoy

View Demo Download Files

Pop From Top Notification is a post from CSS-Tricks