Skip to content

Instantly share code, notes, and snippets.

@psyao

psyao/index.html

Created September 17, 2014 10:07
Show Gist options
  • Save psyao/ee476e826ba2085647f0 to your computer and use it in GitHub Desktop.
Save psyao/ee476e826ba2085647f0 to your computer and use it in GitHub Desktop.
Download ZIP
CSS position
Raw
index.html
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>CSS - Positionnement</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="page">
<h1>Palette de couleurs</h1>
<p>Cliquez sur l'image <br/>pour faire apparaître la palette de couleur.</p>
<div id="colorPicker">
<img src="images/w-0.png" alt=""/> Couleur
<div>
<img src="images/couleurs.png" alt=""/>
<img src="images/a-1.png" alt=""/>
<img src="images/b-1.png" alt=""/>
<img src="images/c-1.png" alt=""/>
<img src="images/d-1.png" alt=""/>
<img src="images/e-1.png" alt=""/>
<img src="images/f-1.png" alt=""/>
<img src="images/g-1.png" alt=""/>
<img src="images/h-1.png" alt=""/>
<img src="images/i-1.png" alt=""/>
<img src="images/j-1.png" alt=""/>
<img src="images/k-1.png" alt=""/>
<img src="images/w-1.png" alt=""/>
<img src="images/x-1.png" alt=""/>
<img src="images/y-1.png" alt=""/>
<img src="images/y-2.png" alt=""/>
<img src="images/y-3.png" alt=""/>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="main.js"></script>
</body>
</html>
Raw
main.js
// On document ready
$(function () {
// Variables initialisation and declaration
var $container = $('#colorPicker');
var $image = $container.find('> img');
var $picker = $container.find('> div');
var duration = 500;
var lastColor = $image.attr('src');
// Toggle on button click
$image.click(function (e) {
$picker.fadeToggle(duration);
e.stopPropagation();
});
// Fade out on click out of the button if the clicked element is a children of #colorPicker
// or on keypress (backspace, enter, esc, space, del)
$(document)
.click(function (e) {
if ($picker.is(':visible') && (!$(e.target).is($picker) && !$(e.target.parentNode).is($picker))) {
$picker.fadeOut(duration);
}
})
.keydown(function (e) {
if ($picker.is(':visible')) {
$.each([8, 13, 27, 32, 46], function (key, value) {
if (value === e.keyCode) {
$picker.fadeOut(duration);
return false;
}
});
}
});
// Change color on mouse hover and click
$picker.find('img:not(:first)')
.mouseenter(function () {
$image.attr('src', $(this).attr('src'));
})
.mouseleave(function () {
$image.attr('src', lastColor);
})
.click(function () {
lastColor = $image.attr('src');
$image.attr('src', $(this).attr('src'));
});
});
Raw
style.css
body {
font-size: 10px;
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
div#page {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 1px 1px 6px #aaa;
margin: 10px auto;
padding: 50px;
text-align: left;
width: 300px;
}
/*************************************************************
* Color picker
************************************************************/
#colorPicker {
position: relative;
}
/* Picker activating image */
#colorPicker > img {
cursor: pointer;
vertical-align: middle;
}
/* Div containing all color picking images
* TODO: an unordered list will be more semantically correct
*/
#colorPicker > div {
background-color: white;
box-shadow: 0 0 8px 2px #aaa;
display: none;
position: absolute;
left: 20px;
padding: 1px;
top: 20px;
width: 88px;
}
/* Color picking images */
#colorPicker > div img {
float: left;
height: 20px;
margin: 1px;
width: 20px;
}
/* Textual image placement*/
#colorPicker > div img:first-child {
float: right;
height: 86px;
}
/* Color picking images (minus textual one) hover effect */
#colorPicker > div img:not(:first-child):hover {
cursor: pointer;
opacity: .6;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment