visibility hidden vs. display none;

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:28

visibility hidden vs. display none;

Poster: sofro
Dated: Tuesday October 25 2005 - 15:39:19 BST

Hi.
I have specification like this:
1. Horizontal, two level menu.
2. First level is always visible and centered (according to page). (it is placed in table, which is centered)
3. Second level have to be placed under first level start at the same left position as first level.
(pretty similar to Amazon Style Tab Menu Example except that submenu has to start at the same left position as first level)

Code:

|<---------------- page ----------------->|

+-----------------------------------------+
|First level:                             |
|  +-----------+-----------+-----------+  |
|  |  Topic 1  |  Topic 2  |  Topic 3  |  |
|  +-----------+-----------+-----------+  |
|                                         |
|Submenu for Topic 1:                     |
|  +-----------+-----------+-----------+  |
|  |>>Topic 1<<|  Topic 2  |  Topic 3  |  |
|  +-----------+-----------+-----------+  |
|  +--------------+---------------+       |
|  | SubTopic 1-1 | Sub Topic 1-2 |       |
|  +--------------+---------------+       |
|                                         |
|Submenu for Topic 2:                     |
|  +-----------+-----------+-----------+  |
|  |  Topic 1  |>>Topic 2<<|  Topic 3  |  |
|  +-----------+-----------+-----------+  |
|  +--------------+---------------+       |
|  | SubTopic 2-1 | Sub Topic 2-2 |       |
|  +--------------+---------------+       |
|                                         |
|Submenu for Topic 3:                     |
|  +-----------+-----------+-----------+  |
|  |  Topic 1  |  Topic 2  |>>Topic 3<<|  |
|  +-----------+-----------+-----------+  |
|  +--------------+---------------+       |
|  | SubTopic 3-1 | Sub Topic 3-2 |       |
|  +--------------+---------------+       |
+-----------------------------------------+

Problem is: if I use position = "relative"; and left = 0; then table which contains menu is (n-1) times higher as should be. n is count of submenus.
Milonic menu use visibility instead of display, so all relative menus takes its space.

It is rendered like this:

Code:

+-----------------------------------------+
|                                         |
|  +-----------+-----------+-----------+  |
|  |  Topic 1  |  Topic 2  |  Topic 3  |  |
|  +-----------+-----------+-----------+  |
|  +--------------+---------------+       |
|  | SubTopic 1-1 | Sub Topic 1-2 |       |
|  +--------------+---------------+       |
|  +--------------+---------------+       |
|  | SubTopic 2-1 | Sub Topic 2-2 |       |
|  +--------------+---------------+       |
|  +--------------+---------------+       |
|  | SubTopic 3-1 | Sub Topic 3-2 |       |
|  +--------------+---------------+       |
+-----------------------------------------+

Can I fix this somehow to get result as I need?

index.html:

Code:

<html>
<body>
   <table align="center" cellpadding="0" cellspacing="0">
      <tr>
         <tr>
            <td style="vertical-align: top; text-align: left; padding: 0px 0px 0px 0px; height: 72px;">
               <script type="text/javascript" src="milonic_src.js"></script>
               <script type="text/javascript">
                  if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");
                  else   _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");
               </script>
               <script type="text/javascript" src="menu_data.js"></script>
            </td>
         </tr>
      </tr>
   </table>
   <a href="http://www.milonic.com/">JavaScript DHTML Drop Down Menu By Milonic</a>
</body>
</html>

menudata.js:

Code:

fixMozillaZIndex = true;
_menuCloseDelay = 500;
_menuOpenDelay = 0;
_subOffsetTop = 2;
_subOffsetLeft = -2;

with (menuStyle = new mm_style()){
itemheight = 25;
padding = 5;
}

with (subMenu = new mm_style()){
itemheight = 25;
padding = 5;
}

with (milonic = new menuname("Main Menu")){
position="relative";
noSubImageSpacing = true;
buildAllMenus = true;
alwaysvisible = 1;
orientation = "horizontal";
style = menuStyle;

aI("showmenu=Topic1;text=Topic 1;");
aI("showmenu=Topic2;text=Topic 2;");
aI("showmenu=Topic3;text=Topic 3;");
}

with (milonic = new menuname("Topic1")){
position = "relative";
left = 0;
style = subMenu;
orientation = "horizontal";
aI("text=SubTopic 1-1;");
aI("text=SubTopic 1-2;");
}

with (milonic = new menuname("Topic2")){
position = "relative";
left = 0;
style = subMenu;
orientation = "horizontal";
aI("text=SubTopic 2-1;");
aI("text=SubTopic 2-2;");
}

with (milonic = new menuname("Topic3")){
position = "relative";
left = 0;
style = subMenu;
orientation = "horizontal";
aI("text=SubTopic 3-1;");
aI("text=SubTopic 3-2;");
}

drawMenus();

Poster: Ruth
Dated: Monday October 31 2005 - 20:13:28 GMT

Try this:

menu_data.js would be

Code:

fixMozillaZIndex = true; 
_menuCloseDelay = 500; 
_menuOpenDelay = 0; 
_subOffsetTop = 2; 
_subOffsetLeft = -2; 

with (menuStyle = new mm_style()){ 

itemheight = 25; 
padding = 5; 
} 

with (subMenu = new mm_style()){ 
itemheight = 25; 
padding = 5; 
} 



with (milonic = new menuname("Topic1")){ 
screenposition="center"; 
style = subMenu; 
orientation = "horizontal"; 
aI("text=SubTopic 1-1;"); 
aI("text=SubTopic 1-2;"); 
} 

with (milonic = new menuname("Topic2")){  
screenposition="center"; 
style = subMenu; 
orientation = "horizontal"; 
aI("text=SubTopic 2-1;"); 
aI("text=SubTopic 2-2;"); 
} 

with (milonic = new menuname("Topic3")){ 
screenposition="center"; 
style = subMenu; 
orientation = "horizontal"; 
aI("text=SubTopic 3-1;"); 
aI("text=SubTopic 3-2;"); 
} 

drawMenus(); 

Page would be

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head><title>whatever</title>
</head> 
<body> <script type="text/javascript" src="milonic_src.js"></script> 
               <script type="text/javascript"> 
                  if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>"); 
                  else   _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>"); 
               </script> 
            <script type="text/javascript" src="menu_data.js"></script> 
   <table align="center" cellpadding="0" cellspacing="0" border=0> 
      <tr> 
         <tr> 
            <td style="vertical-align: top; text-align: left; padding: 0px 0px 0px 0px; height: 72px;"> 
               
               <script type="text/javascript">
with (milonic = new menuname("Main Menu")){ 
position="relative"; 
noSubImageSpacing = true; 
buildAllMenus = true; 
alwaysvisible = 1; 
orientation = "horizontal"; 
style = menuStyle; 

aI("showmenu=Topic1;text=Topic 1;"); 
aI("showmenu=Topic2;text=Topic 2;"); 
aI("showmenu=Topic3;text=Topic 3;"); 
} 
drawMenus(); 
</script> 
            </td> 
         </tr> 
      </tr> 
   </table> 
   <a href="http://www.milonic.com/">JavaScript DHTML Drop Down Menu By Milonic</a> 
</body> 
</html> 

Try that and see if setting screen position center works. The only thing is, it will make it centered so if it's longer than the main menu, it will center under it, not start at the left position of the main menu.

When you place a menu in a table, the main menu must either be in it's own data file, or in the table within script tags. If you don't want the code in the table as I have it, then take what you see there and place it in a separate file and save it as ??? embedded_main.js or something. Then call that file in the table cell where you want the main menu. There's a simple beginners' table example here.

Ruth

Poster: sofro
Dated: Tuesday November 1 2005 - 11:43:33 GMT

Hi
Problem is, that starting on the left side is essential!!!
It can by fixed by using display, instead of visibility.
Is there a particular reason why in milonic menu is used visibility instead of display?

Industrial Strength JavaScript and DHTML Menus

visibility hidden vs. display none;