jquery test

owen

HTML

<script src="http://the-dot.co.uk/dev/touch/jquery-ui-1.8.16.custom.min.js"></script>
<script src="http://the-dot.co.uk/dev/touch/jquery.listen-min.js"></script>
<script src="http://the-dot.co.uk/dev/touch/jquery.ui.ipad.altfix.js"></script>
<script src="http://the-dot.co.uk/dev/touch/pause.js"></script>
<script>
 function BlockMove(event) {
  // Tell Safari not to move the window.
  event.preventDefault() ;
 }
</script>

CSS

body {background-color: white; cursor: pointer; z-index:1;overflow:hidden;}
#viewport {width: 100%; height:720px;}
.circle {width:200px; height: 200px; position: absolute; z-index: 2; -webkit-border-radius: 100px; -moz-border-radius: 100px;    border-radius: 100px;}

JavaScript

// Variables
var maxcircles = 100; var id = 0; var i = 0; var target = "0";

// The Code

// Prepare iPad for Touch
var ua = navigator.userAgent,
   event = (ua.match(/iPad/i)) ? "touchstart" : "click";
   
// Set Document Height   
$(document).ready(function() {
    var leheight = $(document).height();
    $('#viewport').css('height', leheight);
});

//Die Function
$(function() {
    jQuery.fn.die = function die() {
        $(this).hide("scale", {}, 12000);
        return this;
    };
});

$(function() {
    jQuery.fn.draggableSetup = function draggableSetup() {
        this.draggable({
            start: function(event, ui) {
                $(this).stop();
            },
            stop: function(event, ui) {
                var currentId = $(this).attr('id');
                $("#"+currentId).hide("scale", {}, 12000);
                //alert (currentId);
            }
        });
        return this;
    };
});
// Set Target Circle
jQuery.listen( event, '.circle', function(e){ target = this.id;});

// Spawn Circle
$('body').live(event, function(e){
$('#viewport').append('<div class="circle ui-draggable" id="' + id + '"></div>');    
// Get Touch Position
var posY = (e.originalEvent.touches ? e.originalEvent.touches[0].pageY : e.pageY) - 100;
var posX = (e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX) - 100;
// Set Circle XY to Touch Location
$('#' + id).css('left', posX);
$('#' + id).css('top', posY);
// Set its Random Colour
var hue = 'rgba(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',0.7)';
$('#' + id).css("background-color", hue);
var bg = 'rgba(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',0.6)';
//$('body').css("background-color", bg);
// Animates it
$('#' + id ).die();
//Make it draggable
$('#' + id).draggableSetup();
// Auto Inc The ID Counter
id++;
// Cleans Memory
if...