[RESOLVED] Two navigation bars on one page

This site is best viewed in a modern browser with JavaScript enabled.

[RESOLVED] Two navigation bars on one page

jwgrafflin

I have my sites set up where some pages have two navigation bars: one at the top and one at the bottom. On all of those websites, the top bar is tagged id=navbar and the bottom id=navb. The pages display as desired, except for one. That site only displays correctly in IE. However, if I change the bottom tag to class=navb, it then displays correctly cross-browser. Only the tag is changed, not the associated styles. What could be the problem? I haven't a clue where to look. Is there a possible conflict having two similar ids like navbar and navb?

Also confusing, if I code the pages inline, it makes no difference. id=navbar and id=navb display as intended. But if I change the inline style to a stylesheet, the id=navb will not display except in IE. Incidentally, the code and css validate.

DaAwesomeP

I would be helpful if you could post the HTML and CSS for the top & bottom bars or link to your site. I think it might be a css "." instead of a "#" in some cases, but there is no way for me to tell. It is probably something else.

jwgrafflin

Resolved - Ditched the list format and went with <nav>. Works like a charm. Less code and a much smaller css as well.

azan00

It’s not so simple now a days to buy a excellent written essays, first of all if you are intent. Someone always help make seriuosly posts i'd condition.

jwgrafflin

Up jumps another problem. My menu highlighter script, which works on several different menus, only works on one menu at a time. So, if there are two menus on the page, the code goes wacko and you can't read the page:

<!--
////////////////////
//Menu Highlighter//
////////////////////
/**************************************************************************
 *                                                                        *
 *  JAVASCRIPT MENU HIGHLIGHTER v.1.5 (080929)                            *
 * --------------------------------------------                           *
 * ©2005 Media Division (www.MediaDivision.com)                           *
 *                                                                        *
 * Written by Marius Smarandoiu & Armand Niculescu                        *
 *                                                                        *
 * You are free to use, modify and distribute this file, but please keep  *
 * this header and credits                                                *
 *                                                                        *
 * Usage:                                                                 *
 * - the script will apply the .current class to the <a> and its parent   *
 *   <li> that is contained in the element with id="primarynav" and points*
 *   to the current URL                                                   *
 * - works in IE6, Firefox and Opera                                      *
 **************************************************************************/
function extractPageName(hrefString)
{
	var arr = hrefString.split('/');
	return  (arr.length<2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();               

}

function setActiveMenu(arr, crtPage)
{
    for (var i=0; i < arr.length; i++)
    {
        if(extractPageName(arr[i].href) == crtPage)
        {
            if (arr[i].parentNode.parentNode.parentNode.parentNode.tagName != "DIV",
            arr[i].parentNode.tagName != "DIV")
            {
                arr[i].className = "current";               

            arr[i].parentNode.parentNode.parentNode.parentNode.className = "current";
                            arr[i].parentNode= "current";
        }
    }
}
}

function setPage()
{
	hrefString = document.location.href ? document.location.href : document.location;

if (document.getElementById("top")!=null)
	setActiveMenu(document.getElementById("top").getElementsByTagName("a"), extractPageName(hrefString));

if (document.getElementById("bottom")!=null)
	setActiveMenu(document.getElementById("bottom").getElementsByTagName("a"), extractPageName(hrefString));

if (document.getElementById("left")!=null)
	setActiveMenu(document.getElementById("left").getElementsByTagName("a"), extractPageName(hrefString));

if (document.getElementById("right")!=null)
	setActiveMenu(document.getElementById("right").getElementsByTagName("a"), extractPageName(hrefString));

}
-->

xxxfirehazrd

Would help if you posted us a live link...

jwgrafflin

My live link died. The cat just covered it up. But here's a snippet of the top and bottom menus:

<nav role="navigation" id="top">
	<a class="first" href="http://www.mysite.com/">Home</a>
	<a href="http://www.mysite.com/one.php">One</a>
	<a href="http://www.mysite.com/two.php">Two</a>
	<a href="http://www.mysite.com/three/">Three</a>
</nav>

<nav role="navigation" id="bottom">
	<a class="first" href="http://www.mysite.com/">Home</a>
	<a href="http://www.mysite.com/one.php">One</a>
	<a href="http://www.mysite.com/two.php">Two</a>
	<a href="http://www.mysite.com/three/">Three</a>
</nav>

You'll notice the contents of the navigation bars is identical. Only the css is different (the top css has a bottom border while the bottom css has a top and bottom border).

Both navigation bars appear and work just fine without the ID. When I add the ID to either the top or bottom bar, both bars work just fine with the applicable bar highlighted. But when I add the ID to both bars, everything goes wonky.

Seems to me it's the <nav> tag in html5 that's causing the problem, but I'm no expert on html5.

DaAwesomeP

IDs are meant to identify one object. Use a class.

<nav class="classNameHere"></nav>  <!-- Top -->
<nav class="classNameHere"></nav>  <!-- Bottom -->

<style type="text/css">
.classNameHere {
  // CSS Rules would apply to both bottom and top
}
</style>

Basically, it uses a "." instead of a "#" in CSS. In HTML, it uses the "class" attribute instead of "id".

This applies to all HTML versions.

IF I AM WRONG, (not answering your question) POST YOUR CSS!
Check for CSS errors. Missed brackets, semicolons, colons, etc.

jwgrafflin

I do know the difference between "." and "#". Refer to the Highlight script posted above. It requires ID. And, as posted above, the code and css pass w3c validation.

DaAwesomeP

I don't know how to day this without being too rude:
You did not post your CSS. It is either in a "<style>" tag, in the "style" attribute or a separate file. There is no hint of this in any of the code you posted above.

jwgrafflin

Sorry. Tried to enter css, but got the following error:

The text that you have entered is too long (73485 characters). Please shorten it to 10000 characters long.

Suffice it to say, W3C said:

W3C CSS Validator results for TextArea (CSS level 3)
Congratulations! No Error Found.

However, since you seem determined that the css is all screwed up, here's the link. Enjoy!http://mystuff.biz.ht/submit.css

DaAwesomeP

Thanks! Hmmm. Seems to work fine here: http://jsfiddle.net/DaAwesomeP/gX3dS/. Be sure you're using the HTML5 Doctype. What browsers have you tested it in?

jwgrafflin

Using <!DOCTYPE html> and the most current editions of IE, FF, CH, SF & OP. Now, back to the question, could it possibly be something regarding the new html5 semantics <nav> tag?

DaAwesomeP

Majot Error: I just noticed! You should not have the "role=navigation" on a nav element, only a div. Also try using a div with "role=navigation" (if you haven't already). Lastly try a regular div (with no "role=navigation").

There might be a requirement of having only one nav per page. I still can't see why your code wouldn't work. It works fine in the Fiddle. It might be another style on your page affecting it. In FF, do a regular inspect element (not using Firebug) and see all of the rules affecting it (including the inherited ones). Make sure that the navs are not in any inline-elements (they are block-level, so that would screw them up).

Maybe you'll find an answer here: http://stackoverflow.com/questions/14180785/html5-nav-element-vs-role-navigation. If you know what is making the nav work, than you can instead only apply the CSS rules that you want to the div.

jwgrafflin

nav will not work in IE without "role=navigation".

DaAwesomeP

Hmm. See what it does in FF and Chrome without the attribute anyways. In the HTML5 docs, it says NOT to use both at once. IE probably has support for the attribute, but not the tag. You could use a conditional tag for IE (what version?) or a simple server-side script (probably PHP).

jwgrafflin

I went back to zero and started over, setting the two navigation bars to div only (no class or id) and removed the highlight.js. Page displays as desired in the following current browsers: IE-10, FF-25, Chrome, Safari, Opera and SeaMonkey.

Set the top navigation to "div ID='top'" and re-activated the highlight.js for 'div & top'. Page displays correctly (including top menu highlight) in all the above browsers EXCEPT IE (no highlighted nav bar). Checked to make sure scripting enabled in IE.

Have you any idea why (other than the fact it IS Microsoft) why IE won't display the highlight?

jwgrafflin

Duplicate deleted

DaAwesomeP

I have no clue. In IE, hit F12. Look at the console for errors and/or warnings. Also look at the CSS, Script, and Profiler tabs for anything unusual. Run the debugger in the Script tab & reload the page. See the results. Same in the Profiler tab. Validate it again. Put all of your Javascript through JSLint. Try Compatibility View (this will probably actually screw up the whole thing). I don't know what's going on now. At least the original problem was fixed.

jwgrafflin

Replaced div with nav and got the same results. Used a different highlight script, again with the same results. Used class instead of id, again with the same results. The problem is obviously IE. No wonder IE's market share is dwindling so rapidly.

The first thing noted at JSLint is "Missing 'use strict' statement.

aObj = document.getElementById('bottom').getElementsByTagName('a');" I have no idea what that means.