Skip to content

Instantly share code, notes, and snippets.

@javierarce
Created July 18, 2011 21:44
Show Gist options
  • Save javierarce/1090744 to your computer and use it in GitHub Desktop.
Save javierarce/1090744 to your computer and use it in GitHub Desktop.
Color Picker bookmarklet for Dribbble.com
javascript: void((function() {
var pickerTag = document.getElementById('colorPicker');
if (pickerTag != null) {
document.body.removeChild(pickerTag);
}
var li = document.getElementsByClassName('color');
if (li.length > 0) {
var colors = [];
var title = document.title.replace(/Dribbble - /g, '');
for (var i = 0; i < li.length; i++) {
var c = li[i].getElementsByTagName('a')[0].getAttribute('title');
c && colors.push('<li><div class="color" style="background:' + c + '"></div> ' + c + '</li>');
}
var picker = document.createElement("div");
picker.id = "colorPicker";
picker.innerHTML = '<a href="#" class="close" onclick="var d=document.getElementById(\'colorPicker\'); document.body.removeChild(d);">&times;</a><h2 class="section">Colors for: ' + title + '</h2><ul id="colors">' + colors.join(" ") + '</ul>';
document.body.appendChild(picker);
var sheet = document.createElement('style');
sheet.innerHTML = "#colorPicker {position:absolute; margin-left:-180px; width:360px; padding:15px 15px 20px 15px;background:#f0f0f0 url('http://dribbble.com/images/tile.gif'); font-size:15px; z-index:1000; left:50%25; top:50px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.2);box-shadow: 1px 1px 1px rgba(0,0,0,.2); color:#555; } #colorPicker li {color:#555; font-size:13px; margin-bottom:7px;} #colorPicker li .color {display:inline-block; width:20px; height:20px; vertical-align:bottom;} #colorPicker a.close {float:right; position:relative; top:-5px; right:-5px;width:1.5em;height:1.5em;padding-left:1px;background-color:#ea4c88;color:#fff;font-size:11px;line-height:14px;text-align:center;-webkit-border-radius: 1em;-moz-border-radius: 1em;border-radius: 1em;}";
document.body.appendChild(sheet);
} else {
alert("Are you in Dribbble.com?");
}
})());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment