> From: Paul McLanahan > > The only suggestion I have deals with displaying the tips > close to the right side of the screen. You do an excellent > job of handling the width of the tip when it is close to the > right edge of the window, but if a word is too long inside of > the tip it will push outside of the viewable area and cause > the horizontal scroll bar to appear. I would suggest that > you attempt to detect that situation and flip the tip so that > it shows to the left of the pointer when it is too wide to be > completely within the window.
Great idea, and it's not too hard to do, like on this page for example: http://denverpost.zvents.com/venues/show/13197 When you hover over any of the map pins, a tooltip-like window appears. If there isn't room on the right, it goes on the left instead. Similarly, if there isn't enough room below the pin, the tip moves up. (But I just noticed a bug - I meant to move the tip so that its bottom lines up with the bottom of the little box around the pin, like the way the top of the tip lines up with the top of the box normally - but it's badly misaligned. It works OK in the horizontal direction.) All I had to do to make this work was first generate the tip in its normal bottom-right position and then see if it overflows the visible area of the window. If it does, then I move it to the left or up. The tip window's offsetHeight and offsetWidth are available at this point, and the browser won't actually render the tip window until the JavaScript code stops executing - so it does no harm to first generate it in one position and then move it to another. I use this code to get the viewport (visible rectangle of the window). I think I saw similar code in one of the jQuery plugins: viewport: function() { var e = document.documentElement || {}, b = document.body || {}, w = window; return { x: w.pageXOffset || e.scrollLeft || b.scrollLeft || 0, y: w.pageYOffset || e.scrollTop || b.scrollTop || 0, cx: min( e.clientWidth, b.clientWidth, w.innerWidth ), cy: min( e.clientHeight, b.clientHeight, w.innerHeight ) }; function min() { var v = Infinity; for( var i = 0; i < arguments.length; i++ ) { var n = arguments[i]; if( n && n < v ) v = n; } return v; } } In the returned viewport, cx and cy are the width and height (old habit of using Windows naming conventions here!), and x and y are of course the left and top. Then, after generating the popup window, I compare its offsetLeft, offsetTop, offsetWidth, and offsetHeight against the viewport and move it as needed. -Mike _______________________________________________ jQuery mailing list [email protected] http://jquery.com/discuss/
