webtoolkit4.me » jQuery

jQuery ContentHover Plugin

Gerasimos — Mon, 16 Jan 2012 09:41:42 +0000

ContentHover is a small jQuery plugin that helps you show some hidden content on top of an element when the mouse hovers over it. There are options to chose how your hover effect would appear, like fade in or slide in from any direction, you can change the opacity of the overlay etc.

Textualizer – A jQuery plugin to transition through blurbs of text

Gerasimos — Tue, 10 Jan 2012 13:54:50 +0000

Textualizer is a jQuery plugin that allows to transition through blurbs of text. Textualizer currently has the following effects: fadeIn, slideLeft, slideTop, and random. You can choose which effect to use by setting the effect option.

DropKick.js Painless custom dropdowns

Gerasimos — Wed, 26 Oct 2011 13:22:08 +0000

A really useful jQuery script if you want to replace the default form dropdowns. Very easy to customize it as well. As the author states:

“Creating custom dropdowns is usually a tedious process that requires a ton of extra setup time. Oftentimes lacking conveniences that native dropdowns have such as keyboard navigation. DropKick removes the tedium and lets you focus on making s@#t look good.”

Make your select boxes better with the Chosen plug-in.

vmasto — Sat, 23 Jul 2011 14:39:58 +0000

The Harvest team brings us something really cool, a plug-in for jQuery and Mootools that improves the overall look and UX of your select boxes.

It comes with options for auto-filtering results, painless multi-select and much more.

How to make a custom music Equalizer with jQuery

vmasto — Fri, 01 Jul 2011 01:40:22 +0000

Music on websites is kind of a deprecated concept nowadays, but for those clients who absolutely must have it or or that funky web radio station that needs a custom player, there is no reason not to follow the latest standards using HTML5 and JavaScript. In this micro tutorial we ‘ll see how we can implement a simple pseudo-equalizer in our player of choice using just CSS and jQuery.

The HTML

The markup is straightforward, just a simple container with a new element for each of our bars.

Styling our bars

We can now use whatever styling we need to make the equalizer up to par with our player and website. I chose to use a simple green color for demonstration purposes:

.bar {
    background-color: green;
    width:7px;
    height:15px;
    display: inline-block;
    vertical-align: bottom;
}

The important thing here to notice is the vertical-align: bottom; rule. Without it, the equalizer animation behaves a bit peculiar. This forces each bar to animate starting from the top, instead of the bottom.

The jQuery

function fluctuate(bar) {
    var hgt = Math.random() * 10;
    hgt += 1;
    var t = hgt * 30;

    bar.animate({
        height: hgt
    }, t, function() {
        fluctuate($(this));
    });
}

$(".bar").each(function(i) {
    fluctuate($(this));
});

What this does, is to create a random number which will be used to randomly determine the height of each equalizer bar each time we loop through the function.

We then use the .animate() method of jQuery to begin animating the height of each element randomly. Pretty easy, right?

Let’s delve into this code a bit more:

var hgt = Math.random() * 10; hgt += 1;
Creates a random number of 0 to 10. This will be used as the new height of each element, each time the function loops through itself. If we need a taller, or shorter bar, we can change the maximum height by simply adjusting the “10″ value after Math.random().

var t = hgt * 30;
Gets the current height value and multiplies it by a number. This is a little trick to keep the speed with which each bar fluctuates random. If you want something faster or slower, simply adjust that number.

bar.animate({ height: hgt }, t, function() { fluctuate($(this)); });
Here we animate the height of our bar, in the random time of t, and then we call the same function again so it loops through itself over and over again.

$(".bar").each(function(i) { fluctuate($(this)); });
Finally, we iterate this function over every single .bar element.

And there we have it, our own custom jQuery and CSS equalizer! Feel free to use it on your own website if you need to.

CSS3 animations and their jQuery equivalents

Gerasimos — Sat, 18 Jun 2011 11:52:34 +0000

A really nice comparison chart with demos can be found over at marcofolio.net. The chart provides a small set of animations that we can create using pure CSS3 (webkit browsers only at the moment) and their equivalents using jQuery.

Grid Navigation Effects with jQuery

Gerasimos — Tue, 14 Jun 2011 07:20:49 +0000

Some really interesting effects can be found on the “Grid Navigation Effects w/ jQuery” article / plugin over at Codrops. Instructions on how to use the plugin and navigate through thumbnails with 10 different ways can be found at the end of the article.

Plax – a Parallax jQuery plugin

Gerasimos — Fri, 10 Jun 2011 07:57:58 +0000

Have you seen the awesome 404 and 500 github pages? Beside the beautiful illustrations by Cameron McEfee, he decided to create a tiny plugin for “parallaxifying” things like that in the future. Well, he also decided to share it with us!

Flux Slider – A jQuery / CSS3 slider

Gerasimos — Thu, 09 Jun 2011 07:28:28 +0000

At some point in a project you might have used a slider of images for e.g. your featured articles or something. While there are literally hundreds of these out there, Flux goes a step further and while browser support is not the best, have a look at it as it utilizes some really great CSS3 effects. As the author states, you can either use jQuery or Zapto.js. In order to view the demo you need a browser that supports CSS3 transitions. Good stuff.

QapTcha : jQuery captcha system with jQuery & jQuery UI

Gerasimos — Fri, 18 Feb 2011 10:36:37 +0000

“QapTcha is a draggable jQuery captcha system with jQuery UI. QapTcha is an easy-to-use, simple and intuitive captcha system. It needs human action instead of to read a hard text and it is a very lightweight jQuery plugin.” This plugin can be used and uploaded to your webhost for your website.