Webunity | Gilles van den Hoven schrieb: > Gavin M. Roy wrote: >> I've released 0.11 of the jquery-modalContent plugin with the following >> changes: >> >> 2006-12-19 patch from Tim Saker <[EMAIL PROTECTED] <mailto:[EMAIL >> PROTECTED]>> >> 1) Keyboard events are now only permitted on visible elements belonging to >> the modal layer (child elements). Attempting to place focus on any other >> page element will cause focus to be transferred back to the first (ordinal) >> visible child element of the modal layer. >> >> 2) The modal overlay shading now covers the entire height of the document >> except for a small band at the bottom, which is the height of a scrollbar (a >> separate thread to be opened on this problem with dimension.js). >> >> 3) I removed the code that disables and reenables the scrollbars. This is >> just a suggestion really, realizing it could be one of those little things >> that causes fellow developers to become unnecessary foes ;=). Personally, I >> found it an annoying behaviour to remove a visible scrollbar causing the >> page elements to shift right upon modal popup, then back after closure. If >> the intent was to prevent scrolling it doesn't anyway since you can still >> page down with the keyboard. Maybe it should be a boolean option passed in >> the function signature? >> >> > Nice work Gavin, > > In my submodal plugin, (thesame functionality as your plugin, but > extended with a content div), i also had to tackle points 2 and 3. > Here's how i tackled those 2 points. > > Set the width of the div to 100%, this covers the width part. Now comes > the tricky part, the height. We have to make sure it covers the entire > content below it. You can't just leave "some" space empty for a > scrollbar, since some people have scrollbars that are 50px high (i hate > those windows themes). > > This means that it has to be as large as the document, except if the > document is smaller then the viewport, then it has to be as high as the > viewport. *You also have to take changes to the document into > consideration.* And this is important. With this i mean that it could be > possible that the div you show over the "modal" can grow in height, say > with 600px. Then, if you'd scroll down you would see a lot of white space. > > To tackle the height problem, i use this code, but you really only need > the "height" part: > ----------[ snip ]---------- > // Get document size > var intDocumentWidth, intDocumentHeight; > var intPageWidth, intPageHeight; > if (document.documentElement && > document.documentElement.clientWidth) { // Explorer 6 Strict Mode > intDocumentWidth = document.documentElement.clientWidth; > intDocumentHeight = document.documentElement.clientHeight; > intPageWidth = document.documentElement.scrollWidth; > intPageHeight = document.documentElement.scrollHeight; > } else { > if (document.body) { // other Explorers > intDocumentWidth = document.body.clientWidth; > intDocumentHeight = document.body.clientHeight; > intPageWidth = document.body.scrollWidth; > intPageHeight = document.body.scrollHeight; > } else { > if (self.innerHeight) { // all except Explorer > intDocumentWidth = self.innerWidth; > intDocumentHeight = self.innerHeight; > } > } > } > > // for small pages with total size less then width/height of the > viewport > if (intPageWidth < intDocumentWidth) { > intPageWidth = intDocumentWidth; > } > > if (intPageHeight < intDocumentHeight) { > intPageHeight = intDocumentHeight; > } > ----------[ snip ]---------- > > Oke, that's that. Now put this into a function and call it. Make sure > that function returns the pageheight. This way you can stretch the div > to the bottom of the screen. So when i initialize my submodal, i set the > correct size. When the document is scrolled, i update the size (height) > again so i am sure it covers any changes made to the page (content > added/removed/etc). > > I hope i am helpfull with this. > > Best of luck. > > -- Gilles
Wow, lots of code... for my Thickbox adaption the following worked fine: html, body { min-height: 100%; } #yourDiv { height: 100%; } #yourDiv has to be a direct child of the body... -- Klaus _______________________________________________ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/