Re: [WSG] centring and viewport size (OT?)
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?)
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?)
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?)
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?)
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?)
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?)
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?)
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?)
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?)
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] ***
