Skip to content

Instantly share code, notes, and snippets.

@bkardell

bkardell/simple-example-for-chris.html

Last active December 19, 2015 03:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bkardell/5891728 to your computer and use it in GitHub Desktop.
Save bkardell/5891728 to your computer and use it in GitHub Desktop.
Download ZIP
A simple example for Chris Coyier.. I think this is pretty straightfordward - it is the equivalent of a jquery selector plugin example by james padosley (below) /* from http://james.padolsey.com/javascript/extending-jquerys-selector-capabilities/ */ $.extend($.expr[':'],{ external: function(a,i,m) { if(!a.href) {return false;} return a.hostname …
Raw
simple-example-for-chris.html
<!DOCTYPE html>
<html>
<head>
<script src="//hitchjs.com/dist/hitch-0.6.3.js"></script>
<script>
/*
You can do this manually via imperative API before CSS, but generally you would
use @-hitch-requires in your CSS to keep a declarative link between the
selector implementations and the CSS
The base property allows us to narrow the sorts of things this can
be triggered on (perf improvement) but it cannot contain tags
*/
Hitch.add([{
type: 'selector',
name: '-links-external',
base: '[href]',
filter: function (match,argsString,o) {
if(!match.hostname) {return false;}
return match.hostname !== window.location.hostname;
}
}]);
</script>
<style data-hitch-interpret>
a:-links-external() {
background-color: yellow;
}
</style>
</head>
<body>
<p>
These should be unstyled because they are not external
<a href="/">/</a>
<a href="/index.html">/index.html</a>
<a href="/sale.html">/sale.html</a>
<a href="foo/bar.html">foo/bar.html</a>
<a href="#test">#test</a>
</p>
<p>
These should be yellow because they are external
<a href="http://google.com">http://google.com/</a>
<a href="http://hitchjs.com">http://hitchjs.com</a>
<a href="http://codepen.io">http://codepen.io</a>
<a href="http://css-tricks.com">http://css-tricks.com</a>
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment