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