pixelhandler

Pushin' & pullin' pixels on the net

Fix Bad Characters † After Mysqldump and Import Utf-8

Fix bad characters † after mysqldump and import 
mysqldump --default-character-set=latin1 --opt -h localhost -u
export -p export > export.sql

replace "CHARSET=latin1" "CHARSET=utf8" "SET NAMES latin1" "SET NAMES
utf8" < export.sql > export-utf8.sql

mysql --user=root -p --host=localhost --default-character-set=utf8
cms_production < export-utf8.sql

Insert Facebook Like Button With Current Page’s URL

If you are not using the full facebook .js api then here is a lightweight script to insert a facebook like button into a div (with id, ‘social’ ) [this example is using prototype].
facebook like button (insert_facebook_like.js) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// '$' is prototype library

(function(){

	// use location for facebook like button

	var $pg = {

		url : unescape(document.location.href),

		social : $('social') // id to place like button in

	}

	$pg.fb = '&lt;div id=&quot;facebook&quot;&gt;&lt;iframe';

	$pg.fb += ' src=&quot;http://www.facebook.com/plugins/like.php?href=';

	$pg.fb += $page.url;

	$pg.fb += '&amp;amp;layout=button_count&amp;amp;show_faces=true&amp;amp;';

	$pg.fb += 'width=90&amp;amp;action=like&amp;amp;colorscheme=light&amp;amp';

	$pg.fb += 'height=30&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; style=';

	$pg.fb += '&quot;border:none; overflow:hidden; width:90px; ';

	$pg.fb += 'height:30px;&quot; allowTransparency=&quot;true&quot;&gt;';

	$pg.fb += '&lt;/iframe&gt;&lt;/div&gt;';

	if ($pg.social) {

		$pg.social.insert({ 'bottom' : $pg.fb });

	};

})($);

<div id="social"></div>

Use Mysql on the Command Line When Developing With MAMP

Developing with MAMP, if so then use mysql on the command line (terminal app). Update your ~/.profile file to use the MAMP mysql PATH. If you use textmate… 
mate ~/.profile
Edit your path in .profile adding /Applications/MAMP/Library/bin:$PATH 
export PATH="/usr/local/bin:/usr/local/mysql/bin:/Applications/MAMP/Library/bin:$PATH"
Also after you start MAMP to use mysql on command line : 
sudo ln -s /Applications/MAMP/tmp/mysql/mysql.sock /tmp/mysql.sock

Images Loaded or Not? Check With JavaScript

For sites with a CMS or some easy tool to upload and break images it can be helpful to test if the images are loaded, especially if you have additional behavior for visitors to interact with your images, like a lightbox view.

Target Specific Browsers With Css Class on Body Element

If you have some time a great blog to browse is paulirish.com ; Paul Irish has a boilerplate project for html5 that uses the following example to target specific web browsers using a css class. CSS definitions and JavaScript behavior can be hooked into the page referencing the classes, e.g. ie7, ie8, etc. 
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]>		<body class="ie7"> <![endif]-->
<!--[if IE 8 ]>		<body class="ie8"> <![endif]-->
<!--[if IE 9 ]>		<body class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->

Apache Directive to Combine .js and .css Files

I like to keep CSS files named separately like ; reset.css, elements.css, classes.css, layout.css and so on. Also, I like to keep jQuery plugins in individual files. This apache directive allows me to combine .js and .css files into a single file. This is a great performance advantage, less http requests on page load; see Google’s best practices for tips on combining external css and js.

Text in WordPress Search Input Fields

Using jQuery to add the text ‘Search’ to the search input box in WordPress; when user enters text input to search the helper text is removed : 
// set Search input to default text
$('#s').attr('value','Search');

// clear search input form
$('#s').focus(function(){
	$('#s').val('');
});