BootStrap data-target fragment identifier cross-page navigation

Question

This question concerns how to navigate to a target in the index.html file when using fragment identifiers in the BootStrap navbar to request a target in the index.html page. The navbar is contained in index.html. The navbar is also contained within each separate *.html page loaded by the "Our Services" dropdown in the navbar.

I repeat then, each of the *.html pages needs to support navigation back to an identifier's target located in the index.html page and do so SHOULD maintain the target's position in the page the same way that can be observed when using the navbar when it is loaded in the index.html page. Repositioning is failing.

Please start observation by loading the site [1] and selecting "About Us," "Contact Us," "Find Us," and "Work With Us. We see desired target postioning whewn requested from index.html. The CGC logo will reload the page. For now I ask you to ignore the alerts. What we want to observe is the location within the page each section is loaded when using the navbar fragment identifiers to navigate ==within== the index.html page, i.e. the target is positioned to the top of the page.

// Typical navbar data-target fragment identifier snippet

    
        About Us
    
     ...

The real question that emerges is how to request a target in index.html and reuse its data-target when the targets are located in another page from which the target is being requested. I have written the pageTarget(target) function shown below that will navigate back to the index.html page. An anonymous function attempts (but fails) to reposition targeted sections located in the index.html homepage.

Without the pageTarget(target) function navigation FAILS completely and DOES NOTHING when About Us is selected from the navbar when the navbar loaded in one of the *.html files being used to attempt to navigate back to the index.html file. The pageTarget(target) function DOES support navigating back to index.html however the repostioning of the target (Aout Us) FAILS.

To clarify, the function will navigate back to index.html but will not position the "About Us" (#section-for-about-us) target the same way it will position itself when About Us is selected from the navbar when About Us is requested from the index.html file. Ordinarily this is expected data-target behavior however repeated attempts to write various forms of the pageTarget(target) and anonymous functions continue to FAIL to produce desired repositioning of the target (About Us.)

I AM ASKING FOR HELP TO REPOSITION TARGETED SECTIONS

For brevity let us please use "Our Sevices > Construction Testing" from the navbar dropdown and select "About Us" for all further discussion as a solution (if there is one) as any solution discovered can be replicated throughout afterwards.

TO EXPLAIN THE ALERTS...

// index.html alert splitPart: contains splitPart[0] which returns a filename partial (no extension) referrer: contains an HTTP Referrer section: contains a fragment identifier, e.g. #section-for-about-us

I suggest the following to understand the alerts and the circumstances I have tried to resolve;

// Load the homepage (select the CGC logo to reload) http://metromilwaukee.com/cgc-test/

// Select Our Services > Construction Testing // alert... splitPart: cgc-construction-testing-services referrer: cgc-construction-testing-services section: (will still be empty as it should be at this step)

// Select About Us // alert... splitParts: index referrer: index.html section: #section-for-about-us (populated by anonymous function)

OBSERVE ABOUT US SECTION POSITIONED ~35px BELOW WHERE IT "WANTS TO BE" HOW TO POSITION CORRECTLY IS THE OBJECTIVE

//********************************************
 // EXTERNAL JS CODE FOLLOWS...
 //********************************************
 
 // EXTERNAL JS PAGETARGET FUNCTION CALLED FROM NAVBAR
 function pageTarget(target) {
    'use-strict';

	// target should contain an argument passed by navbar calling this function
	// target argument should be a partial fragment identifier (without hash mark)
	if(target.length > 0){
    var target = target;
	}
    var referrer = document.referrer;
        referrer = location.pathname.substring(location.pathname.lastIndexOf('/') + 1);
	// split off the filename extension and put the filename partial into splitPart
    var splitPart = referrer.split(".");

	// splitPart[0] should contain one of the following filename partials
	// when its menu item is selected from the "Our Services" navbar dropdown
    if (splitPart[0] === 'cgc-construction-testing-services'         ||
        splitPart[0] === 'cgc-geotechnical-engineering-services'     ||
        splitPart[0] === 'cgc-geotechnical-laboratory-services'      ||
        splitPart[0] === 'cgc-department-of-transportation-services' ||
        splitPart[0] === 'cgc-projects-portfolio'                    ||
        splitPart[0] === 'index'){

        if (splitPart[0] !== 'index') {		    
            switch (target) {
			    // "sections" are literally HTML  located in index.html
				// which are decorated with an id attribute targeted by a data-target
				// fragement identifier referenced by anchor elements within the navbar
                case "section-for-about-us":                    
                    if (target.length > 0){
					    // Navigate to #section-for-about-us target 
                        // located within index.html (typ)
                        $(location).attr('href', 'index.html#' + target);
                    }
                    break;
                case "section-for-contact-us":
                    if (target.length > 0) {
                        $(location).attr('href', 'index.html#' + target);
                    }
                    break;
                case "section-for-find-us":
                    if (target.length > 0) {
                        $(location).attr('href', 'index.html#' + target);
                    }
                    break;
                case "section-for-work-with-us":
                    if (target.length > 0) {
                        $(location).attr('href', 'index.html#' + target);
                    }
                    break;
            }//switch
        }//if (splitPart[0] !== 'index')
    }//if (splitPart[0] ===
}//function pageTarget(target)

// EXTERNAL JS ANONYMOUS FUNCTION LOADED BY EACH PAGE LOAD...

// Anonymous function used in conjunction with pageTarget(target) function.
// This anonymous function should reposition targeted sections within the 
// index.html homepage when navbar menu selections are requested from the
// navbar when it happens to be contained within a separate *.html file 
// attemnpting to navigate back to the index.html homepage.
//
// This approach is necessary because pageTarget(target) loads the index.html
// homepage but the targeted section is postioned ~35px below where it "should be"
// when navbar menu selections are requested from within index.html.
$(function () {
    'use-strict;'
	
    var section   = $(location).attr('hash');
    var referrer  = $(document).prop("referrer");
        referrer  = location.pathname.substring(location.pathname.lastIndexOf('/') + 1);
    var splitPart = referrer.split(".");

   // ALERT
   // What are the object properties at this point in navigation
   alert('splitPart: ' + splitPart[0] + '
' +
         'referrer: ' + referrer + '
' +
         'section: ' + section);

   if (referrer.length !== 0) {  
       // same properties documented within pageTarget(target) function
       if (splitPart[0] === 'cgc-construction-testing-services' ||
           splitPart[0] === 'cgc-geotechnical-engineering-services' ||
           splitPart[0] === 'cgc-geotechnical-laboratory-services' ||
           splitPart[0] === 'cgc-department-of-transportation-services' ||
           splitPart[0] === 'cgc-projects-portfolio' ||
           splitPart[0] === 'index') {

           if (splitPart[0] !== 'index') {
               switch (splitPart[0]) {
                   case "cgc-construction-testing-services":
				       // same sections as documented by pageTarget(target) function
                       if(section.length !== 0){
                           switch (section) {
                               case "#section-for-about-us":
							       // reposition targeted section (typ)
                                   $(body).css('paddingTop', '-35px');
                                   break;
                           }
                       }
                       break;
                   case "cgc-geotechnical-engineering-services":
                       $(body).css('paddingTop', '-35px');
					   // etc.
                       break;
               }//switch
           }//if (splitPart[0] !== 'index')
       }//if (splitPart[0] ===
   }//if (referrer.length != 0)
});//$(function ()

[1] http://metromilwaukee.com/cgc-test/ the navbar is loaded using jQuery $("#cgc-top-navbar").load("cgc-top-navbar-large-screens.shtml"); and the page jumps around because there are disabled SVG animation page assets at the top of the index.html homepage that continues to occupy space within the DOM. The repositioning problems persist when the SVG object is displayed.

[2] View Source of the index.html file and grab the ViewPort Dimensions script very handy for RWD

I've done a lot of stackoverflow and googling research as well as writing and rewriting the functions but I have not figured out how to reposition yet. I hope somebody can and will help figure this out...

BootStrap data-target fragment identifier cross-page navigation

Answers (1)

Related Questions