Idea on content passing. Help needed

Go To StackoverFlow.com

1

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;
}
2012-04-03 21:28
by Brandon Clark
Hard to tell what you're asking, though I can see you put in some effor - Juan Mendes 2012-04-03 22:01
@Juan Mendes I know. Sorry, maybe there is somewhere I can clarify for you and others? It was already so long of a question and I didnt want to make it longer - Brandon Clark 2012-04-03 22:03
you should look at pjax: http://pjax.heroku.com - Billy Moon 2012-04-03 22:18
@Billy Moon Thank you, but I have avoided jQuery so far and don't plan on loading that massive thing for one function - Brandon Clark 2012-04-03 22:40
@Juan Mendes I made some clarifications, hope it helps - Brandon Clark 2012-04-04 01:49
Do you have a sample page that we can look at - Juan Mendes 2012-04-04 16:35
I'll work at adding it to my base template(0 styling, bare content) for now you can see my home site: The Mind Company. In exams sorry if I don,t respond right away - Brandon Clark 2012-04-04 19:27


1

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; }
2012-04-05 03:09
by Dennis
Wouldn't I have to call the proper array value still for '.active' in your javascript example with my html strucure. I would think because of my structure the active blocks would load into the the DOM the same(ie. the user order selection). Although this does give me a idea - Brandon Clark 2012-04-05 18:38
Thank you for that idea although I took it a different route the essential concept was the same. instead I now use the following: 'document.getElementById('subNav').innerHTML = document.getElementById( classID ).getElementsByClassName('pageNav')[0].innerHTML; - Brandon Clark 2012-04-05 18:58
The visible section would be the only one with the class active so you would not need to select from an array of elements - Dennis 2012-04-05 23:14


1

A good way do handle the page state and detect what content should be visible is the html5 history api. It also has the advantage that the url is updated on content changes (something i was missing on "the mind company"). Check out the mozilla page or google some examples. https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

2012-04-03 22:18
by Sebastian Stiehl
Wouldn't that be a issue with the other page elements reverting back to their previous states - Brandon Clark 2012-04-03 22:44
No, thats the good part. The page content does not reload - Sebastian Stiehl 2012-04-03 22:47
I see a function that may assist replaceState(); Oh boy more reading! Quirky web. Thank you I will be looking further into thi - Brandon Clark 2012-04-03 22:52
I dont know about using this method to do what I need but this does help me get closer to my deep linking idea - Brandon Clark 2012-04-04 12:24
Ads