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

http://www.gunlaug.no/tos/alien/test_07_3810.html

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?

http://www.gunlaug.no/tos/alien/test_07_3810.html

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


script type=text/javascript
  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 (height0)
{
window.location.href = index.php?height=+ height;
} else
exit();
/script

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:


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

?

?php
echodiv id=\viewport\  style=\margin : .$margin.px auto;\\n;
echo   h1The top margin is set to .$margin.!/h1;
echo/div\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-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-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]
***



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] http://css-discuss.incutio.com/?page=CenteringBlockElement
[2] http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

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] http://css-discuss.incutio.com/?page=CenteringBlockElement
[2] http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

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 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...
http://www.gunlaug.no/tos/alien/test_07_3810.html
...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...
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/om/measuring.asp
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
...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]
***