JSFiddle

  • AngularJS - Drag and Drop #47 is the latest revision

    Basic drag and drop demo with update of the data set.

    var app = angular.module('dragDrop', []);
    
    // Create a simple data model
    var dataModel = {
      'reds': [{
        'id': 'red1',
        'text': 'This is red 1 ...
  • Implementing Google Oauth in JSFiddle #62 is the latest revision

    An example of the implementation and use of Google OAuth in JSFiddles. There is also a link to an article about the demo.

    // Set basic variables
    var oAuthEndPoint = "https://accounts.google.com/o/oauth2/auth";
    var oAuthClientID = "702841265150-iaravt3jmu0c67k892pivj9kgkb8dbco.apps.googleusercontent.com";
    var oAuthScope ...
  • URL data base64 image converter

    Simple demonstration of how to convert image files to base 64 encoded data url's.

    function localPicChange() {
        var localPicFiles = document.getElementById('localPic').files;
    
        // Get the file
        if (FileReader && localPicFiles.length == 1) {
            var fr = new FileReader();
            fr.onload = function () {
                SetOutput(fr.result);
            };
            fr ...
  • Google Maps Fullscreen World Map #9 is the latest revision

    How to get the right zome level for showing the entire world.

    $(document).ready(function () {
        var mapDiv = document.getElementById('map_canvas');
        var myOptions = {
            zoom: Math.ceil(Math.log2($(window).width()))-9,
            center: new ...
  • jQuery: Programmatically manipulate buttonset #8 is the latest revision

    Programmatically change selection in jQuery radio buttonset.

    // Basic function
    $("#dumpSec").buttonset();
    $("#r_public").prop("checked", true).trigger("change");
    
    // Put in functions on the demo buttons
    $("#nbr1")
        .button()
        .click ...
  • jQuery: Add to sortable demo

    Demo of jQuery sortable list and how to add to it.

    $("#sortable").sortable();
    
    $(".btn").click(function (e) {
        e.preventDefault();
        var text = $("input[name='add1']").val();
        var $li = $("<li class='ui-state-default'/>").html('<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' + text);
        $("#sortable").append ...</li>
  • Google Maps Sliderbox

    How to add a slider box on a google map to display additional tools or content.

    var map;
    
    function SliderBox(controlDiv, map) {
    
        var control = this;
        control.isOpen = true;
    
        var box = document.createElement('div');
        box.id = 'sliderbox ...
  • Google Maps Search filed with jQuery autocomplete #347 is the latest revision

    A simple example of how to mix Google Maps API and jQuery auto complete to achieve a search box that checks against Google Maps Geocoder API.

    var map;
    var addressField;
    var geocoder;
    
    $(document).ready(function () {
        // Define map options
        var mapOptions = {
            center: new google.maps.LatLng(57 ...