SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Menu Headaches, page load with Subs Showing and...

    and...here are the other things I'm running into:

    1. When the page loads the submenus are all layered and crammed together and showing...once the page fully loads they go away too, it just looks sloppy.

    2. Submenu problems: I had to remove the
    Code:
    onmouseout="javascript:montre();"
    on all the dd sections of the menu or else when you would mouseover the dd (submenu) it wouldn't stay open, it would flicker on and off kind of. Removing worked on getting the submenu to stay open nicely, but now if you mouse off the submenu it of course stays open, not a problem if a user continues to mouse around on the menu but if you are trying to read content on the page and there is a submenu hangin over it...well...need to fix that.

    So here is my code:
    Code:
    <script src="../js/prototype.js" type="text/javascript"></script>
    <script src="../js/effects.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    window.onload=montre;
    function montre(id) {
    var d = document.getElementById(id);
    	for (var i = 1; i<=10; i++) {
    		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    	}
    if (d) {d.style.display='block';}
    }
    
    
    
    
    </script>
    
    <style type="text/css">
    
    dl, dt, dd, ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    
    
    
    #menu {
    	list-style-type:none; 
    	margin:5px 0px 10px 0px; 
    	padding:0; width:150px;
    }
    	
    	
    #menu dt {
    	margin: 5px 0 10px 5px;
    	left: 0px;
    	width:150px;
    	height:1.8em;
    	z-index: 200;
    	visibility: visible;
    	padding-left: 10px;
    	padding-top: 5px;
    	margin-top: 0px;
    	margin-bottom: 0px;
    	color: #ffffff;
    	background-position: left;
    	text-align: left;
    	position: relative;
    	background-image: url(http://concrete-surfaces.com/terion/images/puff.jpg);
    	background-repeat: no-repeat;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bold;	
    }
    
    #menu dd {
    	position: absolute;
    	z-index: 300;
    	left: 140px;
    	margin-top: -30px;
    	width: 150px;
    	border: 1px solid gray;
    	color:#fff;
    	text-decoration:none;
    	display:block;
    	text-align:center;
    	width: 150px;
    	
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bold;
    	border: 1px solid #660000;
    }
    
    #menu ul {
    padding: 2px;
    }
    #menu li {
    	color:#fff;
    	text-decoration:none;
    	display:block;
    	text-align:center;
    	background-image: url(http://concrete-surfaces.com/terion/images/transparent_bit.png);
    	background-repeat: repeat;
    	font-weight: bold;
    	border: 1px solid #660000;
    	z-index: 300;
    	background-color: #CCCCCC;
    }
    #menu li a, #menu dt a {
    	color: #fff;
    	text-decoration: none;
    	display: block;
    }
    
    #menu li a:hover {
    	text-decoration: underline;
    	color: #000;
    	background-color: #999999;
    	font-weight: bold;
    	white-space: normal;
    	visibility: visible;
    	display: block;
    }
    
    #menu dt a:hover {
    	color: #FF99FF;
    	background:#9900CC;
    	width: 120px;
    	background-repeat: no-repeat;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bold;
    }
    
    
    </style>
    
    
    
    
    <!-- Menu  -->
    
    <dl id="menu">
    		<dt onmouseover="javascript:montre('smenu1');"><a href="http://concrete-surfaces.com/terion/index.php">Home</a></dt>
    			
    
    			
    		<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"> <a href="http://www.concrete-surfaces.com/terion/opportunity/opportunity.php">The Opportunity</a></dt>
    
    */added the onmouseout back to this section so you can see what is happening when its there online
    		
      <dd id="smenu2" onmouseover="javascript:montre('smenu2');  onmouseout="javascript:montre();"> 
        <ul>
    	<li><a href="http://www.concrete-surfaces.com/terion/opportunity/owner.php" title="Owner Operator Information">Owner Operator</a></li>
    	<li><a href="http://www.concrete-surfaces.com/terion/opportunity/largescale.php"  title="Information for Large Scale Entrepreneurs">Large Scale Entrepreneur</a></li>
        <li><a href="http://www.concrete-surfaces.com/terion/opportunity/international.php" title="Information for Large Scale Entrepreneurs">International Distributor</a></li>
    	<li><a href="opportunity/homeowner.php" title="Home Owner DYI Kits">Home Owners</a></li>
        <li><a href="http://concrete-surfaces.com/terion/Calculator/incomePotential.php" title="Calculate Your Income Possibilities">Calculator</a></li>
        </ul>
      </dd>	
    
    		<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
            <a href="http://www.concrete-surfaces.com/terion/equipment">Equipment</a></dt>
    
    			
      <dd id="smenu3" onmouseover="javascript:montre('smenu3');"> 
        <ul>
         
    	<li><a href="http://concrete-surfaces.com/terion/equipment/" title="SuperCompact Cobra">Super Compact Cobra</a></li>
    	<li><a href="http://concrete-surfaces.com/terion/equipment/" title="KaleidoCrete">KaleidoCrete</a></li>
    	<li><a href="http://concrete-surfaces.com/terion/equipment/" title="Mongoose 411">Mongoose 411</a></li>
    	<li><a href="http://concrete-surfaces.com/terion/equipment/" title="Sandroid">Sandroid</a></li>
    
    	<li><a href="http://concrete-surfaces.com/terion/equipment/" title="10ft Trailer Package">10ft Trailer Package</a></li>
    	<li><a href="http://concrete-surfaces.com/terion/equipment/" title="14ft Trailer Package">14ft Trailer Package</a></li>
        </ul>
      </dd>
    
    		<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();"><a href="http://www.concrete-surfaces.com/terion/packages/packages.php">Business Packages</a></dt>
    			
      <dd id="smenu4" onmouseover="javascript:montre('smenu4');"> 
        <ul>
          <li><a href="http://www.concrete-surfaces.com/terion/packages/packages.php#pack1" title="">#1 $3938</a></li>
    	<li><a href="http://www.concrete-surfaces.com/terion/packages/packages.php#pack2" title="">#2 $7990</a></li>
    	<li><a href="http://www.concrete-surfaces.com/terion/packages/packages.php#pack3" title="">#3 $12,985</a></li>
    	<li><a href="http://www.concrete-surfaces.com/terion/packages/packages.php#pack4" title="">#4 $16,490</a></li>
    	<li><a href="http://www.concrete-surfaces.com/terion/packages/packages.php#pack5" title="">#5 $25,480</a></li>
    	<li><a href="http://www.concrete-surfaces.com/terion/packages/packages.php#pack6" title="">#6 $26,795</a></li>
    	<li><a href="http://www.concrete-surfaces.com/terion/packages/packages.php#pack7" title="">#7 $56,950</a></li>
        </ul>
      </dd>
      
      
      
      <dt onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();"><a href="http://www.concrete-surfaces.com/terion/training/training.php">Training</a></dt>
    			
      <dd id="smenu5" onmouseover="javascript:montre('smenu5');"> 
        <ul>
         <li><a href="" title="">Seminar Dates</a></li>
    	<li><a href="" title="">Concrete University Info</a></li>
    	<li><a href="" title="">Directions/Location</a></li>
    	<li><a href="" title="">Hotels</a></li>
        </ul>
      </dd>
      
      <dt onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();"><a href="http://www.concrete-surfaces.com/terion/videos">Videos</a></dt>
    			
      <dd id="smenu6" onmouseover="javascript:montre('smenu6');"> 
        <ul>
         <li><a href="" title="">Seminar Overview</a></li>
    	<li><a href="" title="">Seminar Testimonials</a></li>
    	<li><a href="" title="">Trailers</a></li>
    	<li><a href="" title="">Super Compact</a></li>
    
    	<li><a href="" title="">Mongoose 411</a></li>
    	<li><a href="" title="">KaleidoCrete</a></li>
        <li><a href="" title="">Sandroid</a></li>
    	<li><a href="" title="">Concrete Resurrection</a></li>
        </ul>
      </dd>
      
      <dt onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();"><a href="http://concrete-gallery.com/" title="Photo Gallery of Decorative Engraving" >Photo Gallery</a></dt>
    			
      
      
      <dt onmouseover="javascript:montre('smenu8');" onmouseout="javascript:montre();"><a href="http://www.concrete-surfaces.com/terion/supplies">Materials/Supplies</a></dt>
    			
      <dd id="smenu8" onmouseover="javascript:montre('smenu8');" > 
        <ul>
          <li><a href="" title="">Stains</a></li>
    	<li><a href="" title="">Sealers</a></li>
    	<li><a href="" title="">Application Equipment</a></li>
    	<li><a href="" title="">Specialty</a></li>
        </ul>
      </dd>
      
      <dt onmouseover="javascript:montre('smenu9');" onmouseout="javascript:montre();"><a href="http://www.concrete-surfaces.com/terion/testimonials/testimonials.php">Testimonials</a></dt>
    			
     
      
      <dt onmouseover="javascript:montre('smenu10');" onmouseout="javascript:montre();"><a href="http://www.concrete-surfaces.com/terion/general/faq.php">FAQ's</a></dt>
    			
      
      
      <dt onmouseover="javascript:montre('smenu11');" onmouseout="javascript:montre();"><a href="http://www.concrete-surfaces.com/terion/general/contactus.php">Contact Us</a></dt>
    			
      
      
      <dt onmouseover="javascript:montre('smenu12');" onmouseout="javascript:montre();"><a href="http://www.concrete-surfaces.com/terion/request">Request Info</a></dt>
    			
      
      
      <dt onmouseover="javascript:montre('smenu13');" onmouseout="javascript:montre();"><a href="http://www.concrete-surfaces.com/terion/general/templates.php">Template Design</a></dt>
    			
      
      
      <dt onmouseover="javascript:montre('smenu14');" onmouseout="javascript:montre();"><a href="http://concrete-surfaces.com/terion/general/downloads.php">Downloads</a></dt>
    			
      
      
      <dt onmouseover="javascript:montre('smenu15');" onmouseout="javascript:montre();"><a href="">Go Shopping</a></dt>
    			
      
      
      <dt onmouseover="javascript:montre('smenu16');" onmouseout="javascript:montre();"><a href="http://concrete-engraving-specialist.com/">Specialist Locator</a></dt>
    			
      
      
      <dt onmouseover="javascript:montre('smenu17');" onmouseout="javascript:montre();"><a href="http://groov-e-news.com/">Groov-E-News</a></dt>
    			
      
      
      <dt onmouseover="javascript:montre('smenu18');" onmouseout="javascript:montre();"><a title="<?php echo "Add this website to your Favorites!!"; ?>" href="javascript:window.external.addfavorite('<?php echo "http://".$_SERVER['HTTP_HOST']; ?>', '')">Add to Favorites</a></dt>
    			 
      
    </dl>
    You can also see what its doing at the test site:
    http://concrete-surfaces.com/terion

    I'm so close to having it...these are two little fixes that are bugging me!

    guidance much appreciated!
    T.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Currently you're calling the montre function once the page has loaded, which takes quite some time with all of the images there.

    The fastest way is to call the montre function just after the menu code, but that's embedding script in the page which is a bad idea.

    Prototype will soon support an Event.onready() function but that's only still in beta.

    The best way is to not call the montre() function at all, and specify a css declaration instead. That will instantaneously solve the problem for you.

    Code css:
    #menu dd {
    display: none;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    Thanks for the suggestions, I tried them both and I'm still having the same issues where when its loading the subs and all showing piled on each other, and the only way I can get them to stay open while being hovered on is like I had it, where they stay open but only close if you hover over something else....

    and how again does the css menu make things easier?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by CodeGrrr View Post
    how again does the css menu make things easier?
    When the montre() function is called when the page loads, it's setting all of the smenu elements to be not displayed.

    Here's the relevant part

    Code javascript:
    var d = document.getElementById(id);
    for (var i = 1; i<=10; i++) {
        if (document.getElementById('smenu'+i)) {
            document.getElementById('smenu'+i).style.display='none';
        }
    }

    All of the smenu elements are on dd elements.

    Code html4strict:
    <dd id="smenu2" ...>

    Css styles are instantly applied, so there's no waiting around for them to activate.

    With the following css,

    Code javascript:
    #menu dd {
        display: none;
    }

    the submenus will be automatically hidden, and there's no need for the onload scripting call to hide them.

    As to the second issue that you're facing, I would put the onmouseout calls back in again and find some other solution to resolve the trouble you were having. If it were me though I wouldn't have the inline onmouseover and onmouseout calls, I would instead use a script to attach those events onto the appropriate elements, or even better, set just one event handler on the menu itself and figure out the target element at script time.

    Code javascript:
    document.getElementById('menu').onmouseover = function (evt) {
        evt = evt || window.event;
        targ = evt.target || evt.srcElement;
        id = getMenuItemId(targ);
        if (id) {
            montre(id);
            ...
        }
    }
    function getMenuItemId(el) {
        var id = '';
        if (el.nodeName === 'DD') {
            id = el.id;
        } else if (el.nodeName === 'DT') {
            ...
        }
        return id;
    }
    }
    Last edited by paul_wilkins; Jul 21, 2008 at 15:14.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •