The problem is I've got like 30 pages. If I separate each nav bar into its own page the code will be extremely messy.
Instead of:
Code:
<div id="pagecontainer">
<div id="page1">
<div class="sidelinks"> <!--UNSCROLLABLE-->
//links for page 1
</div>
<div class="pagecontent"> <!--SCROLLABLE-->
content of page 1
</div>
</div>
<div id="page2">
<div class="sidelinks"> <!--UNSCROLLABLE-->
links for page 2
</div>
<div class="pagecontent"> <!--SCROLLABLE-->
content of page 2
</div>
</div>
<div id="page3">
<div class="sidelinks"> <!--UNSCROLLABLE-->
links for page 3
</div>
<div class="pagecontent"> <!--SCROLLABLE-->
content of page 3
</div>
</div>
<div id="page4">
<div class="sidelinks"> <!--UNSCROLLABLE-->
links for page 4
</div>
<div class="pagecontent"> <!--SCROLLABLE-->
content of page 4
</div>
</div>
</div>
Which clearly nests each page within #pagecontainer, and each page's contents within #page,
If I separate each navbar into a different page I'll end up with:
Code:
<div id="pagecontainer">
<div id="page1">
<div class="pagecontent"> <!--SCROLLABLE-->
content of page 1
</div>
</div>
<div id="page2">
<div class="pagecontent"> <!--SCROLLABLE-->
content of page 2
</div>
</div>
<div id="page3">
<div class="pagecontent"> <!--SCROLLABLE-->
content of page 3
</div>
</div>
<div id="page4">
<div class="pagecontent"> <!--SCROLLABLE-->
content of page 4
</div>
</div>
<div class="sidelinks" id="page1links"> <!--UNSCROLLABLE-->
//links for page 1
</div>
<div class="sidelinks" id="page2links"> <!--UNSCROLLABLE-->
//links for page 2
</div>
<div class="sidelinks" id="page3links"> <!--UNSCROLLABLE-->
//links for page 3
</div>
<div class="sidelinks" id="page4links"> <!--UNSCROLLABLE-->
//links for page 4
</div>
</div>
The navbar links would have the same hierarchy as the pages themselves. With 30+ pages this would get extremely messy and confusing, as the navbar should be a child div of the page, not a completely independent div.
When I fade in a page, instead of simply calling:
Code:
$('#page1').fadeIn();
Now I'll need to remember to both the page and the navbar assigned to that page:
Code:
$('#page1,#page1links').fadeIn();
Bookmarks