display position of the div

[meenu24]

Hi
I am trying to position a div in the center of the page. I have a function which finds the browser type and gets the height and width. How do I use this to display the div in the center of the page
function Browserinfo() {
var browserName=navigator.appName;
alert(browserName);
var browserVer=parseInt(navigator.appVersion);
alert(browserVer);
var fWidth;
var fHeight;
if (browserName=="Microsoft Internet Explorer")
{
fWidth = document.body.clientWidth;
fHeight = document.body.clientHeight;
alert("fWidth"+fWidth);
}
if (browserName=="Netscape")
{
fWidth = document.documentElement.clientWidth;
fHeight = document.documentElement.clientHeight;
alert("fWidth"+fWidth);
}
}

my div code
<div id="setaffiliates" style="display:none;position: absolute; padding:2px; width: 225px; left:30px; top:550px;">
</div>

thanks for your time

 

[BabyJeffy]

You can get the width and height of the document like this (tested in Fx and IE7):

alert(document.body.clientWidth);
alert(document.body.clientHeight);

And then it becomes a simple bit of maths to calculate the top left corner for the div (since you will know the width and height of the div, and the width and height of the document).

You'll need to remove the display:none for the div as well.

Let us know how you go,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[meenu24]

Thanks jeff.
I forgot to mention this, page is dynamic and div has to be displayed only after I press some button, which fetches some data and div has to present it.
How do I call div and pass this position, which I calculate.
I have not tested it in Fx and IE greater then 4 versions.
thanks
Meena

 

[BabyJeffy]

I suggest you identify your target audience and develop a solution that matches their profile. You need to decide this before you start development.

I develop standards compliant sites (sites with a validating doctype) and aim to support the current major release for all web browsers across all operating systems. In the case of IE for windows, I usually extend that as far back as version 6 - and charge extra if a client wants me to specifically code for IE5.x.

I suggest you stop trying to support 4.x browsers (unless they represent a significant portion of your expected user base) and focus on modern, standards complaint browsers. Here is a suggested list:

IE7
Fx 2
Safari 3
Opera 9

Obviously IE7 is only available for windows, but it's not actually supported on any other platforms, so there is little point worrying about it. You could also test with Netscape, Camino, Mozilla (Sea Monkey?) - but me personal experience says just the 4 above is needed.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[meenu24]

Hi,
Thanks for your suggestions. Being a newbie in html and js I guess, I keep learning day by day.
By the way this is a internal application which will be used for IE browsers, I was just testing with safari also.
Our expert opinion would be really useful to me.

thanks
Meena

 

[RestonDeveloper]

meenu24,

How do you want to handle resizing the window, would if users drags it down, shrinking but not minizing to desktop bar.

http://flumpcakes.co.uk/css/center-div-ie

this shows you the way to use css to make sure it's always centered horizontally.

also i suggest using a javascript framework like jquery or scriptalicious to fade the window in and out (lots of transitions)