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