Help Postioning Nav Bar

Question

Confused@JS 1 Newbie Poster

18 Years Ago

Ok I am having a lot of trouble making my Nav bar stay fixed in the upper left corner. Every time i scroll down the nav bar follows down the page. I need some help here is the JS but iam not too sure if my prolbem lays in the HTML.

//----------DHTML Menu Created using AllWebMenus PRO ver 3.1-#522---------------
//M:\Web\solarweb2\serviceparts_qms\serviceparts_qms_menu.awm
var awmMenuName='serviceparts_qms_menu';
var awmLibraryPath='/awmData-serviceparts_qms_menu';
var awmImagesPath='/awmData-serviceparts_qms_menu';
var awmSupported=(navigator.appName + navigator.appVersion.substring(0,1)=="Netscape5" || document.all || document.layers || navigator.userAgent.indexOf('Opera')>-1)?1:0;
if (awmAltUrl!='' && !awmSupported) window.location.replace(awmAltUrl);
if (awmSupported){
var awmMenuPath;
if (document.all) mpi=document.all['awmMenuPathImg-serviceparts_qms_menu'].src;
if (document.layers) mpi=document.images['awmMenuPathImg-serviceparts_qms_menu'].src;
if (navigator.appName + navigator.appVersion.substring(0,1)=="Netscape5" || navigator.userAgent.indexOf('Opera')>-1) mpi=document.getElementById('awmMenuPathImg-serviceparts_qms_menu').src;
awmMenuPath=mpi.substring(0,mpi.length-16);
while (awmMenuPath.search("'")>-1) {awmMenuPath=awmMenuPath.replace("'", "'");}
var nua=navigator.userAgent,scriptNo=(nua.indexOf('Safari')>-1)?7:(nua.indexOf('Gecko')>-1)?2:((document.layers)?3:((nua.indexOf('Opera')>-1)?4:((nua.indexOf('Mac')>-1)?5:((nua.indexOf('Konqueror')>-1)?6:1))));
document.write("<SCRIPT SRC='"+awmMenuPath+awmLibraryPath+"/awmlib"+scriptNo+".js'><\/SCRIPT>");
var n=null;
awmzindex='auto';
}

var awmSubmenusFrame='';
var awmSubmenusFrameOffset;
var awmOptimize=1;
function awmBuildMenu(){
if (awmSupported){
awmImagesColl=['leftnavbg.gif',150,24];
awmCreateCSS(0,1,0,n,n,0,n,n,'none',0,n,0,0);
awmCreateCSS(1,2,0,'#000000',n,n,'bold 9pt Arial',n,'none',0,n,0,0);
awmCreateCSS(0,2,0,'#000000','#FFCC00',n,'bold 9pt Arial',n,'none',0,n,0,0);
var s0=awmCreateMenu(0,0,0,0,1,0,1,2,0,0,100,0,0,0,n,n,"",n,1,5,1,0,"","",100);
it=s0.addItem(1,2,2,"&nbsp;QMS Home&nbsp;",n,n,"","/qms/",n,n,n,"/qms/",n);
it=s0.addItem(1,2,2,"&nbsp;H&HS Home&nbsp;",n,n,"","/",n,n,n,"/",n);
it=s0.addItem(1,2,2,"&nbsp;Scope of Certificates&nbsp;",n,n,"","scope/scope.htm",n,n,n,"scope/scope.htm",n);
it=s0.addItem(1,2,2,"&nbsp;Administering Quality&nbsp;",n,n,"","admin/admin.htm",n,n,n,"admin/admin.htm",n);
it=s0.addItem(1,2,2,"&nbsp;Managing Quality&nbsp;",n,n,"","managing/managing.htm",n,n,n,"managing/managing.htm",n);
it=s0.addItem(1,2,2,"&nbsp;Quality Policy&nbsp;",n,n,"","quality_policy.htm",n,n,n,"quality_policy.htm",n);
it=s0.addItem(1,2,2,"&nbsp;Quality Objectives&nbsp;",n,n,"","",n,n,n,"",n);
it=s0.addItem(1,2,2,"&nbsp;Resources Management&nbsp;",n,n,"","resources/resources.htm",n,n,n,"resources/resources.htm",n);
it=s0.addItem(1,2,2,"&nbsp;<strong style='font-size:14pt;'>Process Maps&nbsp;</strong>",n,n,"","product_real/product_real.htm",n,n,n,"product_real/product_real.htm",n);
it=s0.addItem(1,2,2,"&nbsp;Process Owners/<br>&nbsp;Coordinators&nbsp;",n,n,"","javascript:OpenWindow('(DocNumberLU)/WI-0053?OpenDocument&BaseTarget=_blank', '600', '600')",n,n,"javascript:OpenWindow('(DocNumberLU)/WI-0053?OpenDocument&BaseTarget=_blank', '600', '600')",n,n);
it=s0.addItem(1,2,2,"&nbsp;Measurement Analysis<br>&nbsp;& Improvement&nbsp;",n,n,"","improvement/improvement.htm",n,n,n,"improvement/improvement.htm",n);
it=s0.addItem(1,2,2,"&nbsp;MQ 12005 Certification",n,n,"","",n,n,n,"",n);
it=s0.addItem(1,2,2,"&nbsp;&nbsp;~&nbsp;B PC Valves",n,n,"","product_real/mq12005_index.asp?contentpage=mq12005_bvalv.htm",n,n,n,"product_real/mq12005_index.asp?contentpage=mq12005_bvalv.htm",n);
it=s0.addItem(1,2,2,"&nbsp;&nbsp;~&nbsp;Bolted Cylinders",n,n,"","product_real/mq12005_index.asp?contentpage=mq12005_boltd.htm",n,n,n,"product_real/mq12005_index.asp?contentpage=mq12005_boltd.htm",n);
it=s0.addItem(1,2,2,"&nbsp;&nbsp;~&nbsp;Control Valves",n,n,"","product_real/mq12005_index.asp?contentpage=mq12005_mcv.htm",n,n,n,"product_real/mq12005_index.asp?contentpage=mq12005_mcv.htm",n);
it=s0.addItem(1,2,2,"&nbsp;&nbsp;~&nbsp;Gear Pump",n,n,"","product_real/mq12005_index.asp?contentpage=mq12005_gpump.htm",n,n,n,"product_real/mq12005_index.asp?contentpage=mq12005_gpump.htm",n);
it=s0.addItem(1,2,2,"&nbsp;&nbsp;~&nbsp;Heat Treat",n,n,"","product_real/mq12005_index.asp?contentpage=mq12005_heat.htm",n,n,n,"product_real/mq12005_index.asp?contentpage=mq12005_heat.htm",n);
it=s0.addItem(1,2,2,"&nbsp;&nbsp;~&nbsp;Hydropro Cylinders",n,n,"","product_real/mq12005_index.asp?contentpage=mq12005_hydropro.htm",n,n,n,"product_real/mq12005_index.asp?contentpage=mq12005_hydropro.htm",n);
it=s0.addItem(1,2,2,"&nbsp;&nbsp;~&nbsp;Paint",n,n,"","product_real/mq12005_index.asp?contentpage=mq12005_paint.htm",n,n,n,"product_real/mq12005_index.asp?contentpage=mq12005_paint.htm",n);
it=s0.addItem(1,2,2,"&nbsp;&nbsp;~&nbsp;Tanks",n,n,"","product_real/mq12005_index.asp?contentpage=mq12005_tanks.htm",n,n,n,"product_real/mq12005_index.asp?contentpage=mq12005_tanks.htm",n);
it=s0.addItem(1,2,2,"&nbsp;&nbsp;~&nbsp;Threaded Cylinders",n,n,"","product_real/mq12005_index.asp?contentpage=mq12005_thread.htm",n,n,n,"product_real/mq12005_index.asp?contentpage=mq12005_thread.htm",n);
it=s0.addItem(1,2,2,"&nbsp;&nbsp;~&nbsp;Transmission Valves",n,n,"","product_real/mq12005_index.asp?contentpage=mq12005_mtv.htm",n,n,n,"product_real/mq12005_index.asp?contentpage=mq12005_mtv.htm",n);
it=s0.addItem(1,2,2,"&nbsp;&nbsp;~&nbsp;Truck Struts",n,n,"","product_real/mq12005_index.asp?contentpage=mq12005_struts.htm",n,n,n,"product_real/mq12005_index.asp?contentpage=mq12005_struts.htm",n);
it=s0.addItem(1,2,2,"&nbsp;&nbsp;~&nbsp;Truck Assy & Test",n,n,"","product_real/mq12005_index.asp?contentpage=mq12005_struts.htm",n,n,n,"product_real/mq12005_index.asp?contentpage=mq12005_STRUTS_ASSY_TEST.htm",n);
it=s0.addItem(1,2,2,"&nbsp;&nbsp;~&nbsp;X3PC Valves",n,n,"","product_real/mq12005_index.asp?contentpage=mq12005_x3pc.htm",n,n,n,"product_real/mq12005_index.asp?contentpage=mq12005_x3pc.htm",n);
//it=s0.addItem(1,2,2,"&nbsp;Process Change Request&nbsp;",n,n,"","",n,n,n,"",n);
//it=s0.addItem(1,2,2,"&nbsp;Process Change Request&nbsp;",n,n,"","",n,n,n,"",n);
//it=s0.addItemWithImages(1,2,2,"&nbsp;Request Status Reports&nbsp;",n,n,"",0,0,1,2,2,2,n,n,n,"",n,n,n,"",n);

s0.pm.buildMenu();
}}
//managing/managing.htm//managing/managing.htm
//OpenWindow('', '600', '600')//OpenWindow('', '600', '600')

Ok and heres the HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><!-- #BeginTemplate "Templates/contentPage-f2.dwt" -->
<!-- DW6 --><HEAD>
<!-- #BeginEditable "doctitle" -->
<title>Hydraulics & Hydraulic Systems QMS</title>
<!-- #EndEditable --><META http-equiv=Content-Type content=text/html;charset=UTF-8>
<LINK href="/qms/css/site.css" type=text/css rel=stylesheet>
<!-- #BeginEditable "ref-file" --><!-- #EndEditable -->
<META content="MSHTML 5.50.4916.2300" name=GENERATOR>
<!-- #BeginEditable "script" -->
<script language="JavaScript">
<!--
function OpenWindow (page, w, h) {
//	var srcpage = page + ".htm";
	var srcpage = page;
    popupwin = window.open("","","toolbar=0,menubar=1,scrollbars=1,resizable=1,width=" + w + ",height=" + h);
    if( popupwin != null) {
        if (popupwin.opener == null) { popupwin.opener = self; }
    }
    popupwin.location.href = srcpage;
    popupwin.focus();
}
//-->
</script>
<!-- #EndEditable -->
</HEAD>
<BODY bgcolor=white marginheight="0" marginwidth="0">

<SCRIPT language=javascript>
  function send() {
    if (document.search.queryText.value != "") {
      document.search.submit();
    }
  }
</SCRIPT>

<TABLE cellspacing=0 cellpadding=0 width="100%" border=0>
  <TBODY>
  <TR>
    <TD class=logo><IMG src="/qms/images/cat_hydraulics.jpg"><BR><IMG height=1 
      src="/qms/images/pixel.gif" width=150></TD>
    <TD width="100%" align=right valign="middle" class=logo2><font color="#FFC400" size="4" face="Geneva, Arial, Helvetica, sans-serif">
      <strong><!-- #BeginEditable "Web Site Title" -->Hydraulics & Hydraulic Systems<br>
      Quality Management System<!-- #EndEditable --></strong></font></TD>
  </TR></TBODY></TABLE>
<TABLE cellspacing=0 cellpadding=0 width="100%" border=0>
  <TBODY>
  <TR>
    <TD class=leftnavwidget valign=bottom width=1 rowspan=3>
      <TABLE cellspacing=0 cellpadding=0 width="100%" border=0>
        <TBODY>
        <TR>
          <TD valign=top>
            <TABLE cellspacing=0 cellpadding=0 width=150 border=0>
              <TBODY>
              <TR>
                <TD class=search>
                  <FORM name=search action= method=get>
				  <INPUT maxlength=100 size=10 name=queryText> <A href="javascript:send()">Search</A>
				 <!-- <INPUT type=hidden value=IS_CALLED_BY_CDA_SEARCH name=CALLING_FROM_PARAM>  -->
                </FORM></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>
    <TD class=topnavwidth width="100%" bgcolor=black>
      <TABLE cellspacing=0 cellpadding=0 width="100%" border=0>
        <TBODY>
        <TR>
          <TD class=topnav>
            <DIV><A 
            href="">Home</A></DIV></TD>
          <TD class=vline width=1><IMG src="/qms/images/vline.gif" 
            width=1></TD>
          <TD class=topnav>
            <DIV><A 
            href="">Chairman's 
            Corner</A></DIV></TD>
          <TD class=vline width=1><IMG src="/qms/images/vline.gif" 
            width=1></TD>
          <TD class=topnav>
            <DIV><A 
            href="javascript:alert('nothing yet');">Departments</A></DIV></TD>
          <TD class=vline width=1><IMG src="/qms/images/vline.gif" 
            width=1></TD>
          <TD class=topnav>
            <DIV><A 
            href="">News 
            and Information</A></DIV></TD>
          <TD class=vline width=1><IMG src="/qms/images/vline.gif" 
            width=1></TD>
          <TD class=topnav>
            <DIV></DIV></TD></TR></TBODY></TABLE></TD></TR>
  <TR>
    <TD class=crumbtrail width="100%" colspan=10><img src="/qms/images/crumbtrailcurve.gif"></TD>
  </TR></TBODY></TABLE>
<TABLE cellspacing=0 cellpadding=0 width="100%" border=0>
  <TBODY>
  <TR>
    <TD class=lmenu valign=top width=1><IMG 
      src="/qms/images/crumbtrailcorner.gif"></TD>
    <TD width="100%">
      <TABLE cellspacing=0 cellpadding=0 width="100%" border=0>
        <TBODY>
        <TR>
          <TD class=globalheader style="TEXT-ALIGN: left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </TD>
          <TD align=right>
            <TABLE style="BORDER-RIGHT: white 5px solid" cellspacing=0 
            cellpadding=0 border=0>
              <TBODY>
              <TR>
                <TD class=globalheader><A 
                  href="https://clues.cat.com">CLUES</A></TD>
                <TD class=globalheader>| </TD>
                <TD class=globalheader><A 
                  href="sitemap.html">Site 
                  Map</A></TD>
                <TD class=globalheader>| </TD>
                <TD class=globalheader><A 
                  href="/demo/qms/feedback.cfm">Contact 
                  Us</A></TD>
			  </TR></TBODY>
			</TABLE>
		  </TD>
		</TR>
	  </TBODY>
	 </TABLE></TD></TR>
  </TBODY></TABLE>
<TABLE cellspacing=0 cellpadding=0 width="100%" border=0>
  <TBODY>
  <TR>
    <TD class=lmenu rowspan=2>
      <TABLE cellspacing=0 cellpadding=0 width=150 border=0>
        <TBODY>
        <TR>
          <TD><IMG height=8 src="/qms/images/pixel.gif" 
        width=150></TD>
        </TR></TBODY></TABLE></TD>
    <TD class=leftgutter style="WIDTH: 1px" rowspan=2><IMG height=1 
      src="/qms/images/pixel.gif" width=1></TD>
    <TD class=topgutter width="100%">
      <TABLE cellspacing=10 cellpadding=0 width="100%" border=0>
        <TBODY>
        <TR>
          <TD valign=top width="100%" height=1>
            <H3><!-- #BeginEditable "heading" -->Hydraulics & Hydraulic Systems
              Quality Management System (QMS)<!-- #EndEditable --></H3>
            <!-- #BeginEditable "Content" --> 
                  <p align="center"><img src="/qms/images/hhs_center.jpg"></p>
                  <blockquote>
				    <p align="center">ISO <a href="iso/ISO9000-2000.pdf">9000</a>, <a href="iso/ISO9001-2000.pdf">9001</a> and <a href="iso/ISO9004-2000.pdf">9004</a> (9001 is what the standard is based on and others are guidance)</p>
                    <p align="center">This Hydraulics &amp; Hydraulic Systems 
					Quality Management System website contains the
					<a href="javascript:OpenWindow('(DocNumberLU)/SOP-0060?OpenDocument&BaseTarget=_self',%20'600',%20'600')">quality manual
					</a>for Caterpillar Incorporated - Joliet, IL Facility in compliance with the ISO 9001:2000 standard. 
                      If you have any questions on QMS navigation or content, 
					please contact Casey McPherson at x6821.</p>
                  </blockquote>
            <!-- #EndEditable --></TD>
      </TR></TBODY></TABLE></TD></TR>
  <TR>
    <TD>
</TD></TR></TBODY></TABLE>
<div align="center">
<table>
<tr><td align="center">
<hr noshade size="1" width="500">
  <p style="font-size:8pt;">Last Update: 3/5/08<br>
       Caterpillar Confidential: Green<br>
    Content Owner: Casey McPherson<br>
    Web Master: Chris J. Carroll <br>
    Copyright 2004 Caterpillar Inc., All Rights Reserved.</p>
</td></tr>
</table>
<!--- Revision Level History --->
<p>&nbsp;</p>
<table class="revision" width="50%">
	<tr align="center">
	<td class="rev">Revision Level History</td>
	</tr>
	<tr>
	<td class="rev">
	3/5/08 - Revision 2
	<ul>
		<li>Added Quality Manual
	</ul>
	</td>
	</tr>
	<tr>
		<td class="rev">

	12/22/04 - Revision 1
	<ul>
		<li>Added ISO documents
	</ul>
	</td>
	</tr>
	<tr>
		<td class="rev">
		09/04/04 - Original
		</td>	
	</tr>
</table>

</div>

<!-- DO NOT MOVE! The following AllWebMenus code MUST ALWAYS BE PLACED JUST BEFORE THE /BODY TAG -->
<!-- ******** BEGIN ALLWEBMENUS CODE FOR serviceparts_qms_menu ******** -->
<img name='awmMenuPathImg-serviceparts_qms_menu' id='awmMenuPathImg-serviceparts_qms_menu' src='./awmmenupath.gif' alt='' width="1" height="1"><script type='text/javascript'>var MenuLinkedBy='AllWebMenus [2]', awmBN='522'; awmAltUrl='';</script><script src='serviceparts_qms_menu.js' language='JavaScript1.2' type='text/javascript'></script><script type='text/javascript'>awmBuildMenu();</script>
<!-- ******** END ALLWEBMENUS CODE FOR serviceparts_qms_menu ******** -->
</BODY><!-- #EndTemplate --></HTML>

Any Help would be appreciated!!!!! Thanks

html-css javascript

2 Contributors
1 Reply
252 Views
1 Year Discussion Span
Latest Post 16 Years Ago Latest Post by FourPart

Dani AI

Generated 9 Months Ago

Likely cause: the menu is being rendered inside your table-based left column so it participates in normal flow instead of being pinned to the viewport. To keep a nav fixed in the upper-left of the browser window use CSS position: fixed on the menu’s outer wrapper, then push the page content over so it doesn’t sit beneath the fixed box. In the posted markup the left column is the place to target (the TD with class leftnavwidget or the wrapper AllWebMenus writes)—apply the rule to the actual wrapper element you find with your browser inspector.

Example (replace the selectors with the real wrapper id/class you see in DevTools):

/* target your menu wrapper (replace #menuWrapper) */
#menuWrapper {
  position: fixed;
  top: 10px;     /* adjust so it sits under your header */
  left: 0;
  width: 150px;  /* match the menu width */
  z-index: 9999; /* keep it above page content */
}

/* move the main content right so it doesn't get covered */
#mainContent {
  margin-left: 160px; /* menu width + small gap */
}

Notes and pitfalls:

Older IE (IE6) does not support position: fixed. If you must support it, emulate fixed by setting position:absolute and updating style.top on scroll with JavaScript (detect IE6 and sync the top to scrollTop).
AllWebMenus can inject its own wrapper and sometimes writes inline styles. Find the exact wrapper element with the inspector and apply your rule to that element (or load your override CSS after the AWM script, or increase specificity/use !important sparingly).
Because your layout is table-based, removing the menu from normal flow (fixed) will change the table layout. That’s why you must add the left margin (or a placeholder) for the content column so nothing shifts under the fixed nav.

Quick debug checklist:

Right-click the menu -> Inspect element, locate the wrapper element inserted by AWM.
In the inspector toggle position: fixed and adjust top to see the desired placement.
When it looks right, copy that rule into a CSS file loaded after the menu code (or use a sufficiently specific selector).

Specific to : target the AllWebMenus wrapper you find and apply the position:fixed pattern above, then add the matching left margin to whatever cell/container holds your page content (for example the .topgutter/main content area). As noted, where the menu markup ends up in the DOM matters — the wrapper must be at top-level (not locked inside an inner table cell) if you want predictable viewport-fixed behavior.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

FourPart 0 Newbie Poster · Answer 1 · 2009-10-25T04:03:11+00:00

I suspect the answer may lie in the text included in lines 203-206 - they belongs in line 27, immediately after the <body> tags.

As it happens, I'm having exactly the opposite problem - also with AWM scripting.

What I have planned is to put together a title banner, with the navigation menu bar nested into a table, which can be inserted, using PHP into all other pages on the site, rather than having to C&P the same bit of code on every page.

I currently have the menu working in itself, but it's stuck at the top left of the screen, instead of being positioned under the banner where I want it.