Re: [WSG] centring and viewport size (OT?)

2007-03-20 Thread David Hucklesby 
On Mon, 19 Mar 2007 14:43:58 +, Designer wrote:
> Thanks to those who responded on this.  What I've done is to make a file 
> which uses the
> javascript to determine the space available in the browser window, [...]
>
>
> You can see all this at:  http://www.rhh.myzen.co.uk/gam/sandbox/

> David Hucklesby suggested:
>
>> Use JavaScript to change the element's top-margin style directly, perhaps?
>>
> On Tue, 20 Mar 2007 18:56:06 +, Designer then asked: 
>
> How exactly would you do that?  (I'm interested, and I'm learning :-) )

Well, as you figured the amount of space needed to push the DIV down
in order to center it, I was thinking of something like:

contentDiv.style.marginTop = calculatedGap + 'px';

However, did you look at Georg's solution he sent Saturday?



For IE, he uses JavaScript (or is it JScript?) in a Microsoft-only
"expression" to position the DIV's top. It seems to solve your problem
nicely, even in IE7, while modern browsers are happy with CSS alone.

Cordially,
David
--



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] centring and viewport size (OT?)

2007-03-20 Thread David Hucklesby 
On Mon, 19 Mar 2007 14:43:58 +, Designer wrote:
> Thanks to those who responded on this.  What I've done is to make a file 
> which uses the
> javascript to determine the space available in the browser window, [...]
>
>
> You can see all this at:  http://www.rhh.myzen.co.uk/gam/sandbox/

> David Hucklesby suggested:
>
>> Use JavaScript to change the element's top-margin style directly, perhaps?
>>
> On Tue, 20 Mar 2007 18:56:06 +, Designer then asked: 
>
> How exactly would you do that?  (I'm interested, and I'm learning :-) )

Well, as you figured the amount of space needed to push the DIV down
in order to center it, I was thinking of something like:

contentDiv.style.marginTop = calculatedGap + 'px';

However, did you look at Georg's solution he sent Saturday?



For IE, he uses JavaScript (or is it JScript?) in a Microsoft-only
"expression" to position the DIV's top. It seems to solve your problem
nicely, even in IE7, while modern browsers are happy with CSS alone.

Cordially,
David
--



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] centring and viewport size (OT?)

2007-03-20 Thread Designer 

David Hucklesby wrote:


Use JavaScript to change the element's top-margin style directly, perhaps?

Cordially,
David
--



How exactly would you do that?  (I'm interested, and I'm learning :-) )

--
Bob

www.gwelanmor-internet.co.uk



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] centring and viewport size (OT?)

2007-03-19 Thread David Hucklesby 
On Mon, 19 Mar 2007 14:43:58 +, Designer wrote:
> Thanks to those who responded on this.  What I've done is to make a file 
> which uses the
> javascript to determine the space available in the browser window, viz:
>
[...] (code snipped)
>
> Of course, since the php is server-side, I then have to send the height 
> variable to the
> php via another page load (window.location.href).
>
> This page then takes the height, knocks off the div height and divides by 2 
> to get the
> correct margin-top, which it then writes to the inline CSS in two sections:
>
[...] (more code)
>
> You can see all this at:  http://www.rhh.myzen.co.uk/gam/sandbox/
>
> It's a bit clumsy, and I don't like reloading a page, so I'm grateful for any 
> really
> good /suggestions / improvements!
>

Use JavaScript to change the element's top-margin style directly, perhaps?

Cordially,
David
--



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] centring and viewport size (OT?)

2007-03-19 Thread David Hucklesby 
On Mon, 19 Mar 2007 14:43:58 +, Designer wrote:
> Thanks to those who responded on this.  What I've done is to make a file 
> which uses the
> javascript to determine the space available in the browser window, viz:
>
[...] (code snipped)
>
> Of course, since the php is server-side, I then have to send the height 
> variable to the
> php via another page load (window.location.href).
>
> This page then takes the height, knocks off the div height and divides by 2 
> to get the
> correct margin-top, which it then writes to the inline CSS in two sections:
>
[...] (more code)
>
> You can see all this at:  http://www.rhh.myzen.co.uk/gam/sandbox/
>
> It's a bit clumsy, and I don't like reloading a page, so I'm grateful for any 
> really
> good /suggestions / improvements!
>

Use JavaScript to change the element's top-margin style directly, perhaps?

Cordially,
David
--



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] centring and viewport size (OT?)

2007-03-19 Thread Designer 
Thanks to those who responded on this.  What I've done is to make a file 
which uses the javascript to determine the space available in the 
browser window, viz:



  var height = 0;

if( typeof( window.innerWidth ) == 'number' )
{
//Non-IE
height = window.innerHeight;
}
else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) 
{
//IE 6+ in 'standards compliant mode'
height = document.documentElement.clientHeight;
}
else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) 
{
//IE 4 compatible
height = document.body.clientHeight;
}
if (height>0)
{
window.location.href = "index.php?height="+ height;
} else
exit();


Of course, since the php is server-side, I then have to send the height 
variable to the php via another page load (window.location.href).


This page then takes the height, knocks off the div height and divides 
by 2 to get the correct margin-top, which it then writes to the inline 
CSS in two sections:


100)
{
$space=$_GET['height'];
$margin=($space-200)/2;
} ELSE
{
$margin=100;
}

?>

\n";
echo"   The top margin is set to ".$margin."!";
echo"\n ";
?>

I have also trapped it, so that anyone without javascript will get a 
top-margin of 100px;


You can see all this at:  http://www.rhh.myzen.co.uk/gam/sandbox/

It's a bit clumsy, and I don't like reloading a page, so I'm grateful 
for any really good /suggestions / improvements!


Thanks.


http://www.rhh.myzen.co.uk/gam/sandbox/i

--
Bob

www.gwelanmor-internet.co.uk



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] centring and viewport size (OT?)

2007-03-17 Thread Gunlaug Sørtun 

Designer wrote:

Most of the methods (non-tables) for centering a div vertically  (and
 horizontally) suffer from the same problem: they use the div height 
to attach a top margin and use percentages. The result is that, when 
the window size gets to be smaller than the div size, the top of the 
content can't be seen and it won't scroll.


Not a problem...

...in decent browsers...

So, it seemed to me, it must be simple to 'get' the viewport size 
(javascript, DOM?), subtract the div height, then apply a top margin 
in CSS with php. I'd rather do it all in php to avoid folk without 
js, but that seems improbable)


...but if you can find ways to make IE behave, then nothing would be
better than that. Make sure you only target IE though :-)

Some info...


...and good luck ;-)

regards
Georg
--
http://www.gunlaug.no


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] centring and viewport size (OT?)

2007-03-17 Thread David Hucklesby 
On Sat, 17 Mar 2007 13:03:25 +, Designer wrote:
> [...]
> Most of the methods (non-tables) for centering a div vertically  (and 
> horizontally)
> suffer from the same problem: they use the div height to attach a top margin 
> and use
> percentages. The result is that, when the window size gets to be smaller than 
> the div
> size, the top of the content can't be seen and it won't scroll.  So, it 
> seemed to me,
> it must be simple to 'get' the viewport size (javascript, DOM?), subtract the 
> div
> height, then apply a top margin in CSS with php. I'd rather do it all in php 
> to avoid
> folk without js, but that seems improbable)
>
There are several methods listed on CSS-Discuss[1] (scroll to the bottom).

FWIW - Using display: table; and display: table-cell; works well for 
non-IE browsers[2]. But I never found a "pure CSS" way that works
reliably for IE, so I (gasp) use a single-cell table.

You could cheat, and add the table markup to IE with a script.
With PHP you would have to sniff for IE, while JavaScript would be 
a bit more reliable in a way, since IE employs its own methods, 
avoiding confusion when a browser alters the user-agent string to 
pretend it is IE.

A case for AJAX, perhaps?

But - yes - you *do* need client-side scripting to detect the size
of the viewport.

--
[1] 
[2] 

Cordially,
David
--



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] centring and viewport size (OT?)

2007-03-17 Thread David Hucklesby 
On Sat, 17 Mar 2007 13:03:25 +, Designer wrote:
> [...]
> Most of the methods (non-tables) for centering a div vertically  (and 
> horizontally)
> suffer from the same problem: they use the div height to attach a top margin 
> and use
> percentages. The result is that, when the window size gets to be smaller than 
> the div
> size, the top of the content can't be seen and it won't scroll.  So, it 
> seemed to me,
> it must be simple to 'get' the viewport size (javascript, DOM?), subtract the 
> div
> height, then apply a top margin in CSS with php. I'd rather do it all in php 
> to avoid
> folk without js, but that seems improbable)
>
There are several methods listed on CSS-Discuss[1] (scroll to the bottom).

FWIW - Using display: table; and display: table-cell; works well for 
non-IE browsers[2]. But I never found a "pure CSS" way that works
reliably for IE, so I (gasp) use a single-cell table.

You could cheat, and add the table markup to IE with a script.
With PHP you would have to sniff for IE, while JavaScript would be 
a bit more reliable in a way, since IE employs its own methods, 
avoiding confusion when a browser alters the user-agent string to 
pretend it is IE.

A case for AJAX, perhaps?

But - yes - you *do* need client-side scripting to detect the size
of the viewport.

--
[1] 
[2] 

Cordially,
David
--



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] centring and viewport size (OT?)

2007-03-17 Thread Lee Powell 

Hi Bob

How about adding an 'overflow: scroll' to the containing div, or  
failing that allocate it a 'min-height'? That might avoid having to  
use unnecessary javascript.


Regards
Lee

On 17 Mar 2007, at 13:03, Designer wrote:

I'm sorry if this is OT [but hey - it's weekend :-) ] but I'm  
pretty useless at javascript, DOM and all that and I've really  
struggled finding the info I need.


Most of the methods (non-tables) for centering a div vertically   
(and horizontally) suffer from the same problem: they use the div  
height to attach a top margin and use percentages. The result is  
that, when the window size gets to be smaller than the div size,  
the top of the content can't be seen and it won't scroll.  So, it  
seemed to me, it must be simple to 'get' the viewport size  
(javascript, DOM?), subtract the div height, then apply a top  
margin in CSS with php. I'd rather do it all in php to avoid folk  
without js, but that seems improbable)


But I'm in a muddle!

I feel sure someone has already done this, so I'm asking if anyone  
can point me somewhere for the info I need?  I can't find it!


Thanks.

--
Bob

www.gwelanmor-internet.co.uk



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***