Skip to content

Instantly share code, notes, and snippets.

@ryanand26
ryanand26 / accordion-css-slide-open.scss
Last active October 25, 2022 08:48
CSS keyframe animation for use with display:none
@include keyframes(slideInAccordion) {
0% {
min-height: 0;
max-height: 0;
display: none;
}
1% {
min-height: 0;
max-height: 0;
@ryanand26
ryanand26 / PhantomJS-Click-Event
Created November 6, 2014 10:03
PhantomJS Click event
// Source : http://stackoverflow.com/a/17789929
// Patch since PhantomJS does not implement click() on HTMLElement. In some
// cases we need to execute the native click on an element. However, jQuery's
// $.fn.click() does not dispatch to the native function on <a> elements, so we
// can't use it in our implementations: $el[0].click() to correctly dispatch.
if (!HTMLElement.prototype.click) {
HTMLElement.prototype.click = function() {
var ev = document.createEvent('MouseEvent');
ev.initMouseEvent(
'click',
@ryanand26
ryanand26 / microsoft.maps.7.js
Created October 21, 2013 13:44
An async require.js declaration of Bing Maps, requires jQuery deferreds.
define('bingMaps',['async!//ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0!OnScriptLoad'], function() {
var mapReadyDfd = $.Deferred(),
mapReadyTest = function () {
if (window.Microsoft && window.Microsoft.Maps && window.Microsoft.Maps.Location) {
mapReadyDfd.resolve(window.Microsoft.Maps);
}
else {
setTimeout(mapReadyTest, 100);
}
};
@ryanand26
ryanand26 / styling-children-based-on-their-number.css
Created April 6, 2017 19:58
CSS styling based on number of items
/**
* http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/
*/
/* one item */
li:first-child:nth-last-child(1) {
width: 100%;
}
/* two items */
@ryanand26
ryanand26 / describeArc.js
Created May 31, 2016 15:09
Calculate the SVG Path for an arc (of a circle)
//calculate the SVG Path for an arc
//src: http://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle/18473154#18473154
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
@ryanand26
ryanand26 / Modernizr.highres
Created January 17, 2014 11:55
Device Pixel Density detection. Before using check why it's not including 'only screen and (min-resolution: ' + num + 'dppx)' or the window property.
//RM: Before using check why it's not including 'only screen and (min-resolution: ' + num + 'dppx)' or the window property..
// Device Pixel Density
// High res devices should have devicePixelRatio and a pixel density around 2, otherwise assume low res
// http://www.robertprice.co.uk/robblog/archive/2011/5/Detecting_Retina_Displays_From_JavaScript_And_CSS.shtml
// http://bradbirdsall.com/mobile-web-in-high-resolution
// http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/
// by @matthewlein
http://blog.jcoglan.com/2013/11/15/why-github-is-not-your-cv/
@ryanand26
ryanand26 / SublimeLinter.sublime-setting
Created October 23, 2013 13:22
My SublimeLinter user settings file
/*
SublimeLinter user settings
*/
{
"jshint_options":
{
// To fix column positions for JSHint errors you may want to add `"indent": 1` to your
// **User** "jshint_options". This issue affects users with tabs for indentation.
// This fix was reverted due to a conflict with using the `"white": true` option.
// "indent": 1,
@ryanand26
ryanand26 / gist:dce0033fa720428a504f
Created November 25, 2015 16:54
Reddit MobilePerf audit: Loading performance #247
Paul Irish : Performance audit of the new Reddit mobile site
Issue link : https://github.com/reddit/reddit-mobile/issues/247