Skip to content

Instantly share code, notes, and snippets.

Ricardo Zea ricardozea

Block or report user

Report or block ricardozea

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@ricardozea
ricardozea / simple-tab-system-jquery.markdown
Last active Apr 11, 2019
The simplest Tab system ever using jQuery. It can be used with keyboard as well. SCSS for the CSS. Don't forget to include jQuery.
View simple-tab-system-jquery.markdown

Simple Tab System (jQuery)

The simplest Tab system ever using jQuery. It can be used with keyboard as well. SCSS for the CSS. Don't forget to include jQuery.

See the Pen here by Ricardo Zea on CodePen.

License.

View qzconfig.cfg
// Hardware cfg - Generated by QUAKE LIVE. Do not modify
unaliasall
seta zmq_rcon_password ""
seta zmq_stats_password ""
seta net_socksPassword ""
seta net_socksUsername ""
seta net_socksPort "1080"
seta net_socksServer ""
seta net_socksEnabled "0"
seta net_noudp "0"
@ricardozea
ricardozea / css
Last active Mar 21, 2019
After displaying a container on click, hide it by: clicking outside, clicking on the Close button or pressing ESC key. Demo here: http://jsfiddle.net/rzea/3p9n2vsb/2/
View css
.flyout {
display: none;
width: 200px;
height: 200px;
margin: 1em;
padding: 20px;
position: relative;
background: #ccc;
}
View show-pass.html
<label class="show-password"><input type="checkbox" onclick="showPass()">Show password</label>
@ricardozea
ricardozea / display-viewport-script.js
Last active Feb 24, 2019
This script creates a small red box at the bottom left with the viewport dimensions.
View display-viewport-script.js
/*
Script to display the viewport size when working on responsive stuff.
Adpted to vanilla JS by: Taylor Hunt - https://codepen.io/tigt/
*/
var el = document.createElement("output");
document.body.append(el);
Object.assign(el.style, {
position: "fixed",
bottom: 0,
left: 0,
@ricardozea
ricardozea / proper-font-load.html
Created Jul 16, 2018
"CSS is treated as a render blocking resource, which means that the browser won’t render any content until it’s finished loading. So this works great if you’re using fonts from something like Google Fonts or Adobe’s TypeKit, you don’t need to be wait
View proper-font-load.html
<noscript id="deferred-styles">
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,300i,700,700i" rel="stylesheet">
</noscript>
<script>
// Load CSS
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("deferred-styles");
var replacement = document.createElement("div");
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement)
@ricardozea
ricardozea / page-transition-script.js
Last active Jul 16, 2018
Fade pages in and out when clicking on any internal links. External and `mailto:` links are treated as normal. Author: Adam Marsden Article: https://blog.adam-marsden.co.uk/minimal-page-transitions-with-jquery-css-d97f692d5292
View page-transition-script.js
//**MINIMAL PAGE TRANSITIONS WITH JQUERY & CSS
//https://blog.adam-marsden.co.uk/minimal-page-transitions-with-jquery-css-d97f692d5292
$(function() {
$("a").each(function() { /* [1] */
if ( location.hostname === this.hostname || !this.hostname.length ) { /* [1] */
var link = $(this).attr("href"); /* [2] */
if ( link.match("^#") ) { /* [3] */
$(this).click(function() {
var target = $(link); /* [4] */
@ricardozea
ricardozea / animated-gradient.scss
Last active Jul 16, 2018
This could be used to animate gradient backgrounds on large buttons/CTAs
View animated-gradient.scss
//Animated gradient background
//https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
//Usage:
//Example 1: include gradientAnimation(red, blue, .6s);
//Example 2: include gradientAnimation(lighten($orange, 10), $orange, .6s);
@mixin gradientAnimation( $start, $end, $transTime ){
background-size: 100%;
background-image: linear-gradient($start, $end);
@ricardozea
ricardozea / scroll-to-top
Last active Jul 6, 2018
Just add this small script into your main JavaScript file.
View scroll-to-top
//**SCROLL TO TOP
$("footer").append("<hr><a href='#' class='scroll-up'>Back to Top &uarr;</a>");
$(".scroll-up").on("click", function(e) {
e.preventDefault();
$("html, body").animate({ scrollTop: 0 }, 720); //the last value is the speed
});
View dynamic-line-height.scss
p {
font-size: calc(2vw + .3em); //edit
line-height: calc(1vw + 1.2em); //edit
@media (min-width: 1000px) {
line-height: 1.5; //edit
}
}
/*
Demo: https://codepen.io/ricardozea/pen/dbba1a4efcf515f05e36b5d4223aa6ab
You can’t perform that action at this time.