jin_pengyou Posted July 25, 2009 Share Posted July 25, 2009 I found this javascript to create collapsible menu, but it doesn't work in Firefox 3.In the error console, it returns that the menu are undefined. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript"var on_off=new Array();var menu_code=new Array();number_of_menus=4;menu_code[0]="Option 1<br />Option 2<br />Option 3<br />";menu_code[1]="Option 1<br />Option 2<br />Option 3<br />";menu_code[2]="Option 1<br />Option 2<br />Option 3<br />";menu_code[3]="Option 1<br />Option 2<br />Option 3<br />";for (i=0; i<number_of_menus; i++){ on_off[i]=0;}function collapse_menu(menu_id, menu_number){ if (on_off[menu_number]==0){ menu_id.innerHTML=menu_code[menu_number]; on_off[menu_number]=1; }else{ menu_id.innerHTML=""; on_off[menu_number]=0; }}</script></head><body><p><div onclick="collapse_menu(menu1, 0); return false">Menu 1</div><span id="menu1"></span><div onclick="collapse_menu(menu2, 1); return false">Menu 2</div><span id="menu2"></span><div onclick="collapse_menu(menu3, 1); return false">Menu 3</div><span id="menu3"></span><div onclick="collapse_menu(menu4, 1); return false">Menu 4</div><span id="menu4"></span></p></body></html> Its working in Opera, in IE and I suppose in will work in Safari since its working in Opera. If you have a better way to do what this script does, feel free to share, this code is just very, very basic. Link to comment Share on other sites More sharing options...
Ingolme Posted July 25, 2009 Share Posted July 25, 2009 This Javascript is basing itself on a "feature" of Internet Explorer. collapse_menu(menu1, 0); In Internet Explorer, menu1 as written there is a direct reference to the element with id "menu1".However, in Firefox, which parses Javascript correctly, menu1 is just the name of a variable that hasn't been declared previously.To access an element by its id, use the getElementById() function Link to comment Share on other sites More sharing options...
jin_pengyou Posted July 25, 2009 Author Share Posted July 25, 2009 This Javascript is basing itself on a "feature" of Internet Explorer.collapse_menu(menu1, 0); In Internet Explorer, menu1 as written there is a direct reference to the element with id "menu1".However, in Firefox, which parses Javascript correctly, menu1 is just the name of a variable that hasn't been declared previously.To access an element by its id, use the getElementById() function Like this?function collapse_menu(menu_id, menu_number){x = document.getElementById(menu_id); if (on_off[menu_number]==0){ x.innerHTML=menu_code[menu_number]; on_off[menu_number]=1; }else{ menu_id.innerHTML=""; on_off[menu_number]=0; }} This code doesn't work. Any suggestion? Link to comment Share on other sites More sharing options...
Ingolme Posted July 25, 2009 Share Posted July 25, 2009 Like this?function collapse_menu(menu_id, menu_number){x = document.getElementById(menu_id); if (on_off[menu_number]==0){ x.innerHTML=menu_code[menu_number]; on_off[menu_number]=1; }else{ menu_id.innerHTML=""; on_off[menu_number]=0; }} This code doesn't work. Any suggestion? When calling the function, pass the parameter as a stringcollapse_menu("menu1", 0); Link to comment Share on other sites More sharing options...
jin_pengyou Posted July 25, 2009 Author Share Posted July 25, 2009 When calling the function, pass the parameter as a stringcollapse_menu("menu1", 0); Thanks! Working perfectly. I suppose I can just change the div by images and the menu code values by links etc. Thank you everybody. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.