Skip to content

Instantly share code, notes, and snippets.

Avatar

Etienne Baudry WebMaestroFr

View GitHub Profile
@WebMaestroFr
WebMaestroFr / bootstrap-peekaboo-labels.js
Last active Aug 29, 2015
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.
View bootstrap-peekaboo-labels.js
(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 Aug 29, 2015
Arrange grid elements into tiles. Works great if most of your columns match in width, and if you keep your wider ones on top...
View grid-to-tiles.js
(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 Jun 18, 2014
Apply a "floating" effect on a sidebar
View sticky-sidebar.js
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 Sep 24, 2014
Display date difference from timestamp, "that much time ago" like.
View time-ago.js
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 Dec 10, 2014
Create a blurry effect.
View blur-background.css
*[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 / showdown-hideup.js
Last active Apr 25, 2016
jQuery Plugin to fade in and out with a vertical slide
View showdown-hideup.js
(function ($) {
'use strict';
var getUnqueuedOpts = function (opts) {
return {
queue: false,
duration: opts.duration,
easing: opts.easing
};
};
$.fn.showDown = function (opts) {
@WebMaestroFr
WebMaestroFr / websocket-event-client.js
Last active Mar 10, 2017
Turn WebSocket messages into document Events.
View websocket-event-client.js
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 Jan 10, 2018
JavaScript Client for Public API
View api.js
export function paramsString(args) {
return Object
.keys(args)
.map(k => `${encodeURIComponent(k)}=${encodeURIComponent(args[k])}`)
.join('&');
}
// localStorage.clear();
export class APIRequest {
@WebMaestroFr
WebMaestroFr / url.js
Last active Feb 23, 2018
URL Parser and Media Promise
View url.js
export function encodeURLParams(params) {
return Object
.entries(params)
.sort((a, b) => a[0] - b[0])
.reduce((search, entry) => [
...search,
entry
.map(encodeURIComponent)
.join('=')
], [])
View Terminal.css
@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 {
You can’t perform that action at this time.