Transparent message is a new way to display information on a web page.
Instead of using the ugly alert() javascript function, it shows the message in a overlay layer of your HTML page.
It includes a Ruby On Rails helper to display flash[:notice/:error] in just one line!!

This overlay can be transparent or not (I think transparent is better, the user will really understand that it's just an information message)

  • You can customize the look and feel.
  • It does not alter your layout .
  • Easy rails integration with helpers.
  • Can be used on form submit, info messages or whatever you want to do with it :).

It's has been tested on IE 6, Firefox (PC,Mac), Opera 9, Safari and Camino.

Download (RSS)

Examples

Documentation

TransparentMessage constructor:
Property Default Value Description
top null Top position in pixels of the transparent message. It takes care of the horizontal scroll bar position. If the value is null the message will be centered vertically
left null Left position in pixels of the transparent message. It takes care of the vertical scroll bar position. If the value is null the message will be centered horizontally
showEffect Effect.Appear Scriptaculous effect used to show the message.
showEffectOptions {duration: 0.2} Scriptaculous effect options used to show the message.
hideEffect Effect.Fade Scriptaculous effect used to hide the message.
hideEffectOptions {duration: 0.2} Scriptaculous effect options used to hide the message.
showMode "onload" Values could be
  • onload: This effect will start after having loaded the page (window.onload event)
  • now: This effect start at the Transparent object creation (the element must be already loaded)
hideMode "timeout" Values could be
  • timeout: The message will be hidden automatically after a timeout
  • click: The message will be hidden after a mouse click event (and after a timeout)
  • mousemove: The message will be hidden after a mouse move event (and after a timeout)
  • none: The message will never be hidden automatically
hideDelay 2 Number of seconds to wait before starting the hideEffect. This timeout start after event set in hideMode.
insideElement {id: null, width: "auto", height: "auto"} Displays transparent inside an HTML element given by its id. If width or height are set to auto, the TM will fit width ot height element.
afterElement null Displays transparent position is relative to the bottom of afterElement.

Author

This class has been done by Sébastien Gruhier (aka Mr Proto)

Support my work :)

Thanks to