M
mavigozler
Using script, I am trying to make a regular menubar. The iteractive
document is here:
http://mavigozler.awardspace.info/ScriptedMenuTesting.html
My problem is that the dynamic (popup) appearance of menus as the pointing
device is passed over the menu headers "Posted" or "Drafted" is not
persisting.
For instance, once the "Drafted" menu appears, trying moving the pointing
device down the menu to the 3rd or 4th menu command. The menu instantly
disappears before you can get to the lower-positioned menu commands.
Who would like to take a stab at it?
I am attempting to deal with only this problem. I am aware of many other
problems with this document set up as well, but I am in the one-major-
headache-at-a-time phase right now. However, if you have suggestions about
other aspects of document structure and presentation, I am very receptive.
====
Here are the notes which you might consider relevant in helping me on this
problem:
DOCUMENT STRUCTURE:
1. The document validates as strict HTML. Also validates at CSS 2.1.
2. Within the document body---which is styled with "position:fixed"---are
three tables:
=== Table 1 is presented within a DIV element that is supposed to become
scrollable on overflow of the table. The table is generated by PHP
interaction with MySQL database which is supposed to contain a tabulated
set of records being HTML documents (of political opinion essays) which are
posted--namely in "posted" mode---to a web site. Within the scrollable
DIV, another table, which is not presented in this document example, will
also follow Table 1: it contains the set of records of HTML documents
which are political opinion essays which are being
written/composed/edited---namely in "draft" mode---and which can be posted.
==== Tables 2 and 3 occur below the scrollable DIV and are styled as
"display:none". These are two-column tables which are used EITHER to add
new records to the "posted" (via Table 2) or "drafted" (via Table 3) OR to
edit existing records. Tables 2 and 3 are set to display ("display:table")
with other form controls, when a record in either the "posted" or
"drafted" tables is clicked with the pointing device, or when a form
control (namely the "Create New Record" command under the "Drafted" menu)
is selected to display an empty Table 3. Note that Table 3 in this
document example can never be made to appear, since the "Draft Articles"
table is omitted for interests of brevity. Table 2 can be made to appear
by clicking a row within the "Posted Articles" table.
Note that all these tables are created in this document example with
scripts: in the working version, the HTML markup is served as real text
from a PHP input source.
3. Above the scrollable DIV containing the data tables are two DIV elements
each positioned absolutely (not floated) which contain the menus. A SPAN
element actually contains menu headers and has onmouseover and onmouseout
events to color the menu header text when the pointing device is in or out.
Also when the pointing device is in (onmouseover), the menu is "opened."
When the point device is out, the menu is "closed."
The menu commands under the menu header are LI elements contained within a
UL element. The UL element has onmouseover and onmouseout events defined:
onmouseover sets a global JS variable, and onmouseout calls a function
named "exitedMenu(this);". Each LI item has an onclick event defined which
is supposed to call a function corresponding to the menu command if it is
clicked.
DOCUMENT INTERACTIVITY:
1. Several script functions are defined within the HEAD of the document.
* function hilightRow(rowObj)
called as an onmouseover event when the pointing device enters a table
row, this changes the background color of the table row to indicate it is
affected by clicking
* function unhilightRow(rowObj)
called as an onmouseout event when the pointing device leaves a table row
and the row color is returned to the unselected state
* function menuOpen(obj)
called from an onmouseover event when the pointing device is passed over
the span element containing a menu header, this code changes the color of
span element contained text, sets the global variable 'withinMenu' to the
text (name) of the menu header, and sets the visibility of the menu (UL
box) to visibile
* function menuHeaderUnselect(obj)
called from an onmouseout event when the pointing device leaves a menu
header span element in the menubar
* function menuClose(obj)
called actually after a timeout of 100 ms from the menuHeaderUnselect
function: this will close the displayed menu EXCEPT if the global variable
'withinMenu' is not 'null' and is a string value equal to
* function exitedMenu(ulObj)
called from an onmouseout event in the displayed menu, which is really an
unnumbered list (UL). It is sort of the equivalent of menuHeaderUnselect,
when the pointing device leaves the menu header. This function sets the
global variable 'withinMenu' to 'null' and then calls menuClose() to finish
the job.
* other functions do other things such as create/insert new records to
tables or edit existing records, and explanation of their code is
essentially irrelevant to the problem presented
document is here:
http://mavigozler.awardspace.info/ScriptedMenuTesting.html
My problem is that the dynamic (popup) appearance of menus as the pointing
device is passed over the menu headers "Posted" or "Drafted" is not
persisting.
For instance, once the "Drafted" menu appears, trying moving the pointing
device down the menu to the 3rd or 4th menu command. The menu instantly
disappears before you can get to the lower-positioned menu commands.
Who would like to take a stab at it?
I am attempting to deal with only this problem. I am aware of many other
problems with this document set up as well, but I am in the one-major-
headache-at-a-time phase right now. However, if you have suggestions about
other aspects of document structure and presentation, I am very receptive.
====
Here are the notes which you might consider relevant in helping me on this
problem:
DOCUMENT STRUCTURE:
1. The document validates as strict HTML. Also validates at CSS 2.1.
2. Within the document body---which is styled with "position:fixed"---are
three tables:
=== Table 1 is presented within a DIV element that is supposed to become
scrollable on overflow of the table. The table is generated by PHP
interaction with MySQL database which is supposed to contain a tabulated
set of records being HTML documents (of political opinion essays) which are
posted--namely in "posted" mode---to a web site. Within the scrollable
DIV, another table, which is not presented in this document example, will
also follow Table 1: it contains the set of records of HTML documents
which are political opinion essays which are being
written/composed/edited---namely in "draft" mode---and which can be posted.
==== Tables 2 and 3 occur below the scrollable DIV and are styled as
"display:none". These are two-column tables which are used EITHER to add
new records to the "posted" (via Table 2) or "drafted" (via Table 3) OR to
edit existing records. Tables 2 and 3 are set to display ("display:table")
with other form controls, when a record in either the "posted" or
"drafted" tables is clicked with the pointing device, or when a form
control (namely the "Create New Record" command under the "Drafted" menu)
is selected to display an empty Table 3. Note that Table 3 in this
document example can never be made to appear, since the "Draft Articles"
table is omitted for interests of brevity. Table 2 can be made to appear
by clicking a row within the "Posted Articles" table.
Note that all these tables are created in this document example with
scripts: in the working version, the HTML markup is served as real text
from a PHP input source.
3. Above the scrollable DIV containing the data tables are two DIV elements
each positioned absolutely (not floated) which contain the menus. A SPAN
element actually contains menu headers and has onmouseover and onmouseout
events to color the menu header text when the pointing device is in or out.
Also when the pointing device is in (onmouseover), the menu is "opened."
When the point device is out, the menu is "closed."
The menu commands under the menu header are LI elements contained within a
UL element. The UL element has onmouseover and onmouseout events defined:
onmouseover sets a global JS variable, and onmouseout calls a function
named "exitedMenu(this);". Each LI item has an onclick event defined which
is supposed to call a function corresponding to the menu command if it is
clicked.
DOCUMENT INTERACTIVITY:
1. Several script functions are defined within the HEAD of the document.
* function hilightRow(rowObj)
called as an onmouseover event when the pointing device enters a table
row, this changes the background color of the table row to indicate it is
affected by clicking
* function unhilightRow(rowObj)
called as an onmouseout event when the pointing device leaves a table row
and the row color is returned to the unselected state
* function menuOpen(obj)
called from an onmouseover event when the pointing device is passed over
the span element containing a menu header, this code changes the color of
span element contained text, sets the global variable 'withinMenu' to the
text (name) of the menu header, and sets the visibility of the menu (UL
box) to visibile
* function menuHeaderUnselect(obj)
called from an onmouseout event when the pointing device leaves a menu
header span element in the menubar
* function menuClose(obj)
called actually after a timeout of 100 ms from the menuHeaderUnselect
function: this will close the displayed menu EXCEPT if the global variable
'withinMenu' is not 'null' and is a string value equal to
* function exitedMenu(ulObj)
called from an onmouseout event in the displayed menu, which is really an
unnumbered list (UL). It is sort of the equivalent of menuHeaderUnselect,
when the pointing device leaves the menu header. This function sets the
global variable 'withinMenu' to 'null' and then calls menuClose() to finish
the job.
* other functions do other things such as create/insert new records to
tables or edit existing records, and explanation of their code is
essentially irrelevant to the problem presented