By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,521 Members | 1,228 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,521 IT Pros & Developers. It's quick & easy.

Auto-gen Navigation Bars & Page Selection

RMWChaos
100+
P: 137
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:

Expand|Select|Wrap|Line Numbers
  1. var nav;
  2.  
  3. var x = 0;
  4.  
  5. var i = 0;
  6.  
  7. var page = new Array("pOne", "pTwo", "pThree", "pFour", "pFive", "pSix", "pSeven", "pEight", "pNine", "pTen", "login", "submit");
  8.  
  9. var pathDefault = "../images/" + page[x] + "Default.jpg";
  10.  
  11. var pathHover = "../images/" + page[x] + "Hover.jpg";
  12.  
  13. var pathSelected = "../images/" + page[x] + "Selected.jpg";
  14.  
  15. var altName = "Jump to" + page[x];
  16.  
  17.  
  18. function navInit(x) // Initiate Navigation Bars
  19.  
  20.     {
  21.  
  22.     for (i == 0; i <= 11; i++) // perhaps a good alternative is: for (x in page) ?
  23.  
  24.         {
  25.  
  26.         if (i <= 4 || i == 10 || i == 11) // Left Navigation Bar
  27.  
  28.             {
  29.  
  30.             nav = "navLeft";
  31.  
  32.             };
  33.  
  34.         if (i > 4 && i <= 9) // Right Navigation Bar
  35.  
  36.             {
  37.  
  38.             nav = "navRight";
  39.  
  40.             };
  41.  
  42.         if (i == 0 && navExist || i == 5 && navExist)
  43.  
  44.             {
  45.  
  46.             navExist.parentNode.removeChild(navExist);
  47.  
  48.             loadDiv(nav);
  49.  
  50.             };
  51.  
  52.         if (i == 0 && !navExist || i == 5 && !navExist)
  53.  
  54.             {
  55.  
  56.             loadDiv(nav);
  57.  
  58.             };
  59.  
  60.         if (i == x) // The button matches the selected page
  61.  
  62.             {
  63.  
  64.             loadImage(nav, pathSelected, "You Are Here", "alert('You Are Already Here.')");
  65.  
  66.             }
  67.  
  68.         else // All other buttons
  69.  
  70.             {
  71.  
  72.             loadImage(nav, pathDefault, altName, navInit(i), x);
  73.  
  74.             };
  75.  
  76.         };
  77.  
  78.     if (i > 11) // Reset 'i' for next navInit() run
  79.  
  80.         {
  81.  
  82.         i = 0;
  83.  
  84.         };
  85.  
  86.     var p = x;
  87.  
  88.     pageSelect(p);
  89.  
  90.     };
  91.  
  92. function pageSelect(x) // Initiate Page Selection
  93.  
  94.     {
  95.  
  96.     if (x == 0 || x == 10 || x == 11) // Home
  97.  
  98.         {
  99.  
  100.         loadDiv("fade");
  101.  
  102.         loadScript("../scripts/loadFade.js");
  103.  
  104.         };
  105.  
  106.     for (x > 0; x <= 9; x++) // Iterate through page scripts
  107.  
  108.         {
  109.  
  110.         var pSelect = "loadPage" + x + ".js";
  111.  
  112.         loadData(pSelect); // later addEvent(pSelect);
  113.  
  114.         };
  115.  
  116.     };
  117.  
Oct 25 '07 #1
Share this Question
Share on Google+
5 Replies


acoder
Expert Mod 15k+
P: 16,027
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.
Oct 25 '07 #2

RMWChaos
100+
P: 137
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!
Oct 25 '07 #3

acoder
Expert Mod 15k+
P: 16,027
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.
Oct 25 '07 #4

RMWChaos
100+
P: 137
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.

Expand|Select|Wrap|Line Numbers
  1. <!--
  2.  
  3. /* *************************************** */
  4. /* **** DOMLoader/Unloader v1.5 ********** */
  5. /* **** DOM Element Creation/Deletion **** */
  6. /* **** by RMWChaos 2007.10.25 *********** */
  7. /* *************************************** */
  8.  
  9. /* *************************************** */
  10. /* **** When setting attributes, enter *** */
  11. /* **** them in order listed in function * */
  12. /* **** createElement(). Do not skip any * */
  13. /* **** unless there aren't any elements * */
  14. /* **** after the last one entered. Use ** */
  15. /* **** null as empty value placeholder. * */
  16. /* *************************************** */
  17.  
  18.  
  19. /* *************************************** */
  20. /* **** Begin: Global Variables ********** */
  21.  
  22.  
  23. var id;
  24.  
  25. var dom;
  26.  
  27. var text;
  28.  
  29. var parent;
  30.  
  31. var domExist = document.getElementById(id);
  32.  
  33. var createText = document.createTextNode(text);
  34.  
  35. var createElement = document.createElement(dom);
  36.  
  37. var parentExist = document.getElementById(parent);
  38.  
  39. var head = document.getElementsByTagName('HEAD')[0];
  40.  
  41.  
  42. /* **** End: Global Variables ************ */
  43. /* *************************************** */
  44.  
  45.  
  46. /* *************************************** */
  47. /* **** Begin: DOM Add/Remove Functions ** */
  48.  
  49.  
  50. function removeElement(id) // Remove DOM elements from page
  51.  
  52.     {
  53.  
  54.     if (!domExist) // Element does not exist, do nothing
  55.  
  56.         {
  57.  
  58.         return;
  59.  
  60.         }
  61.  
  62.     else // Remove the element
  63.  
  64.         {
  65.  
  66.         elemId.parentNode.removeChild(domExist);
  67.  
  68.         };
  69.  
  70.     };
  71.  
  72.  
  73. function createElemnt(dom, parent, id, type, value, src, method, action, size, name, alt, text, omover, omout, onlcick, pSelect)
  74.  
  75.     {
  76.  
  77.     createElement.id = id;
  78.  
  79.     createElement.dom = dom;
  80.  
  81.     createElement.parent = parent;
  82.  
  83.  
  84.     if (dom == "img") // If dom is an <img> element
  85.  
  86.         {
  87.  
  88.         createElement.id = page[pSelect] + "img";
  89.  
  90.         createElement.alt = alt;
  91.  
  92.         createElement.title = alt;
  93.  
  94.         createElement.src = src;
  95.  
  96.         createElement.onmouseover = omover;
  97.  
  98.         createElement.onmouseout = omout;
  99.  
  100.         createElement.onclick = onclick;
  101.  
  102.         };
  103.  
  104.     if (domExist) // Element already exists, nothing to do
  105.  
  106.         {
  107.  
  108.         return;
  109.  
  110.         };
  111.  
  112.     if (!parentExist) // First create parent
  113.  
  114.         {
  115.  
  116.         createDOM(div, "body", parent);
  117.  
  118.         };
  119.  
  120.     if (dom == 'text') // If adding text to a dom element
  121.  
  122.         {
  123.  
  124.         if (!domExist)
  125.  
  126.             {
  127.  
  128.             createDOM(div, body, dom);
  129.  
  130.             };
  131.  
  132.         domExist.appendChild(createText);
  133.  
  134.         return;
  135.  
  136.         }
  137.  
  138.     else if (dom == 'script') // If dom element is a script, create in document.head
  139.  
  140.         {
  141.  
  142.         createElement.src = src;
  143.  
  144.         head.appendChild(createElement);
  145.  
  146.         return;
  147.  
  148.         }
  149.  
  150.     else if (dom == 'form') // If DOM element is a form
  151.  
  152.         {
  153.  
  154.         createElement.name = id;
  155.  
  156.         createElement.method = method;
  157.  
  158.         createElement.action = action;
  159.  
  160.         }
  161.  
  162.     else if (dom == 'input') // If DOM element is an input to a form, enter form's 'id' for 'parent'
  163.  
  164.         {
  165.  
  166.         createElement.type = type;
  167.  
  168.         createElement.form = parent;
  169.  
  170.         if (value == 'Submit' || value == 'Reset')
  171.  
  172.             {
  173.  
  174.             createElement.value = value;
  175.  
  176.             createElement.src = src;
  177.  
  178.             createElement.alt = alt;
  179.  
  180.             createElement.title = alt;
  181.  
  182.             }
  183.  
  184.         else
  185.  
  186.             {
  187.  
  188.             createElement.size = size;
  189.  
  190.             };
  191.  
  192.         };
  193.  
  194.     if (parentExist && !domExist) // Create the Element
  195.  
  196.         {
  197.  
  198.         if (parent == 'body')
  199.  
  200.             {
  201.  
  202.             parentExist = document.body;
  203.  
  204.             };
  205.  
  206.         parentExist.appendChild(createElement);
  207.  
  208.         };
  209.  
  210.     };
  211.  
  212.  
  213. /* **** End: Load DOM Elements *********** */
  214. /* *************************************** */
  215.  
  216. //-->
  217.  
Oct 25 '07 #5

RMWChaos
100+
P: 137
Changed functions in DOMLoader to removeDOM() and createDOM() to avoid confusion with var createElement.
Oct 26 '07 #6

Post your reply

Sign in to post your reply or Sign up for a free account.