Touch Sevice - Public

Uni yr3 Dev Test

by OwenMelbz

HTML

<script src="http://www.benwatts.ca/wp-content/storage/colourific/colourific.js"></script>

CSS

.zone{width:100%; height:250px; border: 1px solid green; cursor:pointer;}
.spike {width: 100px; height: 100px; background-color: red;position: absolute;}
.spike {-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;}

JavaScript

var id = 0;
// Prepare Page
$(document).ready(function() {
    var leheight = $(document).height();
    $('.zone').css('height', leheight);
});

// Click Hook Function - Create Entity
var ua = navigator.userAgent,
    event = (ua.match(/iPad/i)) ? "touchstart" : "click";


$(".zone").bind(event, function(spawn) {
    // Create + Position
    $('.zone').append('<div class="spike" id="' + id + '"></div>');
    var posY = spawn.pageY - 50;
    var posX = spawn.pageX - 50;
    $('#' + id).css('left', posX);
    $('#' + id).css('top', posY);
    // Set Colour
    var hue = 'rgb(' + (Math.floor((256 - 199) * Math.random()) + 200) + ',' + (Math.floor((256 - 199) * Math.random()) + 200) + ',' + (Math.floor((256 - 199) * Math.random()) + 200) + ')';
    $('#' + id).css("background-color", hue);
    // Animate
    $('#'+id).toggle(12000);
    id = id + 1;
});