Javascript - Window Title Close Button - Failures

Developing a Close Button for a javascript window was significantly more challenging than it should have been. (I can't be the first person who needs this!) The successful approach I decided to use is documented documented on another page.

Since that page is already too long, I discuss the various failures here.

This page was developed using Chrome and Windows XP. When tested with other browsers, it is a complete mess. IE 8 on Windows XP is the worse - when the button is moved to the right, it is rendered below the Title Bar separator. In several of the Windows 10 browsers, the button height is less than the Title Bar height. The only solution is to have the code measure Title Bar height and adjust the button size accordingly - which I have not bothered to do here.

Background | Test fixture | Using an "input button" | Using the "button" tag | Anchor Tags | References


Background

When developing this page, I was trying to create a javascript based color picker similar to the one provided in Chrome and Firefox - mainly because the Microsoft browsers (Edge and IE) don't provide one. The color selection part is easy. However, there are 2 very difficult features that I consider mandatory in my implementation. This page concerns itself with only the Close Button. To see what I am trying to accomplish, just click the button above (not present in Edge or IE), or open any dialog box in another application. (In an application menu, dialog boxes are typically indicated by placing 3 dots after the menu option, as in File/Open....)


Test fixture

One technique to correctly place a single character in a title bar is described here. Most of that is not repeated here.

The primary testbed for the examples on this page is based on the Window Title Bar described here, but with modified styles and without the ability to drag it around the screen.

To manipulate the styles, right click on the object of your choice and select inspect (in Chrome, other browsers have something similar). The provided debug window allows you to add, modify, and disable any style.


Using an "input button"

The most obvious way to add a Close Button is to actually use a regular button and modify its properties (styles) until it works. A good start. The next example adds a float: right; style. Better - however the button is not quite in the corner. Specifically,