[Top]
More advice for the full screen mode.
   
Sivut toimivat riittävän hyvin MS IE 4.0+, Opera 5.x+, Netscape 6.0+/ vast. Mozilla ja Konqueror 3.x selaimilla. Yleisesti ottaen sivut toimivat parhaiten uusimmilla Opera selaimilla. Sivujen toimivuus vanhemmissa selaimissa on heikko, erityisesti Netscape 4.x kohdalla.

I list below all topic groups, which I have done according to subjects, which they handle. You can return to this topic group by using this menu and the link Table of topic groups on the top of the each page.
 
 
Search:
[Help]

Timered menus

The author must then just select, how menus should work in each levels. Below is an edited screen capture from the English example page[S]:


CSS-site

How to design dynamic menus have timer functions and the menu use the following system (the explanation has shortened source code examples):

  1. From the main menus the visitor can go the the second level links by moving the mouse over the link and then moving the mouse to the right (if the visitor clicks the link he goes to the first page of the selected page group) or clicking links in the arrows (). Selecting one sub-menu closes other second level menus:

    <a href="index2.php3#Full" onmouseover="ajastin_pois(); MM_showHideLayers('indexPages','','hide','allSites','','hide','Generic','','show',...);" title="">Generic</a>
    or
    <a href="javascript:ajastin_pois(); MM_showHideLayers('indexPages','','hide','allSites','','hide',...);" title="..."> <img src="..." title="..." alt="..."/></a>
  2. Going out from the second level menus they disappear from the screen after few seconds with a timer. It is possible to go from the second-level to the third-level at the same way as from first-level to second-level. Below is the source code, which keeps the second level menu visible and close it after going out of the menu:

    <div id="Generic" class="pageGroup" onmouseover="ajastin_pois(); MM_showHideLayers('Generic','','show');" onmouseout="piilota_valikot_hitaasti('Generic');">
  3. The third-level menu keeps the second-level menu visible. The third level menu can be closed fast when the visitor goes out of the menu:

    <div id="Generic1" class="pageGroup" onmouseover="ajastin_pois(); MM_showHideLayers('Generic','','show','Generic1','','show');" onmouseout="MM_showHideLayers('Generic','','show'); piilota_valikot_nopeimmin('Generic1');">

In the previos explained solution has quite many generic and browser-depending JavaScript-related problems.

Generic notes:

  1. Commands for the container elements have higher priority than commands for individual links - links inside the container element can't change show/ hide commands, if the commands concern the same element(s)!

  2. The previous explained system has problems with closing in some situations third-level menus, if the visitor moves the mouse to the left and ever goes to the menu itself.

    CSS-site

    If there is no links on the left, the third-level menu might remains visible until the visitor goes to the main menu. In the meantime the third-level menu leaves as an "orphan" on the screen. The problem could be partially solved by adding to the left of the opening link of the third-level menu a transparent image or some non-breaking spaces (&nbsp;), which (normally) close the opened third-level sub-menu. Below is an example of an imaginary filling image (so-called spacer images, which are usually transparent GIF-images):

    <a class="filling" href="#" onmouseover="ajastin_pois(); MM_showHideLayers('AppendixesStandards','','hide');"> <img src="../Images/spacer.gif" width="11" height="15" /></a>

    These kinds of tricks are in my mind irritating artificial. They have the problem that fast movements of the mouse might leave third-level menus visible, because active areas are very small. The browser has just not enough time to react to the events.

  3. Additional active spacer images are needed also in situations, where the lowest links of menus open a sub-menu. In these situations the invisible links close the last opened sub-menu.

  4. If function calls become too big to keep track, they can be gathered as new functions, for example (this is in the Finnish example page):

    function hideThlMenus() /* Hide all third-level menus */
    {ajastin_pois(); MM_showHideLayers('GenericPreface','','hide',...);}
  5. I have found that slow reacting speeds of browsers is a generic problem. That's why I have added some such closing commands to the main menus, which should in principle be needed only in the second-level menus.

Browser-specific notes:

  1. Especially in Opera 5.x-6.x and sometimes also in MS IE second level menus might disappear unexpected if the visitor scrolls menu items upward and downward without clicking anything. In Opera 7.0 Beta1 doesn't have stability problems with timered menus.. Menus are even more stable than in MS IE browsers.

  2. Opera 5.x-6.x don't keep in this solution second-level menus reliable open, when the visitor is in some third-level sub-menu. The visitor must whole time move his mouse. If Opera have hided the second-level menu, moving of the mouse pointer can again get visible the hided second-level menu. The user of the whole menu system feels quite unstable even if the stability problem is not serious.

  3. If in the third-level menu in the state onmouseout have been not been use a timer but instead onmouseout="MM_showHideLayers(...,'Generic1','','hide');" it is not possible to go the third-level menu at all with Netscape 6.1 level Mozilla 0.9!

  4. If for example the third level menu AppendixesStandards will be closed from the second-level menu with MM_showHideLayers('AppendixesStandards','','hide'); the result is that with MS IE 4.x for Windows browsers it not possible to go to the third-level menu at all, because the browser support buggy onmouseout for container elements (onmouseout affects the result in areas, which are not links even if the behavior should be dependent on the edges of the container element). If the closing has been done with the timer function piilota_valikot_nopeasti('AppendixesStandards'); Opera 5.x-6.x have problems with it, because it cause in Opera unexpected closing of menus! In my mind following commands for the second-level menus are not very useful:

    <div id="Appendixes" class="pageGroup" onmouseover="ajastin_pois(); MM_showHideLayers('Appendixes','','show');" onmouseout="piilota_valikot_hitaimmin('Appendixes'); MM_showHideLayers('AppendixesStandards','','hide');" >
    or
    <div id="Appendixes" class="pageGroup" onmouseover="ajastin_pois(); MM_showHideLayers('Appendixes','','show');" onmouseout="piilota_valikot_hitaimmin('Appendixes'); piilota_valikot_nopeasti('AppendixesStandards');" >
  5. Browsers work better if the timer has not set direct to the links (the A elements) but instead in the container block, in the ancestor element (possible padding areas are active, but borders and margins don't belong to the active area of the container element). Timers for individual links cause flickering, links disappear unexpected and they can't be opened immediately - in overall the accessibility is in general bad! Especially Opera 5.x-6.x have problems. The same problems are also in MS IE for Windows browsers, but not as a bad as in Opera 5.x-6.x. I found that closing links with the container element don't however always work in Opera 5.x-6.x as expected if timer functions has been used (Opera might close menus unexpected).

  6. In Netscape 4.x browsers container element of links work at the previous mentioned way only by using LAYER or ILAYER elements. This one of the two reasons, why I use LAYER elements. I must use them also because used CSS didn't work in all situations in Netscape browsers together with DIV elements and JavaScript-encoding as it does in other DHTML/ DOM capable browsers. It is however possible to get JavaScript to work together with LAYER elements. I had difficulties to get JavaScript to work with the first LAYER. I took off position-related CSS from the corresponding DIV element (other browsers get it linked). I used in certain evaluation versions formal empty "menus" (<div id="foo" style="visibility:hidden"></div>), which I don't anymore need. In random situations I need to generate an additional LAYER in order to get the first menu-related element to work properly. I got finally every desired menu to work with LAYER elements. I have generated them with following kinds of scripts:

    <script language="JavaScript" type="text/javascript">
    <!--
    if (document.layers)
    {document.writeln('\<lay'+'er\ width=\"120\"\ visibility=\"hidden"\ top=\"66\"\ left=\"141\"\ id=\"MainPages\"\ bgcolor=\"white\"\ onmouseover=\"ajastin_pois(); MM_showHideLayers(\'MainPages\',\'\',\'show\');\"\ onmouseout=\"piilota_valikot_hitaasti(\'MainPages\');\"\>');}

    //-->
    </script>
  7. According to an e-mail onmouseover event handler attributes didn't always work in MS IE 5.0 for Mac browsers in some evaluation version of my dynamic menus. Because of this reason in some pages only javascript:... commands opened sub-menus. If possible dynamic menus should be tested also in MS IE 5.0 for Mac browsers. According to my experience the same kind of problems are also in Opera 4.x browsers, but it is not necessary to take account Opera 4.x browsers.


[Top]