[ZF] Adding links to form elements

Clicks, there's always too many of them.

Now imagine a form with a hundred checkboxes. Sure, you can pre-check all of them or leave them empty, but it would be much easier for the user to have a "select all" and "select none" buttons.

For more efficiency, it's better to have one for each set of checkboxes, and there's nothing better than to put these links as a decorator to the form element containing the checkboxes.

$form_element = new Zend_Form_Element_MultiCheckbox(

	'name',

	array(

		'description'	=> '<a href="javascript: void();">Select all</a> <a href="javascript: void();">Select none</a>'

	)

);

Now that's nice, but instead of having links, the HTML code has been escaped and that's of no use at all.

There's an easy trick to this: just set the decorators!

'decorators'	=> array(

	'ViewHelper',

	array(

		'Description',

		array('escape' => FALSE)

	),

	'FormElements',

	'Form'

)

The important trick is to set the escape value to false, so that the HTML characters won't be converted.

And there we have it, two beautiful links that will same users a lot of hassle.

[ZF] Adding section titles in a Zend_Form

Do you have a Zend_Form with many elements and need to add section titles for it to be more user-friendly?

Nothing is as simple as this!

// Add section title
$personal_section = new Zend_Form_Element_Hidden('personal_section');
$personal_section->setLabel('Personal information');
$personal_section->setDecorators(
    array(
        'ViewHelper',
        'Description',
        'Errors',
        array('Label', array('tag' => 'h2'))
    )
);
$this->addElement($personal_section);

This basically creates a hidden input with a label, and we're just modifying this to use an H2 tag instead of the regular one. Not very nice technically, but very effective!

[CSS] Using "last-child" to apply style to last item of anything

I'm building a website and the menu is up there, working fine.

However, for it to be more user-friendly, I thought maybe I could put the login/logout button all the way to the right.

But there's a problem since I'm using Zend Framework, I can't assign a class to the <li> element, only to the <a> element.

As a normal working process, this list item is already always the last one, which makes it much easier to work with! I guess I could go ahead with some jQuery to detect this element and work around my problem, but then I discovered the "last-child" selector.

In my CSS file, I just added this:
#navigation UL LI:last-child {

    float: right;

}

The "last-child" selector will make the last element of the selected type (here, li) follow the defined styles.

And there we have it. Instead of the element always being last but anywhere on the menu tabs, now the login (or logout) tab is always all the way to the far right!

Note that this is not supported in all browsers, but it simply won't change anything in others. Just a little bonus for those users who can keep their stuff updated!