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.
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.
<input type="color">
In Chrome and Firefox clicking this calls the browser's built-in color picker
The color selection part is easy. However, there are 2 very difficult
features that I consider mandatory in my implementation.
The user must be able to move the dialog box using the mouse
There must be a Close Button in the title bar
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....)
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.
.mcUIWindow{
border: 5px ridge grey;
background-color:lightgrey;
width:300; /* just a default */
height:50;
}
.mcUITitlebar{
border-bottom: 5px ridge grey;
background-color:blue;
color:white;
font-weight: bold;
cursor:move;
}
<div id=mcUIwindow_div class=mcUIWindow>
<div class=mcUITitlebar >Window title
</div>
Test window
</div>
Window title
Test window
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.
Adding a button - float=right and relative position
The next problem is the size of the X.
The obvious option is to simply use a capital-X (duh), but that may be unreliable
because the default font is system dependent.
As a result, developers have no idea how their application will display.
(A very serious problem.)
Window title
Adding a button - Using a capital-X
To me, on the current system, that looks pretty good
and seems like a reasonable place to stop.
However, most of the online examples (that I found) prefer to
use the × sign (×) and to enlarge the font
to improve visibility
(×).
Unfortunately, there are a number of side effects.
Window title
Adding a button - font-size: 28px
Well, at least the 'X' looks great.
Using more styles, the size of the button is easy to fix
- the position of the 'X' ... not so much!
The original buttons were
width: 23px or 24px
height: 22px
So the next example forces a new button size.
Window title
Adding a button - font-size: 28px and new size
Now to move the 'X'.
- text-indent: -4 fixes half the problem.
Window title
Adding a button - text-indent: -4
And now I am stumped - I can't find a code to move the text up.
vertical-align has no effect (used for sup and sub )
padding only moves it down
This is why I don't use a button to close windows.
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
Personally, I think this is a terrible example -
this item will be rendered identical to (color, font, styling) the other anchor tags (links).
However, that isn't the function performed - it doesn't link to anything!
In addition, when the mouse hovers over the pseudo-button (link),
the Status Bar indicates that javascript:void(0)
will be executed when the pseudo-button is clicked.
(Try this in the example below.)
I consider this to be confusing and user hostile - not something I
want on my pages.
(And yes, I have seen this on other pages and it is confusing.)
I assume that they do this
to get the a:hover color change
and the related mouse cursor.
(No, they don't explain anything!)
However,
I think it is much better to make the Close Button its own class
and to modify the various styles as appropriate.
In other words - I reject this suggested technique provided
by w3schools.
Note:
For this example, the styles were modified to changes the colors and to fit the template.
The material above relies heavily on data from these references.
Unfortunately, they did not provide a working solution (an example) that
met my requirements.
In addition, I found these to be incomplete and hard to understand.
(I didn't find the hidden help, described below, until after this page
was almost complete.)
This is where to start - these are the only style sheets I found with line-by-line comments.
Unfortunately, styles are about all there is - there is extremely little explanation.
However, if you enter debug mode, you can see that the full explanation is there -
only it is commented out.
In Chrome (and perhaps some other browsers), in debug mode,
Right click the code and select Edit as HTML
Remove (or disable) the comment tags
Click out of the edit window to "save" and display the changes