Skip to content

Instantly share code, notes, and snippets.

View PopoverStickOnHover.jsx
/*
* Usage:
* <PopoverStickOnHover
* component={<div>Holy guacamole! I'm Sticky.</div>}
* placement="top"
* onMouseEnter={() => { }}
* delay={200}
* >
* <div>Show the sticky tooltip</div>
* </PopoverStickOnHover>
@lou
lou / base_uploader.rb
Last active Mar 9, 2021
Rails - Carrierwave validation of image size
View base_uploader.rb
class BaseUploader < CarrierWave::Uploader::Base
attr_reader :width, :height
before :cache, :capture_size
...
# for image size validation
# fetching dimensions in uploader, validating it in model
def capture_size(file)
if version_name.blank? # Only do this once, to the original version
@lou
lou / 0_iframe.tsx
Last active Apr 17, 2020
Storybook Iframe height
View 0_iframe.tsx
// App side
import React, { useEffect, useRef, SyntheticEvent } from "react"
type IframePropsType = {
src: string
}
export default ({ src }: IframePropsType) => {
const el = useRef<HTMLIFrameElement>(null)
@lou
lou / gmap-fullscreen.js
Created Jan 2, 2012
Google map Fullscreen with jQuery
View gmap-fullscreen.js
$(function() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {});
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var googleMapWidth = $("#map_canvas").css('width');
var googleMapHeight = $("#map_canvas").css('height');
map.setCenter(newyork);
$('#enter-full-screen').click(function(){
@lou
lou / colorbox.css
Last active Sep 28, 2017
Colorbox + Fontawesome
View colorbox.css
/*
Colorbox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
@lou
lou / multiselect-methods.js
Created Apr 23, 2012
multiselect public methods
View multiselect-methods.js
// You must init the multiple select with $('#your-select').multiSelect() before calling one of the following methods
$('#your-select').multiSelect('select', 'value'); // Select the item with the value given in parameter
$('#your-select').multiSelect('deselect', 'value'); // Deselect the item with the value given in parameter
$('#your-select').multiSelect('select_all', true); // Select all elements. If parameter visible set to true, it will select only visible items. Otherwise it will also select hidden items
$('#your-select').multiSelect('deselect_all'); // Deselect all items previously selected
$('#your-select').multiSelect('refresh'); // Re-in the multiselect
@lou
lou / multiselect-methods.js
Created Apr 22, 2012
multiselect public methods
View multiselect-methods.js
// You must init the multiple select with $('#your-select').multiSelect() before calling one of the following methods
$('#your-select').multiSelect('select', 'value'); // Select the item with the value given in parameter
$('#your-select').multiSelect('deselect', 'value'); // Deselect the item with the value given in parameter
$('#your-select').multiSelect('select_all', true); // Select all elements. If parameter visible set to true, it will select only visible items. Otherwise it will also select hidden items
$('#your-select').multiSelect('deselect_all'); // Deselect all items previously selected
$('#your-select').multiSelect('refresh'); // Refresh current multiselect
@lou
lou / multiselect-methods.js
Created Apr 22, 2012
multiselect public methods
View multiselect-methods.js
// You must init the multiple select with $('#your-select').multiSelect() before calling one of the following methods
$('#your-select').multiSelect('select', 'value'); // Select the item with the value given in parameter
$('#your-select').multiSelect('deselect', 'value'); // Deselect the item with the value given in parameter
$('#your-select').multiSelect('select_all', true); // Select all elements. If parameter visible set to true, it will select only visible items. Otherwise it will also select hidden items
$('#your-select').multiSelect('deselect_all'); // Deselect all items previously selected
$('#your-select').multiSelect('refresh'); // Refresh current multiselect. It will re-init the multiselect based on the <select> element (useful for when select is update through Ajax)
@lou
lou / multiselect-callbacks.js
Created Apr 22, 2012
multiselect callbacks
View multiselect-callbacks.js
// You must init the multiple select with $('#my-select').multiSelect() before calling one of the following methods
$('#countries').multiSelect('select', 'value'); // Select the item with the value given in parameter
$('#countries').multiSelect('deselect', 'value'); // Deselect the item with the value given in parameter
$('#countries').multiSelect('select_all', true); // Select all elements. If parameter visible set to true, it will select only visible items. Otherwise it will also select hidden items.
$('#countries').multiSelect('deselect_all'); // Deselect all items previously selected
View multiselect-usage.js
$('#countries').multiSelect({
afterSelect: function(value, text){}, // Function to call after one item is selected
afterDeselect: function(value, text){}, // Function to call after one item is deselected
selectableHeader: null, // Text or HTML to display on the selectable container
selectedHeader: null, // Text or HTML to display on the selected container
disabledClass: 'disabled' // CSS class for disabled items
});