Messages test

HTML Messages

Messages rendered directly using HTML:

Default:

This is a default message.

It is pitch black. You are likely to be eaten by a grue.

Warning:

It's dangerous to go alone

Here, take this.

Error:

Woah! Something went wrong!

The savepoints are really far apart in this level. Test link.

Confirmation:

Thank you Mario!

But the Princess is in another castle.

Change:

We'll give you a hint to avoid that problem next time.

But first you have to catch the Help Cat with that stupid Wiimote.

Actions in messages

So this is what 1985 looked like...

It appears your internet connection is offline right now. Your messages may not send.

Change your timezone

Your computer's timezone setting does not match your user preference setting.

Some buttons and links

These are all the possible button and link types. Not all of them are designed to work inside a message. Messages should contain only links or simple link-buttons.

Some unlisted things, likeA link,Another link,A disabled link,An external link, andA link button.

Alter the button type
Alter the button variant
Alter the button icons
Alter the button state

Deprecated

Hint:

We'll give you a hint to avoid that problem next time.

But first you have to catch the Help Cat with that stupid Wiimote.

Generic:

This is a generic message.

It is pitch black. You are likely to be eaten by a grue.

Success:

Thank you Mario!

But the Princess is in another castle.

Content variations

Success:

Just the title

Just icon and text. Known issue that this doesn't line up perfectly, markup pattern needs a change.

Multple paragraphs

Paragraph.

Paragraph.

Paragraph.

Title and list

  • Foo
  • Foo
  • Foo
Somesuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuperduuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuperloooooooooooooooooooooooooooooooooooooooooooooooooooooongmessage.

Javascript Messages - ID test

HTML Messages - Closeable test

Shows a hint message rendered using HTML.

This is a title in a message.

Text.

Text.

Javascript Messages - Closeable test

Shows a closeable hint message rendered using Javascript

Test: check messages don't show over aor

Javascript Messages - insert before/after test

Test the option to choose if the js-inserted message is appended or prepended in the target location (marked with dotted border).

This element should be in the middle.

Javascript Messages - no context specified

Shows a success message and an info message called using javascript without specifying a context

Javascript Messages - Context Supplied

Demonstrates how to display a message while supply a context

Javascript Messages - Context Supplied

Demonstrates how to display a message while supply a context

HTML Messages - Fade away messages

Shows a message that fades away automatically in 5 seconds. Place the mouse over the message to prevent this.

This is a title in a message.

Bye bye, message.

Javascript Messages - Fade away messages

Shows a message that fades away automatically.

Messages that fades away should be closeable too.

Messages will not fade out if the mouse is over them or the focus is inside the message.

Messages can fade away using any delay.

The fade away animation can have any duration