JSFiddle

bcmoney's public fiddles

  • URL parsing

    Example to separate out a URL's: * Protocol * Sub-Domain * Host * Port * Filename * Query Parameters

  • Styled Lists with Colors & Hover effects

    Removed default numbering and bulleted behaviours, added CSS hover effects and dynamic cross-browser polyfilled gradient background

  • Real-time ticket queue

    Demonstration of a simple (although leaving much room for further optimization) approach to periodically checking the DOM for expiry of a specific item and invalidating it.

  • 5-minute Estimate

    5-minute Estimate Calculator that can output CSV format for opening in Excel, or more easily importing to other applications (JIRA, etc).

  • BMI Calculator #24 is the latest revision

    Real-time BMI calculation example

  • Mobile - iOS Safari check

    JS based User-Agent detection method

  • PDF.js Previous/Next example #5 is the latest revision

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

  • CSS3 horizontal scrolling gallery

    Full credit to: https://designshack.net/articles/css/infinitephotobanner/

  • HTML5 Drag and Drop sort #3 is the latest revision

    Awesome little tool for creating dynamic Playlists, search/ordering criteria for filters, re-organizable table headers, etc

  • Inactivity Timer - with iFrame status

    An "Inactivty Timer" which allows you to keep track of when users are interacting with your page/app or just sitting idle.

  • Vertical R-to-L Text (Japanese Kanji)

    An example of how to write Right-To-Left, top-down (vertical) text, in this case, traditionally written Japanese Kanji and Hiragana characters, all works with a simple CSS "writing-mode" property, however depends on browser support which may be limited on older Browsers or even still on some Mobile Browsers.

  • True Centering text in HTML5 Canvas (X,Y... WxH)

    This is one approach for "True Centering" some text in an HTML5 Canvas...

  • Stamplia - Email Templates

    Stamplia - buy/sell beautiful Open Source HTML Email Templates: https://builder.stamplia.com/doc/

  • JIRA issue collector

    Gather player Feedback post DARWIN go-live using Atlassian's JIRA issue collector API.

  • Proline Stadium

    Proline Stadium - the current static layout .vs. Beta responsive layout

  • Skype API

    Click-to-Call (working) and Status (deprecated)

  • JSFiddle - Echo JSON

    Adapted from the jQuery-dependent version: http://jsfiddle.net/SpYk3/rcUea/ Used to be alot easier to test external APIs, Web Services, SOAP/REST, XML, JSON, even JSONp it was all good as JSFiddle introduced full CORS supported. They've since locked it down so not only do you have to use HTTPS (SSL) for all External Resources included, but you also need to request to an internal "mock API" with the request body being a sample of the known API response format that you want to get back. This "echo" service will just spit back out whatever you feed it, so it can be useful for testing, but its annoying... more details: http://doc.jsfiddle.net/use/echo.html

  • Autosuggest for Term search

    AJAX autosuggest popup for looking up terms/acronyms (NOTE changed JSON results format from "value" to "term" for retrieval, also changed GET to POST request): http://www.brandspankingnew.net/specials/ajax_autosuggest/ajax_autosuggest_autocomplete.html jQuery UI Autocomplete customized version of: https://jqueryui.com/autocomplete/ HTML5 autocomplete example: https://www.webcodegeeks.com/html5/html5-autocomplete-example/

  • CSS3 Pie Chart

    CSS3 Pie Chart with no other dependencies: http://atomicnoggin.ca/blog/2010/02/20/pure-css3-pie-charts/ Similar to the following (but that one doesn't work in IE only CSS3-compatible browsers): https://www.smashingmagazine.com/2010/07/css3-design-contest-results/

  • Embedded PDF

    Attempt to embed a full PDF inline for display on DARWIN Dashboard. Note that Sharepoint itself has an X-FRAME-OPTIONS which prevents iframing or embedding any Sharepoint content.

  • CSV table display

    For displaying the latest News, Risks, Issues, Events (from Excel) CSV parsing function shamelessly lifted from: http://www.greywyvern.com/?post=258

  • JS regex replace HTML with Text

    JavaScript function and example utility for replacing an HTML text string with a plain text string, simply stripping any HTML tags. It uses Regular Expressions for the stripping of the HTML tags which could be somewhat error-prone, but should fit most cases, in particular JIRA-SpiraTest synchronization problem text.

  • CSS Bar Chart (vertical)

    CSS Bar Chart option: http://wojodesign.com/css-stacked-bar-graphs/

  • Burndown Chart #127 is the latest revision

    Two dependencies: - jQuery lib (already have it on our's) - HighCharts.js (NOTE: requires a small commercial license when used in Production)

  • Gauge Chart Example #53 is the latest revision

    An example of a Gauge Chart using three options: https://developers.google.com/chart/interactive/docs/gallery/gauge http://bernii.github.io/gauge.js/ http://justgage.com/

  • DARWIN Dashboard

    Prototype for building a dashboard for the DARWIN program. Uses jQuery + Bootstrap framework: http://api.jquery.com/ http://getbootstrap.com/components/ http://getbootstrap.com/examples/dashboard/ http://getbootstrap.com/examples/grid/ https://css-tricks.com/box-sizing/ https://github.com/Serhioromano/bootstrap-calendar

  • Ember.JS

    JS lib #19

  • React.JS latest

    Latest version of React.JS

  • Ionic.JS

    Angular 1.x + slick UI features

  • Angular.JS 2x

    JS lib #16

  • Knockout.JS

    JS lib #15

  • Handlebars.JS

    JS lib #14

  • Mustache.JS

    JS lib #13

  • Underscore.JS

    JS lib #12

  • Backbone.JS

    JS lib 11

  • React.JS

    JS Framework 2.0 -- Non-JSX example, meant to be used as a starting point for creating small projects with React. This uses React with Addons. For React Native (Mobile apps) see: https://facebook.github.io/react-native/docs/getting-started.html#content

  • Angular.JS

    JS Framework 2.0 -- Angular v1.2.1 - basic demo: http://angularjs.org/ NOTE: this won't work when updating library to new Angular.JS v2.x due to library incompatibilities

  • Meteor.JS #1 is the latest revision

    Meteor.JS end-to-end JavaScript framework: http://guide.meteor.com/index.html

  • Ember.JS

    Ember.JS quick start: https://guides.emberjs.c om/v2.6.0/getting-started/quick-start/

  • Vue.JS

    Vue.JS Hello World example: http://vuejs.org/guide/index.html

  • Knockout.JS

    Knockout.JS Hello World example: http://knockoutjs.com Update input text and hit enter for dynamic content.

  • YUI.js

    JS Framework 1.0 -- Yahoo User Interface library (YUI), was a major innovator in 2006-2007 but got surpassed by ExtJS & jQuery. For reference, see: http://yuilibrary.com/yui/docs/examples/

  • Dojo.JS

    JS Framework 1.0 -- Dojo classic demo: http://dojotoolkit.org/documentation/tutorials/1.10/hello_dojo/

  • MooTools.JS

    JS Framework 1.0 -- MooTools.JS basic example, for more see: http://mootools.net/core/docs/1.6.0

  • Prototype.JS #35 is the latest revision

    JS Framework 1.0 ------------------- #1 Prototype.JS ------------------- Old-school demo, this one focused on Event Delegation (which was a major benefit of Prototype until it got added to the other JS libs): http://prototypejs.org/learn/

  • Mobile simulate Double-Click event

    Using a "dblclick" event handler polyfill for touch devices. http://gist.github.com/mckamey/2927073

  • HTML5 + JavaScript - Accelerometer

    Get data from a mobile device's accelerometer sensor. Even some laptops are equipped with it, so you never know give it a try... if ball stays put you probably don't have an accelerometer chip on board... (might be worth quickly checking your device's settings to see if something's there but disabled).

  • Fisheye Menus - jQuery .vs. JS .vs. CSS .vs. CSS3

    Three example Fisheye Menus, the first is a jQuery plugin: http://interface.eyecon.ro/demos/fisheye.html The second is lightweight JavaScript/CSS with no external dependencies: http://marcgrabanski.com/fisheye-javascript-menu/ The third is a CSS-only option which approximates the same look & feel and also optionally uses CSS Sprites (single-image for large and small icons): http://onwebdev.blogspot.com/2010/06/pure-css-fisheye-menu-with-icons.html The fourth is a CSS3 menu which uses the new animations & transforms features to create the same pure CSS approxiamtion: http://tjameswhite.com/demos/fisheye/

  • HTML5 Microdata + Microformats (hCard, hCalendar, hEvent)

    Cleaned up (CSS separated out from inline and OpenGraph Protocol Microdata attributes added) version of the data examples created by the official generators... * hCard Creator: http://microformats.org/code/hcard/creator * hCalendar Creator: http://microformats.org/code/hcalendar/creator * hReview Creator: http://microformats.org/code/hreview/creator For more info, see... * xHTML Microformats: http://microformats.org/ * OpenSchema vocabulary: http://schema.org/docs/schemas.html * HTML5 Microdata spec: http://www.w3.org/TR/microdata/

  • PhotoSwipe - Mobile Image Gallery

    The only thing better than the quick & dirty Futurebox3 CSS solution for inline modals/popups is the mobile-compatible (as in touches/gestures/intents) PhotoSwipe library. It is a standalone lightweight JS full-fledged image gallery library rather than a shortcut to getting some inline content popped up. Use for more beautiful photography-centric rather than HTML/content-centric use cases.

  • Futurebox3 (CSS inline modal/popup)

    I take no credit for this, save for my eye for the best lightest weight approach to achieving a modal/lightbox style inline (unblockable) popup. All the hardwork was done by TheCSSninja, and I am forever grateful to him! I've used this a lot in my little projects, especially to replace the bulkier (but "best of the rest" Greybox), in fact that reminds me I should send him some beer/coffee money donations. For a comparison grid for the other top common solutions that most people use to achieve the same effects, see: http://planetozh.com/projects/lightbox-clones/

  • ContentFlow (JS Coverflow)

    Implemenation of the CoverFlow-inspired ContentFlow JavaScript libary. Working example: http://bcmoney-mobiletv.com/widgets/contentflow/ Other popular libraries are: http://luwes.co/projects/js-cover-flow/ https://vanderlee.github.io/coverflow/ https://coverflowjs.github.io/coverflow/ http://simile-widgets.org/runway/ http://www.mb5u.com/jscode/html/Prototype/1041_protoflow/

  • DBpedia API - Music

    Use the DBpedia API to perform Music data lookups including Artist (info/pic) & Albums (songs/cover-art). Tutorial: http://www.onemusicapi.com/blog/2014/09/10/querying-wikipedia-album-artwork/ SPARQL: http://dbpedia.org/sparql

  • MusicBrainz v2

    Client-side code for querying the MusicBrainz API v2.0 (XML or JSON Web Service) using jQuery AJAX requests. For more info, see: * MusicBrainz dev resources: https://musicbrainz.org/doc/Development * MusicBrainz Web Service: https://musicbrainz.org/doc/Development/XML_Web_Service/Version_2 * MusicBrainz DB Schema: https://musicbrainz.org/doc/MusicBrainz_Database/Schema * MusicBrainz query formatting: http://forums.musicbrainz.org/viewtopic.php?pid=22929#p22929 Based on previous example from GitHub: https://github.com/duncanjbrown/Simple-MusicBrainz-API-Wrapper-JS For albums, get the value of "title" from the following: http://musicbrainz.org/ws/2/release-group/?query=artist:metallica%20AND%20type:album

  • InfoVis graphs (GoogleCharts fallback)

    Javascript InfoVis Toolkit (JIT) examples: http://philogb.github.io/jit/demos.html Also a few quick & dirty Google Charts API fallbacks: https://developers.google.com/chart/interactive/docs/gallery/barchart#coloring-bars

  • D3.js - Line Chart from object (X.vs.Y)

    Data Driven Documents javascript library (D3.js) This is an example of loading in-page/in-object data, based on converting the file-based TSV loading example basic Line Chart from: http://bl.ocks.org/mbostock/3883245 This type of chart is perfect for the changes in a single value over time.

  • Processing.JS - Charts/Graphs #7 is the latest revision

    Processing.JS project ports the Processing statistical modeling and visualization platform to the web. Here are the simplest possible examples of a Pie Chart, Bar Chart and Line Graph: http://chrislarson.me/blog/processingjs-example-pie-chart.html http://processingjs.org/learning/basic/

  • OpenLayers 3.x - Store Locator

    Concept for a Store Locator using OpenLayers 3.x + OpenStreetMaps + GeoNames' nearbyPlaceNames API for reverse geocoding Lat/Lon to a location. The same map could also be used to locate winners (if so desired).