Public snipts »
catcubed's
snipts 
showing 1-15 of 15 snipts
-
∞ Useful mixins for SASS
// Bunch of useful mixin functions for sass =bgImg(!img,!x = 20px,!y = 10px,!attach = "scroll",!repeat = "no-repeat") background-position = !x !y background-repeat = !repeat background-attachment = !attach background-image: url(#{!img}) =boxShadow(!x = 5px,!y = 5px,!blur = 5px,!color = #000) -webkit-box-shadow = !x !y !blur !color -moz-box-shadow = !x !y !blur !color box-shadow = !x !y !blur !color =borderRadius(!radius = 5px) -moz-border-radius = !radius -webkit-border-radius = !radius -khtml-border-radius = !radius border-radius = !radius =singleCornerRadius(!side,!vert,!width = 5px) -moz-border-radius-#{!vert}#{!side} = !width -webkit-border-#{!vert}-#{!side}-radius = !width border-#{!vert}-#{!side}-radius = !width // set global borders. Border radius can also be set =border(!width = 1px,!style = "solid",!color = #000,!radius = 0) border = !width !style !color +borderRadius(!radius) // Use noSideBorder() to kill a side after setting the global border() mixin above. // This method results in smaller css once it is converted as the width/style/color is only set once. =noSideBorder(!side) border-#{!side}: 0 =noSideBorderRadius(!side) +singleCornerRadius(!side,"top",0) +singleCornerRadius(!side,"bottom",0)
-
∞ Easy css hacks using SASS
//Easy CSS Hacks using SASS // In most cases, you'll never need the 3rd, or 4th hacks here. #idtag * html & //IE6 and below cssstyle: value * first-child+html & //IE7 only cssstyle: value html>body & //IE7,IE8, and modern browsers cssstyle: value html:first-child & //Opera only 9 and below cssstyle: value
-
∞ Minimal HTML5 CSS Reset (for SASS)
// minimal reset with html5 * vertical-align: baseline font-family: inherit font-style: inherit font-size: 100% border: none padding: 0 margin: 0 h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl margin: 0 0 16px li, dd, blockquote margin-left: 20px table border-collapse: collapse border-spacing: 0 article, aside, dialog, figure, footer, header, hgroup, nav, section display: block nav li, nav ul margin: 0 padding: 0 list-style: none q:before, q:after content: ''
-
∞ Simple Adjustable Gutter Grid system for LessCSS
// Simple Adjustable Gutter Grid for LessCSS (NOT TESTED! But should work) // For a 960px width, !grid = 80px = 12 columns; 60px = 16 columns // gutter is base gutter. You can change the gutter per element. See Grid mixin @pageWidth: 960px; @grid: 80px; @gutter: 20px; //used for page wrapper .container { width: @pageWidth; margin: 0 auto; } // Grid mixin functions sets size and width of element boxes. Function variables are as follows // @col = number of columns, // @gutterLeft = size of left gutter // @gutterRight = size of right gutter //gridFlush sets gutter via padding, gridFloat formed by margin .gridBase {float: left; overflow: hidden; display: inline;} .gridFlush(@col: 1,@gutterLeft: @gutter/2, @gutterRight = @gutter/2){ padding-left: @gutterLeft; padding-right: @gutterRight; width: @col * @grid - @gutterRight - @gutterLeft; .gridBase; } .gridFloat(@col: 1,@gutterLeft: @gutter/2, @gutterRight = @gutter/2){ margin-left: @gutterLeft; margin-right: @gutterRight; width: @col * @grid - @gutterRight - @gutterLeft; .gridBase; } // first is only required if you want to clear a row of elements which did not equal total width .first { clear: both;}
-
∞ Simple Adjustable Grid Mixin for SASS
// Simple Adjustable Gutter Grid // For a 960px width, !grid = 80px = 12 columns; 60px = 16 columns // gutter is base gutter. You can change the gutter per element. See Grid mixin !pageWidth = 960px !grid = 80px !gutter = 20px //used for page wrapper =container width = !pageWidth margin: 0 auto /* Grid mixin function sets size and width of element boxes. Function variables are as follows !col = number of columns, !gutterLeft = size of left gutter !gutterRight = size of right gutter // gridFlush gutter is formed via padding, gridFloat formed by margin =gridBase float: left overflow: hidden display: inline =gridFlush(!col = 1,!gutterLeft = !gutter/2, !gutterRight = !gutter/2 ) padding-left = !gutterLeft padding-right = !gutterRight width = !col * !grid - !gutterRight - !gutterLeft +gridBase =gridFloat(!col = 1,!gutterLeft = !gutter/2, !gutterRight = !gutter/2) margin-left = !gutterLeft margin-right = !gutterRight width = !col * !grid - !gutterRight - !gutterLeft +gridBase // first is only required if you want to clear a row of elements which did not equal total width =first clear: both
-
∞ CSS element inheritance spotter (for LessCSS))
/* used for testing where element bounding boxes are. Only works in modern browsers and IE8 */ //written for LessCSS. NOT Tested! Should work though body *:hover { outline-style: dotted; outline-width: 2px; outline-color: #ee3; *:hover { outline-color: #bb3; *:hover { outline-color: #883; *:hover { outline-color: #553; *:hover { outline-color: #333; *:hover { outline-color: #000; }}}}}}
-
∞ CSS element inheritance spotter
/* used for testing where element bounding boxes are. Only works in modern browsers and IE8 */ body *:hover { outline-style: dotted; outline-width: 2px; outline-color: #ee3; } body *:hover *:hover { outline-color: #bb3; } body *:hover *:hover *:hover { outline-color: #883; } body *:hover *:hover *:hover *:hover { outline-color: #553; } body *:hover *:hover *:hover *:hover *:hover { outline-color: #333; } body *:hover *:hover *:hover *:hover *:hover *:hover { outline-color: #000; }
-
∞ CSS element inheritance spotter (for SASS)
//Used for testing where the outline for boxes are. Only works in modern browsers and IE8 //This is written in SASS body *:hover outline-style: dotted outline-width: 2px outline-color: #ee3 *:hover outline-color: #bb3 *:hover outline-color: #883 *:hover outline-color: #553 *:hover outline-color: #333 *:hover outline-color: #000
-
∞ CSS string parser for grabbing all 4 border values
var colorRegex = /#[1-90a-f]+/gi; //hex values only var borderColor = cssParse(opts.borderColor,colorRegex); var widthRegex = /[0-9]+/g; var borderWidth = cssParse(opts.borderWidth,widthRegex); function cssParse(css,reg){ //parses string into separate values for each side which is required for color anim and other uses var temp = css.match(reg),rtn = [],l = temp.length; if (l > 1) { rtn[0] = temp[0]; rtn[1] = temp[1]; rtn[2] = (l == 2) ? temp[0] : temp[2]; rtn[3] = (l == 4) ? temp[3] : temp[1]; } else rtn = [temp,temp,temp,temp]; return rtn; }
-
∞ javascript debug for console or browser (uses jquery)
function debug(a,tag) { var bugs="", header = "[functionName](" + (tag||"") + ")"; ($.isArray(a) || isObject(a)) ? $.each(a, function(i, val) { bugs = bugs +i + ":" + val + ", ";}) : bugs = a; if (window.console && window.console.log) { window.console.log(header + bugs); } else { if ($("#debug").size() == 0) $("<ul id='debug'></ul>").appendTo("body").css({border:"1px solid #ccf",position:"absolute",top:"10px",right:"10px",width:"300px",padding:"10px",listStyle:"square"}); $("<li>").css({margin:"0 0 5px"}).appendTo("#debug").append(header).wrapInner("<b></b>").append(" " + bugs); } }
-
∞ quick code to find smallest size
function getSmlr(a,b) {return ((a && a < b) || !b) ? a : b;}
-
∞ ceetip - a small tooltip jquery plugin that works with ceebox
// CeeTip function based on vtip by vertigo project http://www.vertigo-project.com/projects/vtip but changed into a function and modified to work with CeeBox (function($) { $.fn.ceetip = function(settings) { var option = $.extend({}, $.fn.ceetip.defaultSettings, settings); return this.each(function() { $this = $(this); $this.unbind("hover").hover( function(e) { this.t = this.title; this.title = ''; this.top = (e.pageY + option.yOffset); this.left = (e.pageX + option.xOffset); $('body').append( '<p id="ceetip"><img id="ceetipArrow" />' + this.t + '</p>' ); $('p#ceetip #ceetipArrow').attr("src", "/images/vtip_arrow.png").css({ position: 'absolute', top: '-10px', left: '5px', }); $('p#ceetip').css({ top:this.top+'px', left:this.left+'px', display: 'none', position: 'absolute', padding: '10px', font-size: '0.8em', backgroundColor: '#fff', border: option.border, '-moz-border-radius': '5px', '-webkit-border-radius': '5px', zIndex: '9999' }).fadeIn("slow"); }, function() { this.title = this.t; $("p#ceetip").fadeOut("slow").remove(); } ).mousemove( function(e) { this.top = (e.pageY + option.yOffset); this.left = (e.pageX + option.xOffset); $("p#ceetip").css("top", this.top+"px").css("left", this.left+"px"); } ); }) } $.fn.ceetip.defaultSettings = {xOffset:-12,yOffset:30,border:'1px solid #a6c9e2'} //default drops in right under the windows })(jQuery);
-
∞ Simple function for printing varibles when testing
function tester(stuff) { var i=0; var test=""; if ($.isArray(stuff)) { while (i<stuff.length) { test = test + stuff[i] + " | "; i=i+1; } } else { test = stuff + " | ";} $("#test").append(test) }
-
∞ allows for easy testing to see what type of data a variable contains.
function isFunction(a) { return typeof a == 'function'; } function isNull(a) { return typeof a == 'object' && !a; } function isNumber(a) { return typeof a == 'number' && isFinite(a); } function isObject(a) { return (typeof a == 'object' && a) || isFunction(a); }
-
∞ Get Page Size
function getPageSize(){ var de = document.documentElement; var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth; var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight; var pg = [w,h]; return pg; }
MySQL Cookbook