Positioning DIV for Predictive-Test/LOV/Suggest-list
in [JavaScript]
|
Prev: Using Javascript to look at a frame's contents from another (sibling) frame
Next: Firefox and cross domain ajax calls
From: Richard Maher on 22 Nov 2009 05:44 Hi, The following is what I'm using to work out where to position the container-div for my bespoke Auto-Complete list: - var dimTarget = lovTarget; var offsetTop = dimTarget.offsetTop + dimTarget.offsetHeight; var offsetLeft = dimTarget.offsetLeft; while(dimTarget = dimTarget.offsetParent){ offsetTop += dimTarget.offsetTop; offsetLeft += dimTarget.offsetLeft; } targetDiv.style.top = offsetTop + "px"; targetDiv.style.left = offsetLeft + "px"; Seems to work with IE and FF except when FF has "Overflow: Hidden" on the Body in which case there is a shimmy. Can someone please tell me what other offsets I need to take into the equation? Cheers Richard Maher
From: SAM on 22 Nov 2009 06:59 Le 11/22/09 11:44 AM, Richard Maher a �crit : > Hi, > > The following is what I'm using to work out where to position the > container-div for my bespoke Auto-Complete list: - > > var dimTarget = lovTarget; > var offsetTop = dimTarget.offsetTop + dimTarget.offsetHeight; > var offsetLeft = dimTarget.offsetLeft; > > while(dimTarget = dimTarget.offsetParent){ > offsetTop += dimTarget.offsetTop; > offsetLeft += dimTarget.offsetLeft; > } > > targetDiv.style.top = offsetTop + "px"; > targetDiv.style.left = offsetLeft + "px"; it's almost what it's shown here : <http://www.quirksmode.org/js/findpos.html> do { offsetTop += dimTarget.offsetTop; offsetLeft += dimTarget.offsetLeft; } while(dimTarget = dimTarget.offsetParent); > Seems to work with IE and FF except when FF has "Overflow: Hidden" on the > Body in which case there is a shimmy. isn't it a funny idea to set the body in hidden overflow while the container of this body (the window) is already in this state no ? What is the utility of such a rule ? Anyway the overflow hidden is a bad idea with Ff at least for printing, don't forget to realize a print styles sheet overwritten the overflows (or the sizes of their containers) > Can someone please tell me what other offsets I need to take into the > equation? <http://www.quirksmode.org/dom/tests/elementdimensions.html> If overflowing the body is an IE necessity, make styles for him in an MS conditional comment. <http://msdn.microsoft.com/en-us/library/ms537509(VS.85).aspx#UsingCCs> <http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx> if not only for IE : body.style.overflow = 'none'; positionateMyObj('lovTarget'); body.style.overflow = ''; no ? or perhaps .... var container = dimTarget; do { container = container.parentNode; offsetTop += dimTarget.offsetTop; offsetLeft += dimTarget.offsetLeft; } while ( container.parentNode != document.body && dimTarget = dimTarget.offsetParent ); .... -- sm
From: David Mark on 22 Nov 2009 08:21 On Nov 22, 5:44 am, "Richard Maher" <maher...(a)hotspamnotmail.com> wrote: > Hi, > > The following is what I'm using to work out where to position the > container-div for my bespoke Auto-Complete list: - > > var dimTarget = lovTarget; > var offsetTop = dimTarget.offsetTop + dimTarget.offsetHeight; > var offsetLeft = dimTarget.offsetLeft; > > while(dimTarget = dimTarget.offsetParent){ > offsetTop += dimTarget.offsetTop; > offsetLeft += dimTarget.offsetLeft; > } > > targetDiv.style.top = offsetTop + "px"; > targetDiv.style.left = offsetLeft + "px"; > > Seems to work with IE and FF except when FF has "Overflow: Hidden" on the > Body in which case there is a shimmy. Never use overflow:hidden on the body. ;) > > Can someone please tell me what other offsets I need to take into the > equation? > Hard to say. Depends on your DOM structure, styles, etc. I recommend leaving borders off the containers so you don't have to deal with clientLeft/Top. And the fewer "hops" the better. Make the container for the widget position:relative. Then you can stop there (you may not even need a loop). Your suggest DIV should be a child of the container, not the body.
From: David Mark on 22 Nov 2009 08:32 On Nov 22, 6:59 am, SAM <stephanemoriaux.NoAd...(a)wanadoo.fr.invalid> wrote: > Le 11/22/09 11:44 AM, Richard Maher a écrit : > > > > > Hi, > > > The following is what I'm using to work out where to position the > > container-div for my bespoke Auto-Complete list: - > > > var dimTarget = lovTarget; > > var offsetTop = dimTarget.offsetTop + dimTarget.offsetHeight; > > var offsetLeft = dimTarget.offsetLeft; > > > while(dimTarget = dimTarget.offsetParent){ > > offsetTop += dimTarget.offsetTop; > > offsetLeft += dimTarget.offsetLeft; > > } > > > targetDiv.style.top = offsetTop + "px"; > > targetDiv.style.left = offsetLeft + "px"; > > it's almost what it's shown here : > <http://www.quirksmode.org/js/findpos.html> > > do { > offsetTop += dimTarget.offsetTop; > offsetLeft += dimTarget.offsetLeft; > } while(dimTarget = dimTarget.offsetParent); > > > Seems to work with IE and FF except when FF has "Overflow: Hidden" on the > > Body in which case there is a shimmy. > > isn't it a funny idea to set the body in hidden overflow > while the container of this body (the window) is already in this state > no ? > What is the utility of such a rule ? The body has nothing to do with the window. The default overflow for body is typically "visible". The default overflow for the HTML element is "auto". In _quirks mode_, the HTML element is not rendered (in most modern browsers), so the body will have "auto" overflow. > > Anyway the overflow hidden is a bad idea with Ff at least for printing, > don't forget to realize a print styles sheet overwritten the overflows > (or the sizes of their containers) It's a bad idea on HTML or BODY in any media. > > > Can someone please tell me what other offsets I need to take into the > > equation? > > <http://www.quirksmode.org/dom/tests/elementdimensions.html> Dear God no. That site is a shrine to programming by observation. It's everything that has gone wrong with browser scripting in the last decade (and likely played no small part in that). Explanations of the observations betray misconceptions, just like comments in bad scripts. A good rule is that if the only basis you have is observational, you have no basis at all. Unfortunately, entire frameworks have been built (and torn down and rebuilt yearly) by feeling about. Thanks PPK!
From: Richard Maher on 22 Nov 2009 09:45
Hi SAM, Mark Thanks for the replies and useful info. "David Mark" <dmark.cinsoft(a)gmail.com> wrote in message news:f119893d-2f32-4542-a2ea-129f2f0e7b4a(a)m26g2000yqb.googlegroups.com... On Nov 22, 5:44 am, "Richard Maher" <maher...(a)hotspamnotmail.com> wrote: > Never use overflow:hidden on the body. ;) Bit of a long story; the page has two side-by-side divs and I wanted the whole page to be height: 100% but the right side div to overflow scroll vertically and hidden horizontally. Sounds easy, but I also appendChild a div contaning an Applet's object tag and even though it's height and width are both 0px it still takes up real-estate (IE at least) and those annoying scroll-bars appear all over the place. In my quest to get rid of them, I moved from body height: 95%; to body overflow: hidden; to html overflow:hidden; It's only now, after removing the body overflow: hidden; that I discover the html overflow: hidden is doing all I desire. Shimmy gone and no scroll-bars. The page in question is just an example dealing primarily with connectivity functionality and the generic LOV code is just to show how easily it can be achieved (without HTML5 bollocks.) I will not peal back this scab any further :-) Cheers Richard Maher |