Skip to content

Instantly share code, notes, and snippets.

View juanbrujo's full-sized avatar
:octocat:

Jorge Epuñan juanbrujo

:octocat:
248 followers · 5 following
View GitHub Profile
@juanbrujo
juanbrujo / randomFromArray.less
Last active August 29, 2015 14:03
LESS mixin to get random from array
@blue: #009be1;
@green: #64c200;
@red: #ff1842;
@orange: #ffbf00;
@yellow: #ffd400;
@colors: '@{green}','@{blue}','@{red}','@{orange}','@{yellow}';
.randomFromArray(@min: 1, @max: length(@colors), @int: 0) {
@getNum: `Math.random() * (@{max} - @{min} + @{int})`;
@juanbrujo
juanbrujo / sharebuttons.html
Last active December 14, 2021 07:19
lightweight share buttons with vanilla javascript
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" class="share facebook">Facebook</a>
<a href="https://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>&via=twitter" class="share twitter">Twitter</a>
<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" class="share google">Google+</a>
<a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&source=LinkedIn.com&title=<?php the_title(); ?>" class="share linkedin">LinkedIn</a>
@juanbrujo
juanbrujo / jquery.stickyNav.js
Last active August 29, 2015 14:04
stickyNav: easy jQuery horizontal sticky function
/**
* jquery.stickyNav.js
**/
var stickyNav = function(elem,offset){
$(window).scroll(function(){
if( $(window).scrollTop() > offset ) {
elem.css({position: 'fixed', top: 0, 'z-index': 99});
} else {
elem.css({position: 'static', top: 0});
}
@juanbrujo
juanbrujo / example.html
Last active August 29, 2015 14:05
Add a class to a <header> if it reaches certain value while scrolling
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>transformFixedNav()</title>
</head>
<body>
<header>header</header>
@juanbrujo
juanbrujo / index.html
Created September 22, 2014 23:53
// source http://jsbin.com/sidigovacuca/1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
#player {
position: absolute;
top: 50%;
left: 50%;
@juanbrujo
juanbrujo / getFromTwInsta.js
Created October 28, 2014 19:57
Get Image from Twitter & Instagram : bookmarklet that get's the image shown on certain post on Twitter or Instagram
// The Code:
var url = window.location.host;
if (url.indexOf('twitter.com') != -1){
// is Twitter
var pic = $('.cards-media-container .media').attr('data-url');
if(pic){
window.open(pic,'_self');
} else {
alert('There\'s no photo.');
}
@juanbrujo
juanbrujo / micro-responsive.html
Last active August 29, 2015 14:11
micro-responsive CSS classes
Single:
<div class="desktop-only">desktop-only</div>
<div class="tablet-only">tablet-only</div>
<div class="mobile-only">mobile-only</div>
Combined:
<div class="desktop-only tablet-only">.desktop-only.tablet-only</div>
<div class="tablet-only mobile-only">.tablet-only.mobile-only</div>
@juanbrujo
juanbrujo / simple-background-parallax.html
Created January 1, 2015 23:13
Ridiculously simple background-parallax with CSS/jQuery
<html>
<head>
<style>
.bgParallax {
background-image: url('image/background-jpg');
background-position: 50% 0;
background-repeat: repeat;
background-attachment: fixed;
}
</style>
@juanbrujo
juanbrujo / simpleAccordion.html
Created January 9, 2015 03:18
simpleAccordion: jQuery function for very simple accordions using <dl>/<dt>/<dd>
<dl class="accordion">
<dt><a href="#">Pellentesque fermentum dolor.</a></dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
<dt><a href="#">Donec nec justo eget felis facilisis fermentum.</a></dt>
<dd>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd>
<dt><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</dd>
</dl>
@juanbrujo
juanbrujo / equalHeight.js
Created January 9, 2015 03:23
equalHeight: get the higher and resize the sibling HTML elements using CSS
/**
* Columns Equal Height
* http://css-tricks.com/equal-height-blocks-in-rows/
* USE: equalHeight(elements);
*/
equalHeight = function(container){
var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,