jQuery-UI arrow boxes

This blog describes how to add arrows to the standard jQuery-UI error and highlight boxes. Arrows can be either from the left, right, top or bottom.

jquery-ui arrow boxes

Standard Boxes

As per http://jqueryui.com/themeroller/ the standard boxes are as so:

standard jQuery UI boxes

 

 

 

Arrow Boxes

The arrow boxes can be created in the same way except that the classes

arrow_box and left are specified also (where left can be either, left, right, top or bottom)

 

right

 

top

 

bottom

 

Note that the only difference in creating them is the class (left, right, top, bottom).

Classes inlineBlock and pad10px are self explanatory and not mandatory.

The following CSS is required. It must be included in the page after the standard jQuery-UI CSS file.

CSS

 

Here’s a demo. Just download and unzip.

jQuery_ui_arrow_box_demo

Sizing the arrows

In order to do this, the CSS (above) will have to be changed. Basically, wherever 11px or 10px is specified, change accordingly.

The CSS for this is derived direct from  http://cssarrowplease.com/ and adjusted to be applicable for the standard jQuery-UI error and highlight boxes.

Experimenting at http://cssarrowplease.com/ will help allot.

Custom Colors

There are just four colours used throughout the CSS, red-background, red-border, yellow-background and yellow-border. Adjust as required.

(…and yep, LESS or something to that effect would be very applicable here….)

 

As ever, comments, opinions, corrections etc. all very welcome.