Archive for November, 2009

jQuery Formhints plugin

November 29, 2009 Leave a comment

A very simple jquery plugin for showing hints right next to form inputs. This is a jquery adaptation of the excellent javascript & css form hint script here.

I’ve made it where the form hints show up when you mouse over the input elements. You can also make a small edit to the script so that the formhints only show when the user actually clicks on an input element. Just change the “input.mouseover” to an “”.


	$.fn.formhints = function(params){
		$(":input", this).each(
					var input = $(this);
					if("span").length > 0)
					{ // if this input element has a span next to it
						$("span")).hide();// initially hide all
						input.mouseover(function() {
							var pos = $(this).position();
							var left = pos.left + $(this).width() + 30;
							$("span")).css({'display':'inline', 'top''px',
						input.mouseout(function() {


In order to use it, the form html needs to be modified. Each input element with a hint must have an adjacent “span” element which contains the hint text that will be displayed to the user. Here’s a sample input element:

<div class="input text required">
	<label for="ScriptName">Script name</label>
	<input id="ScriptName" maxlength="200" name="data[Script][name]" type="text" />
	<span class="hint">
		Name of the script
		<span class="hint-pointer"> </span>

Note the span element after the input element. It will contain the hint that will be displayed to the user on mouseover. You can apply css styles to the hint to make it look nice. I’m just reusing the hint class developed by askthecssguy for his script which looks quite nice.

Once you’ve gotten the span elements added to your form, add this one line to your page load function to get your form ready for action.


And that’s it. Make sure to replace the “formidhere” with the id of your form.

Here’s the css I used for my form hint and the final result.

.hint {
  position: absolute;
  width: 200px;
  margin-top: -4px;
  border: 1px solid #c93;
  padding: 10px 12px;
  background: #ffc url(../img/hint_pointer.gif) no-repeat -100px -100px;

.hint .hint-pointer {
    position: absolute;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 19px;
    background: url(../img/hint_pointer.gif) left top no-repeat;


CakePHP paginator – Identifying sort direction and column

November 28, 2009 Leave a comment

I love CakePHP’s paginator. Its fairly easy to use and packs a punch of features. The one missing feature, though, is that there is no automagic mechanism to tell the user what column is being sorted on and in what direction. But its easy enough to do. I came up with this paginator header element that will output markup for the table header and shows what column is sorted.

Here’s the code for the element:

// required 1 input: $fields = fields of the model and corresponding text to display as column header
$paginator->options(array('url' => $this->params['pass']));
		foreach($fields as $title => $field)
<?php echo $paginator->sort($title, $field, array('class' => ($field == $paginator->sortKey()) ? $paginator->sortDir() : '')); ?>
		<?php 		} 		?>

Basically, it just outputs table header tags containing the sorting link for the paginator to sort on that column. Adding the class attribute allows us to show two separate images based on the sort direction. Non-sortable columns can be added directly into the html. To use it, you have to create an array that contains the title for each column as key and the corresponding field in your model as the value. For example, if you had a Person model, you would call the element like this:

$fields = array('ID' => '',
					'Name' => 'Person.Name',
					'Username' => 'Person.Username',
					'Title' => 'Person.Title');
		echo $this->element('paginator_header', array('fields' => $fields));

How it works:

It finds the the name of the column that is currently being sorted and the sort direction from the paginator. Then it applies an “asc” or “desc” css class to the markup of that column. So, you also need to define the css for these “asc” and “desc” css classes. What you would normally want is to put an up or down arrow images next to the column header.

Here’s two sample classes I used in my application:

a.asc {
	padding-right: 20px;
	background: url('../img/arrow_up.png') no-repeat top right;

a.desc {
	padding-right: 20px;
	background: url('../img/arrow_down.png') no-repeat top right;
Tags: ,

Installing SVN server

November 25, 2009 Leave a comment
  1. Install latest Apache http server
  2. Install SVN
    1. Make sure to install mod_dav_svn and mod_authz_svn. mod_authz_svn is only needed if you plan on doing fine-grained directory permissions on your SVN repositories
    2. Load the mod_dav_svn and mod_authz_svn modules in httpd.conf. You may also need to load the mod_dav module if you don’t have it yet:
    LoadModule dav_module modules/
    LoadModule dav_svn_module modules/ 
    LoadModule authz_svn_module modules/ 

    3. Modify apache httpd.conf to add the following:

    <Location svn> 
    DAV svn 
    SVNParentPath D:/svn 
    SVNListParentPath on 
    AuthType Basic 
    AuthName &quot;Subversion Repository&quot; 
    AuthUserFile passwd.txt 
    Require valid-user

    4. You should now be able to browse to your SVN repos at

    5. If you would like to enable anonymous checkouts, replace the Require valid-user above with the following. Check-ins will still require authentication.

    # For any operations other than these, require an authenticated user. 
    Require valid-user

    6. If you are not going to be using per-directory access control, you might as well turn off path authorization (it’s on by default). This improves performance of your server, since its not checking every single path requested to see if the user is authorized to access it. Add this line to turn it off:

    SVNPathAuthz off

    7. Install PHP

    8. Install an SVN browser, WebSVN is the best I’ve seen. It’s built on PHP and works well.

    9. Subclipse is the best SVN client for use with Eclipse IDE

    10. TortoiseSVN is a good SVN windows explorer client

Tags: , ,
%d bloggers like this: