ricardozea’s gists

ricardozea / script.js

Last active January 4, 2023 02:13

Smooth scroll to top of page (Improved!)

window.scrollTo({top: 0, behavior: "smooth"});

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 / 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 / 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 / show-pass.html

Created March 8, 2019 15:38

<label class="show-password"><input type="checkbox" onclick="showPass()">Show password</label>

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 / 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 / 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 / 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 / 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 ↑</a>");

	$(".scroll-up").on("click", function(e) {
	e.preventDefault();
	$("html, body").animate({ scrollTop: 0 }, 720); //the last value is the speed
	});

Ricardo Zea ricardozea

Simple Tab System (jQuery)