Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

A new FAQ is born...

Status
Not open for further replies.
Targol

Targol

Technical User
Sep 13, 2002
908
FR
I wrote 2 faqs on the same suject : creating drop down menus with hidden div. They content all the necessary script and a detailled how to.
If you want to have a look :
JavaScript version : faq216-3320
VBScript version : faq329-3319

Tell me what you think of it. Water is not bad as long as it stays out human body ;-)
 
targol, I like the FAQ on How to write dynamic menus with JS and hidden divs., but one thing how does the submenu get hidden when the user mouses over an item and point the mouse-pointer elsewhere??
In my test run, I moused-over the last item OPTIONS, and a submenu appeared, but when I placd my mouse pointer elsewhere on the page the sub-menu was still visible and not hidden....
Aside from that, its a nice tutorial... :) Forget the Nobel Peace prize, I just want to take over the world!! [hammer]
 
Targol,

The amount of effort put into writing your FAQ doesn't deter the fact that it doesn't support web standards. Today mostly all web designers/developers recognize that we cannot continue supporting only our favorite browser anymore.

I don't understand why anyone would write a VBScript anymore if it can be done in Javascript (and on a side note VB is ugly looking). Another thing I dislike is that your faq doesn't show a crossbrowser version of doing things. It could easily work in all recent browser and not just Internet Explorer if you wanted to use standards. Gary Haran
 
GUJUm0deL : The disapearing of menus is obtained by the body onmouseover event handler. Are you sure you placed it ?

Gary : I wrote a VBScript version for people (like me) that works into a "Microsoft friend" company. In my work, I have to code several "full-client" tools to replace old .BAT files. The target language MUST be Vbs (and HTML for graphical tools). But... As I agree you, I also wrote a JS version. I must admit that even the JS version is V4+ browsers only.
Water is not bad as long as it stays out human body ;-)
 
Targol,

Actually you are wrong. The Javascript version you presented us only works with IE5 and above. It doesn't work with Gecko based browsers that support web standards. Gary Haran
 
Gary, can you tell me wich part of the FAQ doesn't work with Gecko for I can correct my FAQ to open it to the maximum browsers list. Water is not bad as long as it stays out human body ;-)
 
sure. Actually could you send me a link to a page where your menu works so I can just update the changes and send them to you? Gary Haran
 
Targol, I followed the code exactly as you wrote it, but when you mouseover a link and then move the curser to some place else on the window, the sublink's still visible... Forget the Nobel Peace prize, I just want to take over the world!! [hammer]
 
Gary, here is the full HTML code :
Code: 
<html>
<head>
<title>dynamic menu</title>
<LINK rel='stylesheet' type='text/css' href='DynamicMenu.css'>
<Script Language=&quot;javaScript&quot;>
var subMenus = new Array(&quot;sub_File&quot;, &quot;sub_Edit&quot;, &quot;sub_Display&quot;, &quot;sub_Options&quot;);

function ShowMenu() {
  
  window.event.cancelBubble = true;

  var o_toolbarItem = window.event.srcElement;
  var divId = &quot;sub_&quot; + o_toolbarItem.id;

  for (var i=0;i<4;i++) {
    var o_TmpSubmenu = document.getElementById(subMenus[i]);
    if (o_TmpSubmenu.id == divId )
      o_TmpSubmenu.style.display = &quot;block&quot;;
    else
      o_TmpSubmenu.style.display = &quot;none&quot;;
  }
}

function HideMenus() {

  for (var i=0;i<4;i++) {
    var o_TmpSubmenu = document.getElementById(subMenus[i]);
    o_TmpSubmenu.style.display = &quot;none&quot;;
  }
}

</Script>
</head>
<body onmouseover=&quot;HideMenus();&quot;>
  <Table ID=&quot;Table1&quot; border=&quot;1px&quot;>
    <col width=&quot;100px&quot;>
    <col width=&quot;100px&quot;>
    <col width=&quot;100px&quot;>
    <col width=&quot;100px&quot;>
    <tbody>
      <TR>
        <TD id=&quot;File&quot; onmouseover=&quot;ShowMenu();&quot;>File</TD>
        <TD id=&quot;Edit&quot; onmouseover=&quot;ShowMenu();&quot;>Edit</TD>
        <TD id=&quot;Display&quot; onmouseover=&quot;ShowMenu();&quot;>Display</TD>
        <TD id=&quot;Options&quot; onmouseover=&quot;ShowMenu();&quot;>Options</TD>
      </TR>
    </tbody>
  </Table>
  <Div id=&quot;sub_File&quot; class=&quot;subMenuDiv&quot; onmouseover=&quot;window.event.cancelBubble = true&quot; style=&quot;top : 40px; left: 13px&quot;>sub_File</div>
  <Div id=&quot;sub_Edit&quot; class=&quot;subMenuDiv&quot; onmouseover=&quot;window.event.cancelBubble = true&quot; style=&quot;top : 40px; left: 119px&quot;>sub_Edit</Div>
  <Div id=&quot;sub_Display&quot; class=&quot;subMenuDiv&quot; onmouseover=&quot;window.event.cancelBubble = true&quot; style=&quot;top : 40px; left: 225px&quot;>sub_Display</Div>
  <Div id=&quot;sub_Options&quot; class=&quot;subMenuDiv&quot; onmouseover=&quot;window.event.cancelBubble = true&quot; style=&quot;top : 40px; left: 331px&quot;>sub_Options</Div>
</body>
</html>


Full Css
Code: 
.subMenuDiv {
  border : solid 1px;
  position : absolute;
  display : block;
  width : 200px;
  height : 220px;
  overflow : hidden;
  text-align : left;
  z-index : 200;
}
Water is not bad as long as it stays out human body ;-)
 
Targol,

I did quite a few changes.

Sometimes standards compliancy isn't as easy as it could be. I blame MS for providing crooked ways of doing things in IE.

Unfortunatly because IE still is in the lead we have to continue to support it and because it's event handling differs from the World Wide Web Consortium accepted standard we have to catter to two very specific events system.

Events already aren't too easy to understand so to learn two systems is not always fun. I just wished that IE would start supporting real standards like Gecko Based Browsers (GBB).

So here is the updated Javascript (for standalone purpose the CSS is included right in the HTML). This is the easiest and cleanest way that I can get a menu working (without XAPI).

Notice that I prefer writing for loops rather than typing something a few times (writing onmouseover=&quot;&quot; every time is annoying to me. I prefer having a for loop do that for me. Especially if my menu could have 15 items. Not only do I save typing but I save bandwith as well! ;)

The HideMenu function was changed so that it hides all submenus except the one I give as an argument. If I don't give any arguments it hides all so the body can use it too.

I hope it's readable enough for people to understand. And I really hope you accept it as your FAQ(please improve it beforehand if you wish).

To me Microsoft is the bully in the schoolyard and too many people in too many countries will not have access to sites if they depend on IE only features. Standards are there so that everyone even with a free browser and operating system should be able to enjoy the web fully. It used to be what the web was all about. Free access for all and peace on earth! :)

So on that note here is the code (works on GBB and in theory IE5+):

<html>
<head>
<title>dynamic menu</title>

<style>
.subMenuDiv
{
border : solid 1px;
position : absolute;
display : block;
width : 200px;
height : 220px;
overflow : hidden;
text-align : left;
z-index : 200;
visibility = hidden;
}
</style>

<Script Language=&quot;javaScript&quot;>
var menus = [];
var subMenus = [];

function ShowMenu(event)
{
var event = event || window.event;
event.cancelBubble = true;

var element = event.target ? event.target : event.srcElement ;

var menu = 0; // this little for loop could be replaced with XAPI's Array.indexOf method
for (var i = 0; i < menus.length; i++)
{
if (menus == element)
{
menu = i;
break;
}
}

subMenus[menu].style.top = element.offsetTop + element.offsetHeight + document.getElementById(&quot;Table1&quot;).offsetTop;
subMenus[menu].style.left = element.offsetLeft + document.getElementById(&quot;Table1&quot;).offsetLeft;

HideMenus(menu);
}

function HideMenus(menu)
{
for (var i = 0; i < subMenus.length; i++)
{
subMenus.style.visibility = (i == menu) ? &quot;visible&quot; : &quot;hidden&quot; ;
}
}

function initMenu()
{
menus = [document.getElementById(&quot;File&quot;),
document.getElementById(&quot;Edit&quot;),
document.getElementById(&quot;Display&quot;),
document.getElementById(&quot;Options&quot;)];
subMenus = [document.getElementById(&quot;sub_File&quot;),
document.getElementById(&quot;sub_Edit&quot;),
document.getElementById(&quot;sub_Display&quot;),
document.getElementById(&quot;sub_Options&quot;)];

for (var i = 0; i < menus.length; i++)
{
menus.onmouseover = ShowMenu;
}

for (var i = 0; i < subMenus.length; i++)
{
subMenus.onmouseover = function (event)
{
(event || window.event).cancelBubble = true;
}
}
}
</Script>
</head>
<body onmouseover=&quot;HideMenus();&quot; onload=&quot;initMenu()&quot;>

<Table ID=&quot;Table1&quot; border=&quot;1px&quot;>
<col width=&quot;100px&quot;>
<col width=&quot;100px&quot;>
<col width=&quot;100px&quot;>
<col width=&quot;100px&quot;>
<tbody>
<TR>
<TD id=&quot;File&quot;>File</TD>
<TD id=&quot;Edit&quot;>Edit</TD>
<TD id=&quot;Display&quot;>Display</TD>
<TD id=&quot;Options&quot;>Options</TD>
</TR>
</tbody>
</Table>

<Div id=&quot;sub_File&quot; class=&quot;subMenuDiv&quot; style=&quot;top : 40px; left: 13px&quot;>sub_File</div>
<Div id=&quot;sub_Edit&quot; class=&quot;subMenuDiv&quot; style=&quot;top : 40px; left: 119px&quot;>sub_Edit</Div>
<Div id=&quot;sub_Display&quot; class=&quot;subMenuDiv&quot; style=&quot;top : 40px; left: 225px&quot;>sub_Display</Div>
<Div id=&quot;sub_Options&quot; class=&quot;subMenuDiv&quot; style=&quot;top : 40px; left: 331px&quot;>sub_Options</Div>

</body>
</html> Gary Haran
 
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
439
gmmastros
gmmastros
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
844
malpa
malpa
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
2K
ggriffit
ggriffit
waubain
  • Locked
  • Question
id tag not loading new data with new ajax call 1
Replies
4
Views
417
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top