Skip to content

Instantly share code, notes, and snippets.

View e-river's full-sized avatar

Minoru Hayakawa e-river

View GitHub Profile
@e-river
e-river / checkinput.js
Last active February 14, 2017 07:14
document.addEventListener("DOMContentLoaded", function(event) {
new ShowButton().load();
});
function ShowButton() {
this.btn = document.querySelectorAll('.class');
this.target = document.querySelectorAll('input[type="checkbox"]');
}
ShowButton.prototype.load = function() {
@e-river
e-river / form_active.js
Last active February 14, 2017 07:10
JavaScript for changing disabled to active button
(function(){
document.addEventListener('DOMContentLoaded', function(event) {
new ActiveForm().onEvent(event.target);
}, false);
})();
function ActiveForm() {
this.submit = document.getElementById('submit');
}
@e-river
e-river / gulp_setup_memo.markdown
Last active August 26, 2016 07:17

Install gulp

sudo npm install -g gulp

Install gulp in the project

sudo npm install --save-dev gulp
@e-river
e-river / _rollover.js
Last active June 8, 2016 05:47
jQuery Rollover for If there are any strings after the extension of image
/*
Usage:
HTML
<img class="js-rollover">
JS
require jQuery
http://jquery.com/download/
@e-river
e-river / _retina-sprite-background.scss
Last active January 4, 2016 18:49
Creating a image of CSS Sprite using compass
// Mixin for Creating a image of CSS Sprite using compass against Retina
// For use:
// .pdf-icon {
// @include retina-sprite-background(pdf);
// }
//
$sprite-map: sprite-map("sprite/*.png", $spacing: 100px);
$sprite-path: sprite-path($sprite-map);
$sprites-img: sprite-url($sprite-map);
@e-river
e-river / _Addingzero.scss
Created January 22, 2014 03:29
[Sass]Adding a 0 if only one digit serial number of the class name
$num: "";
@for $i from 1 through 10 {
@if $i < 10 {
$num: "0#{$i}";
} @else {
$num: "#{$i}";
}
.classname#{$num} {
// CSS code here
}
@e-river
e-river / loader.html
Created January 16, 2014 05:11
Loading Animation for only CSS
<div id="loading-wrapper">
<span id="bounce1" class="loading-bounce"></span>
<span id="bounce2" class="loading-bounce"></span>
<span id="bounce3" class="loading-bounce"></span>
<span id="bounce4" class="loading-bounce"></span>
<span id="bounce5" class="loading-bounce"></span>
<span id="bounce6" class="loading-bounce"></span>
<span id="bounce7" class="loading-bounce"></span>
<span id="bounce8" class="loading-bounce"></span>
@e-river
e-river / Gruntfile.js
Created January 15, 2014 09:39
Gruntfile.js using grunt-contrib-cssmin, grunt-contrib-watch, grunt-contrib-concat, grunt-contrib-clean, grunt-contrib-compass, grunt-contrib-uglify
module.exports = function(grunt) {
var pkg = grunt.file.readJSON('package.json');
grunt.initConfig({
//Concatenate JS files
concat: {
lib: {
src: [
'public_html/dev/lib/jquery.js',
@e-river
e-river / gulpfile.js
Last active January 2, 2016 11:19
gulpfile.js using gulp-ruby-sass, gulp-autoprefixer, gulp.spritesmith, gulp-jade, gulp-less, gulp-minify-css, gulp-concat and gulp-uglify, gulp-watch, gulp-plumber, gulp-clean.
var gulp = require('gulp')
, concat = require('gulp-concat')
, uglify = require('gulp-uglify')
, watch = require('gulp-watch')
, sass = require('gulp-ruby-sass')
, autoprefixer = require('gulp-autoprefixer')
, spritesmith = require("gulp.spritesmith")
, minifyCSS = require('gulp-minify-css')
, plumber = require('gulp-plumber')
, jade = require('gulp-jade')
@e-river
e-river / _flexbox.scss
Last active December 29, 2015 14:59
Mixin of Sass with Compass for Flexbox supported new syntax and older syntax. If you use this Mixin, Compass is necessity.
@mixin display-flex() {
@include display-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
// flex-direction property
// This Argument is same as W3C Flexbox.
// See below: