github.com/aarzilli/tools@v0.0.0-20151123112009-0d27094f75e0/net/http/proxy1/1-popup-above-or-below-unclickable.html (about)

     1  <!DOCTYPE html>
     2  <html>
     3  <head>
     4      <title></title>
     5  </head>
     6  <script type="text/javascript" src="outp-jquery-min-2.1.1.js"></script>
     7  <style type="text/css">
     8  
     9  
    10  
    11  .hc-a{  
    12      position: relative; 
    13      display:inline; 
    14  }
    15  .hc-b2{
    16      position:absolute;  
    17      left:-10px;   top:-10px; 
    18      width:150px;  height:24px;
    19      
    20      text-align:left; 
    21      font-family:Sans-serif !important; font-size:12px !important; 
    22      color:#666 !important; line-height:1.5em; 
    23  
    24      background:url("arrow-desc.png") no-repeat scroll center 0 transparent;
    25      background-color: #ddd !important;
    26  
    27      border:solid 1px #ddd; 
    28      border-radius:4px;
    29      box-shadow:3px 3px 3px #888;
    30          /* skipping the old stuff           -moz-border-radius:3px;-webkit-border-radius:3px;
    31                              -moz-box-shadow:5px 5px 5px #888;-webkit-box-shadow:5px 5px 5px #888;       */
    32  
    33      aamargin-right:80px;  /* alternating upon left-right*/
    34      padding: 10px 10px; 
    35      padding-top: 20px;   /* alternating upon top-bottom, adapt vPadOffs accordingly */
    36      display:none;
    37  
    38  }
    39  </style>
    40  <body>
    41  
    42  <div class="hc-b2" style="display:none">popup</div>
    43  
    44  <span style="display:inline-block;margin-left:10px">
    45      <a href="#" class="hover">hover<br>left</a>
    46  </span>
    47  
    48  
    49  <div style="position:relative;right:10px;float:right;">
    50      <br> <br> <br> <br> 
    51      <a href="#" class="hover">right</a>
    52  </div>
    53  <br>
    54  
    55  <span style="display:inline-block;height:600px;width:200px;background-color:#aaa;"> </span>
    56  
    57  <p>Lorem ipsum <a id='someObject' href="#" class="hover">hover2</a> bono.</p>
    58  
    59  <script type="text/javascript">
    60  $(function () {
    61  
    62  
    63      var obj = $('#someObject');
    64      var wh = $( window ).height();            // Returns height of browser viewport
    65      var dh = $( document ).height();          // Returns height of HTML document
    66      var scrollVert = $('body').scrollTop();   // How many pixel is document scrolled in the viewport
    67      var os1 = obj.offset();                   // Our object's position relative to document root
    68      var os2 = obj[0].getBoundingClientRect(); // Our object's position relative to document root - MINUS scroll pos
    69      
    70      console.log("height window - doc:",wh,dh," sctp:", scrollVert , " offs1",os1.top, " offs2", os2.top);
    71      // console.log("offs1-l", os1.left, " offs2-l",  os2.left);
    72  
    73  
    74      var vPadOffs = 30; // padding offset; top & bottom are 10; one is 20
    75      var winBrdr = 10; // border to outer browser window
    76      var vDist = 5;  // distance to popup
    77  
    78      $('.hover').hover(function () {
    79          var popup = $('.hc-b2');
    80          var obj = $(this);
    81          var offset = obj.offset();
    82          var new_left = offset.left;
    83          new_left = new_left - (popup.width() / 2);
    84          new_left = new_left + (obj.width() / 2);
    85          if (new_left < winBrdr){
    86              new_left = winBrdr;
    87          }
    88          if (new_left + popup.width() > $(window).width() - winBrdr - vPadOffs){
    89              new_left = $(window).width() - popup.width() - winBrdr - vPadOffs;
    90          }
    91  
    92  
    93  
    94          var offrel = obj[0].getBoundingClientRect()
    95          if (offrel.top < $(window).height() / 2) {
    96              popup.css({
    97                  'padding-top':    '20px',
    98                  'padding-bottom': '10px',
    99                  left: new_left + 'px',
   100                  top: offset.top + obj.height() +  vDist   + 'px',
   101                  'background-position': 'center top',
   102                  'background-image': "url(arrow-desc.png)",
   103              });
   104          } else {
   105              console.log("ort>wh", offrel.top, $(window).height() / 2)
   106              popup.css({
   107                  'padding-top':    '10px',
   108                  'padding-bottom': '20px',
   109                  left: new_left + 'px',
   110                  top: offset.top - popup.height() - vPadOffs - vDist + 'px',
   111                  'background-position': 'center bottom',
   112                  'background-image':  "url(arrow-asc.png)",
   113              });
   114          }
   115          // popup.show();
   116          popup.stop(true, true).delay(200).fadeIn(500);
   117  
   118      }, function () {
   119          //hovered away so hide popup
   120          var popup = $('.hc-b2');
   121          // popup.hide();
   122          popup.stop(true, true).fadeOut(300, function () {
   123              console.log("fadeout-callback");
   124          });
   125  
   126      });
   127  
   128      $('.hover').focusin(function() {
   129          console.log("focusin");
   130          $(this).triggerHandler("mouseenter");
   131      });
   132      $('.hover').focusout(function() {
   133          var popup = $('.hc-b2');
   134          popup.stop(true, true).fadeOut(300);
   135      });
   136  
   137  });    
   138  </script>
   139  </body>
   140  </html>