get object position and change it?

[rockdale.green]

Hi,

I do not know where should I start to solve this problem.

I have a calendar inside a div on my webpage which will show /hide when
user click a button. but the button is almost at the bottom of my
webpage, I am using position :absolute for the div so everytime when
the div shows, it will "drop down" cause the vertical scroll bar
appears on web browser and the user have to scroll down to see the
whole calendar. I was trying to change the div position (e.g if it is
near the bottom of webbrowser then "drop-up") when the div is showing.

My question is
How can I know its position is near the bottom of web browser? (how can
I know the height of the browser)
How can I change the position of this div?

Thanks for any help and example links.

-rockdale

[Beni Rose]

Hey,
I'd be able to help a lot better if I could see the site, so I could
know what you're trying to do. However, I can help you with your
questions.

You can get the position of the object by doing this:
myDiv = document.getElementById('calendarDiv');
divPos = myDiv.style.top;

You can then check it against the size of the browser. In every browser
but IE, window.innerHeight will tell you your window size. So use this
code to get your height

if( typeof(window.innerHeight) == 'number' ) {
//Everything but IE
wHeight = window.innerHeight;
else if( document.documentElement && (
document.documentElement.clientWidth ||
document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
wHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth ||
document.body.clientHeight ) ) {
//IE 4 compatible
wHeight = document.body.clientHeight;
}

Now that you have your window height, test to see where your div is in
proportion to the middle of the screen.

if (myDiv.style.top (wHeight/2)){
//it is more than halfway down the page, pop it at the bottom
myDiv.style.top = (wHeight-myDiv.style.height) //You may need to play
with this a bit.
} else {
//it is more than halfway up the page, pop it at the top
myDiv.style.top = 0;
}

I hope this helped and I hope it's what you were looking to do. And of
course you'd have to replace the 'calendarDiv' with the id you assigned
your div (give it one if you haven't, and make sure it's unique).
Again, if you have a link, post it and I will take a look to see if I
am assuming things correctly. Have a good one!

~Ben~

ro************@gmail.com wrote:

Hi,

I do not know where should I start to solve this problem.

I have a calendar inside a div on my webpage which will show /hide when
user click a button. but the button is almost at the bottom of my
webpage, I am using position :absolute for the div so everytime when
the div shows, it will "drop down" cause the vertical scroll bar
appears on web browser and the user have to scroll down to see the
whole calendar. I was trying to change the div position (e.g if it is
near the bottom of webbrowser then "drop-up") when the div is showing.

My question is
How can I know its position is near the bottom of web browser? (how can
I know the height of the browser)
How can I change the position of this div?

Thanks for any help and example links.

-rockdale

[rockdale.green]

Thanks for the code sample. I will try it ans let you updated.

Again, thanks
-rockdale

Beni Rose wrote:

Hey,
I'd be able to help a lot better if I could see the site, so I could
know what you're trying to do. However, I can help you with your
questions.

You can get the position of the object by doing this:
myDiv = document.getElementById('calendarDiv');
divPos = myDiv.style.top;

You can then check it against the size of the browser. In every browser
but IE, window.innerHeight will tell you your window size. So use this
code to get your height

if( typeof(window.innerHeight) == 'number' ) {
//Everything but IE
wHeight = window.innerHeight;
else if( document.documentElement && (
document.documentElement.clientWidth ||
document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
wHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth ||
document.body.clientHeight ) ) {
//IE 4 compatible
wHeight = document.body.clientHeight;
}

Now that you have your window height, test to see where your div is in
proportion to the middle of the screen.

if (myDiv.style.top (wHeight/2)){
//it is more than halfway down the page, pop it at the bottom
myDiv.style.top = (wHeight-myDiv.style.height) //You may need to play
with this a bit.
} else {
//it is more than halfway up the page, pop it at the top
myDiv.style.top = 0;
}

I hope this helped and I hope it's what you were looking to do. And of
course you'd have to replace the 'calendarDiv' with the id you assigned
your div (give it one if you haven't, and make sure it's unique).
Again, if you have a link, post it and I will take a look to see if I
am assuming things correctly. Have a good one!

~Ben~

ro************@gmail.com wrote:

Hi,

I do not know where should I start to solve this problem.

I have a calendar inside a div on my webpage which will show /hide when
user click a button. but the button is almost at the bottom of my
webpage, I am using position :absolute for the div so everytime when
the div shows, it will "drop down" cause the vertical scroll bar
appears on web browser and the user have to scroll down to see the
whole calendar. I was trying to change the div position (e.g if it is
near the bottom of webbrowser then "drop-up") when the div is showing.

My question is
How can I know its position is near the bottom of web browser? (how can
I know the height of the browser)
How can I change the position of this div?

Thanks for any help and example links.

-rockdale