Ramin Hossaini's Blog

27Apr/10

jQuery.collapsible plugin

Note: This plug-in is no longer being maintained and is provided as is.

Introduction

I wrote my first jQuery plugin today and figured other people might find it useful too.

The plugin adds expand/collapse functionality to divs and also saves the state using the jQuery cookie plugin

Changelog

  • 15 Jun 2010
    • You can now specify that a module's default state is collapsed by adding 'collapsed' to the class. For more information, look at the example given below.
  • 04 May 2010
    • Changed expand/collapse icons to sprite
    • Can now have multiple groups of collapsible boxes by giving each
      a descriptive identifier
  • 27 Apr 2010
    • First release

Demo

Click here for a demo

Download

Download Latest Version (jquery.collapsible.latest.zip)

Setup

Add includes to the head-section:

1
2
3
4
<script type='text/javascript' src="./js/jquery-1.4.2.min.js"></script>
<script type='text/javascript' src="./js/jquery.cookie.js"></script>
<script type='text/javascript' src="./js/jquery.collapsible.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="./css/demo.css" />

Add the HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="module"> <!-- only important for styling -->
	<div class="header"> <!-- must have a class name -->
		<h1>Header #1</h1>
	</div>
	<div class="content"> <!-- the 'content' class is only for styling -->
		<p>Content comes here</p>
	</div>
</div>
 
<div class="module">
	<div class="header collapsed"> <!-- this will be collapsed by default (unless the cookie says otherwise) -->
		<h1>Header #2</h1>
	</div>
	<div class="content">
		<p>Content comes here</p>
	</div>
</div>
 
<div class="module">
	<div class="header">
		<h1>Header #3</h1>
	</div>
	<div class="content">
		<p>Content comes here</p>
	</div>
</div>

Initialize the Javascript:

1
2
3
4
5
<script type='text/javascript'>
$(document).ready(function() {
	$.collapsible(".module .header");
});
</script>
25Apr/10

[MySQL] Batch update of all entries in table that match condition

Lest ye forget.

1
UPDATE <table> SET <column>=<value> WHERE <condition>;
Tagged as: No Comments
18Apr/10

Migrating WordPress

Here are a couple steps I follow each time I move a WordPress instance from one environment to another. I'll assume you're moving from Development to Production.

Database configuration

A migration usually involves changing the database configuration in wp-config.php.

Instead of having to modify the file every time, you could just modify wp-config.php to include something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
if ($_SERVER['HTTP_HOST'] == 'dev') //could be 'localhost' or anything else
{
	define('DB_NAME', 'dev_db_name');
	define('DB_USER', 'dev_user');
	define('DB_PASSWORD', 'dev_password');
	define('DB_HOST', 'localhost');
	define('DB_CHARSET', 'utf8');
	define('DB_COLLATE', '');
}
else
{
	//production config:
	define('DB_NAME', 'prod_db_name');
	define('DB_USER', 'prod_user');
	define('DB_PASSWORD', 'prod_password');
	define('DB_HOST', 'prod_server');
	define('DB_CHARSET', 'utf8');
	define('DB_COLLATE', '');
}

That's one less thing to worry about.

Database Export and Clean-up

I like using PHPMyAdmin for quickly exporting and importing between databases. But regardless of what tool you use, WordPress stores the full URL in the database (something I find very annoying) so you'll also have to clean-up your database - these SQL commands have served me well:

1
2
3
4
5
6
7
8
9
10
11
--
-- run after doing an import
--
UPDATE wp_options SET option_value = REPLACE(option_value, 'http://dev_host', 'http://www.prod_domain') 
WHERE option_name = 'home' OR option_name = 'siteurl';
 
UPDATE wp_posts SET guid = REPLACE(guid, 'http://dev_host','http://www.prod_domain');
 
UPDATE wp_posts SET post_content = REPLACE(post_content, 'http://dev_host', 'http://www.prod_domain');
 
UPDATE wp_options SET option_value = REPLACE(option_value, 'http://dev_host', 'http://www.prod_domain');

.htaccess

Depending on how your development environment differs from production, you might also have to change your .htaccess file. You could of course just edit the file, but I find the easiest for me is to:

  • Log into the WordPress admin (/wp-admin)
  • Expand the Settings tab, then click on Permalinks
  • Clicking on "Save changes" re-writes the .htaccess file

This is a tried and tested method I've been using a lot - but I'm curious to know how you do it. There might be some great plugins or tools that do all (or most) of this for you.

11Mar/10

Design Inspiration: Maryland Security Professionals

http://www.marylandsecurity.net/

9Jan/10

Stop WordPress from adding p and br tags

Even without the visual-editor, WordPress has a habit of adding <p> and <br/> tags

Add this to your templates/pages/whatever and it should take care of the problem.

<?php remove_filter('the_content', 'wpautop'); ?>
Tagged as: No Comments
10Oct/09

New homepage design

I've redesigned ramin-hossaini.com. I've re-designed it to be a portal with links to my ever decreasing number of projects, and social-networks.

I've kept the design minimalistic and simple. Everything is on a single page with lots of AJAX and Javascript to go with it.

You might notice that there's a 'loader' too - I'm still contemplating keeping it or getting rid of it.

Update:Got rid of the annoying, buggy loader!


home1

Tagged as: No Comments
5Oct/09

I hate Internet Explorer

Any and all versions for that matter.

Text rendering in Firefox:

firefox

Text rendering in Google Chrome:

chrome

Text rendering in Internet Explorer 8 - WTF is this?!

IE

Ok, I admit: I'm using the text-shadow property... but still!

Private
Page 1 of 41234
Bear