Skip to content

Commit

Permalink
Fixtures
Browse files Browse the repository at this point in the history
  • Loading branch information
@molokoloco
molokoloco committed Jul 1, 2013
1 parent 31d06d3 commit e43c6bd
Show file tree
Hide file tree
Showing 16 changed files with 234 additions and 213 deletions.
42 changes: 21 additions & 21 deletions jquery.plugins/jquery.analogueClock.mlklc.js
View file
Expand Up @@ -2,30 +2,30 @@
///// Code mixing by Molokoloco ..... 2011 ......... [EVER IN PROGRESS (it's not done yet)] ////////////
//////////////////////////////////////////////////////////////////////////////////////////////////// */
/*
// Pixel polished jQuery & CSS3 analogue clock
// by @molokoloco 08/10/2011
// Infos : http://www.b2bweb.fr/molokoloco/pixels-polished-jquery-css3-analogue-clock/
// jsFiddle : http://jsfiddle.net/molokoloco/ajcRz/
// Pixel polished jQuery & CSS3 analogue clock
// by @molokoloco 08/10/2011
// Infos : http://www.b2bweb.fr/molokoloco/pixels-polished-jquery-css3-analogue-clock/
// jsFiddle : http://jsfiddle.net/molokoloco/ajcRz/
// HTML
<link href="http://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="jquery.analogueClock.css">
// HTML
<link href="http://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="jquery.analogueClock.css">
<div id="clock">
<!--// PLUGIN BUILD THIS
<div class="digit" style="left:56px;top:0px;"><span>12</span></div>
<div class="digit" style="left:84px;top:7.50px;">1</div>
...12 digits...
<div class="sec" style="-webkit-transform:rotate(246deg);"><div class="clockwise"></div></div>
<div class="min" style="-webkit-transform:rotate(270deg);"><div class="clockwise"></div></div>
<div class="hour" style="-webkit-transform:rotate(412.5deg);"><div class="clockwise"></div></div>
<div class="time">13:45:41</div>
<div class="innerCenter"></div>
//-->
</div>
<div id="clock">
<!--// PLUGIN BUILD THIS
<div class="digit" style="left:56px;top:0px;"><span>12</span></div>
<div class="digit" style="left:84px;top:7.50px;">1</div>
...12 digits...
<div class="sec" style="-webkit-transform:rotate(246deg);"><div class="clockwise"></div></div>
<div class="min" style="-webkit-transform:rotate(270deg);"><div class="clockwise"></div></div>
<div class="hour" style="-webkit-transform:rotate(412.5deg);"><div class="clockwise"></div></div>
<div class="time">13:45:41</div>
<div class="innerCenter"></div>
//-->
</div>
// USAGE ;
$('div#clock').analogueClock({digitBoxWidth:18, withDigitalTime:false});
// USAGE ;
$('div#clock').analogueClock({digitBoxWidth:18, withDigitalTime:false});
*/


Expand Down
44 changes: 22 additions & 22 deletions jquery.plugins/jquery.analogueClock2.css
View file
Expand Up @@ -2,7 +2,7 @@
// Pixel polished jQuery & CSS3 analogue clock
// by @molokoloco 08/10/2011
//> Colors : easy to change, Sizes and positions : more tricky
//> Colors : easy to change, Sizes and positions : more tricky
// Colors are based on a white semi-transparent theme :
// replace "255,255,255" by "0,0,0" to blackify... or wathever you want
// Mostly elements that need to be centered... are centered in JS,
Expand All @@ -24,12 +24,12 @@ div#clock {
border-radius:50%; /* (---MOD---) All round ? */
background:grey;
background:rgba(0,0,0,0.1);
transition:all 250ms ease-in-out; /* for mouseover effect */
transition:all 250ms ease-in-out; /* for mouseover effect */
-webkit-transition:all 250ms ease-in-out;
-moz-transition:all 250ms ease-in-out;
-ms-transition:all 250ms ease-in-out;
-o-transition:all 250ms ease-in-out;
box-shadow:0 2px 6px rgba(0,0,0,0.3);
box-shadow:0 2px 6px rgba(0,0,0,0.3);
-o-box-shadow:0 2px 6px rgba(0,0,0,0.3);
-webkit-box-shadow:0 2px 6px rgba(0,0,0,0.3);
-moz-box-shadow:0 2px 6px rgba(0,0,0,0.3);
Expand Down Expand Up @@ -95,24 +95,24 @@ div.sec,div.min,div.hour {
width:4px; /* (---MOD---) */
z-index:12;
}
div.sec div.clockwise { top:18px; } /* (---MOD---) dist from clock border == clockwise height */
div.min div.clockwise { top:26px; } /* (---MOD---) */
div.hour div.clockwise { top:32px; } /* (---MOD---) */
div.clockwise {
position:absolute;
left:0; right:0; /* parents sec,min,hour width */
background:#FFF;
background:rgba(255,255,255,0.4);
border-radius:2px;
box-shadow:0 0 3px rgba(0,0,0,0.25);
-moz-box-shadow:0 0 3px rgba(0,0,0,0.25);
-webkit-box-shadow:0 0 3px rgba(0,0,0,0.25);
-ms-box-shadow:0 0 3px rgba(0,0,0,0.25);
-o-box-shadow:0 0 3px rgba(0,0,0,0.25);
}
div.sec div.clockwise { top:18px; } /* (---MOD---) dist from clock border == clockwise height */
div.min div.clockwise { top:26px; } /* (---MOD---) */
div.hour div.clockwise { top:32px; } /* (---MOD---) */
div.clockwise {
position:absolute;
left:0; right:0; /* parents sec,min,hour width */
background:#FFF;
background:rgba(255,255,255,0.4);
border-radius:2px;
box-shadow:0 0 3px rgba(0,0,0,0.25);
-moz-box-shadow:0 0 3px rgba(0,0,0,0.25);
-webkit-box-shadow:0 0 3px rgba(0,0,0,0.25);
-ms-box-shadow:0 0 3px rgba(0,0,0,0.25);
-o-box-shadow:0 0 3px rgba(0,0,0,0.25);
}
div.digit, div.time, div.date {
text-rendering:optimizeLegibility;
font-smoothing:always;
Expand Down Expand Up @@ -159,7 +159,7 @@ div.time, div.date {
color:#000;
color:rgba(0,0,0,0.3);
}
div.date { top:70px; } /* (---MOD---) */
div.date { top:70px; } /* (---MOD---) */

/* ------- Fancy CSS3 background example ------ */
/* http://leaverou.me/css3patterns/#cicada-stripes */
Expand Down
58 changes: 29 additions & 29 deletions jquery.plugins/jquery.analogueClock2.html
View file
Expand Up @@ -2,36 +2,36 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="fr"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>jQuery Analogue Clock</title>
<meta name="description" content="" />
<meta name="viewport" content="width=720" />
<link rel="stylesheet" type="text/css" href="jquery.analogueClock2.css">
<link href="http://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="fr"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>jQuery Analogue Clock</title>
<meta name="description" content="" />
<meta name="viewport" content="width=720" />
<link rel="stylesheet" type="text/css" href="jquery.analogueClock2.css">
<link href="http://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" type="text/css">
</head>
<body>
<div id="clock">
<!--// /* PLUGIN BUILD THIS */
<div class="digit" style="left:56px;top:0px;"><span>12</span></div>
<div class="digit" style="left:84px;top:7.50px;">1</div>
/* ...12 digits... */
<div class="sec" style="-webkit-transform:rotate(246deg);"><div class="clockwise"></div></div>
<div class="min" style="-webkit-transform:rotate(270deg);"><div class="clockwise"></div></div>
<div class="hour" style="-webkit-transform:rotate(412.5deg);"><div class="clockwise"></div></div>
<div class="time">13:45:41</div>
<div class="innerCenter"></div>
//-->
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="./jquery.analogueClock2.mlklc.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('div#clock').analogueClock({digitBoxWidth:18, withDigitalTime:false});
});
</script>
<div id="clock">
<!--// /* PLUGIN BUILD THIS */
<div class="digit" style="left:56px;top:0px;"><span>12</span></div>
<div class="digit" style="left:84px;top:7.50px;">1</div>
/* ...12 digits... */
<div class="sec" style="-webkit-transform:rotate(246deg);"><div class="clockwise"></div></div>
<div class="min" style="-webkit-transform:rotate(270deg);"><div class="clockwise"></div></div>
<div class="hour" style="-webkit-transform:rotate(412.5deg);"><div class="clockwise"></div></div>
<div class="time">13:45:41</div>
<div class="innerCenter"></div>
//-->
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="./jquery.analogueClock2.mlklc.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('div#clock').analogueClock({digitBoxWidth:18, withDigitalTime:false});
});
</script>
</body>
</html>
4 changes: 2 additions & 2 deletions jquery.plugins/jquery.analogueClock2.mlklc.js
View file
Expand Up @@ -10,7 +10,7 @@
script src="http://code.jquery.com/jquery-latest.js"
<div id="clock">
<div class="clockGlass"></div>
<div class="clockGlass"></div>
<!--// PLUGIN BUILD THIS // ---
<div class="digit" style="left:56px;top:0px;"><span>12</span></div>
<div class="digit" style="left:84px;top:7.50px;">1</div>
Expand All @@ -21,7 +21,7 @@
<div class="min" style="transform:rotate(270deg);"><div class="clockwise"></div></div>
<div class="hour" style="transform:rotate(412.5deg);"><div class="clockwise"></div></div>
<div class="time">13:45:41</div>
<div class="date">Tue Oct 11</div>
<div class="date">Tue Oct 11</div>
<div class="innerCenter"></div>
--- // END PLUGIN //-->
</div>
Expand Down
44 changes: 22 additions & 22 deletions jquery.plugins/jquery.browsercssprefix.mlklc.js
View file
Expand Up @@ -2,35 +2,35 @@
// JS HTML5 cssPrefix By molokoloco - http://www.b2bweb.fr - 2011 //
///////////////////////////////////////////////////////////////////////
/*
// A function to get browser specific CSS style name properties...
// eg. "MozBorderRadius" or "WebkitTransform" ...
// Playground here : http://jsfiddle.net/molokoloco/f6Z3D/
// Source here : https://github.com/molokoloco/FRAMEWORK/blob/master/jquery.plugins/jquery.browsercssprefix.mlklc.js
// Usages examples
var cssTransform = cssPrefix('Transform'); // "MozTransform" or "WebkitTransform"
if (cssTransform ) {
var cssProp = {};
cssProp['border'] = '1px solid rgba(0, 0, 0, .5)';
cssProp[cssTransform] = 'rotate(20deg)';
cssProp[cssPrefix('borderRadius')] = '5px'; // Keep the camelCaze (jQuery like)
cssProp[cssPrefix('boxShadow')] = '2px 2px 2px grey';
$('div#myDiv').css(cssProp);
// console.log(cssProp);
}
// Want more code ? That here...
// https://github.com/molokoloco/FRAMEWORK/
// A function to get browser specific CSS style name properties...
// eg. "MozBorderRadius" or "WebkitTransform" ...
// Playground here : http://jsfiddle.net/molokoloco/f6Z3D/
// Source here : https://github.com/molokoloco/FRAMEWORK/blob/master/jquery.plugins/jquery.browsercssprefix.mlklc.js
// Usages examples
var cssTransform = cssPrefix('Transform'); // "MozTransform" or "WebkitTransform"
if (cssTransform ) {
var cssProp = {};
cssProp['border'] = '1px solid rgba(0, 0, 0, .5)';
cssProp[cssTransform] = 'rotate(20deg)';
cssProp[cssPrefix('borderRadius')] = '5px'; // Keep the camelCaze (jQuery like)
cssProp[cssPrefix('boxShadow')] = '2px 2px 2px grey';
$('div#myDiv').css(cssProp);
// console.log(cssProp);
}
// Want more code ? That here...
// https://github.com/molokoloco/FRAMEWORK/
*/

var cssPrefixString = {};
var cssPrefix = function(propertie) {
if (cssPrefixString[propertie]) return cssPrefixString[propertie];
var e = document.createElement('div');
if (e.style[propertie]) { // HTML5 release ? ;)
cssPrefixString[propertie] = propertie;
return cssPrefixString[propertie];
cssPrefixString[propertie] = propertie;
return cssPrefixString[propertie];
}
var prefixes = ['Moz', 'Webkit', 'O', 'ms', 'Khtml']; // Various old supports...
for (var i in prefixes) {
Expand Down
50 changes: 25 additions & 25 deletions jquery.plugins/jquery.center.mlklc.js
View file
Expand Up @@ -2,13 +2,13 @@
///// Code mixing by Molokoloco ..... 2011 ......... [EVER IN PROGRESS (it's not done yet)] ////////////
//////////////////////////////////////////////////////////////////////////////////////////////////// */
/*
// Center element into an other
// Source here : http://plugins.jquery.com/project/autocenter
// Center element into an other
// Source here : http://plugins.jquery.com/project/autocenter
$('#mainDiv').center();
$(window).bind('resize', function() {
$('#mainDiv').center({transition:300});
});
$('#mainDiv').center();
$(window).bind('resize', function() {
$('#mainDiv').center({transition:300});
});
*/

(function($){
Expand Down Expand Up @@ -46,23 +46,23 @@
})(jQuery);

/*
// SHORT VERSION
(function($){
$.fn.extend({
center: function () {
return this.each(function() {
var top = ($(window).height() - $(this).outerHeight()) / 2;
var left = ($(window).width() - $(this).outerWidth()) / 2;
$(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
});
}
});
})(jQuery);
$('#myDiv').center();
// VERY SHORT VERSION
$('#myDiv').css({top:'50%',left:'50%',margin:'-'+($('#myDiv').height() / 2)+'px 0 0 -'+($('#myDiv').width() / 2)+'px'});
// SHORT VERSION
(function($){
$.fn.extend({
center: function () {
return this.each(function() {
var top = ($(window).height() - $(this).outerHeight()) / 2;
var left = ($(window).width() - $(this).outerWidth()) / 2;
$(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
});
}
});
})(jQuery);
$('#myDiv').center();
// VERY SHORT VERSION
$('#myDiv').css({top:'50%',left:'50%',margin:'-'+($('#myDiv').height() / 2)+'px 0 0 -'+($('#myDiv').width() / 2)+'px'});
*/
11 changes: 11 additions & 0 deletions jquery.plugins/jquery.colonizr.css
View file
Expand Up @@ -50,4 +50,15 @@
.multiplecolumns p {
margin:0 10px;
text-align: justify;

/* http://stackoverflow.com/questions/8506783/css3-columns-force-non-breaking-splitting-element */
display:inline-block;
/* OR */
/*
-webkit-column-break-inside:avoid;
-moz-column-break-inside:avoid;
-o-column-break-inside:avoid;
-ms-column-break-inside:avoid;
column-break-inside:avoid;
*/
}

0 comments on commit e43c6bd

Please sign in to comment.