jQuery UI touch events

As more and more websites go responsive, the widgets with touch events are a must. jQuery UI, unfortunately, doesn’t support touch events for their widgets.

After a struggle with a jQuery UI slider to make it work on an iPad, I’ve found an awesome js library that adds touch events to the jQuery UI.

jQuery UI Touch Punch is a hack that enables the touch events on sites using jQuery UI.

How to use

1. You need to include the jQuery and jQuery UI on your page

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>

2. Include the Touch Punch js after jQuery UI and before its first use.

<script src="/js/jquery.ui.touch-punch.min.js"></script>

3. Use jQuery UI as normal

$('#widget').slider();

Now enjoy the touch events on your jQuery UI widgets!

Demo & Download

jQuery liScroll – scroll text plugin

This plugin is an adaptation of a news ticker. You can adapt it to scroll random text, not only news feeds.

1. Include the dependencies in the head of the html document

<link rel="stylesheet" type="text/css" media="screen" href="/css/li-scroller.css" />
<script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.li-scroller.1.0.js"></script>

2. The markup

<ul id="ticker01">
  <li><span>10/10/2007</span><a href="#">The first thing ...</a></li>
  <li><span>10/10/2007</span><a href="#">End up doing is ...</a></li>
  <li><span>10/10/2007</span><a href="#">The code that you ...</a></li>
</ul>

The markup doesn’t need to have the span and a element, you can include whatever text you want.

3. Fire the plugin

$(function(){
  $("ul#ticker01").liScroll();
});

The plugin has only one option, so if you want the list to scroll faster or slower, you should modify the travelocity param.

$(function(){
  $("ul#ticker01").liScroll({travelocity: 0.15});
});

Demo & Download

jQuery thumbnail scroller

This jQuery plugin works by cursor movement or next/previous buttons. It’s really simple to use and first one that I’ve found that starts the slider on hover and it’s cool.

How to use it

1. Include the external files

<link href="jquery.thumbnailScroller.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="jquery-ui-1.8.13.custom.min.js"></script>
<script src="jquery.thumbnailScroller.js"></script>

2. The Markup

<div id="tS2">
    <div>
        <div>
            <a href="#"><img src="thumbs/img1.jpg" /></a>
            <a href="#"><img src="thumbs/img2.jpg" /></a>
            <a href="#"><img src="thumbs/img3.jpg" /></a>
            <a href="#"><img src="thumbs/img4.jpg" /></a>
            <a href="#"><img src="thumbs/img5.jpg" /></a>
        </div>
    </div>
    <a href="#"></a>
    <a href="#"></a>
</div>

3. Fire the plugin

jQuery.noConflict();
(function($){
window.onload=function(){
    $("#tS2").thumbnailScroller({
        scrollerType:"hoverPrecise",
        scrollerOrientation:"horizontal",
        scrollSpeed:2,
        scrollEasing:"easeOutCirc",
        scrollEasingAmount:600,
        acceleration:4,
        scrollSpeed:800,
        noScrollCenterSpace:10,
        autoScrolling:0,
        autoScrollingSpeed:2000,
        autoScrollingEasing:"easeInOutQuad",
        autoScrollingDelay:500
    });
}
})(jQuery);

Documentation

Demo

jQuery PowerTip

PowerTip is a jQuery plugin created by Steven Benner, that creates hover tooltips that are easy to customize, has APIs for developers, supports adding complex data.

This plugin has some unique features: checks for hover intent (the tooltip doesn’t open the moment your mouse happens to cross an element with a tooltip), tooltip queuing (when the user moves their cursor to another element with a tooltip, the last tooltip will close gracefully before the next one opens).

Features

  • simple configuration;
  • supports static tooltips as well as tooltips that follow the mouse;
  • ability to let users mouse on to the tooltip and interact with their content;
  • easy customization;
  • works with keyboard navigation;
  • smooth fade-ins and fade-outs.

Usage

This plugin requires jQuery 1.7 or later.

To run the plugin you simply use the following code:

$('.tooltip').powerTip(options);
//where options is an object with the various settings you want to override

The content of the tooltip can be set from the HTML title attribute, a HTML5 data attribute, a jQuery object or an element from the DOM.

If you want to change the default options for all tooltips, you can do that using $.fn.powerTip.defaults before you call powerTip(). Here is an example:

$.fn.powerTip.defaults.placement = 'nw'
// change the default tooltip placement to north-west
$('.tooltip').powerTip();

Demo, Documentation & Download

Backstretch – add full-sized background image


This plugin allows you to add big images as background for a page, it resize it to fit the page and will automatically resize as the window size changes. To avoid the waiting for the background to load and then to use the site, this plugin fetches the background image after the page is loaded.

How to use:

This plugin doesn’t require some specific markup. You just include the jquery.min.js file and the jquery.backstretch.min.js one, and then fire the plugin with the following line:

<script type="text/javascript">
  $.backstretch("april-cherry.jpg");
</script>

Other uses:

  • you can attach Backstretch to a click event: change the background image when some element is clicked
  • use Backstreched in a slideshow: add several images and create a slideshow as background

Demo Download

Power PWChecker – jQuery Strong Password Plugin

Power PWChecker jQueryPlugin observes passwords as users type and provide instant password strength check (Weak, Medium, or Strong). This encourages users to review their password selection and ensure that the password is strong and secure.  Power PWChecker also allows you to enforce password length policy by specifying minimum and maximum password length. It also matches password entries and provides visual alert in case of inconsistent passwords.

How to use

– add the latest reference to jQuery library

– add a reference to pschecker.js file

– add a reference to style.css file

The HTML

<div class="password-container">
  <p>
    <label>Enter Password:</label>
    <input type="password" class="strong-password"/>
  </p>
  <p>
    <label>Confirm Password:</label>
    <input type="password" class="strong-password"/>
  </p>
  <p>
    <a href="#" class="submit-button locked">Submit</a>
  </p>
  <div class="strength-indicator">
    <div class="meter">
    </div>
    Strong passwords contain 8-16 characters, do not include common words or names,
    and combine uppercase letters, lowercase letters, numbers, and symbols.
  </div>
</div>
Fire the plugin
$(document).ready(function () {
  $('.password-container').pschecker({ onPasswordValidate: validatePassword, onPasswordMatch: matchPassword });
});

 

 

Custom File Input with jQuery

Browsers offer almost no control over how file inputs are presented visually, making it difficult to incorporate them into a uniform interface design.

From the book Designing with Progressive Enhancement, the jQuery Custom File Upload Input plugin can be used to customize the file inputs very simple.

The demo can be viewed here and the sources can be downloaded from here. The plugin code is open source, so you can help improve the plugin.

How does it work

The widget creates a custom-styled file control using div and span elements, and then uses JavaScript to set the native input‘s opacity to zero and dynamically position it invisibly between the cursor and the custom control, so that the user interacts only with the input.How to use it

1. After you downloaded the source files from github,  include the scripts and the css files:

<link href="css/basic.css" type="text/css" rel="stylesheet" />
<link href="css/enhanced.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jQuery.fileinput.js"></script>

2. The HTML markup

<label for="file">Choose photo</label>
<input type="file" name="file" id="file" />

3. Start the plugin

$(function(){
$('#file').customFileInput();
});