Auto-gen Navigation Bars & Page Selection

[RMWChaos]

Apparently, I can't do anything the easy way, which seems to lead me here so very, very often. Here is what I am trying to do this time:

1. Autogenerate two navigation bars, "navLeft" and "navRight"
2. The buttons change on hover, "onmouseover" and "onmouseout"
3. The buttons change depending on the "page" being viewed
4. The page does not actually change (DOM scripting and AJAX)
5. Keep the code as light as possible

I could (and have) manually scripted each nav button to work, but the code gets pretty redundant, which is pretty inefficient. So I think I have the bare bones, but I need some assistance with getting the iterations correct, as in the " for(i > 10; i++) " stuff, etc. I'm not getting any errors in Firebug...in fact, I'm not getting anything at all...nothing...nada...zip.

By the way, my hover and DOM create/remove functions are part of a different script; so you will not see them here, but you will see the vars ("pathDefault", "pathHover", "pathSelected") and functions ("loadImage", "loadDiv") for them.

So here's my crazy code for your amusement:

var nav;
 
var x = 0;
 
var i = 0;
 
var page = new Array("pOne", "pTwo", "pThree", "pFour", "pFive", "pSix", "pSeven", "pEight", "pNine", "pTen", "login", "submit");
 
var pathDefault = "../images/" + page[x] + "Default.jpg";
 
var pathHover = "../images/" + page[x] + "Hover.jpg";
 
var pathSelected = "../images/" + page[x] + "Selected.jpg";
 
var altName = "Jump to" + page[x];
 
 
function navInit(x) // Initiate Navigation Bars
 
    {
 
    for (i == 0; i <= 11; i++) // perhaps a good alternative is: for (x in page) ?
 
        {
 
        if (i <= 4 || i == 10 || i == 11) // Left Navigation Bar
 
            {
 
            nav = "navLeft";
 
            };
 
        if (i > 4 && i <= 9) // Right Navigation Bar
 
            {
 
            nav = "navRight";
 
            };
 
        if (i == 0 && navExist || i == 5 && navExist)
 
            {
 
            navExist.parentNode.removeChild(navExist);
 
            loadDiv(nav);
 
            };
 
        if (i == 0 && !navExist || i == 5 && !navExist)
 
            {
 
            loadDiv(nav);
 
            };
 
        if (i == x) // The button matches the selected page
 
            {
 
            loadImage(nav, pathSelected, "You Are Here", "alert('You Are Already Here.')");
 
            }
 
        else // All other buttons
 
            {
 
            loadImage(nav, pathDefault, altName, navInit(i), x);
 
            };
 
        };
 
    if (i > 11) // Reset 'i' for next navInit() run
 
        {
 
        i = 0;
 
        };
 
    var p = x;
 
    pageSelect(p);
 
    };
 
function pageSelect(x) // Initiate Page Selection
 
    {
 
    if (x == 0 || x == 10 || x == 11) // Home
 
        {
 
        loadDiv("fade");
 
        loadScript("../scripts/loadFade.js");
 
        };
 
    for (x > 0; x <= 9; x++) // Iterate through page scripts
 
        {
 
        var pSelect = "loadPage" + x + ".js";
 
        loadData(pSelect); // later addEvent(pSelect);
 
        };
 
    };
 

[acoder]

Instead of 11, you can use page.length, though that will be 12 so use < instead of <=. In the same way, 10 and 11 can be replaced by length-1 and length-2.

[RMWChaos]

acoder,

Thank you for your help. So by using i<page.length instead of i<=12, it will allow me to add to my Array without having to change the i<=#, correct? That is handy. Heck, I could even add to the Array on the fly within my scripts if needed without having to make any other changes. Very nice.

Thanks again!

[acoder]

Yes, that's right.

From lines 42 to 58, there seems to be a bit of redundancy. Check for 0 and 5 first, then within the condition, check for navExist and remove it if it exists.

[RMWChaos]

From lines 42 to 58, there seems to be a bit of redundancy. Check for 0 and 5 first, then within the condition, check for navExist and remove it if it exists.

I have spent a good part of the day recoding my DOMLoader script to make it more concise and less redundant. I think it covers what you suggest here. It will ultimately affect the way my NAVLoader script is written, including removing the redundancy you mention. Unfortunately, I haven't tested it yet, so there are porbably many bugs in it. But that's what Firebug is for!! =D

I don't know about the rest of you, but I have a peculiar way of coding. I start out with an extended version -- essentially the step-by-step process of what I want to do, which serves as a "proof of concept". Once I get that working, I go about removing redundancies. Perhaps you code-junkies have been doing this so long that you can see ahead how to code without redundancy or inefficiency, but I am just not there yet and may never be. I am a person who likes outlines first, then rough drafts, then a final version.

<!--
 
/* *************************************** */
/* **** DOMLoader/Unloader v1.5 ********** */
/* **** DOM Element Creation/Deletion **** */
/* **** by RMWChaos 2007.10.25 *********** */
/* *************************************** */
 
/* *************************************** */
/* **** When setting attributes, enter *** */
/* **** them in order listed in function * */
/* **** createElement(). Do not skip any * */
/* **** unless there aren't any elements * */
/* **** after the last one entered. Use ** */
/* **** null as empty value placeholder. * */
/* *************************************** */
 
 
/* *************************************** */
/* **** Begin: Global Variables ********** */
 
 
var id;
 
var dom;
 
var text;
 
var parent;
 
var domExist = document.getElementById(id);
 
var createText = document.createTextNode(text);
 
var createElement = document.createElement(dom);
 
var parentExist = document.getElementById(parent);
 
var head = document.getElementsByTagName('HEAD')[0];
 
 
/* **** End: Global Variables ************ */
/* *************************************** */
 
 
/* *************************************** */
/* **** Begin: DOM Add/Remove Functions ** */
 
 
function removeElement(id) // Remove DOM elements from page
 
    {
 
    if (!domExist) // Element does not exist, do nothing
 
        {
 
        return;
 
        }
 
    else // Remove the element
 
        {
 
        elemId.parentNode.removeChild(domExist);
 
        };
 
    };
 
 
function createElemnt(dom, parent, id, type, value, src, method, action, size, name, alt, text, omover, omout, onlcick, pSelect)
 
    {
 
    createElement.id = id;
 
    createElement.dom = dom;
 
    createElement.parent = parent;
 
 
    if (dom == "img") // If dom is an <img> element
 
        {
 
        createElement.id = page[pSelect] + "img";
 
        createElement.alt = alt;
 
        createElement.title = alt;
 
        createElement.src = src;
 
        createElement.onmouseover = omover;
 
        createElement.onmouseout = omout;
 
        createElement.onclick = onclick;
 
        };
 
    if (domExist) // Element already exists, nothing to do
 
        {
 
        return;
 
        };
 
    if (!parentExist) // First create parent
 
        {
 
        createDOM(div, "body", parent);
 
        };
 
    if (dom == 'text') // If adding text to a dom element
 
        {
 
        if (!domExist)
 
            {
 
            createDOM(div, body, dom);
 
            };
 
        domExist.appendChild(createText);
 
        return;
 
        }
 
    else if (dom == 'script') // If dom element is a script, create in document.head
 
        {
 
        createElement.src = src;
 
        head.appendChild(createElement);
 
        return;
 
        }
 
    else if (dom == 'form') // If DOM element is a form
 
        {
 
        createElement.name = id;
 
        createElement.method = method;
 
        createElement.action = action;
 
        }
 
    else if (dom == 'input') // If DOM element is an input to a form, enter form's 'id' for 'parent'
 
        {
 
        createElement.type = type;
 
        createElement.form = parent;
 
        if (value == 'Submit' || value == 'Reset')
 
            {
 
            createElement.value = value;
 
            createElement.src = src;
 
            createElement.alt = alt;
 
            createElement.title = alt;
 
            }
 
        else
 
            {
 
            createElement.size = size;
 
            };
 
        };
 
    if (parentExist && !domExist) // Create the Element
 
        {
 
        if (parent == 'body')
 
            {
 
            parentExist = document.body;
 
            };
 
        parentExist.appendChild(createElement);
 
        };
 
    };
 
 
/* **** End: Load DOM Elements *********** */
/* *************************************** */
 
//-->
 

[RMWChaos]

Changed functions in DOMLoader to removeDOM() and createDOM() to avoid confusion with var createElement.