Archive

Posts Tagged ‘programming’

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 “input.click”.

(function($){

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

})(jQuery);

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>
	</span></div>

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.

$(document).ready(function(){
	$("#formidhere").formhints();
});

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;

}
Advertisements

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:

<?php
// 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:

<?php 		
$fields = array('ID' => 'Person.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: ,
%d bloggers like this: