Trying to set left / top position of popup calendar 1

[adddeveloper]

I'm trying to set the top and left properties of my popup calendar depening on which button I click, but can't get it to work with anything I try.

Here's what's in my function:

function PopupPicker(ctl, l, t)
{
var PopupWindow = null;
//settings='width'+ w + ', height='+ h ', location=no, directories=no, menubar=no, toolbar=no, status=no, scrollbars=no, resizable=no, dependant=no';
PopupWindow=window.open('DatePicker.aspx?Ctl=' + ctl, 'DatePicker', 'left='+l,top='+t');
PopupWindow.focus();
}

Here's my image code:
<img src="images/Calendar.gif" onclick="PopupPicker('StartDate', 250, 250);

 

[adddeveloper]

This did it:
PopupWindow=window.open('DatePicker.aspx?Ctl=' + ctl, 'DatePicker', 'left='+l, 'top='+t);

...was missing a space after the comma b/n left and top

Thanks!

 

[theniteowl]

Want another challenge?
Place the popup dynamically based on the location of the item it was called from rather than fixed positioning.

If a client has their browser at less than full screen and maybe moved to the right bottom corner of the screen and you use a fixed set of coordinates to place the popup at then it will not be relative to the button it was called from on the page.

What I have done is to move the popup INTO the page and use a DIV rather than an external window and I use positioning relative to the element that causes the function to display the DIV. I also detect whether the known height/width of the DIV is going to end up offscreen based on the position and the browser window and then adjust the placement of the DIV accordingly.
Making it a psuedo-popup inside the same browser window is a lot cleaner than an external window and prevents popup blockers from interfering with critical operations on the page.

Just things to think about.


At my age I still learn something new every day, but I forget two others.

 

[adddeveloper]

theniteowl,

Thanks for the tip! That sounds cool. I try that. Much better than the way I have it now.

I didn't want to hard code the calendar pop-up, but for some reason couldn't pass the top & left from each button. I don't know why it won't work.

Thanks!

 

[adddeveloper]

theniteowl,

I went with an external page since I'm using the ASP.NET 1.1 calendar. If the user selects another month, then the page posts back. I had the external page, so on post-back, the "calendar" page still stays up.

My first round was with a div tag, and that's much cleaner, but when another month was selected, the page would post to the server, and the div tag would be hidden again.

I know there's a better way than what I'm doing now, I just couldn't get any other calendar that was Javascript specific to work.

I'll keep chuggin' away.

 

[theniteowl]

I see, you are using an ASP calendar so it processes server-side and has to reload the form page in order to insert the new date value.

A client-side calendar would work better if you want to avoid the page reloading while selecting dates and still do the positioning. It is much cleaner but you do have to rely on the client having Javascript enabled for it to work.
Then again, you have to rely on the client not having a popup blocker running in order for the ASP calendar to work so there is a trade off either way.

I started out with a Javascript popup calendar and later modified it so that it would work within the same page in a DIV. I then modified it so that it would position relative to the element that called it and finally added additional code to test if the position would push the calendar offscreen and adjust it accordingly. The last part was difficult to get working well cross-browser because they do not all report their screen sizes and positions the same. For instance I could never get true positions in a FireFox window where it has bottom and side scrollbars. It would not give me accurate info on the space taken up by the bottom scrollbar. I had not yet found a perfect solution when I had to move on to other projects so in Firefox if the box moves just a little off the bottom of the screen in some situations it does not know enough to flip the box position up the correct amount. I will eventually re-visit that problem but have no time right now.

Good luck.


At my age I still learn something new every day, but I forget two others.

 

[theniteowl]

adddeveloper, take a look at this thread: thread216-1320774
He is making use of a DHTML calendar that displays on page.
I noticed that the calendar has the ability to locate itself relative to the elment it is called from and manages to keep itself onscreen.
It might be helpful for future use. You could use the methods for positioning and displaying even for things other than calendars like popup help info on a page.
It's useful just to see an approach to determining relative positions on the page.


At my age I still learn something new every day, but I forget two others.

 

[adddeveloper]

theniteowl,

I've been looking around, and found this:

http://www.dynamicdrive.com/dynamicindex6/popcalendar2.htm

I like it since it goes out to a far enough year span.

Bummer that the asp.net calendar only changes per month, not by year, so I had to scrap that idea and went with the link above!

Thanks again!