Re: [jQuery] jquery-modalContent Plugin 0.11 released

[Ámon Tamás]

Brandon Aaron wrote:
> On 1/5/07, Ámon Tamás <[EMAIL PROTECTED]> wrote:
>> Hello,
>>
>> I get the following error:
>>
>> $(document).outerHeight is not a function (line 55)
>> Is this a bug or a feature?
> 
> Please make sure you have the dimensions plugin.
> http://jquery.com/dev/svn/trunk/plugins/dimensions/dimensions.js?format=txt
> 

Ups. :) I forget it.

But I have an other problem. The content come dinamicaly from 
javascript. I make something like this:

-
var aa = document.createElement("a");
aa.href="javascript:void(0);";
aa.class="close";
$(aa).click(function(){jQuery.modalContent.modalContentClose();});
$(aa).html("Bezaras");
$(div).append(aa);
-

But it is not close the picture
$(aa).click(function(){jQuery.modalContent.modalContentClose();});

What I must to make with this line?

-- 
Ámon Tamás
http://linkfelho.amon.hu


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] jquery-modalContent Plugin 0.11 released

[Brandon Aaron]

On 1/5/07, Ámon Tamás <[EMAIL PROTECTED]> wrote:
> Hello,
>
> I get the following error:
>
> $(document).outerHeight is not a function (line 55)
> Is this a bug or a feature?

Please make sure you have the dimensions plugin.
http://jquery.com/dev/svn/trunk/plugins/dimensions/dimensions.js?format=txt

--
Brandon Aaron

___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] jquery-modalContent Plugin 0.11 released

[Felix Geisendörfer]

If I remember correctly this plugin depends on the dimensions plugin and 
it seems like you've not included it.


-- Felix Geisendörfer aka the_undefined
--
http://www.thinkingphp.org
http://www.fg-webdesign.de


Ámon Tamás wrote:

Hello,

I get the following error:

$(document).outerHeight is not a function (line 55)
Is this a bug or a feature?

(I have firefox 2.0)

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] >

  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?


2007-01-03 gmr
  1) Updated to set the top of the background div to 0
  2) Add 50px to the background div (ugly hack until dimensions.js returns the 
proper height
  3) Removed the .focus from the $('#modalContent .focus') selector since that 
required something with a class of focus.

  4) Created a function for reaize and bound and unbound that so it doesnt 
clobber other resize functions on unbinding.
  5) Created a function for binding the .close class and bound/unbound click 
using it.  Close now will work on any clickable element including a map area.

  6) Renamed animation commands to match jQuery's.

It is available at http://jquery.glyphix.com - Thank you to everyone who has 
made suggestions and given feedback on the plugin to make it better.


Regards,

Gavin




___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/




  
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] jquery-modalContent Plugin 0.11 released

[Ámon Tamás]

Hello,

I get the following error:

$(document).outerHeight is not a function (line 55)
Is this a bug or a feature?

(I have firefox 2.0)

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] >
>   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?
> 
> 
> 2007-01-03 gmr
>   1) Updated to set the top of the background div to 0
>   2) Add 50px to the background div (ugly hack until dimensions.js returns 
> the proper height
>   3) Removed the .focus from the $('#modalContent .focus') selector since 
> that required something with a class of focus.
> 
>   4) Created a function for reaize and bound and unbound that so it doesnt 
> clobber other resize functions on unbinding.
>   5) Created a function for binding the .close class and bound/unbound click 
> using it.  Close now will work on any clickable element including a map area.
> 
>   6) Renamed animation commands to match jQuery's.
> 
> It is available at http://jquery.glyphix.com - Thank you to everyone who has 
> made suggestions and given feedback on the plugin to make it better.
> 
> 
> Regards,
> 
> Gavin
> 
> 
> 
> 
> ___
> jQuery mailing list
> discuss@jquery.com
> http://jquery.com/discuss/


-- 
Ámon Tamás
http://linkfelho.amon.hu


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] jquery-modalContent Plugin 0.11 released

[Klaus Hartl]

Webunity | Gilles van den Hoven schrieb:
>> 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...
>>   
> Ah, thanks. But what if i want to overlay an overlay?
> 
> Gilles

I think that should work:

html, body {
 min-height: 100%;
}
#overlay-1, #overlay-2 {
 position: fixed;
 height: 100%;
 z-index: 999;
}
#overlay-2 {
 z-index: 1000;
}


 
 



Is it that what you mean? It will also work with the overlay divs nested.


-- Klaus



___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] jquery-modalContent Plugin 0.11 released

[Webunity | Gilles van den Hoven]

smoore wrote:
> Giles, by any chance do you have an example of overlaying an overlay? I'd be
> interested in seeing how that worked.
>   
It was just theoretical ;)


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] jquery-modalContent Plugin 0.11 released

[smoore]

Giles, by any chance do you have an example of overlaying an overlay? I'd be
interested in seeing how that worked.

Scott


Webunity | Gilles van den Hoven wrote:
> 
> 
>> 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...
>>   
> Ah, thanks. But what if i want to overlay an overlay?
> 
> Gilles
> 
> ___
> jQuery mailing list
> discuss@jquery.com
> http://jquery.com/discuss/
> 
> 

-- 
View this message in context: 
http://www.nabble.com/jquery-modalContent-Plugin-0.11-released-tf2916021.html#a8159536
Sent from the JQuery mailing list archive at Nabble.com.


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] jquery-modalContent Plugin 0.11 released

[Webunity | Gilles van den Hoven]

> 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...
>   
Ah, thanks. But what if i want to overlay an overlay?

Gilles

___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] jquery-modalContent Plugin 0.11 released

[Klaus Hartl]

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] > 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/

Re: [jQuery] jquery-modalContent Plugin 0.11 released

[Webunity | Gilles van den Hoven]

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