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
[email protected]
http://jquery.com/discuss/
