| <!-- Umbraco hands us the XML document here --> | |
| <xsl:param name="currentPage" /> | |
| <xsl:template match="/"> | |
| <!-- This is just to get the right context document --> | |
| <xsl:for-each select="$currentPage"> | |
| <!-- Supplying a white-space separated string to `id()` will work! --> | |
| <xsl:apply-templates select="id(translate(propertyName, ',', ' '))" /> | |
| </xsl:for-each> | |
| </xsl:template> |
| //http://stackoverflow.com/questions/13210663/how-to-order-knockout-bindings | |
| ko.bindingHandlers.chosen = { | |
| init: function(element, valueAccessor, allBindingsAccessor, viewModel) { | |
| var allBindings = allBindingsAccessor(); | |
| var options = {default: 'Select one...'}; | |
| $.extend(options, allBindings.chosen) | |
| $(element).attr('data-placeholder', options.default); |
The pursuit of a "logic-less templating system"... or couldn't we just use plain-old HTML?
| (function(win,doc) { | |
| if (doc.querySelectorAll) { | |
| var inputs = doc.querySelectorAll('input[list]'), | |
| total = inputs.length; | |
| for (var i=0; i<total; i++) { | |
| var input = inputs[i], | |
| id = input.getAttribute('list'), | |
| list = doc.getElementById(id), | |
| options = list.getElementsByTagName('option'), | |
| amount = options.length, |
I have always struggled with getting all the various share buttons from Facebook, Twitter, Google Plus, Pinterest, etc to align correctly and to not look like a tacky explosion of buttons. Seeing a number of sites rolling their own share buttons with counts, for example The Next Web I decided to look into the various APIs on how to simply return the share count.
If you want to roll up all of these into a single jQuery plugin check out Sharrre
Many of these API calls and methods are undocumented, so anticipate that they will change in the future. Also, if you are planning on rolling these out across a site I would recommend creating a simple endpoint that periodically caches results from all of the APIs so that you are not overloading the services will requests.
| <!DOCTYPE html> | |
| <!--[if IE 8]> <html lang="sv-SE" class="no-js ie8"> <![endif]--> | |
| <!--[if gt IE 8]><!--> <html lang="sv-SE" class="no-js"> <!--<![endif]--> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Breakpoint detection test</title> | |
| <style type="text/css" media="screen"> | |
| @media screen and (min-width: 320px) { | |
| #page:after { | |
| content: 'smallest'; /* represent the current width-bracket */ |
| /** | |
| * @author Ethan Gardner | |
| * @see: http://www.ethangardner.com/articles/drawing-with-raphael-js-plus-a-bonus-for-guitar-players/ | |
| */ | |
| var paper = new Raphael(document.id("fretboard"), 1300, 300); | |
| /** | |
| * Set up a GTR object to be used for namespacing | |
| * @see http://www.ethangardner.com/articles/javascript-namespace-strategy-for-large-applications/ |
| var cat = {}; | |
| /** | |
| * cat.NewsBox | |
| * Retrieves news from Google | |
| */ | |
| cat.NewsBox = (function(){ | |
| function NewsBox(searchTerm, injectFn) { | |
| this.searchTerm = searchTerm; |
| ;(function(Modernizr, window) { | |
| Modernizr.addTest('positionfixed', function () { | |
| var test = document.createElement('div'), | |
| control = test.cloneNode(false), | |
| fake = false, | |
| root = document.body || (function () { | |
| fake = true; | |
| return document.documentElement.appendChild(document.createElement('body')); | |
| }()); |
| <!doctype html> | |
| <!-- | |
| WARNING! | |
| You probably shouldn't use this technique since images never show up | |
| if the script isn't loaded for one reason or another. Some reasons: | |
| - The content is viewed using a RSS reader | |
| - The content is viewed with a read-it-later service | |
| - The user has a flaky connection (hotel wifi, Dutch train, etc) | |
| --> |