demsone’s gists

demsone / new_gist_file_0

Created November 28, 2013 14:17

This to upload themes etc loacally with wordpress

	1. Select the Hosts interface in MAMP.
	2. Choose the host and then look at the interface marked "Disk Location".
	3. Select the button "Permissions..."
	4. Change the Owner and Group to _www.
	5. Select the "Set" button and wait for the update to complete. Takes a while depending on the number of files that will be updated.

	6. DONE

demsone / new_gist_file

Created September 8, 2013 11:24

Google fonts


	Lato

	<link href='http://fonts.googleapis.com/css?family=Lato:400,300italic,300,100,100italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>

	font-family: 'Lato', sans-serif;

	Open Sans

	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300italic,300,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>

demsone / csscodes

Created August 11, 2013 07:26

10 CSS selectors you shouldn’t code without

	*

	The * selector may be the one you remember most easily but it’s often underused. What it does is style everything on the page and it’s great for creating a reset and also for creating some page defaults like the font family and size you wish to have.

	* {
	margin: 0;
	padding: 0;
	font-family: helvetica, arial, sans-serif;
	font-size: 16px;
	}

demsone / lightroom5

Created July 11, 2013 14:38

1160-4110-9594-8655-0255-9344

demsone / Centering

Created July 4, 2013 06:14

Centering Percentage Width/Height Elements

	body {
	background: #900;
	}

	.box {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 70%;

demsone / Make entire div clickable

Created June 19, 2013 00:36

Here’s an easy way to make the parent div of a link clickable. Let’s say you have this html code:

	<div class="myBox">
	blah blah blah.
	<a href="http://google.com">link</a>
	</div>

	The following lines of jQuery will make the entire div clickable:

	$(".myBox").click(function(){
	window.location=$(this).find("a").attr("href");
	return false;

demsone / Alternating Row Colors

Created June 19, 2013 00:35

On big lists or tables, alternating row colors can drastically improve readability. Here’s how to alternate row colors on a list of elements using some jQuery. You can use any HTML element you like, td, tr, li, etc…

	//jquery
	$('div:odd').css("background-color", "#F4F4F8");
	$('div:even').css("background-color", "#EFF1F1");


	//html example
	<div>Row 1</div>
	<div>Row 2</div>
	<div>Row 3</div>
	<div>Row 4</div>

demsone / Equalize heights of div elements

Created June 19, 2013 00:34

Equalizing heights of div elements is not possible (or very hacky) to do in pure CSS, so jQuery is here to help. The code below will automatically adjust the heights of div elements according to the higher one. Source: http://css-tricks.com/snippets/jquery/equalize-heights-of-divs/

	var maxHeight = 0;

	$("div").each(function(){
	if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
	});

	$("div").height(maxHeight);

demsone / Load content on scroll automatically

Created June 19, 2013 00:33

Some websites such as Twitter loads content on scroll. Which means that all content is dynamically loaded on a single page as long as you scroll down. Source: http://fatfolderdesign.com/173/content-load-on-scroll-with-jquery Here’s how you can replicate this effect on your website:

	var loading = false;
	$(window).scroll(function(){
	if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
	if(loading == false){
	loading = true;
	$('#loadingbar').css("display","block");
	$.get("load.php?start="+$('#loaded_max').val(), function(loaded){
	$('body').append(loaded);
	$('#loaded_max').val(parseInt($('#loaded_max').val())+50);
	$('#loadingbar').css("display","none");

demsone / Image resizing using jQuery

Created June 19, 2013 00:32

Although you should resize your images on server side (using PHP and GD for example) it can be useful to be able to resize images using jQuery. Here’s a handy code snippet to do it. Source: http://snipplr.com/view/62552/mage-resize/

	$(window).bind("load", function() {
	// IMAGE RESIZE
	$('#product_cat_list img').each(function() {
	var maxWidth = 120;
	var maxHeight = 120;
	var ratio = 0;
	var width = $(this).width();
	var height = $(this).height();

	if(width > maxWidth){