www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 26

Thread: [RESOLVED] Two navigation bars on one page

  1. #1
    Join Date
    Oct 2006
    Location
    Ables Springs, Texas
    Posts
    185

    resolved [RESOLVED] Two navigation bars on one page

    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.
    Last edited by jwgrafflin; 11-05-2013 at 06:51 PM.

  2. #2
    Join Date
    Nov 2013
    Posts
    41
    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.

  3. #3
    Join Date
    Oct 2006
    Location
    Ables Springs, Texas
    Posts
    185
    Resolved - Ditched the list format and went with <nav>. Works like a charm. Less code and a much smaller css as well.

  4. #4
    Join Date
    Nov 2013
    Posts
    2
    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.

  5. #5
    Join Date
    Oct 2006
    Location
    Ables Springs, Texas
    Posts
    185
    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:

    Code:
    <!--
    ////////////////////
    //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));
    
    }
    -->

  6. #6
    Join Date
    Jul 2012
    Location
    UK
    Posts
    15
    Would help if you posted us a live link...

  7. #7
    Join Date
    Oct 2006
    Location
    Ables Springs, Texas
    Posts
    185
    My live link died. The cat just covered it up. But here's a snippet of the top and bottom menus:
    Code:
    <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.
    Last edited by jwgrafflin; 11-07-2013 at 11:14 PM. Reason: Because I want to

  8. #8
    Join Date
    Nov 2013
    Posts
    41
    IDs are meant to identify one object. Use a class.
    HTML Code:
    <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.

  9. #9
    Join Date
    Oct 2006
    Location
    Ables Springs, Texas
    Posts
    185
    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.

  10. #10
    Join Date
    Nov 2013
    Posts
    41
    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.

  11. #11
    Join Date
    Oct 2006
    Location
    Ables Springs, Texas
    Posts
    185
    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

  12. #12
    Join Date
    Nov 2013
    Posts
    41
    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?

  13. #13
    Join Date
    Oct 2006
    Location
    Ables Springs, Texas
    Posts
    185
    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?

  14. #14
    Join Date
    Nov 2013
    Posts
    41
    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/1...ole-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.
    Last edited by DaAwesomeP; 11-09-2013 at 08:04 PM. Reason: To be more clear

  15. #15
    Join Date
    Oct 2006
    Location
    Ables Springs, Texas
    Posts
    185
    nav will not work in IE without "role=navigation".

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.20430 seconds
  • Memory Usage 3,016KB
  • Queries Executed 15 (?)
More Information
Template Usage (38):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (2)bbcode_code
  • (1)bbcode_html
  • (2)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (15)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (1)pagenav_pagelink
  • (15)postbit
  • (15)postbit_onlinestatus
  • (15)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (74):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates