Owens Touch Surface Dev

Uni yr3 Dev Test

by OwenMelbz

HTML

<script src="http://the-dot.co.uk/jquery.listen-min.js"></script>

CSS

.zone {
    width:100%;
    height:250px;
    background-color:#f9f9f9;
    cursor:pointer;
    z-index:1;
    overflow:hidden;
}
.spike {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    z-index:20;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

JavaScript

// Define Defaults
var maxspikes = 100;
var id = 0;
var i = 0;
var target = "0";

$(function() {
            $(this).bind("contextmenu", function(f) {
                f.preventDefault();
            });
        });

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

jQuery.listen( event, '.spike', function(hook){
    target = this.id;});

jQuery.listen( event, '.zone', function(spawn){
    $('.zone').append('<div class="spike" id="' + id + '"></div>');
    var posY = (spawn.originalEvent.touches ? spawn.originalEvent.touches[0].pageY : spawn.pageY) - 50;
    var posX = (spawn.originalEvent.touches ? spawn.originalEvent.touches[0].pageX : spawn.pageX) - 50;
    $('#' + id).css('left', posX);
    $('#' + id).css('top', posY);
    // Set Colour
    var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
    $('#' + id).css("background-color", hue);
    // Animate
    $('#' + id ).hide("scale", {}, 12000);
    id = id+1;
    // Cleans Memory
    if (id>=maxspikes){
    $('#'+i).remove();
    i++;
    }});

//Grow Function
$(".spike").live(event, function(e) {
    $(this).stop();
var DivHeight = $(this).height();
var grow = $(this).height();
    grow = grow/2;
    $(this).css('height', DivHeight+grow);
    var posY = $(this).offset().top;
    var bump = posY-grow;
    //alert ('top:'+posY+' grow:'+grow+' adjust:'+bump);
    $(this).css('top', bump);
    var posX = $(this).offset().left;
    bump = posX;
    //$(this).css('left', bump); 
    $(this).hide("scale", {}, 12000);
});

//Key Hoooks
$(document).keyup(function(del) {
  if (del.keyCode == 8 || del.keyCode == 68 || del.keyCode == 46) { $("#"+target).remove();}
  if (del.keyCode == 27 || del.keyCode == 80 || del.keyCode == 83) {...