NicoNoClaste / Codes & Downloads

Codes & Downloads

jQuery Plugins

NicoNoSlider
NicoNoSlider is a very light jQuery slider plugin.
NicoNoReorganize
NicoNoReorganize is a jQuery plugin that reorganize elements in a grid template.
NicoNoZoom
NicoNoZoom is a jQuery plugin that simulates a zoom effect on an image.
imageSwiper
imageSwiper is a jQuery plugin that simulates a swipe effect between two images.
NicoNoScrollbar
NicoNoScrollbar is a jQuery plugin that allow to generate a custom vertical scrollbar.

jQuery / Javascript

NicoNoPaint
With NicoNoPaint you can draw simple 8bits like shapes and export it as an png image.
I will add Paint like tools when I will find time to...
NicoNoKanji
Kanji drill training !

Usefull CSS memo


/* BOX SIZING */
-webkit-box-sizing:border-box;
box-sizing:border-box;


/* TRANSITION */
-webkit-transition:opacity 0.3s ease-out;
transition:opacity 0.3s ease-out;


/* BORDER RADIUS */
-webkit-border-radius:0px;
border-radius:0px;


/* TABLE BORDER COLLAPSE */
border-collapse:collapse;


/* IMAGE RENDERING FOR CHROME */
image-rendering:-webkit-optimize-contrast;

/* INHERIT ON RETINA DISPLAY */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
   image-rendering:inherit;
}


/* FONT SMOOTHING FOR CHROME */
webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;


/* PREVENT TEXT ADJUST FOR LANDSCAPE SMARTPHONES */
text-size-adjust:none;
-webkit-text-size-adjust: none;


/* JAPANESE FONTS LETTER WIDTH */
font-feature-settings : "palt" 1;


/* AUTO COUNTER INCREMENT */
li{
    counter-increment:count-number; 
}
li:after{
    content:counters(count-number,"");
}


/* RESPONSIVE YOUTUBE EMBED VIDEO */
.youtubeBox{
    position:relative;
    height:0;
    overflow:hidden;
    padding-bottom:56.3%;
    padding-top:0;
}
.youtubeBox video,
.youtubeBox iframe,
.youtubeBox object,
.youtubeBox embed{
    border:none;
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}


/* CROSS BROWSER ANIMATION */
.animation{
    animation:1s steps(1) 0 normal forwards 1 keyframename;
    -webkit-animation-name: keyframename;
    -webkit-animation-duration:1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: steps(1);
    -webkit-animation-delay: 0;
    -webkit-animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes keyframename{
    0%{width:130px}
    100%{width:130px}
}
@keyframes keyframename{
    0%{width:130px}
    100%{width:130px}
}

/* PAUSE ANIMATION */
-webkit-animation-play-state: paused;
animation-play-state: paused;

Usefull javascript / jQuery memo


// CHECK FOR MOBILE DEVICE
var isMobile = function(){return /(iphone|ipod|ipad|android|blackberry|windows ce|palm|symbian)/i.test(navigator.userAgent);};


// SET / STOP TIMEOUT AND INTERVAL
var timeout = setTimeout(function(){
    /* DO SOMETHING */
},200);
clearTimeout(timeout);

var interval = setInterval(function(){
    /* DO SOMETHING */ 
},200);
clearInterval(interval);


// VARS MANIPULATIONS
var.indexOf('string');
var.substring(start,stop);
var.split('string');
var.replace('search', 'replace');


// GET URL
var get = window.location.href;


// SCROLL AND ELEMENT POSITION
var scrollValue = $(window).scrollTop();
$('html,body').scrollTop(scrollValue);
var elementTop = $('element').offset().top;

GULP


// gulpfile.js

const gulp = require('gulp');
const plugins = require('gulp-load-plugins')();
const src = './src/';
const dist = './dist/';
const repo = '../repo/';

gulp.task('css', function(){
    gulp.src(src + '**/*.scss')
    .pipe(plugins.sass({
        style: 'expanded'
    }))
    .pipe(plugins.autoprefixer({
        browsers: ['last 2 versions']
    }))
    .pipe(plugins.cssbeautify({
        indent: '    '
    }))
    .pipe(gulp.dest(src))
    .pipe(gulp.dest(dist));
    gulp.src([dist + '**/*.css', '!' + dist + '**/*.min.css'])
    .pipe(plugins.csso())
    .pipe(plugins.rename({
        suffix: '.min'
    }))
    .pipe(gulp.dest(dist));
});

gulp.task('js', function(){
    gulp.src([src + 'js/**/*.js', '!' + src + 'js/**/*.min.js'])
    .pipe(plugins.babel({
        presets: ['env']
    }))
    .pipe(gulp.dest(dist + 'js'))
    .pipe(plugins.uglify())
    .pipe(plugins.rename({
        suffix: '.min'
    }))
});

gulp.task('html', function(){
    gulp.src(src + '**/*.html')
    .pipe(plugins.replace('	', '  '))
    .pipe(gulp.dest(dist));
});

gulp.task('pug', function(){
    gulp.src(src + '**/*.pug')
    .pipe(plugins.pug({
        pretty: true
    }))
    .pipe(gulp.dest(src));
});

gulp.task('images', function(){
    gulp.src(src + 'img/**/*.{png,jpg,JPG,jpeg,gif,svg}')
    .pipe(plugins.imagemin())
    .pipe(gulp.dest(dist + 'img'));
});

gulp.task('export', function(){
    gulp.src(dist + '**/*')
    .pipe(gulp.dest(repo));
});

gulp.task('watch', function(){
    gulp.watch(src + '**/*.scss', ['css']);
    gulp.watch([dist + '**/*.css', '!' + dist + '**/*.min.css'], ['css']);
    gulp.watch(src + '**/*.pug', ['pug']);
    gulp.watch(src + '**/*.html', ['html']);
    gulp.watch([src + 'js/**/*.js', '!' + src + 'js/**/*.min.js'], ['js']);
});

gulp.task('default', ['css','js','html','images']);



// package.json
{
    "name": "",
    "version": "1.0",
    "description": "",
    "devDependencies": {
        "babel-core": "latest",
        "babel-preset-env": "latest",
        "gulp": "^3.9.1",
        "gulp-autoprefixer": "latest",
        "gulp-babel": "latest",
        "gulp-concat": "latest",
        "gulp-cssbeautify": "latest",
        "gulp-csso": "latest",
        "gulp-image-resize": "^0.13.0",
        "gulp-imagemin": "latest",
        "gulp-load-plugins": "latest",
        "gulp-pug": "latest",
        "gulp-rename": "latest",
        "gulp-replace": "latest",
        "gulp-sass": "latest",
        "gulp-sync": "latest",
        "gulp-uglify": "latest"
    }
}

Vanilla Queries


// Self made jQuery like vanilla javascript library

function $(selector){
    if(!(this instanceof $)){
        return new $(selector);
    }
    if(selector === window){
        this[0] = window;
    }else if(selector === document){
        this[0] = window.document;
    }else{
        this.length = 0;
        this.selector = selector;
        this.nodes = [];

        if(typeof selector === 'string'){
            if(selector !== ''){
                this.nodes = [].slice.call(document.querySelectorAll(selector));
            }
            if(this.nodes.length){
                this.length = this.nodes.length;
                for (let i = 0; i < this.nodes.length; i++) {
                    this[i] = this.nodes[i];
                }
            }
            if(this.length === 0){
                this[0] = selector;
            }
        }else{
            this.length = 1;
            this[0] = selector;
        }
    }
};

$.fn = $.prototype = {
    each : function(callback){
        for (let i = 0; i < this.length; i++){
            callback.call(this[i], i, this);
        }
        return this;
    },

    eq : function(nb){
        let element;
        this.each(function(e){
            if(e == nb){
                element = this;
            }
        });
        return $(element);
    },

    remove : function(){
        this.each(function(){
            this.parentNode.removeChild(this);
        });
    },

    append : function(html){
        this.each(function(){
            this.innerHTML += html;
        });
    },

    prepend : function(html){
        this.each(function(){
            this.insertBefore(html, this.firstChild);
        });
    },
    
    after : function(html){
        this.each(function(){
            this.insertAdjacentHTML('afterend', html);
        });
    },
    before : function(html){
        this.each(function(){
            this.insertAdjacentHTML('beforebegin', html);
        });
    },

    find : function(subelement){
        let elemNode;
        this.each(function(){
            elemNode = this.querySelectorAll(subelement);
        });
        return $(elemNode[0]);
    },

    children : function(){
        let theChildren;
        this.each(function(){
            theChildren = this.children;
        });
        return $(theChildren);
    },

    next : function(){
        let nextElm;
        this.each(function(){
            nextElm = this.nextElementSibling;
        });
        return $(nextElm);
    },

    previous : function(){
        let prevElm;
        this.each(function(){
            prevElm = this.previousElementSibling;
        });
        return $(prevElm);
    },

    parent : function(){
        let theParent;
        this.each(function(){
            theParent = this.parentNode;
        });
        return $(theParent);
    },

    parents : function(parentElm){
        let theElement;
        this.each(function(){
            theElement = this;
            for ( ; theElement && theElement !== document; theElement = theElement.parentNode ) {
                if ( theElement.matches( parentElm ) ) return theElement;
            }
        });
        return $(theElement);
    },

    hasClass : function(className){
        let check = false;
        this.each(function(){
            if(this.classList.contains(className)){
                check = true;
            }
        });
        return check;
    },

    addClass : function(className){
        this.each(function(){
            this.classList.add(className);
        });
    },

    removeClass : function(className){
        this.each(function(){
            this.classList.remove(className);
        });
    },

    height : function(value = false){
        if(value === false){
            let heightReturn = 0;
            this.each(function(){
                heightReturn = this.offsetHeight;
            });
            return heightReturn;
        }else{
            this.each(function(){
                this.style.height = value;
            });
        }

    },

    width : function(value = false){
        if(value === false){
            let widthReturn = 0;
            this.each(function(){
                widthReturn = this.offsetWidth;
            });
            return widthReturn;
        }else{
            this.each(function(){
                this.style.width = value;
            });
        }
    },

    scrollTop : function(value = false){
        if(value === false){
            const supportPageOffset = window.pageXOffset !== undefined;
            const isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
            
            let topValue;
            
            if(this[0] == window){
                topValue = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
                return topValue;
            }else{
                this.each(function(){
                    topValue = this.scrollTop;
                    return topValue;
                });
            }
        }else{
            this.each(function(){
                this.scrollTop = value;
            });
        }
    },

    scrollLeft : function(value = false){
        if(value === false){
            const supportPageOffset = window.pageXOffset !== undefined;
            const isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
            
            let leftValue;
            
            if(this[0] == window){
                leftValue = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
                return leftValue;
            }else{
                this.each(function(){
                    leftValue = this.scrollLeft;
                    return leftValue;
                });
            }
        }else{
            this.each(function(){
                this.scrollLeft = value;
            });
        }
    },

    attr : function(attribute, value = false){
        if(value === false){
            let returnValue = '';
            this.each(function(){
                returnValue = this.getAttribute(attribute);
            });
            return returnValue;
        }else{
            this.each(function(){
                this.setAttribute(attribute, value);
            });
        }
    },

    offset : function(){
        let returnObject = {
            left: 0,
            top: 0,
        };
        this.each(function(){
            returnObject.top = this.offsetTop;
            returnObject.left = this.offsetLeft;
        });
        return returnObject;
    },

    scrollTop : function(){
        let returnValue;
        this.each(function(){
            returnValue = this.scrollTop;
        });
        return returnValue;
    },

    scrollTo : function(to, duration, callback){
        let animateInterval;
        let from;
        let direction;
        let delay = 10;
        clearInterval(animateInterval);
        let amount;
        this.each(function(){
            from = this.scrollTop;
            if(to !== from){
                if(to > from){
                    direction = 'down';
                    amount = Math.round((to - from) / (duration / delay));
                }else{
                    direction = 'up';
                    amount = Math.round((from - to) / (duration / delay));
                }
                move(this, from, to, direction, amount);
            }
        });

        function move(element, from, to, direction, amount){
            function frame(){
                if(direction == 'down'){
                    from += amount;
                    if(from > to){
                        from = to;
                    }
                    element.scrollTop = from;
                    if(from >= to){
                        clearInterval(animateInterval);
                        if(callback){
                            callback.call(element);
                        }
                    }
                }else{
                    from -= amount;
                    if(from < to){
                        from = to;
                    }
                    element.scrollTop = from;
                    if (from <= to){
                        clearInterval(animateInterval);
                        if(callback){
                            callback.call(element);
                        }
                    }    
                }
            }
            clearInterval(animateInterval);
            animateInterval = setInterval(frame, delay);
        };
    },

    css : function(property, value = false){
        if(value === false){
            let propertyReturn = '';
            this.each(function(){
                propertyReturn = this.style.getPropertyValue(property);
            });
            return propertyReturn;
        }else{
            this.each(function(){
                if(value === ''){
                    this.style.removeProperty(property);
                }else{
                    this.style.setProperty(property, value);
                }
            });
        }
        return this;
    },

    animate : function(css, duration, callback){
        let elements = this;
        let cssDuration = duration / 1000;
        let count = 0;
        let transitionValue = '';
        Object.keys(css).forEach(function(key){
            if(count > 0){
                transitionValue += ', ';
            }
            transitionValue += `${key} ${cssDuration}s`;
            count++;
        });
        let removeTransitions = function(){
            elements.each(function(){
                $(this).css('transition', '');
            });
            return elements;
        };
        this.each(function(){
            let elm = $(this);
            elm.css('transition', transitionValue);
            Object.keys(css).forEach(function(key){
                elm.css(key, css[key]);
            });
            setTimeout(function(){
                removeTransitions();
                if(callback){
                    callback.call(elements);
                }
            }, duration + 1);
        });
        return this;
    },

    on : function(evt, callback){
        if(this.length){
            this.each(function(){
                let element = this;
                element.addEventListener(evt, function(event){
                    if(event.target === element){
                        if(callback.call(event.target, event) === false){
                            event.preventDefault();
                            event.stopPropagation();
                        }
                    }
                });
            });
        }else{
            let element = this[0];
            document.addEventListener(evt, function(event){
                if(event.target.matches(element)){
                    if(callback.call(event.target, event) === false){
                        event.preventDefault();
                        event.stopPropagation();
                    }
                }
            });
        }
    }
}


// usage

const setNavi = () => {
    let windowScroll = $('html').scrollTop();
    let headerHeight = $('#header').height();
    let naviHeight = $('#main-navi').height();


    if(windowScroll > headerHeight - (naviHeight + 58)){
        if(!$('#main-navi').hasClass('is-fixed')){
            $('#main-navi').addClass('is-fixed');
        }
    }else{
        if($('#main-navi').hasClass('is-fixed')){
            $('#main-navi').removeClass('is-fixed');
        }
    }
    if(windowScroll > headerHeight - (naviHeight + 110)){
        if(!$('#header').hasClass('is-small')){
            $('#header').addClass('is-small');
        }
    }else{
        if($('#header').hasClass('is-small')){
            $('#header').removeClass('is-small');
        }
    }
};

$('.top #header h1').on('click', function(){
    $(this).animate({
        'opacity':0
    }, 500, function(){
        this.animate({
            'opacity':1
        }, 500);
    });
    return false;
});

$('body').append('<h1 class="test">TEST1</h1>');
$('h1.test').after('<h2>TEST2</h2>');
$('h1.test').remove();

$('#main-navi li').eq(0).find('a').css('color','yellow');
$('#main-navi li').eq(1).find('a').css('color','red');
$('#main-navi li').eq(2).find('a').css('color','blue');


$('#main-navi a').on('click', function(e){
    $(this).parent().addClass('parent');
    $(this).parents('ul').addClass('ancestor');
    $(this).css('opacity','0.5').animate({'color':'blue'}, 900);

/*
    $(this).animate({
        'opacity':0.5,
        'color':'blue'
    }, 300, function(){
        this.animate({
            'opacity':1,
            'color':'red'
        }, 300, function(){
            let href = this.attr('href');
            let goTo = $(href).offset().top;
            let naviHeight = $('#main-navi').height();
            let headerHeight = $('#header h1').height();
            goTo = goTo - (104);
            $('html').scrollTo(goTo, 400, function(){
                console.log($(this).scrollTop());
            });
        });
    });
*/

/*
   let href = $(this).attr('href');
    let goTo = $(href).offset().top;
    let naviHeight = $('#main-navi').height();
    let headerHeight = $('#header h1').height();
    goTo = goTo - (104);
    $('html').scrollTo(goTo, 500, function(){
        console.log($(this).scrollTop());
    });
*/
    return false;
});

window.onscroll = function(e){
    setNavi();
};
window.onresize = function(e){
    setNavi();
};

window.onload = function(e){
    setNavi();
}