Skip to content

Instantly share code, notes, and snippets.

View ricardozea's full-sized avatar

Ricardo Zea ricardozea

4 followers · 0 following
View GitHub Profile
@ricardozea
ricardozea / script.js
Last active January 4, 2023 02:13
Smooth scroll to top of page (Improved!)
window.scrollTo({top: 0, behavior: "smooth"});
@ricardozea
ricardozea / simple-tab-system-jquery.markdown
Last active April 11, 2019 20:49
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.

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.

@ricardozea
ricardozea / qzconfig.cfg
Last active April 4, 2019 02:58
// 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 March 21, 2019 22:14
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/
.flyout {
display: none;
width: 200px;
height: 200px;
margin: 1em;
padding: 20px;
position: relative;
background: #ccc;
}
@ricardozea
ricardozea / show-pass.html
Created March 8, 2019 15:38
<label class="show-password"><input type="checkbox" onclick="showPass()">Show password</label>
@ricardozea
ricardozea / display-viewport-script.js
Last active February 24, 2019 07:03
This script creates a small red box at the bottom left with the viewport dimensions.
/*
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 July 16, 2018 02:37
"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
<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 July 16, 2018 02:42
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
//**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 July 16, 2018 03:03
This could be used to animate gradient backgrounds on large buttons/CTAs
//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 July 6, 2018 16:51
Just add this small script into your main JavaScript file.
//**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
});