What is the best approach to getting the document''s full width and
height, including the scrollable area? For example, say I have a
document that is 1024px wide and 900px tall, but my browser window is
open to 800 x 600. If I use the document.viewport.getDimensions()
method, it will give me 800 x 600. I can get the full height of the
document using the somewhat awkward construct $$("body")
[0].getHeight(). But this approach doesn''t work when trying to find
the full width of the document. $$("body")[0].getWidth() only gives
me the viewport width.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
On Wed, Mar 12, 2008 at 8:40 PM, muppet <elliot.larson-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > What is the best approach to getting the document''s full width and > height, including the scrollable area?Use document.viewport.getDimensions() on which you would fetch the height and width with document.viewport.getDimensions().height and document.viewport.getDimensions().width respectively. On the document.viewport object, there also is getWidth, getHeight and getScrollOffsets which you may find helpful. These are added by prototype. -justin --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Hi Justin, Thanks for responding. However, as I pointed out above, if you have a document that is 900px tall and browser window that is 600px tall, using document.viewport.getDimensions().height will give you 600 and not 900. I''m interested in the appropriate way to get the full height of the document, not just the height of the viewport. - Elliot On Mar 12, 8:19 pm, "Justin Perkins" <justinperk...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> On Wed, Mar 12, 2008 at 8:40 PM, muppet <elliot.lar...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > What is the best approach to getting the document''s full width and > > height, including the scrollable area? > > Use document.viewport.getDimensions() on which you would fetch the > height and width with document.viewport.getDimensions().height and > document.viewport.getDimensions().width respectively. > > On the document.viewport object, there also is getWidth, getHeight and > getScrollOffsets which you may find helpful. These are added by > prototype. > > -justin--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
thorasmund-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
2008-Mar-13 06:31 UTC
Re: getting the full document height and width
Actually, at least on FF2, it gives the size of the area in the browser windows which is in use by the contents of the webpage. So if you have only one line of text the Height part of the returned object will be very small. On Mar 13, 3:19 pm, muppet <elliot.lar...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Hi Justin, > > Thanks for responding. However, as I pointed out above, if you have a > document that is 900px tall and browser window that is 600px tall, > using document.viewport.getDimensions().height will give you 600 and > not 900. I''m interested in the appropriate way to get the full height > of the document, not just the height of the viewport. > > - Elliot > > On Mar 12, 8:19 pm, "Justin Perkins" <justinperk...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > On Wed, Mar 12, 2008 at 8:40 PM, muppet <elliot.lar...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > > What is the best approach to getting the document''s full width and > > > height, including the scrollable area? > > > Use document.viewport.getDimensions() on which you would fetch the > > height and width with document.viewport.getDimensions().height and > > document.viewport.getDimensions().width respectively. > > > On the document.viewport object, there also is getWidth, getHeight and > > getScrollOffsets which you may find helpful. These are added by > > prototype. > > > -justin--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
thorasmund-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
2008-Mar-13 06:34 UTC
Re: getting the full document height and width
As for the screen size, a quick search on the net told me that you can simply use: screen.width screen.height from within the javascript. cheers, --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
The OP is looking for yet another thing -- the computed dimensions of the entire page, all of it, whether it''s entirely visible on the screen or not. Even if the page would take 15 screens to hold, then he wants to know the entire dimensions of it. Walter On Mar 13, 2008, at 2:34 AM, thorasmund-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org wrote:> > As for the screen size, a quick search on the net told me that you can > simply use: > > screen.width > screen.height > > from within the javascript. > > cheers, >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Hi Walter, That''s correct! Essentially, I want to create a Lightbox.js style opacity overlay div that fills the entire width and height of the document. To do this, I need to find the document''s full height and width. Lightbox uses a section of code that resembles the approach taken with the document.viewport.getScrollOffsets method in Prototype, just a bit more complicated. It seems like the kind of code that should already exist in Prototype, but it doesn''t. So, mainly I''m wondering if I''m overlooking some simple combination of existing Prototype methods that would give the dimensions I''m looking for. Perhaps, if there isn''t a simple approach, the Lightbox approach is a good candidate for suggested inclusion in Prototype. Thorasmund - thanks for responding, but screen.width and screen.height give the dimensions of the computer screen, not the dimensions of the document. - Elliot On Mar 12, 11:42 pm, Walter Lee Davis <wa...-HQgmohHLjDZWk0Htik3J/w@public.gmane.org> wrote:> The OP is looking for yet another thing -- the computed dimensions of > the entire page, all of it, whether it''s entirely visible on the > screen or not. Even if the page would take 15 screens to hold, then > he wants to know the entire dimensions of it. > > Walter > > On Mar 13, 2008, at 2:34 AM, thorasm...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org wrote: > > > > > As for the screen size, a quick search on the net told me that you can > > simply use: > > > screen.width > > screen.height > > > from within the javascript. > > > cheers,--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
You might want to use document.documentElement.getDimensions(). To
make sure borders/margins are taken into account you could try
something like:
Element.addMethods({
getFullWidth: function getFullWidth(element) {
if (!(element = $(element))) return;
return $w(''marginLeft marginRight borderLeftWidth
borderRightWidth'')
.inject(element.getWidth(), function(total, value) {
return total += parseInt(element.getStyle(value));
})
}
})
$(document.documentElement).getFullWidth();
Best,
kangax
On Mar 13, 3:04 am, muppet
<elliot.lar...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Hi Walter,
>
> That''s correct! Essentially, I want to create a Lightbox.js style
> opacity overlay div that fills the entire width and height of the
> document. To do this, I need to find the document''s full height
and
> width. Lightbox uses a section of code that resembles the approach
> taken with the document.viewport.getScrollOffsets method in Prototype,
> just a bit more complicated. It seems like the kind of code that
> should already exist in Prototype, but it doesn''t. So, mainly
I''m
> wondering if I''m overlooking some simple combination of existing
> Prototype methods that would give the dimensions I''m looking for.
> Perhaps, if there isn''t a simple approach, the Lightbox approach
is a
> good candidate for suggested inclusion in Prototype.
>
> Thorasmund - thanks for responding, but screen.width and screen.height
> give the dimensions of the computer screen, not the dimensions of the
> document.
>
> - Elliot
>
> On Mar 12, 11:42 pm, Walter Lee Davis
<wa...-HQgmohHLjDZWk0Htik3J/w@public.gmane.org> wrote:
>
> > The OP is looking for yet another thing -- the computed dimensions of
> > the entire page, all of it, whether it''s entirely visible on
the
> > screen or not. Even if the page would take 15 screens to hold, then
> > he wants to know the entire dimensions of it.
>
> > Walter
>
> > On Mar 13, 2008, at 2:34 AM,
thorasm...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org wrote:
>
> > > As for the screen size, a quick search on the net told me that
you can
> > > simply use:
>
> > > screen.width
> > > screen.height
>
> > > from within the javascript.
>
> > > cheers,
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Sadly, IE6 doesn''t like that nor any of my five-minute attempts to use the body element. If this is a bit complicated and browser-specific, I''d +1 adding a getDimensions() method to Prototypes document extensions. -- T.J. Crowder tj / crowder software / com On Mar 13, 12:29 pm, kangax <kan...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> You might want to use document.documentElement.getDimensions(). To > make sure borders/margins are taken into account you could try > something like: > > Element.addMethods({ > getFullWidth: function getFullWidth(element) { > if (!(element = $(element))) return; > return $w(''marginLeft marginRight borderLeftWidth > borderRightWidth'') > .inject(element.getWidth(), function(total, value) { > return total += parseInt(element.getStyle(value)); > }) > } > > }) > > $(document.documentElement).getFullWidth(); > > Best, > kangax > > On Mar 13, 3:04 am, muppet <elliot.lar...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > Hi Walter, > > > That''s correct! Essentially, I want to create a Lightbox.js style > > opacity overlay div that fills the entire width and height of the > > document. To do this, I need to find the document''s full height and > > width. Lightbox uses a section of code that resembles the approach > > taken with the document.viewport.getScrollOffsets method in Prototype, > > just a bit more complicated. It seems like the kind of code that > > should already exist in Prototype, but it doesn''t. So, mainly I''m > > wondering if I''m overlooking some simple combination of existing > > Prototype methods that would give the dimensions I''m looking for. > > Perhaps, if there isn''t a simple approach, the Lightbox approach is a > > good candidate for suggested inclusion in Prototype. > > > Thorasmund - thanks for responding, but screen.width and screen.height > > give the dimensions of the computer screen, not the dimensions of the > > document. > > > - Elliot > > > On Mar 12, 11:42 pm, Walter Lee Davis <wa...-HQgmohHLjDZWk0Htik3J/w@public.gmane.org> wrote: > > > > The OP is looking for yet another thing -- the computed dimensions of > > > the entire page, all of it, whether it''s entirely visible on the > > > screen or not. Even if the page would take 15 screens to hold, then > > > he wants to know the entire dimensions of it. > > > > Walter > > > > On Mar 13, 2008, at 2:34 AM, thorasm...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org wrote: > > > > > As for the screen size, a quick search on the net told me that you can > > > > simply use: > > > > > screen.width > > > > screen.height > > > > > from within the javascript. > > > > > cheers,--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Ah, my bad, T.J.
There''s this little inconsistency in a way prototype returns certain
style values in IE and other browsers.
e.g. when marginLeft is not specified, #getStyle(''marginLeft'')
returns
null in IE, but 0 in FF
Here''s an updated version:
getFullWidth: function(element) {
if (!(element = $(element))) return;
return $w(''marginLeft marginRight borderLeftWidth
borderRightWidth'').inject(element.getWidth(), function(total, value) {
value = parseInt(element.getStyle(value));
return total += (isNaN(value) ? 0 : value);
})
}
Best,
kangax
On Mar 13, 8:49 am, "T.J. Crowder"
<tjcrow...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Sadly, IE6 doesn''t like that nor any of my five-minute attempts to
use
> the body element.
>
> If this is a bit complicated and browser-specific, I''d +1 adding a
> getDimensions() method to Prototypes document extensions.
> --
> T.J. Crowder
> tj / crowder software / com
>
> On Mar 13, 12:29 pm, kangax
<kan...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > You might want to use document.documentElement.getDimensions(). To
> > make sure borders/margins are taken into account you could try
> > something like:
>
> > Element.addMethods({
> > getFullWidth: function getFullWidth(element) {
> > if (!(element = $(element))) return;
> > return $w(''marginLeft marginRight borderLeftWidth
> > borderRightWidth'')
> > .inject(element.getWidth(), function(total, value) {
> > return total += parseInt(element.getStyle(value));
> > })
> > }
>
> > })
>
> > $(document.documentElement).getFullWidth();
>
> > Best,
> > kangax
>
> > On Mar 13, 3:04 am, muppet
<elliot.lar...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > > Hi Walter,
>
> > > That''s correct! Essentially, I want to create a
Lightbox.js style
> > > opacity overlay div that fills the entire width and height of the
> > > document. To do this, I need to find the document''s
full height and
> > > width. Lightbox uses a section of code that resembles the
approach
> > > taken with the document.viewport.getScrollOffsets method in
Prototype,
> > > just a bit more complicated. It seems like the kind of code that
> > > should already exist in Prototype, but it doesn''t. So,
mainly I''m
> > > wondering if I''m overlooking some simple combination of
existing
> > > Prototype methods that would give the dimensions I''m
looking for.
> > > Perhaps, if there isn''t a simple approach, the Lightbox
approach is a
> > > good candidate for suggested inclusion in Prototype.
>
> > > Thorasmund - thanks for responding, but screen.width and
screen.height
> > > give the dimensions of the computer screen, not the dimensions of
the
> > > document.
>
> > > - Elliot
>
> > > On Mar 12, 11:42 pm, Walter Lee Davis
<wa...-HQgmohHLjDZWk0Htik3J/w@public.gmane.org> wrote:
>
> > > > The OP is looking for yet another thing -- the computed
dimensions of
> > > > the entire page, all of it, whether it''s entirely
visible on the
> > > > screen or not. Even if the page would take 15 screens to
hold, then
> > > > he wants to know the entire dimensions of it.
>
> > > > Walter
>
> > > > On Mar 13, 2008, at 2:34 AM,
thorasm...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org wrote:
>
> > > > > As for the screen size, a quick search on the net told
me that you can
> > > > > simply use:
>
> > > > > screen.width
> > > > > screen.height
>
> > > > > from within the javascript.
>
> > > > > cheers,
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
(isNaN(value) ? 0 : value) could be written (value || 0) ? On Mar 13, 2008, at 3:58 PM, kangax wrote:> > Ah, my bad, T.J. > > There''s this little inconsistency in a way prototype returns certain > style values in IE and other browsers. > e.g. when marginLeft is not specified, #getStyle(''marginLeft'') returns > null in IE, but 0 in FF > > Here''s an updated version: > > getFullWidth: function(element) { > if (!(element = $(element))) return; > return $w(''marginLeft marginRight borderLeftWidth > borderRightWidth'').inject(element.getWidth(), function(total, value) { > value = parseInt(element.getStyle(value)); > return total += (isNaN(value) ? 0 : value); > }) > } > > Best, > kangax > > On Mar 13, 8:49 am, "T.J. Crowder" <tjcrow...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: >> Sadly, IE6 doesn''t like that nor any of my five-minute attempts to >> use >> the body element. >> >> If this is a bit complicated and browser-specific, I''d +1 adding a >> getDimensions() method to Prototypes document extensions. >> -- >> T.J. Crowder >> tj / crowder software / com >> >> On Mar 13, 12:29 pm, kangax <kan...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: >> >>> You might want to use document.documentElement.getDimensions(). To >>> make sure borders/margins are taken into account you could try >>> something like: >> >>> Element.addMethods({ >>> getFullWidth: function getFullWidth(element) { >>> if (!(element = $(element))) return; >>> return $w(''marginLeft marginRight borderLeftWidth >>> borderRightWidth'') >>> .inject(element.getWidth(), function(total, value) { >>> return total += parseInt(element.getStyle(value)); >>> }) >>> } >> >>> }) >> >>> $(document.documentElement).getFullWidth(); >> >>> Best, >>> kangax >> >>> On Mar 13, 3:04 am, muppet <elliot.lar...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: >> >>>> Hi Walter, >> >>>> That''s correct! Essentially, I want to create a Lightbox.js style >>>> opacity overlay div that fills the entire width and height of the >>>> document. To do this, I need to find the document''s full height >>>> and >>>> width. Lightbox uses a section of code that resembles the approach >>>> taken with the document.viewport.getScrollOffsets method in >>>> Prototype, >>>> just a bit more complicated. It seems like the kind of code that >>>> should already exist in Prototype, but it doesn''t. So, mainly I''m >>>> wondering if I''m overlooking some simple combination of existing >>>> Prototype methods that would give the dimensions I''m looking for. >>>> Perhaps, if there isn''t a simple approach, the Lightbox approach >>>> is a >>>> good candidate for suggested inclusion in Prototype. >> >>>> Thorasmund - thanks for responding, but screen.width and >>>> screen.height >>>> give the dimensions of the computer screen, not the dimensions of >>>> the >>>> document. >> >>>> - Elliot >> >>>> On Mar 12, 11:42 pm, Walter Lee Davis <wa...-HQgmohHLjDZWk0Htik3J/w@public.gmane.org> wrote: >> >>>>> The OP is looking for yet another thing -- the computed >>>>> dimensions of >>>>> the entire page, all of it, whether it''s entirely visible on the >>>>> screen or not. Even if the page would take 15 screens to hold, >>>>> then >>>>> he wants to know the entire dimensions of it. >> >>>>> Walter >> >>>>> On Mar 13, 2008, at 2:34 AM, thorasm...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org wrote: >> >>>>>> As for the screen size, a quick search on the net told me that >>>>>> you can >>>>>> simply use: >> >>>>>> screen.width >>>>>> screen.height >> >>>>>> from within the javascript. >> >>>>>> cheers, > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Try setting the position to fixed (for good browsers) and using the
document.viewport.getScrollOffsets().top for IE
var fader = new Element(''div'');
fader.setStyle({
margin: 0,
padding: 0,
border: ''none'',
display: ''block'',
width: ''100%'',
height: ''100%'',
background: ''#000'',
position: ''fixed'',
top: 0,
left: 0,
zIndex: 500,
opacity: 0.5,
color: ''#fff''
});
if (Prototype.Browser.IE6) {
fader.setStyle({
position: ''absolute'',
top: document.viewport.getScrollOffsets().top + ''px''
});
}
On Mar 13, 7:04 am, muppet
<elliot.lar...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Hi Walter,
>
> That''s correct! Essentially, I want to create a Lightbox.js style
> opacity overlay div that fills the entire width and height of the
> document. To do this, I need to find the document''s full height
and
> width. Lightbox uses a section of code that resembles the approach
> taken with the document.viewport.getScrollOffsets method in Prototype,
> just a bit more complicated. It seems like the kind of code that
> should already exist in Prototype, but it doesn''t. So, mainly
I''m
> wondering if I''m overlooking some simple combination of existing
> Prototype methods that would give the dimensions I''m looking for.
> Perhaps, if there isn''t a simple approach, the Lightbox approach
is a
> good candidate for suggested inclusion in Prototype.
>
> Thorasmund - thanks for responding, but screen.width and screen.height
> give the dimensions of the computer screen, not the dimensions of the
> document.
>
> - Elliot
>
> On Mar 12, 11:42 pm, Walter Lee Davis
<wa...-HQgmohHLjDZWk0Htik3J/w@public.gmane.org> wrote:
>
> > The OP is looking for yet another thing -- the computed dimensions of
> > the entire page, all of it, whether it''s entirely visible on
the
> > screen or not. Even if the page would take 15 screens to hold, then
> > he wants to know the entire dimensions of it.
>
> > Walter
>
> > On Mar 13, 2008, at 2:34 AM,
thorasm...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org wrote:
>
> > > As for the screen size, a quick search on the net told me that
you can
> > > simply use:
>
> > > screen.width
> > > screen.height
>
> > > from within the javascript.
>
> > > cheers,
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
On Thu, Mar 13, 2008 at 2:04 AM, muppet <elliot.larson-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> That''s correct! Essentially, I want to create a Lightbox.js style > opacity overlay div that fills the entire width and height of the > document. To do this, I need to find the document''s full height and > width.Assuming you are using two separate divs (one to make the application space inaccessible and somewhat hidden, and a second one for the actual lightbox), the first div (the one that covers your app) just needs a position:absolute, put it in the top left corner, then give it a width and height of 100%. This will draw it over the entire document, not just the viewport. The special case, as it has already been mentioned, is IE6. To solve this, I just have a special rule in my CSS hacks file for IE6 only that uses an expression: #darkbox{ /* this darkbox div is at the end of the document, outside of all other elements, essentially just before the closing body tag */ height:expression( ( document.documentElement.clientHeight > this.parentNode.offsetHeight ? document.documentElement.clientHeight : this.parentNode.offsetHeight ) +''px'' ); } Been working fine for me for quite a while, no need to touch any JavaScript files. I''m sure people will gasp at the use of expressions, but in the real world, it works. Have a great day. -justin --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
One cheap-and-cheerful way to do this is to put a DIV at the bottom of your document and find the position of that DIV. On Mar 13, 3:04 am, muppet <elliot.lar...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Hi Walter, > > That''s correct! Essentially, I want to create a Lightbox.js style > opacity overlay div that fills the entire width and height of the > document.--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
> One cheap-and-cheerful way to do this...And almost certainly quick and cross-browser, too. We tend to try to think of ways to avoid changing the markup, don''t we, but sometimes that''s just the simple straightforward way. A nice zero-height inline div at the end; done. Good one. -- T.J. :-) On Mar 13, 7:39 pm, Diodeus <diod...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> One cheap-and-cheerful way to do this is to put a DIV at the bottom of > your document and find the position of that DIV. > > On Mar 13, 3:04 am, muppet <elliot.lar...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > Hi Walter, > > > That''s correct! Essentially, I want to create a Lightbox.js style > > opacity overlay div that fills the entire width and height of the > > document.--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
That is a very elegant approach (adding a div to the bottom of the
page and taking its measurements), however somehow I''m getting about
10px of space at the bottom of the page. There aren''t any margins or
borders applied to the body element so I''m not sure where this is
coming from. Here''s the code I used:
document.getSize = function()
{
var div = new
Element("div").setStyle({"height":"0"});
$(document.body).insert(div, {"position":"bottom"});
var doc_height = div.cumulativeOffset().top + div.getHeight();
var doc_width = div.getWidth();
div.remove();
return {"width":doc_width, "height":doc_height};
}
Just setting the overlay div''s height and width property to 100% is a
nice idea, but this doesn''t account for the scroll area. So, if
you''ve scrolled half way down the page and use this to position the
overlay, it shows a gap (at least in FF).
It looks like so far the modified Lightbox.js code seems to work the
best. It seems a bit inelegant with its cross browser craziness, but
it gets the job done. In case, anyone is interested, here it is:
document.getSize = function()
{
var xScroll = 0;
var yScroll = 0;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight >
document.body.offsetHeight) { // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict,
Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = (document.documentElement.clientWidth) ?
document.documentElement.clientWidth : self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement &&
document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the
viewport
var docHeight = (yScroll < windowHeight) ? windowHeight : yScroll;
// for small pages with total width less then width of the
viewport
var docWidth = (xScroll < windowWidth) ? xScroll : windowWidth;
// return arrayPageSize;
return {"width": docWidth, "height": docHeight};
}
On Mar 13, 2:56 pm, "T.J. Crowder"
<tjcrow...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> > One cheap-and-cheerful way to do this...
>
> And almost certainly quick and cross-browser, too. We tend to try to
> think of ways to avoid changing the markup, don''t we, but
sometimes
> that''s just the simple straightforward way. A nice zero-height
inline
> div at the end; done. Good one.
>
> -- T.J. :-)
>
> On Mar 13, 7:39 pm, Diodeus
<diod...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > One cheap-and-cheerful way to do this is to put a DIV at the bottom of
> > your document and find the position of that DIV.
>
> > On Mar 13, 3:04 am, muppet
<elliot.lar...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > > Hi Walter,
>
> > > That''s correct! Essentially, I want to create a
Lightbox.js style
> > > opacity overlay div that fills the entire width and height of the
> > > document.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---