Skip to content

Instantly share code, notes, and snippets.

Avatar
3 cups required

@greweb gre

3 cups required
View GitHub Profile
View index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style>
body {
color: #333;
background: #EEE;
margin: 30px;
}
@gre
gre / index.html
Created Nov 15, 2010
HTML Slider with CSS Transitions
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Transition demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
/* slide transition part */
@gre
gre / wp-polls-popup.js
Created Jan 23, 2011
Wordpress - used with WP Polls plugin - Display a popup for people haven't vote for the current polls (you must have polls in widget)
View wp-polls-popup.js
/// AUTHOR : Gaetan Renaudeau, http://gaetanrenaudeau.fr/, pro at grenlibre (DoT) fr
(function($){
if(!jQuery) return; // we need jQuery
var pollWidget = $('.widget_polls-widget')
if(pollWidget.size() && $('input:visible', pollWidget).size()) {
var clone = $(pollWidget).clone().removeClass('widget_polls-widget');
$('a', clone).remove();
$('input', clone).click(function(){
$('.widget_polls-widget input[value='+$(this).val()+']').attr('checked', 'checked');
@gre
gre / canvas_exemple.html
Created Mar 13, 2011
Canvas exemple used in a video tutorial
View canvas_exemple.html
<html>
<head>
<style>
body {
background: #ddd;
}
canvas {
background: #fff;
}
</style>
@gre
gre / grayscale.js
Created Mar 25, 2011
Proof Of Concept : JS code to grayscale any web page
View grayscale.js
(function(){
var svg = document.createElement('div'), body = document.getElementsByTagName('body')[0];
if(/(msie) ([\w.]+)/.exec(navigator.userAgent)) {
body.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';
return;
}
svg.innerHTML = '<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"><clipPath id="c1" clipPathUnits="objectBoundingBox"><rect x="0" y="0" rx="0.05" ry="0.05" width="1" height="1"/></clipPath><filter id="desaturate"><feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/></filter></svg>';
body.appendChild(svg);
body.style.filter = 'url(#desaturate)';
}())
@gre
gre / concept.txt
Created May 2, 2011
a game score web service
View concept.txt
- The web service provides a highscore system (keep <N> top scores, where N depending of the account plan)
- It can be easily embedded in a web page with widgets (JS). There is a clean API to send scores.
- Different ways to send scores : Usage of social network (Twitter), direct send with REST
- One account have N different scores where N depending of the account plan
- Some simple analytics
Ways to send scores :
- Connecting with social network like Twitter : exemple: "http://grenlibre.fr/same - My highscores on Same Game: easy: 12, normal: 23, hard: 45. @samegamegravity $a45c2" :
* a twitter account with an app configured - the WS will retrieve mentions
* We can easily retrieve usernames and avatars
@gre
gre / header.js
Created May 15, 2011
My blog header canvas animation
View header.js
(function(){
if(!document.createElement('canvas').getContext)
return; // canvas is required.
var requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
@gre
gre / Makefile
Created May 27, 2011
Web App Maker - Makefile sample (used by Same Game Gravity - Android version)
View Makefile
# Same Game Gravity - Android full version #
### ~ Web App Builder ~ ###
# a Makefile to compile a web project. #
# designed for web project with different devices #
# (mobile, tablet, desktop) but with common code. #
### by @greweb - http://greweb.fr/ ###
# BUILD_DIR : PATH to Web App Builder /build directory (the directory containing all build tools)
BUILD_DIR = ../build
@gre
gre / mocking.css
Created Jun 5, 2011
some CSS to style a <todo> element used during mocking pages.
View mocking.css
todo {
display: inline-block;
font-style: italic;
padding: 5px 10px;
margin: 10px;
color: #666;
font-size: 0.9em;
border: 2px dashed #ccc;
background: #eee;
}
View game_game.html
<section id="game">
<div class="turnleft"></div>
<div class="turnright"></div>
<div class="gameStatus">
<a class="i18n-back back" href="#!/">Back</a>
<span class="timeline">
<span class="remainingSeconds"><span class="remainingSecondsTime"></span> s</span>
</span>
</div>
<div id="gameContainer">