Skip to content

Instantly share code, notes, and snippets.

View WebMaestroFr's full-sized avatar

Etienne Baudry WebMaestroFr

27 followers · 13 following
View GitHub Profile
@WebMaestroFr
WebMaestroFr / showdown-hideup.js
Last active April 25, 2016 10:35
jQuery Plugin to fade in and out with a vertical slide
(function ($) {
'use strict';
var getUnqueuedOpts = function (opts) {
return {
queue: false,
duration: opts.duration,
easing: opts.easing
};
};
$.fn.showDown = function (opts) {
@WebMaestroFr
WebMaestroFr / bootstrap-peekaboo-labels.js
Last active August 29, 2015 13:57
Hide labels behind inputs on Bootstrap's horizontal forms, until the user starts to fill them up and it's then sliding on. Preferably for inputs with placeholders.
(function ($) {
'use strict';
$.fn.bsPeekabooLabel = function () {
var input = $(this),
control = input.closest('[class*="col-"]'),
label = control.siblings('.control-label'),
show = false,
place = function (d) {
var m;
if ($(control).css('float') === 'left') {
@WebMaestroFr
WebMaestroFr / grid-to-tiles.js
Last active August 29, 2015 13:57
Arrange grid elements into tiles. Works great if most of your columns match in width, and if you keep your wider ones on top...
(function ($) {
'use strict';
$.fn.wmTiles = function () {
var container = $(this),
tiles = container.children(),
arrange = function () {
var places = [{
t: 0,
l: 0,
w: container.width()
@WebMaestroFr
WebMaestroFr / sticky-sidebar.js
Created June 18, 2014 10:09
Apply a "floating" effect on a sidebar
jQuery(document).ready(function ($) {
'use strict';
var content = $('#content'),
sidebar = $('#sidebar', content),
position = 0;
content.css({
position: 'relative',
minHeight: sidebar.height()
});
sidebar.css({
@WebMaestroFr
WebMaestroFr / time-ago.js
Created September 24, 2014 15:18
Display date difference from timestamp, "that much time ago" like.
function timeAgo(time) {
'use strict';
var second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24,
month = day * 30,
year = day * 365,
elapsed = Date.now() - time,
getString = function (value, unit) {
@WebMaestroFr
WebMaestroFr / blur-background.css
Created December 10, 2014 18:05
Create a blurry effect.
*[data-blur-background] {
position: relative;
overflow: hidden;
z-index: 1;
}
*[data-blur-background]::before, *[data-blur-background]::after {
position: absolute;
display: block;
z-index: -1;
content: ' ';
@WebMaestroFr
WebMaestroFr / websocket-event-client.js
Last active March 10, 2017 00:12
Turn WebSocket messages into document Events.
var app = {
url: "ws://" + document.location.hostname
};
app.socket = new WebSocket(app.url + ":8082");
app
.socket
.addEventListener('message', function(e) {
var message = JSON.parse(e.data);
var event = new CustomEvent(message.type);
@WebMaestroFr
WebMaestroFr / api.js
Last active January 10, 2018 12:41
JavaScript Client for Public API
export function paramsString(args) {
return Object
.keys(args)
.map(k => `${encodeURIComponent(k)}=${encodeURIComponent(args[k])}`)
.join('&');
}
// localStorage.clear();
export class APIRequest {
@WebMaestroFr
WebMaestroFr / Terminal.css
Last active September 10, 2021 15:38
Terminal Window React Component with Keystroke Sounds
@import url('https://cdn.rawgit.com/tonsky/FiraCode/1.204/distr/fira_code.css');
body {
background-color: #212121;
font-family: HelveticaNeue, 'Helvetica Neue', 'Lucida Grande', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.App {
@WebMaestroFr
WebMaestroFr / Group.css
Last active January 16, 2022 08:22
Slide Up and Down with React Transition Group
.Group-item,
.Group-item.ui,
.Group-item.ui:first-child {
display: block;
margin-top: 1em;
}
.Group-item-enter.Group-item-enter-active {
transition: opacity 300ms ease-in, margin 300ms ease-out;
}