Skip to content

Instantly share code, notes, and snippets.

View thatjeannie's full-sized avatar

Jeannie Stevenson thatjeannie

16 followers · 37 following
View GitHub Profile
@thatjeannie
thatjeannie / colors.scss
Last active March 16, 2018 16:38
social media colors: google, youtube, facebook, twitter, instagram (including gradient)
// vendor color defs
$google: #db4437;
$youtube: #f00;
$facebook: #3b5998;
$twitter: #1da1f2;
$instagram: #231f20;
$instagramGrad: linear-gradient(45deg, #ffd521 24%, #f50000 50%, #b900b4 76%);
// vendor link classes
@thatjeannie
thatjeannie / That's Me.markdown
Created April 21, 2016 02:04
That's Me
@thatjeannie
thatjeannie / Let's Go Crazy.markdown
Created April 14, 2016 15:57
Let's Go Crazy
@thatjeannie
thatjeannie / show-hide-by-checkbox.js
Created December 2, 2015 22:41
// set .form to display: none in css
function showForm() {
$('.form-switch').click(function() {
if ($(this).is(':checked')) {
$('.form').slideDown('slow');
} else {
$('.form').slideUp('slow');
}
@thatjeannie
thatjeannie / pop-in.css
Last active August 29, 2015 14:19
pop in css animation
@-webkit-keyframes pop-in {
0% { opacity: 0; }
1% { opacity: 0; -webkit-transform: scale(0.98) translateY(-30px); }
80% { -webkit-transform: scale(1); }
100% { -webkit-transform: translateY(0); }
}
@-moz-keyframes pop-in {
0% { opacity: 0; }
1% { opacity: 0; -moz-transform: scale(0.98) translateY(-30px); }
80% { -moz-transform: scale(1); }
@thatjeannie
thatjeannie / media-queries.js
Created April 21, 2015 17:18
Media Queries in JavaScript (attempt)
$(document).ready(function() {
// THIS IS SO CONFUSING!
if ($(window).width() >= 380) {
// NEST!
if ($(window).width() >= 680) {
// NEST AGAIN!
@thatjeannie
thatjeannie / fix-element.js
Created April 3, 2015 18:23
Fix element while scrolling JQUERY HTML CSS
$(document).ready(function() {
$(window).scroll(function(){
var eOT = $('#sH').offset().top; //distance sidebar is from the top of the page
if($(window).width() >= 992){
var yPT = $(window).scrollTop(); //distance the page has scrolled
//if the distance the page has scrolled is larger than the distance the sidebar is from the top, run
if(yPT > eOT){
var yPosW = $(window).scrollTop(); //distance the page has scrolled
@thatjeannie
thatjeannie / slide-in.js
Last active August 29, 2015 14:18
Slide in and/or fade in content on scroll JQUERY HTML CSS
$(document).ready(function() {
$(window).scroll( function(){
// slide in from left to right
$('.slide-right').each(function() {
var objBot = $(this).offset().top + $(this).outerHeight();
var winBot = $(window).scrollTop() + $(window).height();
if( winBot > objBot ){
@thatjeannie
thatjeannie / fix-nav.js
Last active August 29, 2015 14:17
Fix nav after scroll JQUERY HTML CSS
$(document).ready(function() {
// fix client strip and shrink client photo
if($(window).width() >= 769){
$(window).on('scroll', function() {
var $fix = $("#fix");
var headerH = $("#header").outerHeight();
var scrolled = $(window).scrollTop();
if (scrolled >= headerH) {
@thatjeannie
thatjeannie / image-resize.js
Last active August 29, 2015 14:17
Iterate through images for dynamic sizing/positioning JQUERY HTML CSS
$(document).ready(function() {
// math
// NEW height = VARIABLE width * original height / original width
// NEW width = VARIABLE height * original width / original height
// known knowns
// images must not be set to any max-width
// if image aspect ratio is less than one, it's a vertical image
// if image aspect ratio is greater than one, it's a horizontal image
// if image aspect ratio is less than box aspect ratio, it is more taller than wider than the box