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> |
[MySQL] Batch update of all entries in table that match condition
Lest ye forget.
1 | UPDATE <table> SET <column>=<value> WHERE <condition>; |
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.
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'); ?>
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!
I hate Internet Explorer
Any and all versions for that matter.
Text rendering in Firefox:

Text rendering in Google Chrome:

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

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

