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;
}
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; }
active so you would not need to select from an array of elements - Dennis 2012-04-05 23:14
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