jQuery UI Touch Punch

Using Touch Punch is as easy as 1, 2…

Just follow these simple steps to enable touch events in your jQuery UI app:

1. Include 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 Touch Punch after jQuery UI and before its first use.
   Please note that if you are using jQuery UI's components, Touch Punch must be included after jquery.ui.mouse.js, as Touch Punch modifies its behavior.

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

3. There is no 3. Just use jQuery UI as expected and watch it work at the touch of a finger.

   <script>$('#widget').draggable();</script>

Reference: http://touchpunch.furf.com/

How to target iOS with jQuery

Mobile Safari for iOS comes with it’s own little quirks, like scaling your background images or needing a lighter page footprint when on 3G. Fortunately targeting the devices that pack mobile Safari is pretty easy.  Here is a little snippet:

//INCLUDE LATEST VERSION OF JQUERY
<script src="http://code.jquery.com/jquery-latest.js"></script>
$(document).ready(function(){
var device = navigator.userAgent.toLowerCase();
var ios = device.match(/(iphone|ipod|ipad)/);
if (ios) {
     //ADD CLASSES HERE THAT WILL ONLY APPLY TO IOS
     $("some-element").addClass("some-class");
     }
}); 

Reference:

http://www.rufusmedia.com/journal/2011/05/how-to-target-ios-with-jquery 

remove scroll from fullcalendar in week view and dayview

 function resizeCalendar() {
        var currentView = $('#calendar').fullCalendar('getView');
        if (currentView.name === 'agendaWeek' || currentView.name === 'agendaDay') {
            currentView.setHeight(9999);
        }
    }
    $(window).on('resize', resizeCalendar);


 $('#calendar').fullCalendar({
                    selectable: true,
                    viewDisplay: resizeCalendar //this is the trick
})