Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

About this user

Davis Zanetti Cabral http://blog.impactmedia.com.br

« Newer Snippets
Older Snippets »
Showing 1-1 of 1 total  RSS 

IM.Tooltip // Teste de colisão com selects

Um exemplo de uso da função hitTest do site JSFromHell.com.
Implementei com base nela um esquema de Tooltips, baseado em um script que não me recordo onde peguei.

Com isso as selects que estiverem atrás dessa tooltip somem quando ela é mostrada.

Esse esquema transforma atributos title="" de elementos <a> em tooltips.

   1  
   2  IM = {}
   3  /* Utils
   4   ***************************************************************************/
   5  IM.Utils = {
   6    hitTest: function(o, l){
   7      function getOffset(o){
   8        for(var r = {l: o.offsetLeft, t: o.offsetTop, r: o.offsetWidth, b: o.offsetHeight};
   9          o = o.offsetParent; r.l += o.offsetLeft, r.t += o.offsetTop);
  10        return r.r += r.l, r.b += r.t, r;
  11      }
  12      for(var b, s, r = [], a = getOffset(o), j = isNaN(l.length), i = (j ? l = [l] : l).length; i;
  13        b = getOffset(l[--i]), (a.l == b.l || (a.l > b.l ? a.l <= b.r : b.l <= a.r))
  14        && (a.t == b.t || (a.t > b.t ? a.t <= b.b : b.t <= a.b)) && (r[r.length] = l[i]));
  15      return j ? !!r.length : r;
  16    },
  17    setOpacity: function(el, op){
  18      el.style.filter="alpha(opacity:"+op+")";
  19      el.style.KHTMLOpacity="0."+op;
  20      el.style.MozOpacity="0."+op;
  21      el.style.opacity="0."+op;
  22    },
  23    showElement: function(x) { // show element ( object element )
  24      x.style.display = "block";
  25      if(!x.ieFix)
  26          x.ieFix = IM.Utils.hitTest(x, d.getElementsByTagName("select"));
  27      for(var i = x.ieFix.length; i; x.ieFix[--i].style.visibility = "hidden");
  28    },
  29    hideElement: function(x) { // hide element ( object element )
  30      x.style.display = "none";
  31      if (x.ieFix)
  32        for(var i = x.ieFix.length; i; x.ieFix[--i].style.visibility = "visible");
  33    }
  34  };
  35  
  36  
  37  /* Tooltip
  38   ***************************************************************************/
  39  IM.Tooltip = {
  40    init: function(id) {
  41      var links,i,h;
  42      if(!d.getElementById || !d.getElementsByTagName ) return;
  43      if(!$(id)) return;
  44      h = IM.DOM.cE("span");
  45      h.setAttribute("id",'im-tooltip');
  46      h.style.position="absolute";
  47      if ( $('im-tooltip') ) Element.remove("im-tooltip");
  48      d.getElementsByTagName("body")[0].appendChild(h);
  49      if(id==null) links=d.getElementsByTagName("a");
  50      else links=($(id)).getElementsByTagName("a");
  51      for(i=0;i<links.length;i++){
  52        this.load(links[i]);
  53      }
  54    },
  55    load: function(el) {
  56      var tooltip,t,b,s,l;
  57      t=el.getAttribute("title");
  58      if(t==null || t.length==0) return;
  59      el.removeAttribute("title");
  60      tooltip=this.cE("span","tooltip");
  61      s=this.cE("span","top");
  62      s.appendChild(d.createTextNode(t));
  63      tooltip.appendChild(s);
  64      b=this.cE("b","bottom");
  65      tooltip.appendChild(b);
  66      IM.Utils.setOpacity(tooltip, '90');
  67      el.tooltip=tooltip;
  68      el.onmouseover=this.sT;
  69      el.onmouseout=this.hT;
  70      el.onmousemove=this.pos;
  71    },
  72    sT: function(e) { // showTooltip
  73      var x = $('im-tooltip');
  74      x.appendChild(this.tooltip);
  75      IM.Tooltip.pos(e);
  76    },
  77    hT: function(e) { // hideTooltip
  78      var d = $('im-tooltip');
  79      if(d.childNodes.length>0) d.removeChild(d.childNodes[0]);
  80      if (d.ieFix)
  81        for(var i = d.ieFix.length; i; d.ieFix[--i].style.visibility = "visible");
  82    },
  83    cE: function(t,c) {
  84      var x = d.createElement(t);
  85      x.className = c;
  86      x.style.display="block";
  87      return(x);
  88    },
  89    pos: function(e) {
  90      var posx=0,posy=0;
  91      if(e==null) e=window.event;
  92      posx = Event.pointerX(e);
  93      posy = Event.pointerY(e);
  94      var x = $('im-tooltip');
  95      x.style.top=(posy+10)+"px";
  96      x.style.left=(posx-20)+"px";
  97      if(!x.ieFix)
  98          x.ieFix = IM.Utils.hitTest(x, d.getElementsByTagName("select"));
  99      for(var i = x.ieFix.length; i; x.ieFix[--i].style.visibility = "hidden");
 100    }
 101  }
« Newer Snippets
Older Snippets »
Showing 1-1 of 1 total  RSS