Mambo API

[Summary view] [Print] [Text view]

   1  /* This notice must be untouched at all times.
   2  
   3  wz_tooltip.js    v. 3.26
   4  
   5  The latest version is available at
   6  http://www.walterzorn.com
   7  or http://www.devira.com
   8  or http://www.walterzorn.de
   9  
  10  Copyright (c) 2002-2004 Walter Zorn. All rights reserved.
  11  Created 1. 12. 2002 by Walter Zorn (Web: http://www.walterzorn.com )
  12  Last modified: 10. 10. 2004
  13  
  14  Cross-browser tooltips working even in Opera 5 and 6,
  15  as well as in NN 4, Gecko-Browsers, IE4+, Opera 7 and Konqueror.
  16  No onmouseouts required.
  17  Appearance of tooltips can be individually configured
  18  via commands within the onmouseovers.
  19  
  20  LICENSE: LGPL
  21  
  22  This library is free software; you can redistribute it and/or
  23  modify it under the terms of the GNU Lesser General Public
  24  License (LGPL) as published by the Free Software Foundation; either
  25  version 2.1 of the License, or (at your option) any later version.
  26  
  27  This library is distributed in the hope that it will be useful,
  28  but WITHOUT ANY WARRANTY; without even the implied warranty of
  29  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
  30  
  31  For more details on the GNU Lesser General Public License,
  32  see http://www.gnu.org/copyleft/lesser.html
  33  */
  34  
  35  
  36  
  37  ////////////////  GLOBAL TOOPTIP CONFIGURATION  /////////////////////
  38  var ttBgColor      = "#e6ecff";
  39  var ttBgImg        = "";           // path to background image;
  40  var ttBorderColor  = "#003399";
  41  var ttBorderWidth  = 1;
  42  var ttDelay        = 500;          // time span until tooltip shows up [milliseconds]
  43  var ttFontColor    = "#000066";
  44  var ttFontFace     = "arial,helvetica,sans-serif";
  45  var ttFontSize     = "11px";
  46  var ttFontWeight   = "normal";     // alternative is "bold";
  47  var ttOffsetX      = 8;            // horizontal offset of left-top corner from mousepointer
  48  var ttOffsetY      = 19;           // vertical offset                   "
  49  var ttPadding      = 3;            // spacing between border and content
  50  var ttShadowColor  = "";
  51  var ttShadowWidth  = 0;
  52  var ttTemp         = 0;            // time span after which the tooltip disappears; 0 (zero) means "infinite timespan"
  53  var ttTitleColor   = "#ffffff";    // color of caption text
  54  var ttWidth        = 300;
  55  ////////////////////  END OF TOOLTIP CONFIG  ////////////////////////
  56  
  57  
  58  
  59  //////////////  TAGS WITH TOOLTIP FUNCTIONALITY  ////////////////////
  60  // List may be extended or shortened:
  61  var tt_tags = new Array("a","area","b","big","caption","center","code","dd","div","dl","dt","em","h1","h2","h3","h4","h5","h6","i","img","input","li","map","ol","p","pre","s","small","span","strike","strong","sub","sup","table","td","th","tr","tt","u","var","ul","layer");
  62  /////////////////////////////////////////////////////////////////////
  63  
  64  
  65  
  66  ///////// DON'T CHANGE ANYTHING BELOW THIS LINE /////////////////////
  67  var tt_obj,                // current tooltip
  68  tt_objW = 0, tt_objH = 0,  // width and height of tt_obj
  69  tt_objX = 0, tt_objY = 0,
  70  tt_offX = 0, tt_offY = 0,
  71  xlim = 0, ylim = 0,        // right and bottom borders of visible client area
  72  tt_above = false,          // true if T_ABOVE cmd
  73  tt_sticky = false,         // tt_obj sticky?
  74  tt_wait = false,
  75  tt_vis = false,            // tooltip visibility flag
  76  tt_dwn = false,            // true while tooltip below mousepointer
  77  tt_u = "undefined",
  78  tt_inputs = new Array();   // drop-down-boxes to be hidden in IE
  79  
  80  
  81  var tt_db = (document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body? document.body : null,
  82  tt_n = navigator.userAgent.toLowerCase();
  83  
  84  // Browser flags
  85  var tt_op = !!(window.opera && document.getElementById),
  86  tt_op6 = tt_op && !document.defaultView,
  87  tt_ie = tt_n.indexOf("msie") != -1 && document.all && tt_db && !tt_op,
  88  tt_n4 = (document.layers && typeof document.classes != "undefined"),
  89  tt_n6 = (!tt_op && document.defaultView && typeof document.defaultView.getComputedStyle != "undefined"),
  90  tt_w3c = !tt_ie && !tt_n6 && !tt_op && document.getElementById;
  91  
  92  tt_n = "";
  93  
  94  
  95  function tt_Int(t_x)
  96  {
  97      var t_y;
  98      return isNaN(t_y = parseInt(t_x))? 0 : t_y;
  99  }
 100  
 101  function wzReplace(t_x, t_y)
 102  {
 103      var t_ret = "",
 104      t_str = this,
 105      t_xI;
 106      while ((t_xI = t_str.indexOf(t_x)) != -1)
 107      {
 108          t_ret += t_str.substring(0, t_xI) + t_y;
 109          t_str = t_str.substring(t_xI + t_x.length);
 110      }
 111      return t_ret+t_str;
 112  }
 113  String.prototype.wzReplace = wzReplace;
 114  
 115  function tt_N4Tags(tagtyp, t_d, t_y)
 116  {
 117      t_d = t_d || document;
 118      t_y = t_y || new Array();
 119      var t_x = (tagtyp=="a")? t_d.links : t_d.layers;
 120      for (var z = t_x.length; z--;) t_y[t_y.length] = t_x[z];
 121      for (var z = t_d.layers.length; z--;) t_y = tt_N4Tags(tagtyp, t_d.layers[z].document, t_y);
 122      return t_y;
 123  }
 124  
 125  function tt_GetSelects()
 126  {
 127      if (!tt_op6 && !tt_ie) return;
 128      var t_s = tt_op6? "input" : "select";
 129      if (document.all)
 130      {
 131          var t_i = document.all.tags(t_s).length; while (t_i--)
 132              tt_inputs[t_i] = document.all.tags(t_s)[t_i];
 133      }
 134      else if (document.getElementsByTagName)
 135      {
 136          var t_i = document.getElementsByTagName(t_s).length; while (t_i--)
 137              tt_inputs[t_i] = document.getElementsByTagName(t_s)[t_i];
 138      }
 139      var t_i = tt_inputs.length; while (t_i--)
 140      {
 141          tt_inputs[t_i].x = 0;
 142          tt_inputs[t_i].y = 0;
 143          var t_o = tt_inputs[t_i];
 144          while (t_o)
 145          {
 146              tt_inputs[t_i].x += t_o.offsetLeft || 0;
 147              tt_inputs[t_i].y += t_o.offsetTop|| 0;
 148              t_o = t_o.offsetParent;
 149          }
 150      }
 151  }
 152  
 153  function tt_Htm(tt, t_id, txt)
 154  {
 155      var t_bgc = (typeof tt.T_BGCOLOR != tt_u)? tt.T_BGCOLOR : ttBgColor,
 156      t_bgimg   = (typeof tt.T_BGIMG != tt_u)? tt.T_BGIMG : ttBgImg,
 157      t_bc      = (typeof tt.T_BORDERCOLOR != tt_u)? tt.T_BORDERCOLOR : ttBorderColor,
 158      t_bw      = (typeof tt.T_BORDERWIDTH != tt_u)? tt.T_BORDERWIDTH : ttBorderWidth,
 159      t_ff      = (typeof tt.T_FONTFACE != tt_u)? tt.T_FONTFACE : ttFontFace,
 160      t_fc      = (typeof tt.T_FONTCOLOR != tt_u)? tt.T_FONTCOLOR : ttFontColor,
 161      t_fsz     = (typeof tt.T_FONTSIZE != tt_u)? tt.T_FONTSIZE : ttFontSize,
 162      t_fwght   = (typeof tt.T_FONTWEIGHT != tt_u)? tt.T_FONTWEIGHT : ttFontWeight,
 163      t_padd    = (typeof tt.T_PADDING != tt_u)? tt.T_PADDING : ttPadding,
 164      t_shc     = (typeof tt.T_SHADOWCOLOR != tt_u)? tt.T_SHADOWCOLOR : (ttShadowColor || 0),
 165      t_shw     = (typeof tt.T_SHADOWWIDTH != tt_u)? tt.T_SHADOWWIDTH : (ttShadowWidth || 0),
 166      t_tit     = (typeof tt.T_TITLE != tt_u)? tt.T_TITLE : "",
 167      t_titc    = (typeof tt.T_TITLECOLOR != tt_u)? tt.T_TITLECOLOR : ttTitleColor,
 168      t_w       = (typeof tt.T_WIDTH != tt_u)? tt.T_WIDTH  : ttWidth;
 169      if (t_shc || t_shw)
 170      {
 171          t_shc = t_shc || "#cccccc";
 172          t_shw = t_shw || 3;
 173      }
 174      if (tt_n4 && (t_fsz == "10px" || t_fsz == "11px")) t_fsz = "12px";
 175  
 176  
 177      var t_y = '<div id="' + t_id + '" style="position:absolute;z-index:1010;';
 178      t_y += 'left:0px;top:0px;width:' + (t_w+t_shw) + 'px;visibility:' + (tt_n4? 'hide' : 'hidden') + ';">';
 179      t_y += '<table border="0" cellpadding="0" cellspacing="0"' + (t_bc? (' bgcolor="' + t_bc + '"') : '') + ' width="' + t_w + '">';
 180      if (t_tit)
 181      {
 182          t_y += '<tr><td style="padding-left:3px;"><font color="' + t_titc + '" face="' + t_ff + '" ';
 183          t_y += 'style="color:' + t_titc + ';font-family:' + t_ff + ';font-size:' + t_fsz + ';"><b>';
 184          t_y += (tt_n4? '&nbsp;' : '') + t_tit + '<\/b><\/font><\/td><\/tr>';
 185      }
 186      t_y += '<tr><td><table border="0" cellpadding="' + t_padd + '" cellspacing="' + t_bw + '" width="100%">';
 187      t_y += '<tr><td' + (t_bgc? (' bgcolor="' + t_bgc + '"') : '') + (t_bgimg? ' background="' + t_bgimg + '"' : '');
 188      if (tt_n6) t_y += ' style="padding:' + t_padd + 'px;"';
 189      t_y += '><font color="' + t_fc + '" face="' + t_ff + '"';
 190      t_y += ' style="color:' + t_fc + ';font-family:' + t_ff + ';font-size:' + t_fsz + ';font-weight:' + t_fwght + ';">';
 191      if (t_fwght == 'bold') t_y += '<b>';
 192      t_y += txt;
 193      if (t_fwght == 'bold') t_y += '<\/b>';
 194      t_y += '<\/font><\/td><\/tr><\/table><\/td><\/tr><\/table>';
 195      if (t_shw)
 196      {
 197          var t_spct = Math.round(t_shw*1.3);
 198          if (tt_n4)
 199          {
 200              t_y += '<layer bgcolor="' + t_shc + '" left="' + t_w + '" top="' + t_spct + '" width="' + t_shw + '" height="0"><\/layer>';
 201              t_y += '<layer bgcolor="' + t_shc + '" left="' + t_spct + '" align="bottom" width="' + (t_w-t_spct) + '" height="' + t_shw + '"><\/layer>';
 202          }
 203          else
 204          {
 205              var t_opa = tt_n6? '-moz-opacity:0.85;' : tt_ie? 'filter:Alpha(opacity=85);' : '';
 206              t_y += '<div id="' + t_id + 'R" style="position:absolute;background:' + t_shc + ';left:' + t_w + 'px;top:' + t_spct + 'px;width:' + t_shw + 'px;height:1px;overflow:hidden;' + t_opa + '"><\/div>';
 207              t_y += '<div style="position:relative;background:' + t_shc + ';left:' + t_spct + 'px;top:0px;width:' + (t_w-t_spct) + 'px;height:' + t_shw + 'px;overflow:hidden;' + t_opa + '"><\/div>';
 208          }
 209      }
 210      t_y += '<\/div>';
 211      return t_y;
 212  }
 213  
 214  function tt_Init()
 215  {
 216      if (!(tt_op || tt_n4 || tt_n6 || tt_ie || tt_w3c)) return;
 217  
 218      var htm = tt_n4? '<div style="position:absolute;"><\/div>' : '',
 219      tags,
 220      t_tj,
 221      over,
 222      esc = 'return escape(';
 223      var i = tt_tags.length; while (i--)
 224      {
 225          tags = tt_ie? (document.all.tags(tt_tags[i]) || 1)
 226              : document.getElementsByTagName? (document.getElementsByTagName(tt_tags[i]) || 1)
 227              : (!tt_n4 && tt_tags[i]=="a")? document.links
 228              : 1;
 229          if (tt_n4 && (tt_tags[i] == "a" || tt_tags[i] == "layer")) tags = tt_N4Tags(tt_tags[i]);
 230          var j = tags.length; while (j--)
 231          {
 232              if (typeof (t_tj = tags[j]).onmouseover == "function" && t_tj.onmouseover.toString().indexOf(esc) != -1 && !tt_n6 || tt_n6 && (over = t_tj.getAttribute("onmouseover")) && over.indexOf(esc) != -1)
 233              {
 234                  if (over) t_tj.onmouseover = new Function(over);
 235                  var txt = unescape(t_tj.onmouseover());
 236                  htm += tt_Htm(
 237                      t_tj,
 238                      "tOoLtIp"+i+""+j,
 239                      txt.wzReplace("& ","&")
 240                  );
 241  
 242                  t_tj.onmouseover = new Function('e',
 243                      'tt_Show(e,'+
 244                      '"tOoLtIp' +i+''+j+ '",'+
 245                      (typeof t_tj.T_ABOVE != tt_u) + ','+
 246                      ((typeof t_tj.T_DELAY != tt_u)? t_tj.T_DELAY : ttDelay) + ','+
 247                      ((typeof t_tj.T_FIX != tt_u)? '"'+t_tj.T_FIX+'"' : '""') + ','+
 248                      (typeof t_tj.T_LEFT != tt_u) + ','+
 249                      ((typeof t_tj.T_OFFSETX != tt_u)? t_tj.T_OFFSETX : ttOffsetX) + ','+
 250                      ((typeof t_tj.T_OFFSETY != tt_u)? t_tj.T_OFFSETY : ttOffsetY) + ','+
 251                      (typeof t_tj.T_STATIC != tt_u) + ','+
 252                      (typeof t_tj.T_STICKY != tt_u) + ','+
 253                      ((typeof t_tj.T_TEMP != tt_u)? t_tj.T_TEMP : ttTemp)+
 254                      ');'
 255                  );
 256                  t_tj.onmouseout = tt_Hide;
 257                  if (t_tj.alt) t_tj.alt = "";
 258                  if (t_tj.title) t_tj.title = "";
 259              }
 260          }
 261      }
 262      document.write(htm);
 263  }
 264  
 265  function tt_EvX(t_e)
 266  {
 267      var t_y = tt_Int(t_e.pageX || t_e.clientX || 0) +
 268          tt_Int(tt_ie? tt_db.scrollLeft : 0) +
 269          tt_offX;
 270      if (t_y > xlim) t_y = xlim;
 271      var t_scr = tt_Int(window.pageXOffset || (tt_db? tt_db.scrollLeft : 0) || 0);
 272      if (t_y < t_scr) t_y = t_scr;
 273      return t_y;
 274  }
 275  
 276  function tt_EvY(t_e)
 277  {
 278      var t_y = tt_Int(t_e.pageY || t_e.clientY || 0) +
 279          tt_Int(tt_ie? tt_db.scrollTop : 0);
 280      if (tt_above) t_y -= (tt_objH + tt_offY - (tt_op? 31 : 15));
 281      else if (t_y > ylim || !tt_dwn && t_y > ylim-24)
 282      {
 283          t_y -= (tt_objH + 5);
 284          tt_dwn = false;
 285      }
 286      else
 287      {
 288          t_y += tt_offY;
 289          tt_dwn = true;
 290      }
 291      return t_y;
 292  }
 293  
 294  function tt_ReleasMov()
 295  {
 296      if (document.onmousemove == tt_Move)
 297      {
 298          if (document.releaseEvents) document.releaseEvents(Event.MOUSEMOVE);
 299          document.onmousemove = null;
 300      }
 301  }
 302  
 303  function tt_HideInput()
 304  {
 305      if (!(tt_ie || tt_op6) || !tt_inputs) return;
 306      var t_o;
 307      var t_i = tt_inputs.length; while (t_i--)
 308      {
 309          t_o = tt_inputs[t_i];
 310          if (tt_vis && tt_objX+tt_objW > t_o.x && tt_objX < t_o.x+t_o.offsetWidth && tt_objY+tt_objH > t_o.y && tt_objY < t_o.y+t_o.offsetHeight)
 311              t_o.style.visibility = 'hidden';
 312          else t_o.style.visibility = 'visible';
 313      }
 314  }
 315  
 316  function tt_GetDiv(t_id)
 317  {
 318      return (
 319          tt_n4? (document.layers[t_id] || null)
 320          : tt_ie? (document.all[t_id] || null)
 321          : (document.getElementById(t_id) || null)
 322      );
 323  }
 324  
 325  function tt_GetDivW()
 326  {
 327      return tt_Int(
 328          tt_n4? tt_obj.clip.width
 329          : tt_obj.style.pixelWidth? tt_obj.style.pixelWidth
 330          : tt_obj.offsetWidth
 331      );
 332  }
 333  
 334  function tt_GetDivH()
 335  {
 336      return tt_Int(
 337          tt_n4? tt_obj.clip.height
 338          : tt_obj.style.pixelHeight? tt_obj.style.pixelHeight
 339          : tt_obj.offsetHeight
 340      );
 341  }
 342  
 343  // Compat with DragDrop Lib: Ensure that z-index of tooltip is lifted beyond toplevel dragdrop element
 344  function tt_SetDivZ()
 345  {
 346      var t_i = tt_obj.style || tt_obj;
 347      if (window.dd && dd.z)
 348          t_i.zIndex = Math.max(dd.z+1, t_i.zIndex);
 349  }
 350  
 351  function tt_SetDivPos(t_x, t_y)
 352  {
 353      var t_i = tt_obj.style || tt_obj;
 354      var t_px = (tt_op6 || tt_n4)? '' : 'px';
 355      t_i.left = (tt_objX = t_x) + t_px;
 356      t_i.top = (tt_objY = t_y) + t_px;
 357      tt_HideInput();
 358  }
 359  
 360  function tt_ShowDiv(t_x)
 361  {
 362      if (tt_n4) tt_obj.visibility = t_x? 'show' : 'hide';
 363      else tt_obj.style.visibility = t_x? 'visible' : 'hidden';
 364      tt_vis = t_x;
 365      tt_HideInput();
 366  }
 367  
 368  function tt_Show(t_e, t_id, t_above, t_delay, t_fix, t_left, t_offx, t_offy, t_static, t_sticky, t_temp)
 369  {
 370      if (tt_obj) tt_Hide();
 371      var t_mf = document.onmousemove || null;
 372      if (window.dd && (window.DRAG && t_mf == DRAG || window.RESIZE && t_mf == RESIZE)) return;
 373      var t_uf = document.onmouseup || null;
 374      if (t_mf && t_uf) t_uf(t_e);
 375  
 376      tt_obj = tt_GetDiv(t_id);
 377      if (tt_obj)
 378      {
 379          tt_dwn = !(tt_above = t_above);
 380          tt_sticky = t_sticky;
 381          tt_objW = tt_GetDivW();
 382          tt_objH = tt_GetDivH();
 383          tt_offX = t_left? -(tt_objW+t_offx) : t_offx;
 384          tt_offY = t_offy;
 385          if (tt_op) tt_offY += 21;
 386          if (tt_n4)
 387          {
 388              if (tt_obj.document.layers.length)
 389              {
 390                  var t_sh = tt_obj.document.layers[0];
 391                  t_sh.clip.height = tt_objH - Math.round(t_sh.clip.width*1.3);
 392              }
 393          }
 394          else
 395          {
 396              var t_sh = tt_GetDiv(t_id+'R');
 397              if (t_sh)
 398              {
 399                  var t_h = tt_objH - tt_Int(t_sh.style.pixelTop || t_sh.style.top || 0);
 400                  if (typeof t_sh.style.pixelHeight != tt_u) t_sh.style.pixelHeight = t_h;
 401                  else t_sh.style.height = t_h + 'px';
 402              }
 403          }
 404  
 405          tt_GetSelects();
 406  
 407          xlim = tt_Int((tt_db && tt_db.clientWidth)? tt_db.clientWidth : window.innerWidth) +
 408              tt_Int(window.pageXOffset || (tt_db? tt_db.scrollLeft : 0) || 0) -
 409              tt_objW -
 410              (tt_n4? 21 : 0);
 411          ylim = tt_Int(window.innerHeight || tt_db.clientHeight) +
 412              tt_Int(window.pageYOffset || (tt_db? tt_db.scrollTop : 0) || 0) -
 413              tt_objH - tt_offY;
 414  
 415          tt_SetDivZ();
 416          t_e = t_e || window.event;
 417          if (t_fix) tt_SetDivPos(tt_Int((t_fix = t_fix.split(','))[0]), tt_Int(t_fix[1]));
 418          else tt_SetDivPos(tt_EvX(t_e), tt_EvY(t_e));
 419  
 420          var t_txt = 'tt_ShowDiv(\'true\');';
 421          if (t_sticky) t_txt += '{'+
 422                  'tt_ReleasMov();'+
 423                  'window.tt_upFunc = document.onmouseup || null;'+
 424                  'if (document.captureEvents) document.captureEvents(Event.MOUSEUP);'+
 425                  'document.onmouseup = new Function("window.setTimeout(\'tt_Hide();\', 10);");'+
 426              '}';
 427          else if (t_static) t_txt += 'tt_ReleasMov();';
 428          if (t_temp > 0) t_txt += 'window.tt_rtm = window.setTimeout(\'tt_sticky = false; tt_Hide();\','+t_temp+');';
 429          window.tt_rdl = window.setTimeout(t_txt, t_delay);
 430  
 431          if (!t_fix)
 432          {
 433              if (document.captureEvents) document.captureEvents(Event.MOUSEMOVE);
 434              document.onmousemove = tt_Move;
 435          }
 436      }
 437  }
 438  
 439  var tt_area = false;
 440  function tt_Move(t_ev)
 441  {
 442      if (!tt_obj) return;
 443      if (tt_n6 || tt_w3c)
 444      {
 445          if (tt_wait) return;
 446          tt_wait = true;
 447          setTimeout('tt_wait = false;', 5);
 448      }
 449      var t_e = t_ev || window.event;
 450      tt_SetDivPos(tt_EvX(t_e), tt_EvY(t_e));
 451      if (tt_op6)
 452      {
 453          if (tt_area && t_e.target.tagName != 'AREA') tt_Hide();
 454          else if (t_e.target.tagName == 'AREA') tt_area = true;
 455      }
 456  }
 457  
 458  function tt_Hide()
 459  {
 460      if (window.tt_obj)
 461      {
 462          if (window.tt_rdl) window.clearTimeout(tt_rdl);
 463          if (!tt_sticky || tt_sticky && !tt_vis)
 464          {
 465              if (window.tt_rtm) window.clearTimeout(tt_rtm);
 466              tt_ShowDiv(false);
 467              tt_SetDivPos(-tt_objW, -tt_objH);
 468              tt_obj = null;
 469              if (typeof window.tt_upFunc != tt_u) document.onmouseup = window.tt_upFunc;
 470          }
 471          tt_sticky = false;
 472          if (tt_op6 && tt_area) tt_area = false;
 473          tt_ReleasMov();
 474          tt_HideInput();
 475      }
 476  }
 477  
 478  tt_Init();