OBSOLETE CONTENT
The author of
this post has determined that this content is obsolete. Use at your own
risk! Blog posts are a point-in-time snapshot of the blogger's thinking
and should not be assumed to represent this blogger's current opinions.
This post was left up for historical purposes.
If you do Web Application development, you've no doubt struggled
with the task of creating Modal forms. You have different options
for doing this, each with their own advantages and pitfalls.
Hosting your form in a new browser instance (window.open()) is
really a kludge, and many users have popup blocking software which
will break this approach. Using true Modal dialogs
(window.showModalDialog()) doesn't work well from within
ASP.NET. Using draggable DIV elements solves some of these
issues, but has its own set of problems. Dragging DIV elements
involves using DHTML and JavaScript and the script that you have
to write to enable this can be tricky. Toss browsers other than
IE into the mix, and you've got even more problems.
Taking all this into account, I've come up with an approach that works pretty well from within ASP.NET applications. Sticky Draggable Divs! (SDDs) ;) They involve using DHTML Behaviors, and .htc files. If you're not familiar with this technology, see http://msdn.microsoft.com/library/default.asp?url=/workshop/components/htc/reference/htcref.asp.
So, check out my example of SDDs. I've included the source files in a .zip file here.
Creating SDD's is easy! Just follow these steps:
- Create an ABSOLUTELY positionable DIV element
- Reference the DragParent.htc file
- Include the DragParent namespace in the page's HTML element.
- Wrap an element within <DragParent:DragParentDiv> tags
Any element included within the <DragParent:DragParentDiv>
tags will become the anchor to enable dragging of that element's parent
DIV control. Within the .htc file, events are attached to
the element to support the dragging. When the dragging is
complete, a cookie is set so that the element will be positioned
properly for postbacks. This is also done automatically for you by the
.htc file.
For this to work well, and for the windows to be Draggable, your
users have to be using Internet Explorer 5 or above. I can count
on most of my users to be using IE. Mozilla users won't be able
to drag the window, but this is okay since they can still see the
content. The best part is that these nerds won't get
JavaScript errors, because Mozilla won't parse the HTC
script.
-Brendan