Skip to content

Instantly share code, notes, and snippets.

View juanbrujo's full-sized avatar
:octocat:

Jorge Epuñan juanbrujo

:octocat:
235 followers · 5 following
View GitHub Profile
@juanbrujo
juanbrujo / element-enters-viewport.js
Last active March 23, 2017 21:06
Detect with jQuery if an element enters the viewport ( visible() )
var win = $(window);
var allMods = $(".box_blog_post");
win.scroll(function(event) {
allMods.each(function(i, el) {
if (el.visible(true)) {
el.addClass("visible");
}
});
});
@juanbrujo
juanbrujo / emailregex.html
Last active December 23, 2015 17:59
Regexp pattern for email validation
<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />
@juanbrujo
juanbrujo / makeemailsclickeable.js
Last active December 24, 2015 08:59
Find emails inside a string and transforms them in clickable
$(".real-content")
.find (':contains("@")')
.each (function (index, element) {
var emailPattern = /[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}/;
var corrected = $(element).html();
var remainder = corrected;
while ( emailPattern.test (remainder)) {
var email = emailPattern.exec (remainder);
remainder = remainder.replace (email, '');
corrected = corrected.replace (email, '<a href="mailto:' + email + '">' + email + '</a>');
@juanbrujo
juanbrujo / mixins.less
Last active December 24, 2015 11:49
My base LESS mixins
// (¯`·.¸¸.·´¯`·.¸¸.-> COLORS <-.¸¸.·´¯`·.¸¸.·´¯)
@naranjo: #ff9100;
@sandia: #f34b4b;
@azul: #2d3c7b;
// ¸,ø¤º°`°º¤ø,¸¸,ø¤º° JUST FOR DEBUGGING
.out(@color:red){outline:1px solid @color;}
// (¯`·.¸¸.·´¯`·.¸¸.-> MIXINS <-.¸¸.·´¯`·.¸¸.·´¯)
@juanbrujo
juanbrujo / characterCountdown.js
Created October 8, 2013 01:05
Simple character countdown
function characterCountdown() {
var characterLeft = 140 - jQuery('textarea').val().length;
jQuery('.message').text(characterLeft + ' characters left.');
}
$(function() {
characterCountdown();
$('textarea').change(characterCountdown);
$('textarea').keyup(characterCountdown);
});
@juanbrujo
juanbrujo / triangle-mixin.less
Last active December 25, 2015 13:19
My own mixin to create all kinds of CSS triangles.
/*
Use:
.triangle(direction,width,height,color);
Example:
@square: 50px;
@color: red;
.triangle(bottomright,@square,@square/2,@color);
*/
@juanbrujo
juanbrujo / jquery.imgPreloader.js
Created October 15, 2013 22:44
jQuery: preloads an array of images. Demo: http://codepen.io/juanbrujo/pen/yIiCs
(function($) {
var imgList = [];
$.extend({
preload: function(imgArr, option) {
var setting = $.extend({
init: function(loaded, total) {},
loaded: function(img, loaded, total) {},
loaded_all: function(loaded, total) {}
}, option);
var total = imgArr.length;
@juanbrujo
juanbrujo / loop.css
Last active December 27, 2015 13:59
LESS basic loop
selector:nth-child(4) {
property: 4px;
}
selector:nth-child(3) {
property: 3px;
}
selector:nth-child(2) {
property: 2px;
}
selector:nth-child(1) {
@juanbrujo
juanbrujo / websafe-fontstack.css
Created January 21, 2014 13:09
List of Web Safe font-stack
font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
@juanbrujo
juanbrujo / gulpfile.js
Last active August 29, 2015 13:55
Basic gulpfile.js to work a basic HTML/JS/LESS/Images project under Gulp.JS/Express
var gulp = require('gulp');
var less = require('gulp-less');
var uglify = require('gulp-uglify');
var watch = require('gulp-watch');
var imagemin = require('gulp-imagemin');
var EXPRESS_PORT = 4000;
var EXPRESS_ROOT = __dirname;
var LIVERELOAD_PORT = 35729;