static void

JS Effects Library

See also mu.js (core forms, documentation) and mu2.js (viewport. documentation).

mufx.js is simple effects: Fade; Drag, msgBox, ToolTip, Preview. Use when Scriptaculous is overkill. The only dependency is mu.addEvent (substitute any other addEvent if required). It attaches itself to mu object (which need not exist).

• mu.Fade.fadeOut(id, [secs]) , mu.Fade.fadeOut(id, [secs]), mu.Fade.setOpacity(id, opacity)
  Default fades takes 1 second (10fps)
  fadeIn- If an object is display:none, set opacity=0 and make it display: (otherwise you wouldn't see it)
  fadeIn and FadeOut are locked- if an operation is in progress, no additional fades are allowed
  Both methods return false if they cannot find target or target is locked.
• mu.Drag.init(id, handleId) - attaches event handler (mu.Drag.start) for dragging
  Does not use drop targets. HandleId is optional (if no handle, you drag the entire object)
  Uses mu.addEvent (drop-in any other addEvent if required)
• mu.msgBox.createBox(title, str) -create a div with title (dragable handle). str can be html.
  Generated box needs the styles MsgBox, MsgBoxContent, MsgBoxTitle, MsgBoxClose, image MsgBoxCloseButton.gif
  

  .MsgBox { border: 1px solid ThreeDShadow; }
  .MsgBoxContent { padding: 20px;background-color: #fff; color: #000;}
  .MsgBoxTitle {
  	padding: 3px;
  	height: 22px; /*to fit image*/
  	color: captiontext;
  	background-color: activecaption;
  	background-image: url(MsgBoxTitleBar.gif);
  	background-repeat: repeat-x;
  }
  span.MsgBoxClose
  {	/*put it on the right*/
  	position: absolute;
  	top: 0;
  	right: 0;
  	cursor: pointer;
  }

  mu.msgBox.show(id, handeId) - shows an existing (display:none) div. HandleId is optional
  msgBox is centered in the screen, fades in and is dragable (using handle if present)
  IE5/6: very wide; IE7: titlebar is width of text only, so there's a width set in code
  Uses mu.Fade and mu.Drag (the latter uses mu.addEvent)
• mu.ToolTip.show(id, message, [secs]). Message can be html (for instance, include an image).
  It is shown for a default 4 seconds. For no timeout pass 0 seconds, get the toolTipId returned and hide it with mu.ToolTip.hide(toolTipId) Permanent Tooltip Hide
  Simple use: onmouseover="mu.ToolTip.show(this, 'Cool')" onmouseout="mu.ToolTip.hide(this)"
  Uses mu.Fade during hide (alternatively use cleanUp method instead)
  Use the ToolTip class such as this:

  .ToolTip {
  background-color:cornsilk;
  color:black;
  border:1px solid gray;
  padding:2px;
  font-size:12px;
  font-weight:normal;
  }

• mu.Preview.init during load, then images with class "Thumbnail" show a larger preview. Uses ToolTip and an image/url naming convention.
  

---