Javascript Test for element visibility in viewport
A couple different ideas on a theme.
// Works once the whole element is in the viewport
function isScrolledIntoView(elem){
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
// Works while any part of the element is in the viewport.
function isInViewport(elem) {
var elementTop = elem.offset().top;
var elementBottom = elementTop + elem.outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
}
Usage:
$(window).scroll(function() {
if ( isInViewport($(<element_to_check>))){
// DO SOMETHING
}
});
Published on January 11, 2018
2017 Top Listens
- Iron Chic
444 - Pkew Pkew Pkew
343 - Run the Jewels
245 - Diarrhea Planet
240 - Rush
200 - Shellac
152 - jank
140 - Thee Oh Sees
140 - Twin Peaks
140 - Bong Mountain
125 - Diet Cig
122 - Wilco
120 - Eurythmics
111 - Nick Drake
98 - Allison Crutchfield
97 - Day Wave
87 - The Bouncing Souls
87 - Kevin Morby
86 - The Magnetic Fields
86 - LCD Soundsystem
84 - OBN IIIs
81 - Cherry Glazerr
79 - Bad Cop, Bad Cop
75 - The Menzingers
71 - John Coltrane
69 - The Courtneys
69 - Donovan Wolfington
64 - Ryan Adams
64 - Real Estate
63 - Naked Giants
62 - Conor Oberst
61 - Miles Davis
61 - Obits
61 - Radiohead
61 - WESTERN SETTINGS
60 - St. Paul & The Broken Bones
59 - Arcade Fire
57 - gurr
57 - Hazel English
57 - Murs
55 - Built to Spill
53 - Leggy
53 - Kendrick Lamar
52 - The Damned
52 - Dude York
51 - The Obsessives
51 - PUP
50 - Chase & Status
49 - The Aquabats
49 - The Velvet Underground
49
Using SASS variables with calc
You need to interpolate a SASS variable to have it print out inside calc.
$var: 100px;
div {
height: calc(100vh - #{$var});
}
Documentation on the SASS issue: https://github.com/sass/sass/issues/818
Published on November 8, 2017Tar command to exclude directories
Need to exclude specific dirs when wrapping a site up to push to production, specifically bower_components and node_modules. Run this command from the site root of your WP install.
tar --exclude='wp-content/themes/THEME_NAME/bower_components' --exclude='wp-content/themes/THEME_NAME/node_modules' -zcvf SITE_NAME.tar.gz *.php wp-admin/ wp-content/ wp-includes/
NOTE: leave trailing ‘/’ off the path of dirs to exclude as tar doesn’t like it.
CSS method to force square containers
This method is especially helpful in laying out Instagram images in a grid since they have rolled out their non-square media ability.
// HTML
<a href="LINK_GOES_HERE" class="square">
<img src="IMG_GOES_HERE" alt="">
</a>
// SCSS
.square {
width: 100%;
height: 0;
padding-bottom: 100%;
display: block;
img {
width:100%;
height:auto;
}
}
Published on October 19, 2017
Custom Taxonomy and Custom Post Type Rewrites
When creating Custom Taxonomies and Custom Post types with rewrite rules in WordPress, the order in which they are registered matters. With the taxonomy registered first, WordPress will be able to work it’s magic for the rewrite rules to work.
// TAXONOMY FIRST
$tax_args = array(
'labels' => 'TAX_NAME',
'rewrite' => array( 'slug' => 'CPT/TAX/' )
);
register_taxonomy( 'CUSTOM_TAX_TYPE', 'CUSTOM_POST_TYPE', $tax_args );
// POST TYPE SECOND
$cpt_args = array(
'labels' => 'CPT_NAME',
'rewrite => ' array( 'slug' => 'CPT' )
);
register_post_type( 'CUSTOM_POST_TYPE', $cpt_args );
Published on June 13, 2017
Method to crop YouTube thumbnails to 16:9 with CSS only
I have a site displaying mixed thumbnail images based on content created by the client consisting of either a featured image (sized via WordPress), YouTube thumbnails or a proxy image (static size). The featured image and proxy images are 16:9 sized images so there’s no problem there. YouTube thumbnail images, specifically hqdefault, are sized as 4:3 thus ruining the grid layout on the page I have all this content eventually displaying on. I wanted to find a low bandwidth solution to crop the YouTube thumbnails since the site was already looking to be on the heavy end. Without further adieu, my solution:
hqdefault = 4:3 = 0.75 = 75% // pre-crop images
16:9 = 0.5625 = 56.25% // cropped images
75% - 56.25% = 18.75% // difference in size
Now we take that difference in size, divide it in half and add that to the image as negative margins. Which creates our “crop”
18.75% / 2 = 9.375%
// HTML <figure> <img src="https://img.youtube.com/vi/YOUR_VIDEO_ID/hqdefault.jpg" alt=""> </figure>
// SCSS
figure {
overflow:hidden;
img {
margin:-9.375% 0;
display:block;
width:100%;
height:auto;
}
}
Codepen example.
Published on February 17, 2017Convert two letter country code to long name with PHP
This was useful today.
function countryCodeToName($code) {
switch ($code) {
case 'AF': return 'Afghanistan';
case 'AX': return 'Aland Islands';
case 'AL': return 'Albania';
case 'DZ': return 'Algeria';
case 'AS': return 'American Samoa';
case 'AD': return 'Andorra';
case 'AO': return 'Angola';
case 'AI': return 'Anguilla';
case 'AQ': return 'Antarctica';
case 'AG': return 'Antigua and Barbuda';
case 'AR': return 'Argentina';
case 'AM': return 'Armenia';
case 'AW': return 'Aruba';
case 'AU': return 'Australia';
case 'AT': return 'Austria';
case 'AZ': return 'Azerbaijan';
case 'BS': return 'Bahamas the';
case 'BH': return 'Bahrain';
case 'BD': return 'Bangladesh';
case 'BB': return 'Barbados';
case 'BY': return 'Belarus';
case 'BE': return 'Belgium';
case 'BZ': return 'Belize';
case 'BJ': return 'Benin';
case 'BM': return 'Bermuda';
case 'BT': return 'Bhutan';
case 'BO': return 'Bolivia';
case 'BA': return 'Bosnia and Herzegovina';
case 'BW': return 'Botswana';
case 'BV': return 'Bouvet Island (Bouvetoya)';
case 'BR': return 'Brazil';
case 'IO': return 'British Indian Ocean Territory (Chagos Archipelago)';
case 'VG': return 'British Virgin Islands';
case 'BN': return 'Brunei Darussalam';
case 'BG': return 'Bulgaria';
case 'BF': return 'Burkina Faso';
case 'BI': return 'Burundi';
case 'KH': return 'Cambodia';
case 'CM': return 'Cameroon';
case 'CA': return 'Canada';
case 'CV': return 'Cape Verde';
case 'KY': return 'Cayman Islands';
case 'CF': return 'Central African Republic';
case 'TD': return 'Chad';
case 'CL': return 'Chile';
case 'CN': return 'China';
case 'CX': return 'Christmas Island';
case 'CC': return 'Cocos (Keeling) Islands';
case 'CO': return 'Colombia';
case 'KM': return 'Comoros the';
case 'CD': return 'Congo';
case 'CG': return 'Congo the';
case 'CK': return 'Cook Islands';
case 'CR': return 'Costa Rica';
case 'CI': return 'Cote d\'Ivoire';
case 'HR': return 'Croatia';
case 'CU': return 'Cuba';
case 'CY': return 'Cyprus';
case 'CZ': return 'Czech Republic';
case 'DK': return 'Denmark';
case 'DJ': return 'Djibouti';
case 'DM': return 'Dominica';
case 'DO': return 'Dominican Republic';
case 'EC': return 'Ecuador';
case 'EG': return 'Egypt';
case 'SV': return 'El Salvador';
case 'GQ': return 'Equatorial Guinea';
case 'ER': return 'Eritrea';
case 'EE': return 'Estonia';
case 'ET': return 'Ethiopia';
case 'FO': return 'Faroe Islands';
case 'FK': return 'Falkland Islands (Malvinas)';
case 'FJ': return 'Fiji the Fiji Islands';
case 'FI': return 'Finland';
case 'FR': return 'France, French Republic';
case 'GF': return 'French Guiana';
case 'PF': return 'French Polynesia';
case 'TF': return 'French Southern Territories';
case 'GA': return 'Gabon';
case 'GM': return 'Gambia the';
case 'GE': return 'Georgia';
case 'DE': return 'Germany';
case 'GH': return 'Ghana';
case 'GI': return 'Gibraltar';
case 'GR': return 'Greece';
case 'GL': return 'Greenland';
case 'GD': return 'Grenada';
case 'GP': return 'Guadeloupe';
case 'GU': return 'Guam';
case 'GT': return 'Guatemala';
case 'GG': return 'Guernsey';
case 'GN': return 'Guinea';
case 'GW': return 'Guinea-Bissau';
case 'GY': return 'Guyana';
case 'HT': return 'Haiti';
case 'HM': return 'Heard Island and McDonald Islands';
case 'VA': return 'Holy See (Vatican City State)';
case 'HN': return 'Honduras';
case 'HK': return 'Hong Kong';
case 'HU': return 'Hungary';
case 'IS': return 'Iceland';
case 'IN': return 'India';
case 'ID': return 'Indonesia';
case 'IR': return 'Iran';
case 'IQ': return 'Iraq';
case 'IE': return 'Ireland';
case 'IM': return 'Isle of Man';
case 'IL': return 'Israel';
case 'IT': return 'Italy';
case 'JM': return 'Jamaica';
case 'JP': return 'Japan';
case 'JE': return 'Jersey';
case 'JO': return 'Jordan';
case 'KZ': return 'Kazakhstan';
case 'KE': return 'Kenya';
case 'KI': return 'Kiribati';
case 'KP': return 'Korea';
case 'KR': return 'Korea';
case 'KW': return 'Kuwait';
case 'KG': return 'Kyrgyz Republic';
case 'LA': return 'Lao';
case 'LV': return 'Latvia';
case 'LB': return 'Lebanon';
case 'LS': return 'Lesotho';
case 'LR': return 'Liberia';
case 'LY': return 'Libyan Arab Jamahiriya';
case 'LI': return 'Liechtenstein';
case 'LT': return 'Lithuania';
case 'LU': return 'Luxembourg';
case 'MO': return 'Macao';
case 'MK': return 'Macedonia';
case 'MG': return 'Madagascar';
case 'MW': return 'Malawi';
case 'MY': return 'Malaysia';
case 'MV': return 'Maldives';
case 'ML': return 'Mali';
case 'MT': return 'Malta';
case 'MH': return 'Marshall Islands';
case 'MQ': return 'Martinique';
case 'MR': return 'Mauritania';
case 'MU': return 'Mauritius';
case 'YT': return 'Mayotte';
case 'MX': return 'Mexico';
case 'FM': return 'Micronesia';
case 'MD': return 'Moldova';
case 'MC': return 'Monaco';
case 'MN': return 'Mongolia';
case 'ME': return 'Montenegro';
case 'MS': return 'Montserrat';
case 'MA': return 'Morocco';
case 'MZ': return 'Mozambique';
case 'MM': return 'Myanmar';
case 'NA': return 'Namibia';
case 'NR': return 'Nauru';
case 'NP': return 'Nepal';
case 'AN': return 'Netherlands Antilles';
case 'NL': return 'Netherlands the';
case 'NC': return 'New Caledonia';
case 'NZ': return 'New Zealand';
case 'NI': return 'Nicaragua';
case 'NE': return 'Niger';
case 'NG': return 'Nigeria';
case 'NU': return 'Niue';
case 'NF': return 'Norfolk Island';
case 'MP': return 'Northern Mariana Islands';
case 'NO': return 'Norway';
case 'OM': return 'Oman';
case 'PK': return 'Pakistan';
case 'PW': return 'Palau';
case 'PS': return 'Palestinian Territory';
case 'PA': return 'Panama';
case 'PG': return 'Papua New Guinea';
case 'PY': return 'Paraguay';
case 'PE': return 'Peru';
case 'PH': return 'Philippines';
case 'PN': return 'Pitcairn Islands';
case 'PL': return 'Poland';
case 'PT': return 'Portugal, Portuguese Republic';
case 'PR': return 'Puerto Rico';
case 'QA': return 'Qatar';
case 'RE': return 'Reunion';
case 'RO': return 'Romania';
case 'RU': return 'Russian Federation';
case 'RW': return 'Rwanda';
case 'BL': return 'Saint Barthelemy';
case 'SH': return 'Saint Helena';
case 'KN': return 'Saint Kitts and Nevis';
case 'LC': return 'Saint Lucia';
case 'MF': return 'Saint Martin';
case 'PM': return 'Saint Pierre and Miquelon';
case 'VC': return 'Saint Vincent and the Grenadines';
case 'WS': return 'Samoa';
case 'SM': return 'San Marino';
case 'ST': return 'Sao Tome and Principe';
case 'SA': return 'Saudi Arabia';
case 'SN': return 'Senegal';
case 'RS': return 'Serbia';
case 'SC': return 'Seychelles';
case 'SL': return 'Sierra Leone';
case 'SG': return 'Singapore';
case 'SK': return 'Slovakia (Slovak Republic)';
case 'SI': return 'Slovenia';
case 'SB': return 'Solomon Islands';
case 'SO': return 'Somalia, Somali Republic';
case 'ZA': return 'South Africa';
case 'GS': return 'South Georgia and the South Sandwich Islands';
case 'ES': return 'Spain';
case 'LK': return 'Sri Lanka';
case 'SD': return 'Sudan';
case 'SR': return 'Suriname';
case 'SJ': return 'Svalbard & Jan Mayen Islands';
case 'SZ': return 'Swaziland';
case 'SE': return 'Sweden';
case 'CH': return 'Switzerland, Swiss Confederation';
case 'SY': return 'Syrian Arab Republic';
case 'TW': return 'Taiwan';
case 'TJ': return 'Tajikistan';
case 'TZ': return 'Tanzania';
case 'TH': return 'Thailand';
case 'TL': return 'Timor-Leste';
case 'TG': return 'Togo';
case 'TK': return 'Tokelau';
case 'TO': return 'Tonga';
case 'TT': return 'Trinidad and Tobago';
case 'TN': return 'Tunisia';
case 'TR': return 'Turkey';
case 'TM': return 'Turkmenistan';
case 'TC': return 'Turks and Caicos Islands';
case 'TV': return 'Tuvalu';
case 'UG': return 'Uganda';
case 'UA': return 'Ukraine';
case 'AE': return 'United Arab Emirates';
case 'GB': return 'United Kingdom';
case 'US': return 'United States of America';
case 'UM': return 'United States Minor Outlying Islands';
case 'VI': return 'United States Virgin Islands';
case 'UY': return 'Uruguay, Eastern Republic of';
case 'UZ': return 'Uzbekistan';
case 'VU': return 'Vanuatu';
case 'VE': return 'Venezuela';
case 'VN': return 'Vietnam';
case 'WF': return 'Wallis and Futuna';
case 'EH': return 'Western Sahara';
case 'YE': return 'Yemen';
case 'ZM': return 'Zambia';
case 'ZW': return 'Zimbabwe';
}
return false;
}
from post at xcode. thanks!
Published on February 3, 2017Drumpf
Published on January 4, 2017
2016 Top Listens
Straight from my last.fm profile.
- Iron Chic 300
- Sam Cooke 226
- Diarrhea Planet 225
- Nancy Pants 218
- Sunflower Bean 208
- Wilco 198
- De La Soul 183
- Band of Horses 169
- Beach Slang 164
- Kevin Morby 159
- Nice As Fuck 154
- Whitney 145
- Car Seat Headrest 142
- Built to Spill 131
- Parquet Courts 131
- Lord Huron 128
- The Growlers 125
- Yo La Tengo 125
- Allah-Las 124
- Saintseneca 124
- St. Paul & The Broken Bones 121
- Magic Potion 119
- Leon Bridges 116
- Beach Skulls 114
- TV Girl 107
- White Denim 105
- The Shrine 103
- DIIV 101
- Acid Dad 96
- Stephen Steinbrink 96
- Lucy Dacus 94
- Amber Arcades 93
- Katy Goodman & Greta Morgan 89
- Witching Waves 88
- Beyond The Wizards Sleeve 83
- Bill Baird 81
- Beach House 80
- Quarterbacks 79
- The Castillians 79
- Japanese Breakfast 78
- Eureka California 77
- The Amazing 77
- Murs 76
- Banner Pilot 75
- Anderson .Paak 74
- My Morning Jacket 74
- Nathaniel Rateliff & the Night Sweats 74
- Rob Crow’s Gloomy Place 74
- Boat 73
- Kurt Vile 72