changes to two frames

• • Reply

  19 years ago

  by sholana

  Tim Snyder

  Mechanisburg PA, United States

  Joined 19 years ago

  I have a menu and content frame on my page.
  When you click on an item in the menu i want to be able to show a new menu and the header page for that item...

  Report abuse
• • Reply

  19 years ago

  by liserdarts

  Nick Avery

  Nebraska, USA, United States

  Joined 19 years ago

  I’m not sure what you really need but I think I can help. The following code will allow you to put a menu into a div tag. It’s set up to work with the contents of my website but it is easy to edit. Just take a look at the last procedure.
  

  
  <script language="JavaScript">
  <!--
  function namoswlist(parent, visible, width, height, font, size, fgColor, bgColor, indent, hbgColor, hfgColor) {
   this.additem = namoswladditem;
   this.addlist = namoswladdlist;
   this.make    = namoswlmake;
   this.write   = namoswlwrite;
   this.show    = namoswlshow;
   this.update  = namoswlupdate;
   this.updateparent = namoswlupdateparent;
   this.items = new Array();
   this.id = document.namoswlists.length;
   this.parent_id = 0;
   this.x = 0;
   this.y = 0;
   this.visible = visible;
   this.width    = width;
   this.height   = height;
   this.parent   = parent;
   this.indent = indent;
   this.fgColor = fgColor;
   this.hfgColor = hfgColor;
   this.bgColor  = bgColor;
   this.hbgColor = hbgColor;
  

  
   this.fontstart = '';
   this.fontend   = '';
  

  
   this.fontstart = '<font color=' + fgColor;
   if (font != '') this.fontstart += ' face=\"' + font + '\"';
   if (size != '' && size.indexOf('pt', 0) == -1) this.fontstart += ' size=' + size;
   this.fontstart += '>';
  

  
   this.fontstart += '<span';
   if (size.indexOf('pt', 0) != -1)
     this.fontstart += ' style="font-size:' +size+ ';"';
   this.font_start += '>';
  

  
   this.fontend  = '</span>';
   this.fontend += '</font>';
  

  
   this.made     = false;
   this.shown    = false;
   document.namoswlists[document.namoswlists.length] = this;
  }
  

  
  function namoswlsetclip(layer, left, right, top, bottom) {
   if (navigator.appName.indexOf('Netscape', 0) != -1) {
     layer.clip.left   = left;
     layer.clip.right  = right;
     layer.clip.top    = top;  
     layer.clip.bottom = bottom;
   } else {    
     layer.style.pixelWidth  = right-left;
     layer.style.pixelHeight = bottom-top;
     layer.style.clip  = "rect(" + top + "," + right + "," + bottom + "," + left + ")";
   }
  }
  

  
  function namoswlwrite() {
   var layer, clip, str;
   for(var i = 0; i < this.items.length; i++) {
     layer = this.items;
     if (navigator.appName.indexOf('Netscape', 0) != -1)
       layer.visibility = "hidden";
     else
       layer.style.visibility = "hidden";
     str = "";
  

  
     str += "<table width="+this.width+" nowrap border='0' cellpadding='0' cellspacing='0'><tr>";
     if (0 < this.indent) str += "<td width="+this.indent+" nowrap> </td>";
     if (layer.type == 'list') {
       str += "<td width=15  valign='middle' nowrap><a";
       if (navigator.appName.indexOf('Netscape', 0) != -1) str += " href=\"javascript:void(0);\"";
       else                                                str += " style=\"cursor:hand;\"";
       str += " onclick=\"namoswlexpand("+layer.list.id+");\"><img src=\"collapsed.gif\" name=\"_img"+layer.list.id+"\" border='0'></a></td>";
     } else {
       str += "<td width=15 nowrap> </td>";
     }
     str += "<td height="+(this.height-3)+" width="+(this.width-15-this.indent)+" valign='middle' align='left'>";
  

  
     if (layer.url)       str += "<a href=\"" + layer.url + "\" target=\"" + layer.frame + "\" style=\"text-decoration:none;\">";
     if (this.fontstart) str += this.fontstart;
     str += layer.text;
     if (this.fontend) str += this.fontend;
     if (layer.url)       str += "</a>";
     str += "</td></table>";
  

  
     str = str.replace("span", "span id='namoswlistspan" + layer.lid + "'");
  

  
     if (navigator.appName.indexOf('Netscape', 0) != -1) {
       layer.document.writeln(str);
       layer.document.close();
     } else {
       layer.innerHTML = str;
       layer.span = document.all['namoswlistspan'+layer.lid];
     }
     if (layer.type == 'list' && layer.list.visible)
       this.items.list.write();
   }
   this.made = true;
  }
  

  
  function namoswlshow() {
   var layer;
   for(var i = 0; i < this.items.length; i++) {
     layer = this.items;
     namoswlsetclip(layer, 0, this.width, 0, this.height-1);
     if (navigator.appName.indexOf('Netscape', 0) != -1) {
       if (layer.oBgColor) layer.document.bgColor = layer.oBgColor;
       else layer.document.bgColor = this.bgColor;
     } else {
       if (layer.oBgColor) layer.style.backgroundColor = layer.oBgColor;
       else layer.style.backgroundColor = this.bgColor;
     }
     if (layer.type == 'list' && layer.list.visible)
       layer.list.show();
   }
   this.shown = true;
  }
  

  
  function namoswlupdate(parentvisible, x, y) {
   var top = y, layer, list;
   for(var i = 0; i < this.items.length; i++) {
     layer = this.items;
     list  = layer.list;
     if (this.visible && parentvisible) {
       if (navigator.appName.indexOf('Netscape', 0) != -1) {
     layer.visibility = "visible";
     layer.top = top;
     layer.left = x;
       } else {
     layer.style.visibility = "visible";
     layer.style.pixelTop   = top;
     layer.style.pixelLeft  = x;    
  //    if (layer.url) layer.style.cursor = "hand";
       }
       top += this.height;
     } else {
       if (navigator.appName.indexOf('Netscape', 0) != -1) layer.visibility = "hidden";
       else layer.style.visibility = "hidden";
     }
     if (layer.type == 'list') {
       if (list.visible) {
         if (!list.made)  list.write();
         if (!list.shown) list.show();
         if (navigator.appName.indexOf('Netscape', 0) != -1) layer.document.images[0].src = "collapsed.gif";
     else eval('document.images.img'+list.id+'.src = "collapsed.gif"');
       } else {
     if (navigator.appName.indexOf('Netscape', 0) != -1) layer.document.images[0].src = "expanded.gif";
     else eval('document.images.img'+list.id+'.src = "expanded.gif"');
       }
       if (list.made)
         top = list.update(this.visible && parent_visible, x, top);
     }
   }
   return top;
  }
  

  
  function namoswlupdateparent(parentid) {
   this.parentid = parentid;
   for(var i = 0; i < this.items.length; i++)
     if (this.items.type == 'list')
       this.items.list.updateparent(parentid);
  }
  

  
  function namoswlexpand(i) {
   document.namoswlists.visible = !document.namoswlists.visible;
   list = document.namoswlists[document.namoswlists.parent_id];
   list.update(true, list.x, list.y);
  }
  

  
  function namoswlmake(x, y) {
   this.updateparent(this.id);
   this.write();
   this.show();
   this.update(true, x, y);
   this.x = x;
   this.y = y;
  }
  

  
  function namoswladditem(text, url, frame) {
   var layer = null;
   if (navigator.appName.indexOf('Netscape', 0) != -1 && this.parent)
     layer = eval('this.parent.document.layers.namoswlistitem'+document.namoswlists.lid);
   else
     layer = eval('document.all.namoswlistitem'+document.namoswlists.lid);
   if (layer == null) {
     if (navigator.appName.indexOf('Netscape', 0) != -1)
       layer = this.parent ? new Layer(this.width, this.parent) : new Layer(this.width);
   }
   if (layer == null) return;
  

  
   if (url)   layer.url   = url;
   if (frame) {
     if (frame.indexOf('parent.') != 0)
       layer.frame = "" + frame;
     else
       layer.frame = frame.substring(7, frame.length);
   }
   layer.type = 'item';
   layer.text = text;
   layer.lid  = document.namoswlists.lid;
   this.items[this.items.length] = layer;
   layer.hbgColor = this.hbgColor;
   layer.oBgColor = this.bgColor;
   layer.fgColor = this.fgColor;
   layer.hfgColor = this.hfgColor;
   if (layer.captureEvents)
     layer.captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
   layer.onmouseover = namoswlonmouseover;
   layer.onmouseout  = namoswlonmouseout;
  //  layer.onmouseup   = namoswlonmouseup;
   document.namosw_lists.lid++;
  }
  

  
  function namoswladdlist(list, text, url, frame) {
   var layer = null;
  

  
   if (navigator.appName.indexOf('Netscape', 0) != -1 && this.parent)
     layer = eval('this.parent.document.layers.namoswlistitem'+document.namoswlists.lid);
   else
     layer = eval('document.all.namoswlistitem'+document.namoswlists.lid);
   if (layer == null) {
     if (navigator.appName.indexOf('Netscape', 0) != -1)
       layer = this.parent ? new Layer(this.width, this.parent) : new Layer(this.width);
   }
   if (layer == null) return;
  

  
   if (url)   layer.url   = url;
   if (frame) {
     if (frame.indexOf('parent.') != 0)
       layer.frame = "" + frame;
     else
       layer.frame = frame.substring(7, frame.length);
   }
   layer.list = list;
   layer.type = 'list';
   layer.text = text;
   layer.lid  = document.namoswlists.lid;
   this.items[this.items.length] = layer;
   list.parent = this;
   layer.hbgColor = this.hbgColor;
   layer.oBgColor = this.bgColor;
   layer.fgColor = this.fgColor;
   layer.hfgColor = this.hfgColor;
   if (layer.captureEvents)
     layer.captureEvents(Event.MOUSEOVER|Event.MOUSEOUT|Event.MOUSEUP);
   layer.onmouseover = namoswlonmouseover;
   layer.onmouseout  = namoswlonmouseout;
  //  layer.onmouseup   = namoswlonmouseup;
   document.namosw_lists.lid++;
  }
  

  
  function namoswlonmouseover()
  {
   if (navigator.appName.indexOf('Netscape', 0) != -1) {
     if (this.hbgColor)
       this.bgColor = this.hbgColor;
   } else {
     if (this.hbgColor) this.style.backgroundColor = this.hbgColor;
     if (this.hfgColor) this.span.style.color = this.hfgColor;
   }
   if (this.url) self.status = this.url;
  }
  

  
  function namoswlonmouseout()
  {
   if (navigator.appName.indexOf('Netscape', 0) != -1) {
     this.bgColor = this.oBgColor;
   } else  {
     this.style.backgroundColor = this.oBgColor;
     this.span.style.color = this.fgColor;
   }
   if (this.url) self.status = '';
  }
  

  
  function namoswlonmouseup()
  {
   if (this.url) {
     if (this.frame == 'blank') {
       window.open(this.url, 'win1');
     } else {
       var frameobj;
       if ((frameobj = eval(this.frame)) != null)
         frame_obj.location = this.url;
     }
   }
  }
  

  
  function namoswinitlist(toplayer)
  {
   if (parseInt(navigator.appVersion) < 4)
     return;
   if (toplayer == '')
     return;
  

  
   document.namoswlists     = new Array();
   document.namoswlists.lid = 0;
  

  
   var layer;
   if (navigator.appName.indexOf('Netscape', 0) != -1)
     layer = document.layers[toplayer];
   else
     layer = document.all[toplayer];
  

  
   var string = "";
   for (i = 0; i < 12; i++) {
     string = string + "<div id='namoswlistitem" + (document.namosw_lists.lid+i) + "' " +
                       "style='position: absolute;'></div>";
   }
   layer.innerHTML += string;
  

  
   l1 = new namoswlist(layer, true, 166, 22, 'Arial', '5', 'black', '#004080', 0, '#004F9E');
   l1.additem('Home', '', 'self');
     l2 = new namoswlist(layer, false, 166, 20, 'Arial', '4', 'black', '#00D419', 0, '#00E51A');
     l2.additem('All News', 'News.html', 'self');
     l2.additem('Latest News', 'NewNews.html', 'self');
   l1.addlist(l2, 'News', '', 'self');
     l3 = new namosw_list(layer, false, 166, 20, 'Arial', '4', 'black', '#00D419', 0, '#00E51A');
     l3.additem('List', 'Products/index.html', 'self');
     l3.additem('Autumn Night', 'Products/AN/index.html', 'self');
     l3.additem('File Cabinet', 'Products/FC/index.html', 'self');
     l3.additem('Business Manager', 'Products/BusinessManager/index.html', 'self');
     l3.additem('Final Wave', 'Products/FW/index.html', 'self');
   l1.addlist(l3, 'Products', '', 'self');
   l1.additem('Contact', 'Contact.html', 'self');
  

  
   l1.make(0, 14);
  }
  

  
  

  
  

  
  Then ware you want the code put.
  

  
  <div id="layer1" style="border-width:1px; border-style:none; width:166px; height:55px; position:absolute; z-index:1;">
  </div>
  

  Report abuse