Home/ Questions/Q 7746943
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T10:24:30+00:00

Core Question I need help coming up with a concept to achieve my goal.

  • 0

Core Question

I need help coming up with a concept to achieve my goal. I am having a problem coming up with an idea to how I can navigate the DOM properly with the method I have chosen.

The Goal

You should know what I am doing first:

I use ajax to call HTML content into a <section> element of my template. I then call from those HTML contents an class="pageNav" tagged element that holds the sub navigation for it and copies it to a id="subNav" located in the main template. I do this when the new content is being called from the onStateChange event with this:

function subNavContent (  ) {  
    var navContent = document.getElementsByClassName('pageNav')[0]; 
    document.getElementById('subNav').innerHTML = navContent.innerHTML;
}

Now the issue I have with doing this is I must assign the proper array value to achieve this:

// i is the current content pages sub navigation
navContent = document.getElementsByClassName('pageNav')[i]

To be more clear the class="pageNav" are loaded into the DOM only when the user calls the page content, this is what specifies navContent[i] position. So this is my dilemma.

Example: Home page is loaded contentNav[0] location. Contact is loaded by user next this would be contentNav[1] location for the class="pageNav".

The real questions?

Is there was some way I could pass the array value of the page as it’s loading into the DOM like in my example or not?

Could I maybe delete the class="pageNav" contents from the DOM after it copies to reset the array value of class="pageNav" to navContent[0] when it is ran for the next page?

Further efforts with my idea
I have being toying with this idea but with no success. What I was thinking was to delete class="pageNav" for that content from the DOM after it is transfered like so:

function subNavClear ( ) {
    var wrap = document.getElementById('contentBody');
    var nav = document.getElementsByClassName('pageNav')[0];
    wrap.removeChild(nav);
}

so the resulting functions would be initiate in this order:

subNavContent (  );
    subNavClear ( );

I thought this would allow me to not worry about the array value of contentNav[0]. I would think because I delete it from the DOM after it is created and copied that the next one to load would be assigned contentNav[0].

Take a look if you like: The Mind Company.

Snipplets per request
This code does as explained.

html:

<body>
<!-- Header Areas: (Constent visual)--> 
<header>
    <div id="headTopRow">
        <div id="headerElement">  

            <nav id="subNav" class="aniSubNavOpen drop-shadow lifted">
            </nav>

        </div>
    </div>

</header>

<!-- Content Areas: (Variable visual)-->
<div id="contentBody">
    <br>
    <section class="aniDown" id="homePage">
        <script>checkPage ( 'homePage', 'home.html', 'main');</script>
    </section>
    <section class="aniDown" id="aboutPage"></section>
    <section class="aniDown" id="lessonsPage"></section>
    <section class="aniDown" id="productPage"></section>
    <section class="aniDown" id="contactPage"></section>
</div>

<!-- Footer Area: (Constant visual)-->
<footer>
</footer>
</body>

Transition functions:

function subNavContent (  ) {  
    var navContent = document.getElementsByClassName('pageNav')[0]; 
    document.getElementById('subNav').innerHTML = navContent.innerHTML;
}

    function sectionAssure( classID, url ) {        
            var tmp = '';
            var sel = document.getElementsByTagName('section');

            for (var i=0; i<sel.length; i++){
                if (sel[i].id == classID) { 
                    tmp = 'block'; 
                } 
                else {
                    tmp = 'none'; 
                }
                sel[i].style.display = tmp;  
            }  
    }

    function loadContent ( classID, url, type ) {   
        var xmlhttp;

        if ( window.XMLHttpRequest ) {
            xmlhttp = new XMLHttpRequest();

            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
                    document.getElementById( classID ).innerHTML=xmlhttp.responseText;
                    subNavContent ( );
                }
            };

        xmlhttp.open( "GET", url, true );             
        xmlhttp.send( );  
        }  
        return;  
    }

    function checkPage ( classID, url ) {
        sectionAssure ( classID, url );     
        loadContent ( classID, url );  
    }

Solution!!

Thanks to @Dennis for giving me this idea. Although I used a different method the principle is the same.

function subNavContent ( classID ) {  
    var sec = document.getElementById( classID );
    document.getElementById('subNav').innerHTML = sec.getElementsByClassName('pageNav')[0].innerHTML;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Instead of manually setting display:block and display:none, you could use a class. Select the section that is .active, and select the pageNav from there:

    var navContent = document.getElementsByClassName('active')[0].getElementsByClassName('pageNav')[0]

    CSS

    #contentBody > section { display:none; }
#contentBody > section.active { display: block; }
    • 0