SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast Spartan4085's Avatar
    Join Date
    Oct 2012
    Location
    Michigan, USA
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Can't change the width of my navbar to 960px

    I've been trying to change the width of my navbar to 960px. Nothing I've tried seems to be working for me.

    Here's the HTML:
    HTML Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Stephen Reynolds: A clear picture of the future.</title>
    <link href="favicon.ico" rel="icon" type="image/x-icon" />
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <style type="text/css">
    <!--
    body {
    	background-color: #F1F1F1;
    	margin: 0, 50
    &;
    	padding: 0;
    	color: #000;
    	margin: 0;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 100%;
    	line-height: normal;
    }
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { 
    	padding: 0;
    	margin: 0;
    }
    h1, h2, h3, h4, h5, h6, p {
    	margin-top: 0;	
    	padding-right: 15px;
    	padding-left: 15px; 
    }
    a img { 
    	border: none;
    }
    
    a:link {
    	color: #42413C;
    	text-decoration: underline; 
    }
    a:visited {
    	color: #000000;
    	text-decoration: none;
    }
    a:hover, a:active, a:focus { 
    	text-decoration: none;
    }
    /* ~~ This fixed width container surrounds all other blocks ~~ */
    .container {
    	width: 960px;
    	background-color: #FFFFFF;
    	margin: 0 auto; 
    }
    
    ul#menu
    {
    padding: 0px;
    position: relative;
    margin: 0;
    top: 0px;
    background-color: #464646;
    }
    
    ul#menu li
    {
    display: inline;
    }
    
    ul#menu li a 
    {
    padding: 0px 8px;
    text-decoration: none;
    line-height: 2em;
    color: #ffffff;
    font-family: 'Segoe UI';
    font-size: 12pt;
    }
    header {
    	background-color: #F1F1F1;
    }
    
    .content {
    	padding: 20px;
    	width: 750px;
    }
    aside {
    	float: left;
    	width: 180px;
    	background-color: #FFFFFF;
    	padding: 10px 0;
    }
    
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
    	padding: 0 15px 15px 40px; 
    }
    
    #titlename {
    	font-family: 'Segoe UI';
    	font-size: 36px;
    	color: #00A1F1;
    }
    
    /* ~~ The footer ~~ */
    footer {
    	padding: 0;
    	background-color: #FFFFFF;
    	position: relative;
    	clear: both; 
    	border-top-style:solid;
    	border-top-width:1px;
    }
    /* ~~ Miscellaneous float/clear classes ~~ */
    .fltrt {  
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { 
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { 
    	clear:both;
    	height:0;
    	font-size: 1px;
    	line-height: 0px;
    }
    
    /*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
    header, section, footer, aside, article, figure {
    	display: block;
    }
    body,td,th {
    	font-family: Calibri, Arial, sans-serif;
    }
    -->
    </style>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    </head>
    
    <body>
    
    <div class="container">
      <header>
        <a href="default.html"><img src="Images/Layout/Logo.png" width="354" height="52" alt="logo"></a>
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="blog.html">Blog</a>
          </li>
          <li><a class="MenuBarItemSubmenu" a href="careers.html">Careers</a>
          	<ul>
            	<li><a href="synics.html">Synics</a></li>
            </ul>
          </li>
          <li><a  href="portfolio.html">Portfolio</a></li>
          <li><a class="MenuBarItemSubmenu" href="interests.html">Interests</a>
          	<ul>
            	<li><a href="language.html">Language</a>
                	<ul>
                    	<li><a href="latin.html">Latin</a></li>
                    	<li><a href="japanese.html">Japanese</a></li>
                	</ul>
                </li>
                <li><a href="programming.html">Programming</a></li>
                <li><a href="game_design.html">Game Design</a></li>
                <li><a href="gaming.html">Gaming</a></li>
          	</ul>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </header>
      <!--<ul id="menu">
      	    <li><a href="/blog">Blog</a></li>
                <li><a href="/careers">Careers</a></li>
                <li><a href="/portfolio">Portfolio</a></li>
                <li><a href="/interests">Interests</a></li>
                <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>-->
      <article class="content">
        <div id="titlename">
          <p>Home </p>
        </div>
        <section>
          <p>Place holder text removed to reduce length of post.</p>
        </section>
        <section> </section>
      <!-- end .content --></article>
      <footer>
        <table width="960" border="0" align="center">
          <tr>
            <td width="960"><blockquote>
              <blockquote>
                <blockquote>
                  <blockquote>
                    <blockquote>
                      <blockquote>
                        <p>Copyright &copy; 2012 Stephen Reynolds | All rights reserved.</p>
                      </blockquote>
                    </blockquote>
                  </blockquote>
                </blockquote>
              </blockquote>
            </blockquote></td>
          </tr>
        </table>
      </footer>
      <!-- end .container --></div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>
    Here's the navbar's CSS:
    HTML Code:
    @charset "UTF-8";
    
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    
    /*******************************************************************************
    
     LAYOUT INFORMATION: describes box model, positioning, z-order
    
     *******************************************************************************/
    
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
    {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	font-size: 12pt;
    	cursor: default;
    	width: 960px;
        font-family: 'Segoe UI';
    }
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
    {
    	z-index: 1000;
    }
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
    {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	position: relative;
    	text-align: left;
    	cursor: pointer;
    	width: auto;
    	float: left;
        line-height: 2em;
        font-size: 12pt;
    }
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
    {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	z-index: 1020;
    	cursor: default;
    	width: 8.2em;
    	position: absolute;
    	left: -1000em;
        font-size: 12pt;
    }
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    {
    	left: auto;
    }
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    {
    	width: 8.2em;
    }
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    {
    	position: absolute;
    	margin: -5% 0 0 95%;
    }
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    {
    	left: auto;
    	top: 0;
    }
    
    /*******************************************************************************
    
     DESIGN INFORMATION: describes color scheme, borders, fonts
    
     *******************************************************************************/
    
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    {
    	display: block;
    	cursor: pointer;
    	background-color: #464646;
    	padding: 0px 8px;
    	color: #ffffff;
    	text-decoration: none;
    }
    
    /* Menu items that have mouse over or focus */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    {
    	background-color: #464646;
    	color: #FFF;
    }
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    {
    	background-color: #757575;
    	color: #FFF;
    }
    
    /*******************************************************************************
    
     SUBMENU INDICATION: styles if there is a submenu under a given menu item
    
     *******************************************************************************/
    
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
    {
    	background-image: url(SpryMenuBarDown.gif);
    	background-repeat: no-repeat;
    	background-position: 95% 50%;
    }
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    {
    	background-image: url(SpryMenuBarRight.gif);
    	background-repeat: no-repeat;
    	background-position: 95% 50%;
    }
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    {
    	background-image: url(SpryMenuBarDownHover.gif);
    	background-repeat: no-repeat;
    	background-position: 95% 50%;
    }
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    {
    	background-image: url(SpryMenuBarRightHover.gif);
    	background-repeat: no-repeat;
    	background-position: 95% 50%;
    }
    
    /*******************************************************************************
    
     BROWSER HACKS: the hacks below should not be changed unless you are an expert
    
     *******************************************************************************/
    
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
    {
    	position: absolute;
    	z-index: 1010;
    	filter:alpha(opacity:0.1);
    }
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    {
    	ul.MenuBarHorizontal li.MenuBarItemIE
    	{
    		display: inline;
    		f\loat: left;
    		background: #FFF;
    	}
    }
    And here's the navbar's JavaScript:
    HTML Code:
    (function() { // BeginSpryComponent
    
    if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
    
    Spry.BrowserSniff = function()
    {
    	var b = navigator.appName.toString();
    	var up = navigator.platform.toString();
    	var ua = navigator.userAgent.toString();
    
    	this.mozilla = this.ie = this.opera = this.safari = false;
    	var re_opera = /Opera.([0-9\.]*)/i;
    	var re_msie = /MSIE.([0-9\.]*)/i;
    	var re_gecko = /gecko/i;
    	var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
    	var r = false;
    
    	if ( (r = ua.match(re_opera))) {
    		this.opera = true;
    		this.version = parseFloat(r[1]);
    	} else if ( (r = ua.match(re_msie))) {
    		this.ie = true;
    		this.version = parseFloat(r[1]);
    	} else if ( (r = ua.match(re_safari))) {
    		this.safari = true;
    		this.version = parseFloat(r[2]);
    	} else if (ua.match(re_gecko)) {
    		var re_gecko_version = /rv:\s*([0-9\.]+)/i;
    		r = ua.match(re_gecko_version);
    		this.mozilla = true;
    		this.version = parseFloat(r[1]);
    	}
    	this.windows = this.mac = this.linux = false;
    
    	this.Platform = ua.match(/windows/i) ? "windows" :
    					(ua.match(/linux/i) ? "linux" :
    					(ua.match(/mac/i) ? "mac" :
    					ua.match(/unix/i)? "unix" : "unknown"));
    	this[this.Platform] = true;
    	this.v = this.version;
    
    	if (this.safari && this.mac && this.mozilla) {
    		this.mozilla = false;
    	}
    };
    
    Spry.is = new Spry.BrowserSniff();
    
    // Constructor for Menu Bar
    // element should be an ID of an unordered list (<ul> tag)
    // preloadImage1 and preloadImage2 are images for the rollover state of a menu
    Spry.Widget.MenuBar = function(element, opts)
    {
    	this.init(element, opts);
    };
    
    Spry.Widget.MenuBar.prototype.init = function(element, opts)
    {
    	this.element = this.getElement(element);
    
    	// represents the current (sub)menu we are operating on
    	this.currMenu = null;
    	this.showDelay = 250;
    	this.hideDelay = 600;
    	if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
    	{
    		// bail on older unsupported browsers
    		return;
    	}
    
    	// Fix IE6 CSS images flicker
    	if (Spry.is.ie && Spry.is.version < 7){
    		try {
    			document.execCommand("BackgroundImageCache", false, true);
    		} catch(err) {}
    	}
    
    	this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
    	this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
    	this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
    	this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
    	this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
    
    	this.hoverClass = 'MenuBarItemHover';
    	this.subHoverClass = 'MenuBarItemSubmenuHover';
    	this.subVisibleClass ='MenuBarSubmenuVisible';
    	this.hasSubClass = 'MenuBarItemSubmenu';
    	this.activeClass = 'MenuBarActive';
    	this.isieClass = 'MenuBarItemIE';
    	this.verticalClass = 'MenuBarVertical';
    	this.horizontalClass = 'MenuBarHorizontal';
    	this.enableKeyboardNavigation = true;
    
    	this.hasFocus = false;
    	// load hover images now
    	if(opts)
    	{
    		for(var k in opts)
    		{
    			if (typeof this[k] == 'undefined')
    			{
    				var rollover = new Image;
    				rollover.src = opts[k];
    			}
    		}
    		Spry.Widget.MenuBar.setOptions(this, opts);
    	}
    
    	// safari doesn't support tabindex
    	if (Spry.is.safari)
    		this.enableKeyboardNavigation = false;
    
    	if(this.element)
    	{
    		this.currMenu = this.element;
    		var items = this.element.getElementsByTagName('li');
    		for(var i=0; i<items.length; i++)
    		{
    			if (i > 0 && this.enableKeyboardNavigation)
    				items[i].getElementsByTagName('a')[0].tabIndex='-1';
    
    			this.initialize(items[i], element);
    			if(Spry.is.ie)
    			{
    				this.addClassName(items[i], this.isieClass);
    				items[i].style.position = "static";
    			}
    		}
    		if (this.enableKeyboardNavigation)
    		{
    			var self = this;
    			this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
    		}
    
    		if(Spry.is.ie)
    		{
    			if(this.hasClassName(this.element, this.verticalClass))
    			{
    				this.element.style.position = "relative";
    			}
    			var linkitems = this.element.getElementsByTagName('a');
    			for(var i=0; i<linkitems.length; i++)
    			{
    				linkitems[i].style.position = "relative";
    			}
    		}
    	}
    };
    Spry.Widget.MenuBar.KEY_ESC = 27;
    Spry.Widget.MenuBar.KEY_UP = 38;
    Spry.Widget.MenuBar.KEY_DOWN = 40;
    Spry.Widget.MenuBar.KEY_LEFT = 37;
    Spry.Widget.MenuBar.KEY_RIGHT = 39;
    
    Spry.Widget.MenuBar.prototype.getElement = function(ele)
    {
    	if (ele && typeof ele == "string")
    		return document.getElementById(ele);
    	return ele;
    };
    
    Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
    {
    	if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
    	{
    		return false;
    	}
    	return true;
    };
    
    Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
    {
    	if (!ele || !className || this.hasClassName(ele, className))
    		return;
    	ele.className += (ele.className ? " " : "") + className;
    };
    
    Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
    {
    	if (!ele || !className || !this.hasClassName(ele, className))
    		return;
    	ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
    };
    
    // addEventListener for Menu Bar
    // attach an event to a tag without creating obtrusive HTML code
    Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
    {
    	try
    	{
    		if (element.addEventListener)
    		{
    			element.addEventListener(eventType, handler, capture);
    		}
    		else if (element.attachEvent)
    		{
    			element.attachEvent('on' + eventType, handler);
    		}
    	}
    	catch (e) {}
    };
    
    // createIframeLayer for Menu Bar
    // creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
    Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
    {
    	var layer = document.createElement('iframe');
    	layer.tabIndex = '-1';
    	layer.src = 'javascript:""';
    	layer.frameBorder = '0';
    	layer.scrolling = 'no';
    	menu.parentNode.appendChild(layer);
    	
    	layer.style.left = menu.offsetLeft + 'px';
    	layer.style.top = menu.offsetTop + 'px';
    	layer.style.width = menu.offsetWidth + 'px';
    	layer.style.height = menu.offsetHeight + 'px';
    };
    
    // removeIframeLayer for Menu Bar
    // removes an IFRAME underneath a menu to reveal any form controls and ActiveX
    Spry.Widget.MenuBar.prototype.removeIframeLayer =  function(menu)
    {
    	var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
    	while(layers.length > 0)
    	{
    		layers[0].parentNode.removeChild(layers[0]);
    	}
    };
    
    // clearMenus for Menu Bar
    // root is the top level unordered list (<ul> tag)
    Spry.Widget.MenuBar.prototype.clearMenus = function(root)
    {
    	var menus = root.getElementsByTagName('ul');
    	for(var i=0; i<menus.length; i++)
    		this.hideSubmenu(menus[i]);
    
    	this.removeClassName(this.element, this.activeClass);
    };
    
    // bubbledTextEvent for Menu Bar
    // identify bubbled up text events in Safari so we can ignore them
    Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
    {
    	return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
    };
    
    // showSubmenu for Menu Bar
    // set the proper CSS class on this menu to show it
    Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
    {
    	if(this.currMenu)
    	{
    		this.clearMenus(this.currMenu);
    		this.currMenu = null;
    	}
    	
    	if(menu)
    	{
    		this.addClassName(menu, this.subVisibleClass);
    		if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
    		{
    			if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
    			{
    				menu.style.top = menu.parentNode.offsetTop + 'px';
    			}
    		}
    		if(Spry.is.ie && Spry.is.version < 7)
    		{
    			this.createIframeLayer(menu);
    		}
    	}
    	this.addClassName(this.element, this.activeClass);
    };
    
    // hideSubmenu for Menu Bar
    // remove the proper CSS class on this menu to hide it
    Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
    {
    	if(menu)
    	{
    		this.removeClassName(menu, this.subVisibleClass);
    		if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
    		{
    			menu.style.top = '';
    			menu.style.left = '';
    		}
    		if(Spry.is.ie && Spry.is.version < 7)
    			this.removeIframeLayer(menu);
    	}
    };
    
    // initialize for Menu Bar
    // create event listeners for the Menu Bar widget so we can properly
    // show and hide submenus
    Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
    {
    	var opentime, closetime;
    	var link = listitem.getElementsByTagName('a')[0];
    	var submenus = listitem.getElementsByTagName('ul');
    	var menu = (submenus.length > 0 ? submenus[0] : null);
    
    	if(menu)
    		this.addClassName(link, this.hasSubClass);
    
    	if(!Spry.is.ie)
    	{
    		// define a simple function that comes standard in IE to determine
    		// if a node is within another node
    		listitem.contains = function(testNode)
    		{
    			// this refers to the list item
    			if(testNode == null)
    				return false;
    
    			if(testNode == this)
    				return true;
    			else
    				return this.contains(testNode.parentNode);
    		};
    	}
    
    	// need to save this for scope further down
    	var self = this;
    	this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
    	this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
    
    	if (this.enableKeyboardNavigation)
    	{
    		this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
    		this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
    	}
    };
    Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
    {
    	this.lastOpen = listitem.getElementsByTagName('a')[0];
    	this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
    	this.hasFocus = true;
    };
    Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
    {
    	this.clearSelection(listitem);
    };
    Spry.Widget.MenuBar.prototype.clearSelection = function(el){
    	//search any intersection with the current open element
    	if (!this.lastOpen)
    		return;
    
    	if (el)
    	{
    		el = el.getElementsByTagName('a')[0];
    		
    		// check children
    		var item = this.lastOpen;
    		while (item != this.element)
    		{
    			var tmp = el;
    			while (tmp != this.element)
    			{
    				if (tmp == item)
    					return;
    				try{
    					tmp = tmp.parentNode;
    				}catch(err){break;}
    			}
    			item = item.parentNode;
    		}
    	}
    	var item = this.lastOpen;
    	while (item != this.element)
    	{
    		this.hideSubmenu(item.parentNode);
    		var link = item.getElementsByTagName('a')[0];
    		this.removeClassName(link, this.hoverClass);
    		this.removeClassName(link, this.subHoverClass);
    		item = item.parentNode;
    	}
    	this.lastOpen = false;
    };
    Spry.Widget.MenuBar.prototype.keyDown = function (e)
    {
    	if (!this.hasFocus)
    		return;
    
    	if (!this.lastOpen)
    	{
    		this.hasFocus = false;
    		return;
    	}
    
    	var e = e|| event;
    	var listitem = this.lastOpen.parentNode;
    	var link = this.lastOpen;
    	var submenus = listitem.getElementsByTagName('ul');
    	var menu = (submenus.length > 0 ? submenus[0] : null);
    	var hasSubMenu = (menu) ? true : false;
    
    	var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
    	
    	if (!opts[3])
    		opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
    
    	var found = 0;
    	switch (e.keyCode){
    		case this.upKeyCode:
    			found = this.getElementForKey(opts, 'y', 1);
    			break;
    		case this.downKeyCode:
    			found = this.getElementForKey(opts, 'y', -1);
    			break;
    		case this.leftKeyCode:
    			found = this.getElementForKey(opts, 'x', 1);
    			break;
    		case this.rightKeyCode:
    			found = this.getElementForKey(opts, 'x', -1);
    			break;
    		case this.escKeyCode:
    		case 9:
    			this.clearSelection();
    			this.hasFocus = false;
    		default: return;
    	}
    	switch (found)
    	{
    		case 0: return;
    		case 1:
    			//subopts
    			this.mouseOver(listitem, e);
    			break;
    		case 2:
    			//parent
    			this.mouseOut(opts[2], e);
    			break;
    		case 3:
    		case 4:
    			// left - right
    			this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
    			break;
    	}
    	var link = opts[found].getElementsByTagName('a')[0];
    	if (opts[found].nodeName.toLowerCase() == 'ul')
    		opts[found] = opts[found].getElementsByTagName('li')[0];
    
    	this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
    	this.lastOpen = link;
    	opts[found].getElementsByTagName('a')[0].focus();
      
            //stop further event handling by the browser
    	return Spry.Widget.MenuBar.stopPropagation(e);
    };
    Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
    {
    	var link = listitem.getElementsByTagName('a')[0];
    	var submenus = listitem.getElementsByTagName('ul');
    	var menu = (submenus.length > 0 ? submenus[0] : null);
    	var hasSubMenu = (menu) ? true : false;
    	if (this.enableKeyboardNavigation)
    		this.clearSelection(listitem);
    
    	if(this.bubbledTextEvent())
    	{
    		// ignore bubbled text events
    		return;
    	}
    
    	if (listitem.closetime)
    		clearTimeout(listitem.closetime);
    
    	if(this.currMenu == listitem)
    	{
    		this.currMenu = null;
    	}
    
    	// move the focus too
    	if (this.hasFocus)
    		link.focus();
    
    	// show menu highlighting
    	this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
    	this.lastOpen = link;
    	if(menu && !this.hasClassName(menu, this.subHoverClass))
    	{
    		var self = this;
    		listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
    	}
    };
    Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
    {
    	var link = listitem.getElementsByTagName('a')[0];
    	var submenus = listitem.getElementsByTagName('ul');
    	var menu = (submenus.length > 0 ? submenus[0] : null);
    	var hasSubMenu = (menu) ? true : false;
    	if(this.bubbledTextEvent())
    	{
    		// ignore bubbled text events
    		return;
    	}
    
    	var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
    	if(!listitem.contains(related))
    	{
    		if (listitem.opentime) 
    			clearTimeout(listitem.opentime);
    		this.currMenu = listitem;
    
    		// remove menu highlighting
    		this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
    		if(menu)
    		{
    			var self = this;
    			listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
    		}
    		if (this.hasFocus)
    			link.blur();
    	}
    };
    Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
    {
    	var child = element[sibling];
    	while (child && child.nodeName.toLowerCase() !='li')
    		child = child[sibling];
    
    	return child;
    };
    Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
    {
    	var found = 0;
    	var rect = Spry.Widget.MenuBar.getPosition;
    	var ref = rect(els[found]);
    
    	var hideSubmenu = false;
    	//make the subelement visible to compute the position
    	if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
    	{
    		els[1].style.visibility = 'hidden';
    		this.showSubmenu(els[1]);
    		hideSubmenu = true;
    	}
    
    	var isVert = this.hasClassName(this.element, this.verticalClass);
    	var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
    	
    	for (var i = 1; i < els.length; i++){
    		//when navigating on the y axis in vertical menus, ignore children and parents
    		if(prop=='y' && isVert && (i==1 || i==2))
    		{
    			continue;
    		}
    		//when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
    		if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
    		{
    			continue;
    		}
    			
    		if (els[i])
    		{
    			var tmp = rect(els[i]); 
    			if ( (dir * tmp[prop]) < (dir * ref[prop]))
    			{
    				ref = tmp;
    				found = i;
    			}
    		}
    	}
    	
    	// hide back the submenu
    	if (els[1] && hideSubmenu){
    		this.hideSubmenu(els[1]);
    		els[1].style.visibility =  '';
    	}
    
    	return found;
    };
    Spry.Widget.MenuBar.camelize = function(str)
    {
    	if (str.indexOf('-') == -1){
    		return str;	
    	}
    	var oStringList = str.split('-');
    	var isFirstEntry = true;
    	var camelizedString = '';
    
    	for(var i=0; i < oStringList.length; i++)
    	{
    		if(oStringList[i].length>0)
    		{
    			if(isFirstEntry)
    			{
    				camelizedString = oStringList[i];
    				isFirstEntry = false;
    			}
    			else
    			{
    				var s = oStringList[i];
    				camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
    			}
    		}
    	}
    
    	return camelizedString;
    };
    
    Spry.Widget.MenuBar.getStyleProp = function(element, prop)
    {
    	var value;
    	try
    	{
    		if (element.style)
    			value = element.style[Spry.Widget.MenuBar.camelize(prop)];
    
    		if (!value)
    			if (document.defaultView && document.defaultView.getComputedStyle)
    			{
    				var css = document.defaultView.getComputedStyle(element, null);
    				value = css ? css.getPropertyValue(prop) : null;
    			}
    			else if (element.currentStyle) 
    			{
    					value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
    			}
    	}
    	catch (e) {}
    
    	return value == 'auto' ? null : value;
    };
    Spry.Widget.MenuBar.getIntProp = function(element, prop)
    {
    	var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
    	if (isNaN(a))
    		return 0;
    	return a;
    };
    
    Spry.Widget.MenuBar.getPosition = function(el, doc)
    {
    	doc = doc || document;
    	if (typeof(el) == 'string') {
    		el = doc.getElementById(el);
    	}
    
    	if (!el) {
    		return false;
    	}
    
    	if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
    		//element must be visible to have a box
    		return false;
    	}
    
    	var ret = {x:0, y:0};
    	var parent = null;
    	var box;
    
    	if (el.getBoundingClientRect) { // IE
    		box = el.getBoundingClientRect();
    		var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
    		var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
    		ret.x = box.left + scrollLeft;
    		ret.y = box.top + scrollTop;
    	} else if (doc.getBoxObjectFor) { // gecko
    		box = doc.getBoxObjectFor(el);
    		ret.x = box.x;
    		ret.y = box.y;
    	} else { // safari/opera
    		ret.x = el.offsetLeft;
    		ret.y = el.offsetTop;
    		parent = el.offsetParent;
    		if (parent != el) {
    			while (parent) {
    				ret.x += parent.offsetLeft;
    				ret.y += parent.offsetTop;
    				parent = parent.offsetParent;
    			}
    		}
    		// opera & (safari absolute) incorrectly account for body offsetTop
    		if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
    			ret.y -= doc.body.offsetTop;
    	}
    	if (el.parentNode)
    			parent = el.parentNode;
    	else
    		parent = null;
    	if (parent.nodeName){
    		var cas = parent.nodeName.toUpperCase();
    		while (parent && cas != 'BODY' && cas != 'HTML') {
    			cas = parent.nodeName.toUpperCase();
    			ret.x -= parent.scrollLeft;
    			ret.y -= parent.scrollTop;
    			if (parent.parentNode)
    				parent = parent.parentNode;
    			else
    				parent = null;
    		}
    	}
    	return ret;
    };
    
    Spry.Widget.MenuBar.stopPropagation = function(ev)
    {
    	if (ev.stopPropagation)
    		ev.stopPropagation();
    	else
    		ev.cancelBubble = true;
    	if (ev.preventDefault) 
    		ev.preventDefault();
    	else 
    		ev.returnValue = false;
    };
    
    Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
    {
    	if (!optionsObj)
    		return;
    	for (var optionName in optionsObj)
    	{
    		if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
    			continue;
    		obj[optionName] = optionsObj[optionName];
    	}
    };
    
    })(); // EndSpryComponent
    It ends up looking like this:
    https://dl.dropbox.com/u/37319607/navhelp.PNG

    The background (the dark gray) is supposed to stretch to be 960px while the links stay to the left.

    I know I'm forgetting something but I can't just figure it out. Help!
    Attached Images Attached Images

  2. #2
    SitePoint Member
    Join Date
    Mar 2006
    Location
    Poconos, Pennsylvania
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The width does stretch to 960px, you don't have a background defined nor a height.

    Add:

    Code:
    height: 32px;
    background: #464646;
    To:

    Code:
    ul.MenuBarHorizontal {
    Tested and confirmed it worked.

  3. #3
    SitePoint Enthusiast Spartan4085's Avatar
    Join Date
    Oct 2012
    Location
    Michigan, USA
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BrianGarcia View Post
    The width does stretch to 960px, you don't have a background defined nor a height.

    Add:

    Code:
    height: 32px;
    background: #464646;
    To:

    Code:
    ul.MenuBarHorizontal {
    Tested and confirmed it worked.
    I knew I was forgetting something! Thanks!

    It's amazing how simple of a mistake it was, though...

  4. #4
    SitePoint Member
    Join Date
    Mar 2006
    Location
    Poconos, Pennsylvania
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No worries, this happens a lot . I advise using firebug / web developer for debugging.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Adding a height can break the layout, for example, when someone has their fonts set bigger than normal. A better option would be:

    Code:
    ul.MenuBarHorizontal {
      overflow:hidden;
      background: #464646;
    }


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
  •