On Nov 6, 2006, at 11:59 AM, Michael Geary wrote: > Great idea, and it's not too hard to do... [see full email below]
Well done, Michael! Wow, I have so much to learn. On Nov 6, 2006, at 9:51 AM, Jörn Zaefferer wrote: > Your suggestion of flipping the tooltip would be the best solution, > but not easy to implement. I should ask Karl Swedberg for his > experience on that topic, I think he and Rey already (tried to) > solve that for their jTip adoption. Actually, Cody's jTip had the flipping part in it before I got my hands on it, so credit go to him. :) I just added a couple adjustments: 1 If the JTip flips to the left of the element hovered over, and if the JTip is too wide to fit entirely between the linked item and the left side of the viewportt, its width decreases to the widest possible without having any of it cut off. 2. The JTip position moves up if it's initially cut off at the bottom of the viewable area, and moves down to the top of viewable area if its height is greater than that of the viewport. The source file is here: http://test.learningjquery.com/scripts/jtip.js My part of the code is a little messy (I'm still learning), but it might still help you get something done a bit quicker if you decide to pursue this. Karl ___________________ Karl Swedberg www.englishrules.com www.learningjquery.com On Nov 6, 2006, at 11:59 AM, Michael Geary wrote: > 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/ _______________________________________________ jQuery mailing list [email protected] http://jquery.com/discuss/
