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


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>

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

3. Fire the plugin


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

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

Demo & Download