github.com/aarzilli/tools@v0.0.0-20151123112009-0d27094f75e0/net/http/proxy1/2-popup-above-or-below-clickable.html (about) 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 8 <script type="text/javascript" src="outp-jquery-min-2.1.1.js"></script> 9 <style type="text/css"> 10 11 12 13 .hc-a{ 14 position: relative; 15 display:inline; 16 } 17 .hc-b1{} 18 .hc-b2{ 19 position:absolute; 20 z-index: 10; 21 left:-10px; top:-10px; 22 width:150px; height:24px; 23 24 text-align:left; 25 font-family:Sans-serif !important; font-size:12px !important; 26 color:#666 !important; line-height:1.5em; 27 28 background:url("arrow-desc.png") no-repeat scroll center 0 transparent; 29 background-color: #ddd !important; 30 31 border:solid 1px #ddd; 32 border-radius:4px; 33 box-shadow:3px 3px 3px #888; 34 /* skipping the old stuff -moz-border-radius:3px;-webkit-border-radius:3px; 35 -moz-box-shadow:5px 5px 5px #888;-webkit-box-shadow:5px 5px 5px #888; */ 36 37 margin: 0px; 38 39 padding: 10px 10px; 40 aapadding-top: 20px; /* alternating upon top-bottom, adapt vPadOffs accordingly */ 41 display:none; 42 43 } 44 </style> 45 46 47 <span style="display:inline-block;margin-left:10px"> 48 <a href='http://www.welt.de/politik/deutschland/article146663316/In-Berlin-versinken-Fluechtlinge-im-Behoerden-Chaos.html' target='blab' >hover<br>left</a><br> 49 50 51 <a href='http://www.welt.de/politik/deutschland/article146663316/In-Berlin-versinken-Fluechtlinge-im-Behoerden-Chaos.html' target='blab' >hover left</a><br> 52 </span> 53 54 55 <div style="position:relative;right:10px;float:right;"> 56 <br> <br> 57 58 <a href='http://www.welt.de/politik/deutschland/article146663316/In-Berlin-versinken-Fluechtlinge-im-Behoerden-Chaos.html' target='blab' >right</a><br> 59 <a href='http://www.welt.de/politik/deutschland/article146663316/In-Berlin-versinken-Fluechtlinge-im-Behoerden-Chaos.html' target='blab' >right</a><br> 60 <span style="display:inline-block;height:500px;width:60px;background-color:#aaa;"> </span><br> 61 <a href='http://www.welt.de/politik/deutschland/article146663316/In-Berlin-versinken-Fluechtlinge-im-Behoerden-Chaos.html' target='blab' >right</a><br> 62 63 <a href='http://www.welt.de/politik/deutschland/article146663316/In-Berlin-versinken-Fluechtlinge-im-Behoerden-Chaos.html' target='blab' >right</a> <br> 64 </div> 65 <br> 66 67 <span style="display:inline-block;height:500px;width:200px;background-color:#aaa;"> </span> 68 69 70 <p>Lorem ipsum <a id='someObject' href='http://www.welt.de/politik/deutschland/article146663316/In-Berlin-versinken-Fluechtlinge-im-Behoerden-Chaos.html' target='blab' >hover2</a> bono.</p> 71 <p>Lorem ipsum Lorem ipsum <a id='someObject' href='http://www.welt.de/politik/deutschland/article146663316/In-Berlin-versinken-Fluechtlinge-im-Behoerden-Chaos.html' target='blab' >hover2</a> bono.</p> 72 73 <script type="text/javascript"> 74 75 var vPadOffs = 30; // padding offset; top & bottom are 10; one is 20 76 vPadOffs += 2 // border with 77 var hPadSimple = 10; // simple horizontal padding offset 78 79 var winBrdrLeft = 4; // border to outer browser window 80 var winBrdrRight = winBrdrLeft+2+2; // popup border 2*1, shadow 81 82 var vDist = 0; // vertical distance to popup - cannot be set - any gap causes mouseleave event 83 84 85 function CreateAnchorWrappers(){ 86 87 var start = new Date().getTime(); 88 89 // Create parent wrappers 90 // $( '.hovering-popup' ).each(function( index ) { 91 $( 'a' ).each(function( index ) { 92 // console.log( index + ": " + $( this ).text() ); 93 var obj = $(this); 94 if (!obj.parent().hasClass("hc-a")){ 95 obj.wrap('<div class="hc-a" />'); 96 obj.addClass("hc-b1"); 97 var specialPop = '<div class="hc-b2" >' + 'specialpop' + '</div>'; // Potentially a lot of DOM insertions over time 98 obj.after(specialPop); //Append after selected element 99 obj.siblings(".hc-b2").eq(0).css({ 'width': 6*obj.width() +'px' }); 100 } 101 }); 102 103 // Remember when we finished 104 var end = new Date().getTime(); 105 console.log("creating wrappers took ",end - start); 106 } 107 108 109 function hidePop(obj){ 110 // var popup = $('.hc-b2'); 111 // popup.hide(); 112 obj.stop(true, true).fadeOut(300, function () { 113 console.log("fadeout-callback"); 114 }); 115 } 116 117 // A wrapping of a-tags is required, 118 // to bind the a-tag and the popup 119 // into one single mouseover-mouseleave-context. 120 // 121 // The wrapping makes positioning of the popup relative. 122 // At left:0, top:0; the popup overlays the original anchor-tag. 123 // 124 // The wrapping must be done in advance, causing a lot of DOM overhead. 125 // Approx. 3 ms per link. 126 // Dynamic wrapping could be done like this: 127 // Reacting to a-tag-mouseover, 128 // creating wrapper, 129 // calling parent.triggerHandler("mouseover"), 130 // calling it only once. 131 // 132 // Horizonal positioning is centered. 133 // We could also make it align right-or-left - with left: auto; right:-10px; 134 // 135 // hovercard.js made the anchor overlay the popup with 136 // wrapper.css("zIndex", "200"); 137 // anchor.css("zIndex", "100"); 138 // popup.css("zIndex", "50"); 139 // And resetting the all to zero on mouseleave. 140 // This would only look good with align right-or-left. 141 function showPop(obj){ 142 143 144 // CreateAnchorWrappers() // must be done in advance 145 146 // var popup = $('.hc-b2'); 147 var popup = obj.siblings(".hc-b2").eq(0); 148 if (popup.length<=0){ 149 popup = obj.find(".hc-b2").eq(0); 150 } 151 152 var objAbsTL = obj.offset(); 153 var objRelTL = obj[0].getBoundingClientRect() 154 155 var new_left = - (popup.width() / 2) + (obj.width() / 2) - hPadSimple; 156 157 // prevent transgression to the left 158 if (objRelTL.left + new_left < winBrdrLeft){ 159 new_left = -objRelTL.left + winBrdrLeft; 160 } 161 // prevent transgression to the right 162 if (objRelTL.left + new_left + popup.width() + 2*hPadSimple > $(window).width() - winBrdrRight){ 163 new_left = -popup.width() - 2*hPadSimple - ( objRelTL.left - $(window).width() ) - winBrdrRight; 164 } 165 166 167 168 if (objRelTL.top < $(window).height() / 2) { 169 popup.css({ 170 'padding-top': '20px', 171 'padding-bottom': '10px', 172 left: new_left + 'px', 173 top: obj.height() + 1*vDist + 'px', 174 'background-position': 'center top', 175 'background-image': "url(arrow-desc.png)", 176 }); 177 } else { 178 console.log("ort>wh", objRelTL.top, $(window).height() / 2) 179 popup.css({ 180 'padding-top': '10px', 181 'padding-bottom': '20px', 182 left: new_left + 'px', 183 top: - popup.height() - vPadOffs - 1*vDist + 'px', 184 'background-position': 'center bottom', 185 'background-image': "url(arrow-asc.png)", 186 }); 187 } 188 // popup.show(); 189 popup.stop(true, true).delay(200).fadeIn(500); 190 191 } 192 193 194 $( document ).ready(function() { 195 196 197 var obj = $('#someObject'); 198 var wh = $( window ).height(); // Returns height of browser viewport 199 var dh = $( document ).height(); // Returns height of HTML document 200 var scrollVert = $('body').scrollTop(); // How many pixel is document scrolled in the viewport 201 var os1 = obj.offset(); // Our object's position relative to document root 202 var os2 = obj[0].getBoundingClientRect(); // Our object's position relative to document root - MINUS scroll pos 203 console.log("height window - doc:",wh,dh," sctp:", scrollVert , " offs1",os1.top, " offs2", os2.top); 204 // console.log("offs1-l", os1.left, " offs2-l", os2.left); 205 206 CreateAnchorWrappers(); 207 208 209 // mouseover covers childelements, 210 // mousenter does not. 211 // We use mouseover. 212 213 // Here popup would not be clickable. 214 // It disappears as soon as obj is left 215 $( 'a' ).on( "mouseover", function() { 216 }) 217 218 // We have to latch the events onto the parent wrapper node. 219 // Thus all parent nodes need to be created on documentload :( 220 $( '.hc-a' ).on( "mouseover", function() { 221 var obj = $(this); 222 showPop(obj); 223 }) 224 $( '.hc-a' ).on( "mouseleave", function() { 225 var obj = $(this).find(".hc-b2").eq(0); 226 hidePop(obj) 227 }) 228 229 230 $( '.hc-a' ).on( "focusin", function() { 231 var obj = $(this); 232 showPop(obj); 233 }) 234 235 $( '.hc-a' ).on( "focusout", function() { 236 var obj = $(this).find(".hc-b2").eq(0); 237 hidePop(obj) 238 }) 239 240 console.log( "document ready completed" ); 241 242 243 }); 244 245 246 247 </script> 248 </body> 249 </html>