Messages

The template includes a complete set of messages styles, along with an API to display/remove them.

Styles

Messages

Standard message

<p class="message">Standard message</p>

Message with icon

<p class="message icon-speech">Standard message</p>
Close button

✕ Message with close button 

<p class="message">
	<a href="#" title="Hide message" class="close">✕</a>
	Message with close button
</p>

✕ Close button on hover only 

<p class="message">
	<a href="#" title="Hide message" class="close show-on-parent-hover">✕</a>
	Close button on hover only
</p>
Arrows

Message with block arrow 

<p class="message">
	<span class="block-arrow"><span></span></span>
	Arrow top
</p>
Stripes

Message with stripes 

<p class="message">
	<span class="dark-stripes"></span>
	Message with stripes
</p>

Big messages

The big message style may inherit from all message styles, and includes several specific features:

Basic big message 

<p class="big-message">Basic big message</p>

Big message with title
And a nice baseline, too. 

<p class="big-message">
	<strong>Big message with title</strong><br>
	And a nice baseline, too.
</p>

Big message with icon
Color is inherited from baseline text 

<p class="big-message">
	<span class="big-message-icon icon-speech"></span>
	<strong>Big message with icon</strong><br>
	Color is inherited from baseline text
</p>

Here I am! Big message with icon on the right
May be colored and have a baseline, too! 

<p class="big-message">
	<span class="big-message-icon icon-speech right-side with-text blue">Here I am!</span>
	<strong>Big message with icon on the right</strong><br>
	May be colored and have a baseline, too!
</p>

Messages API

The template includes a complete API to display and hide messages:

Required plugin

This feature requires the plugin file js/developr.message.js

Text

Position

Inside block

Color

Arrow

Close button

after milliseconds

I'm just a box.

Use the options to create your own messages

Methods

message(message, options)

Display a message on the target element

Parameters

@param string message the text or html message to display
@param object options - optional (see defaults for a complete list)

Return

@return jQuery the messages nodes

clearMessages(message, animate)

Clear element's message(s)

Parameters

@param string message the message to remove (can be omitted)
@param boolean animate use an animation (foldAndRemove) to remove the messages (default: false)

Return

@return jQuery the chain

Options reference

The defaults may be modified at runtime in $.fn.message.defaults, and options may be passed inline using the data-message-options attribute
append
Whether to append the message element or to insert it next to the target
Type: boolean
Default: true
position
Position in or next the target: 'top' or 'bottom'
Type: string
Default: 'top'
arrow
Arrow direction or false for none
Type: string|boolean
Default: false
node
Node type for the message (tip: 'p' has bottom-margin, 'a' and 'div' have none)
Type: string
Default: 'p'
link
Link when the node type is 'a'
Type: string
Default: '#'
classes
Extra classes (colors...)
Type: array
Default: []
stripes
Enable animated stripes
Type: boolean
Default: false
animatedStripes
True for animated stripes (only on compatible browsers)
Type: boolean
Default: true
darkStripes
True for dark stripes, false for white stripes
Type: boolean
Default: true
stripesSize
Stripes size: 'big', 'normal' or 'thin'
Type: string
Default: 'normal'
simpler
Use true to remove rounded corners and bewel
Type: boolean
Default: false
closable
Enable a close button
Type: boolean
Default: true
showCloseOnHover
Show the close button only on hover
Type: boolean
Default: true
animate
Animate the message's occurrence
Type: boolean
Default: true
animateSpeed
Speed of animation (any jQuery valid value)
Type: string|int
Default: 'fast'
groupSimilar
Group similar messages
Type: boolean
Default: true
groupCount
Display a bubble with the count of grouped messages
Type: boolean
Default: true
inset
Should close and count bubbles be inside the message?
Type: boolean
Default: false
autoClose
Auto-close after specified delay (in milliseconds), or false to disable
Type: int|boolean
Default: false