34 users online (1 members and 33 guests)  


  Results 1 to 2 of 2

Related

  1. Table expanded    Forum: HTML Forum
    Replies: 2
  2. Replies: 4
  3. Embedding Menu.htm into Default.htm    Forum: HTML Forum
    Replies: 5
  1. #1
    global22's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2005
    Posts
    1

    Javascript menu is expanded by default

    Here is the deal,

    The page that I'm working on is http://www.amazingslides.com/sampler.cfm .

    The whole idea of utilizing the menu on this page is to allow the submenus to be hidden by default, or, in case a menu was selected, when another menu is selected it automatically hides the previous submenu items, so only one menu is populated at the time. The reason why this is important is both for design and user friendliness issues.

    Eventually after closing all the menus manually it works fine just like it was intended for. but it's a big hassle, and I am now struggling to change the default settings that cause my pains here...

    Please view the link above and see what problems I face.
    In summary, here is the experience you currently encounter:

    1. It seems that when the page is initially loaded, it reveals all submenu items

    2. Even after clicking the open menus, it first remains open (just changing the arrow image to the appropriate one...)

    All that needs to disappear, and I need the menu to load just as it had all the menus closed!

    My sincere appreciation to all of you taking your time assisting me in this JavaScript code, as I have trouble locating what exactly I need to modify.

    At this time I'm not attaching any source code, since I already provided you with the online link, and I'm assuming you can easily just view all the related code up there. Should you want me to post it anyways, I would be more than happy to do so.

    Many thanks,
    Louis

  2. #2
    ALL's Avatar
    Super Dooper Nerd

    Status
    Offline
    Join Date
    Feb 2005
    Location
    localhost
    Posts
    382

    Re: Javascript menu is expanded by default

    here you go, i got this to work:
    HTML Code:
    <?xml version="1.0" encoding="UTF-8">
    <!DOCTYPE html
    	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta name="author" content="amazingslides.com">
    <meta name="description" content="Amazing Slides has been established to deliver unique possibilities to your digital photos, to both professionals and retail home customers. It aims to provide the customer with an opportunity to produce video-like material of existing still images which they may have had before, but which may have never been appreciated to what it really .">
    <meta name="distribution" content="global">
    <meta name="keywords" content="Weddings, anniversaries, birthdays, Graduations , Presentations, Family reunions, Bar mitzvas, Baby albums">
    <meta name="robots" content="ALL,INDEX">
    <meta http-equiv="Content-Language" content="en-us">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    
    
    <title>Welcome to Amazing Slides! - Slideshows samples - Simply Amazing!</title>
      	<style type="text/css">
    <!--
    .mtheader {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	font-weight: bold;
    	color: #FFFFFF;
    }
    
    .headernormal {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 15px;
    	font-weight: bold;
    	color: #FFFFFF;
    }
    .Hide {
    	display: none;
    }
    .link {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	font-weight: bold;
    	color: #FFFFFF;
    	text-decoration: none;
    }
    .menu {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	font-weight: bold;
    	color: #FFFFFF;
    	text-decoration: none;
    }
    
    .submenu {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	font-weight: bold;
    	color: #161E3F;
    }
    
    .submenu:hover {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	font-weight: bold;
    	color: #FFFFFF;
    }
    
    .submenuoOn {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	font-weight: bold;
    	color: #FFFFFF;
    }
    .menuTitle {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 16px;
    	font-weight: bold;
    	color: #161E3F;
    }
    .submenuTitle {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 16px;
    	font-weight: bold;
    	color: #FFFFFF;
    }
    .description {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #FFFFFF;
    }
    .option {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	color: #161E3F;
    	text-decoration: none;
    }
    .option:hover {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	color: #161E3F;
    	text-decoration: none;
    }
    -->
    </style>
    
    <script language="JavaScript">
    <!--
    
    function SymError()
    {
      return true;
    }
    
    window.onerror = SymError;
    
    var SymRealWinOpen = window.open;
    
    function SymWinOpen(url, name, attributes)
    {
      return (new Object());
    }
    
    window.open = SymWinOpen;
    
    //-->
    </script>
    
    <script language="JavaScript" type="text/JavaScript">
    <!--
    
    var Selected_Down_Arrow;
    var Selected_Menu;
    var Selected_Sub_menu;
    var MenuNum;
    var SubMenuNum;
    
    function spanmenu(el){
    
    var p;
    var img ;
    var i;
    p = el.parentElement.parentElement;
    
    	if(Selected_Menu && (Selected_Menu == p)){
    		img = p.children(1).children(0);
    		img.src = "images/Arrow_left.gif";
    		p.nextSibling.className = 'Hide';
    		Selected_Menu = '';
    		if(Selected_Sub_menu){
    			Selected_Sub_menu.className = 'submenu';
    		}
    	}
    	else {
    		if(Selected_Menu){
    			Selected_Menu.nextSibling.className = 'Hide';
    			img = Selected_Menu.children(1).children(0);
    			img.src = "images/Arrow_left.gif";
    		}
    		img = p.children(1).children(0);
    		img.src = "images/Arrow_down.gif";
    		Selected_Down_Arrow = img;
    		p.nextSibling.className = '';
    		Selected_Menu = p;
        }
    
    }
    
    
    function SubMenu(menu,submenu,el) {
      el.className = 'submenuoOn';
      if(el != Selected_Sub_menu){
      	if(Selected_Sub_menu){ Selected_Sub_menu.className = 'submenu';	}
      }
      Selected_Sub_menu = el;
    
    	with (document.vid_form) {
    		vidtype = vid_type[vid_type.selectedIndex].value;
    	} 
    	window.frames['slideshowsvid'].location.href='vid_player.cfm?show='+menu+'zzzz'+submenu+'&size='+vidtype;
    }
    
    
    //-->
    </script>
    
    
    
    
    </head>
    
    <body bgcolor="Black">
    <table align="center"  cellpadding="0" cellspacing="0">
    
    <tr><td colspan="4">
    
    
    <table cellpadding="0" cellspacing="0" border="0">
    
    <tr><td nowrap>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td background="http://www.amazingslides.com/emptystrip.jpg" height="112" width="25" valign="middle">
    <img src="http://www.amazingslides.com/as_logo1.jpg" border="0" align="left">
    </td>
    <td background="http://www.amazingslides.com/emptystrip.jpg" height="112" width="375" valign="middle">
    <script language="JavaScript1.2" src="http://www.amazingslides.com/islider.js">
    </script>
    </td>
    
    <td align="left" valign="top">
    <img src="http://www.amazingslides.com/filmstrip3.jpg" border="0" align="left">
    </td>
    
    </tr>
    </table>
    
    </td></tr>
     <script language="JavaScript1.2" src="http://www.amazingslides.com/islider2.js"></script>  
    <tr>
    
    
    <td valign="top">
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="200" height="600" id="amazing" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="http://www.amazingslides.com/amazing.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" />
    <embed src="http://www.amazingslides.com/amazing.swf" quality="high" bgcolor="#000000" width="200" height="600" name="amazing" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object>
    
    </td> 
    
    <td colspan="2" align="left" valign="top">
    <div id="page_content">
    	
          <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td colspan="2" bgcolor="#949494" valign="top">
    		<img src="http://www.amazingslides.com/images/spacer.gif" height="1" width="132"></td>
           
          </tr>
          <tr>
    				<td valign="middle" height="22" width="667"  colspan="3" bgcolor="#808080" align="left" class="mtheader" >
    				&nbsp;Select a topic under any category below to open preview of 
    				slideshow.</td>
          </tr>
          </table>
    
    			<table border="0" cellpadding="0" cellspacing="0" height="380" align="left">
    			<tr>
    				<td  bgcolor="#6E7799" height="380" valign="top">
              <table width="260"  border="0" cellspacing="0" cellpadding="0"  bgcolor="#6E7799" align="left">
              <tr><td colspan="4">
    			<img src="http://www.amazingslides.com/images/spacer.gif" width="1" height="10"></td></tr>
              
    		  <tr valign="top" id="menu1">
              
    		    <td width="35">
    			<img src="http://www.amazingslides.com/images/spacer.gif" width="35" height="2"></td>
              	<td width="9" valign="middle">
    			<img src="http://www.amazingslides.com/images/Arrow_left.gif"></td>
              	<td width="5">
    			<img src="http://www.amazingslides.com/images/spacer.gif" width="1" height="2"></td>
              	<td width="219" valign="top" class="menu">
    			<a href="#slideshows" onClick="spanmenu(this);" class="menu">Family 
    			Events</a></td>
              </tr>
    		   <tr valign="top" id="menu1_sel" class="Hide">
                <td colspan="4" align="left">
                	<table>
              		<tr>
              			<td width="55">
    					<img src="http://www.amazingslides.com/images/spacer.gif" width="1" height="1"></td>
              			<td valign="middle"><a href="#slideshows" class="submenu" onClick="SubMenu(1,1,this);">
    					Fantasy Trip</a>
                    </td>
              		</tr>
                   </table>
    			   </td>
    			   </tr>		  
              
    		  <tr valign="middle" id="menu2">
                <td>&nbsp;</td>
              	<td width="9" valign="middle">
    			<img src="http://www.amazingslides.com/images/Arrow_left.gif"></td>
              	<td width="5">
    			<img src="http://www.amazingslides.com/images/spacer.gif" width="1" height="1"></td>
              	<td width="219" valign="middle" class="menu">
    			<a href="#slideshows" onClick="spanmenu(this);" class="menu">
    			Children Albums</a></td>
              </tr>
              <tr valign="top" id="menu2_sel" class="Hide">
                <td colspan="4" align="left">
                	<table>
              		<tr>
              			<td width="55">
    					<img src="http://www.amazingslides.com/images/spacer.gif" width="1" height="1"></td>
              			<td valign="middle"><a href="#slideshows" class="submenu" onClick="SubMenu(2,1,this);">
    					Spring Break Toddlers</a></td>
              		</tr>
              		<tr>
              			<td width="55">
    					<img src="http://www.amazingslides.com/images/spacer.gif" width="1" height="1"></td>
              			<td valign="middle"><a href="#slideshows" class="submenu" onClick="SubMenu(2,2,this);">
    					Expanding Funfair</a></td>
              		</tr>
              		<tr>
              			<td width="55">
    					<img src="http://www.amazingslides.com/images/spacer.gif" width="1" height="1"></td>
              			<td valign="middle"><a href="#slideshows" class="submenu" onClick="SubMenu(2,3,this);">
    					Kids on Purim</a></td>
              		</tr>
              		
              		<tr>
              			<td width="55">
    					<img src="http://www.amazingslides.com/images/spacer.gif" width="1" height="1"></td>
              			<td valign="middle"><a href="#slideshows" class="submenu" onClick="SubMenu(2,4,this);">
    					Simplifying Life</a></td>
              		</tr>
              		
                	</table>
              	</td>
              </tr>
             
    		  <tr valign="top" id="menu3">
                <td>&nbsp;</td>
              	<td valign="middle">
    			<img src="http://www.amazingslides.com/images/Arrow_left.gif"></td>
              	<td width="5">
    			<img src="http://www.amazingslides.com/images/spacer.gif" width="1" height="1"></td>
              	<td class="menu" valign="middle">
    <a href="#slideshows" onClick="spanmenu(this);" class="menu">Engagements</a></td>
              </tr>
    		    <tr valign="top" id="menu3_sel" class="Hide">
                <td colspan="4" align="left">
                	<table>
              		<tr>
              			<td width="55">
    					<img src="http://www.amazingslides.com/images/spacer.gif" width="1" height="1"></td>
              			<td valign="middle"><a href="#slideshows" class="submenu" onClick="SubMenu(3,1,this);">
    					Mathematical Match</a></td>
              		</tr>
              		<tr>
              			<td width="55">
    					<img src="http://www.amazingslides.com/images/spacer.gif" width="1" height="1"></td>
              			<td valign="middle"><a href="#slideshows" class="submenu" onClick="SubMenu(3,2,this);">
    					Power of Inspiration</a></td>
              		</tr>
    		    </table>
    		   </td>
    		  </tr>
             
    		  <tr valign="top" id="menu4">
                <td>&nbsp;</td>
              	<td valign="middle">
    			<img src="http://www.amazingslides.com/images/Arrow_left.gif"></td>
              	<td width="5">
    			<img src="http://www.amazingslides.com/images/spacer.gif" width="1" height="1"></td>
              	<td class="menu" valign="middle"><a href="#slideshows" onClick="spanmenu(this);" class="menu">
    			College Kids</a></td>
              </tr>
    		    <tr valign="top" id="menu4_sel" class="Hide">
                <td colspan="4" align="left">
                	<table>
              		<tr>
              			<td width="55">
    					<img src="http://www.amazingslides.com/images/spacer.gif" width="1" height="1"></td>
              			<td valign="middle"><a href="#slideshows" class="submenu" onClick="SubMenu(4,1,this);">
    					Typical Party stuff</a></td>
              		</tr>
              		<tr>
              			<td width="55">
    					<img src="http://www.amazingslides.com/images/spacer.gif" width="1" height="1"></td>
              			<td valign="middle"><a href="#slideshows" class="submenu" onClick="SubMenu(4,2,this);">
    					Powerfull memories</a></td>
              		</tr>
              		<tr>
              			<td width="55">
    					<img src="http://www.amazingslides.com/images/spacer.gif" width="1" height="1"></td>
              			<td valign="middle"><a href="#slideshows" class="submenu" onClick="SubMenu(4,3,this);">
    					A Grand Ball</a></td>
              		</tr>
    				</table>
    				</td>
    				</tr>
    				
    				
              <tr valign="top" id="menu5">
                <td>&nbsp;</td>
              	<td valign="middle">
    			<img src="http://www.amazingslides.com/images/Arrow_left.gif"></td>
              	<td width="5">
    			<img src="http://www.amazingslides.com/images/spacer.gif" width="1" height="1"></td>
              	<td class="menu" valign="middle"><a href="#slideshows" onClick="spanmenu(this);" class="menu">
    			Weddings</a></td>
              </tr> 
    		  <tr valign="top" id="menu5_sel" class="Hide">
                <td colspan="4" align="left">
                	<table>
    				<tr>
              			<td width="55">
    					<img src="http://www.amazingslides.com/images/spacer.gif" width="1" height="1"></td>
              			<td valign="middle"><a href="#slideshows" class="submenu" onClick="SubMenu(5,1,this);">
    					Mr &amp; Mrs Garfinkel</a></td>
              		</tr>
              		<tr>
              			<td width="55">
    					<img src="http://www.amazingslides.com/images/spacer.gif" width="1" height="1"></td>
              			<td valign="middle"><a href="#slideshows" class="submenu" onClick="SubMenu(5,2,this);">
    					The Grossbergs - May 2006</a></td>
              		</tr>
              		<tr>
              			<td width="55">
    					<img src="http://www.amazingslides.com/images/spacer.gif" width="1" height="1"></td>
              			<td valign="middle"><a href="#slideshows" class="submenu" onClick="SubMenu(5,3,this);">
    					William &amp; Shelly Marlin</a></td>
              		</tr>
    				</table>
    				</td>
    				</tr>
              <tr valign="top">
                <td>&nbsp;</td>
              	<td valign="middle">
    			<img src="http://www.amazingslides.com/images/Arrow_left.gif"></td>
              	<td width="5">
    			<img src="http://www.amazingslides.com/images/spacer.gif" width="1" height="1"></td>
              	<td class="menu" valign="middle">Anniversaries</td>
              </tr>
              <tr valign="top">
                <td>&nbsp;</td>
              	<td valign="middle">
    			<img src="http://www.amazingslides.com/images/Arrow_left.gif"></td>
              	<td width="5">
    			<img src="http://www.amazingslides.com/images/spacer.gif" width="1" height="1"></td>
              	<td class="menu" valign="middle">Baby Photos</td>
              </tr>
              <tr valign="top">
                <td>&nbsp;</td>
              	<td valign="middle">
    			<img src="http://www.amazingslides.com/images/Arrow_left.gif"></td>
              	<td width="5">
    			<img src="http://www.amazingslides.com/images/spacer.gif" width="1" height="1"></td>
              	<td class="menu" valign="middle">Bar/Bat Mitzvas</td>
              </tr>
              <tr valign="top">
                <td>&nbsp;</td>
              	<td valign="middle">
    			<img src="http://www.amazingslides.com/images/Arrow_left.gif"></td>
              	<td width="5">
    			<img src="http://www.amazingslides.com/images/spacer.gif" width="1" height="1"></td>
              	<td class="menu" valign="middle">Inagurations</td>
              </tr>
              <tr><td colspan="4">
    			<img src="http://www.amazingslides.com/images/spacer.gif" width="1" height="10"></td></tr>
              </table>
    				</td>	
    				
    				
    				
    				
    				
    				<form name="vid_form" method="post" action="">
    				
    				<td valign="top" bgcolor="#7e8194" class="mtheader" width="407">
    				Choose connection: 
    				<select name="vid_type" style="font-size: 9px;">
    						<option value="modem"> Windows Media Video - 56k modem </option>
    						<option value="broadband"> Windows Media Video - 
    						broadband/DSL</option>
    						<option value="mpeg"> MPEG Video - non-windows </option>
    					</select>
     
    			
    					<iframe name="slideshowsvid" src="http://www.amazingslides.com/vid_player.cfm" style="border: 0px;" frameborder="0" width="100%" height="100%"></iframe>
    <script>
    document.write(imgTag);
    </SCRIPT>
    			
    				</td></form>
    			</tr>
        
    </table>
        </div>
        </body>
        </html>
    <script language="JavaScript">
    <!--
    var SymRealOnLoad;
    var SymRealOnUnload;
    
    function SymOnUnload()
    {
      window.open = SymWinOpen;
      if(SymRealOnUnload != null)
         SymRealOnUnload();
    }
    
    function SymOnLoad()
    {
      if(SymRealOnLoad != null)
         SymRealOnLoad();
      window.open = SymRealWinOpen;
      SymRealOnUnload = window.onunload;
      window.onunload = SymOnUnload;
    }
    
    SymRealOnLoad = window.onload;
    window.onload = SymOnLoad;
    
    //-->
    </script>



Tags for this Thread