shodanuk’s gists

shodanuk / Pure CSS buttons

Created October 23, 2010 14:37

Nothing groundbreaking here just attractive, progressively enhanced CSS buttons. TODO: is there a way to get a gradient in Opera? Also the blur looks a bit crap in Opera. Either fix it or remove it (but only for Opera).

	<style type="text/css>
	p {
	margin-bottom:10px
	}

	button {
	border: 1px solid #ccc;
	color: #333;
	cursor: pointer;
	font-size: 12px;

shodanuk / Shodan.UI.SlideyPanel.html

Created February 21, 2011 15:42

Example markup for Shodan.UI.Slidey demo

	<div id="sh-ui-slidey-demo">
	<div class="hd">
	<h3>Click me!</h3>
	</div>
	<div class="content">
	<div class="inner">
	<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	</div>

shodanuk / Shodan.UI.SlideyPanel.js

Created February 21, 2011 15:46

Example Javascript for Shodan.UI.Slidey demo

	$(document).observe("dom:loaded", function(){ // wait for DOM to load
	new Shodan.UI.SlideyPanel('sh-ui-slidey-demo');
	});

shodanuk / Shodan.UI.Accordion.html

Created February 27, 2011 20:35

	<div id='sh-ui-accordion-demo'>
	<ul class="root">
	<li>
	<div class='hd'>
	<h3>Item 1</h3>
	</div>
	<ul class='sub'>
	<li>
	<div class='inner'>Item 1 child 1</div>
	</li>

shodanuk / Shodan.UI.Accordion.js

Created February 27, 2011 20:38

	$(document).observe('dom:loaded', function(){
	new Shodan.UI.Accordion('sh-ui-accordion-demo');
	});

shodanuk / Shodan.UI.Slideshow.html

Created March 6, 2011 22:32

Example HTML markup for the Shodan.UI.Slideshow component

	<div id="slideshow-demo">
	<img src="images/slideshow/Pensive Parakeet.jpg" alt="Slide 1" />
	<img src="images/slideshow/Random-Penguins-random-16779663-1024-768.jpg" alt="Slide 2" />
	<img src="images/slideshow/Random-Wallpapers-random-10799667-1024-768.jpg" alt="Slide 3" />
	<img src="images/slideshow/Random-Wallpapers-random-10799672-1024-768.jpg" alt="Slide 4" />
	</div>

shodanuk / Shodan.UI.Slideshow.js

Created March 6, 2011 22:34

Example Javascript to invoke Shodan.UI.Slideshow

	$(document).observe('dom:loaded', function(){
	new Shodan.UI.Slideshow('slideshow-demo');
	});

shodanuk / countriesbyregion.json

Created December 20, 2011 20:19

JSON object containing countries sorted by rough geographical region (2 digit ISO codes)

	{
	"westEurope": [
	"AD",
	"DE",
	"ES",
	"FR",
	"IT",
	"AT",
	"BE",
	"CH",

shodanuk / transitionCss.js

Created March 18, 2012 10:35

Generate cross browser transitons CSS (includes custom easing functions)

	/**
	* Create cross browser transition CSS
	*
	* @param {Integer} duration Duration in milliseconds.
	* @param {String} easing Easing function. Can be built-in CSS3 function or one of the provided custom functions.
	* @param {String} prop CSS property to apply transition to.
	*/
	function transitionCss(duration, easing, prop) {
	var easingDefs = {
	easeInCubic : 'cubic-bezier(0.550, 0.055, 0.675, 0.190)',

shodanuk / gist:2199360

Created March 25, 2012 19:55

Quick and dirty input placeholder shim using jQuery + Modernizr (Tested in IE7 + 8)

	$('.lt-ie9 input[placeholder], .lt-ie9 textarea[placeholder]').each(function(){
	var $this = $(this),
	placeholder = $this.attr('placeholder');

	$this.addClass('placeholder').val(placeholder);

	$this.focus(function() {
	$this.val('');
	}).blur(function() {
	if ($this.val() === '') {

Terry Morgan shodanuk