JSFiddle

  • Mouse Event Normalisation

    No-Library (pure JS), HTML, CSS, JavaScript

    /*#############################
    ## MOUSE EVENT NORMALISATION ##
    #############################*/
    function normaliseXY(el, ev) {
    	var offsX = el.offset().left;
    	var offsY = el.offset().top;
    	var x, y ...
  • Lightsaber orientationchange test #3 is the latest revision

    After the deprecation of access permissions for certain device metrics on unsecured (non-SSL) connections, I hope this will better on JSFiddle...

    console.clear();
    			var io = {}; // INITIAL
    			var co = {}; // CURRENT
    			if (window.DeviceOrientationEvent) {
    				window.addEventListener("deviceorientation", function (e) {
    					var stuff = '';
    					//console.log ...
  • Sliding RH Menu w/ Toggle

    A menu that slides out from the RHS with an accompanying "shade" element

    // menu togglers
    $(document).on('click', 'div.menu_toggle, div.menu_actual span.closer', function(e) {
    	$('div.menu_toggle, div.menu_actual, div.menu_shade').toggleClass ...
  • fancyfill framework

    A globalised CSS snippet that creates a "fill" effect for appropriately classed elements

    <div class="test a fancyfill">I will fill with a border</div>
    <div class="test b fancyfill fancyfull">I... Won't</div><div class="test c fancyfill">I'm a circle!</div>
  • Lightsaber ;) #19 is the latest revision

    Afternoon testing session.

    console.clear();
    var io = {};
    var co = {};
    if (window.DeviceOrientationEvent) {
        window.addEventListener("deviceorientation", function (e) {
            var stuff = '';
            //console.log(e);
            
            // alpha ...
  • 3D OrientationChange Testing

    Tests for prototyping a rotation controlled spelling game. (Fun fact: macbook pro's orientationchange data is NOT relative to the screen)

    console.clear();
    var io = {};
    var co = {};
    if (window.DeviceOrientationEvent) {
        window.addEventListener("deviceorientation", function (e) {
            var stuff = '';
            //console.log(e);
            
            // alpha ...
  • Basic Timed Image Slider w/ Controls #2 is the latest revision

    Super-basic image slider, generated through jQuery from a list of image sources.

    $(document).ready(function(e) {
        nuslider(
            $('div.nuslider'),
            [
                "http://canolfanpeniarth.org/imgs/banners/4.jpg",
                "http://canolfanpeniarth.org/imgs/banners/6 ...
  • PayPal Style Loading Spinner (CSS Only) #1 is the latest revision

    An attempt to duplicate the PayPal 2015 Spinner using only CSS, and the fewest number of HTML elements possible

    <div class="loada"></div>
  • 3D Rotation "Follower"

    Basic 3D-effect circle that "follows" mouse or (hopefully) finger position.

    $(document).ready(function(e) {
        var discus = $('span.discus');
        var discusX = discus.position().left;
        var discusY = discus.position().top;
        var discusXcenter ...
  • SuperBasic Oscillator demo

    Prelim testing for the Web Audio API's Oscillator. Next step: Piano.

    var osctypes = [
        	"square",
            "sine",
            "sawtooth",
            "wave"
        ];
    var beep = (function () {
        console.clear();
        var ctx = new AudioContext();
        return function (duration, type, frequency ...