Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to turn HTML config into JS config

    I need to turn what was pure-HTML configuration (a <ul> menu nested in a <li> navbar item) into JS-generated configuration (something which represents the same structure but in a global JS file).

    My initial attempt was to compile the <ul> as a string:
    Code:
    udm.menuCode['about'] = ''
    + '<ul>'
      + '<li><a href="/products/">Products</a></li>'
      + '<li><a href="/services/">Services</a></li>'
    + '</ul>';
    And then at runtime, write it into an <li> 'hook':
    Code:
    //look for menu defintion arrays
    for(i in udm.menuCode)
    {
    	//find a main list item with the same ID as array index
    	udm.nodeHook=document.getElementById(i);
    	
    	//if it exists
    	if(typeof udm.nodeHook!='undefined')
    	{
    		//write HTML into node hook
    		udm.nodeHook.innerHTML+=udm.menuCode[i];
    	}
    }
    But I don't like it because:

    1 - it's a hack, and it only works in the HTML DOM; and
    2 - that kind of serialisation is difficult for less experienced coders, I think - a set of addItem() addMenu() and addLink() functions would be better, but also much more code and more tedious to implement.

    So I'm just fishing for inspiration basically. Any ideas?
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #2
    Regular Coder
    Join Date
    Nov 2002
    Posts
    672
    Thanks
    1
    Thanked 1 Time in 1 Post
    What is udm? If it's an id, use document.getElementById()
    for loops take the form of for(i=integer;i<integer;i++) (or i+=integer). Unless this is VBscript or something.
    And when using typeof(), the thing to be tested goes in the parenthesis.

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    udm is an object; and the code is fine - typeof is an operator, not a method.

    Thanks though, but that's not the question. The question is more conceptual - I'm looking for a better overall approach rather than the nitty gritty.
    Last edited by brothercake; 12-20-2003 at 05:33 AM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Maybe it is early morning and my coffeemaker is still brewing.... but I do not get what you are trying to do, bcake. Can you explain how this is going to be used?
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Allright

    I've got a list-based menu system, but the early feedback I'm getting, as well my own intuition, tells me that for some people it's not gonna be acceptible for the entire <ul> to be visible to legacy browsers, with all its nested levels.

    There's also an accessibility case for saying a navigation bar should only show the main items unless the method for dynamically hiding/showing their subitems is available - it's more effort to tab through, and not so at-a-glance easy to comprehend. With a very complex list structure it can be quite intimidating, particularly if it's right at the top.

    It's debatable, but either way, I want the menu API to give you the choice. So menus can be static, or they can be script-generated.

    What I have to do then, is find a relatively-painless way of converting a script designed to transform a pure HTML structure, into something that can work from JS config.

    With me? Hopefully now my first example will make sense - I've turned the nested lists into serialised HTML which I'm writing into the navbar <li>s at load time.

    You can see what a hack it is, but I'm thinking ... to create all the menus properly in the DOM ... it would be a lot more code, and take longer to process ... too long to do it at loadtime, so it would have to be on-demand ... but it can't be on demand because the script is fundamentally not structured that way - it's all done with event bubbling and node relationships - the whole tree has to exist at initialisation.

    What I have now is not that bad, but it's not that good either. Like I say .. I'm fishing for inspiration I can live with the innerHTML hack - because people who want XML DOM support can use the static config, and anyway there isn't much choice that I can see. But that method of storing the menu data is way too fiddly.

    So basically, what's a good way of programatically creating lists, in the least code, from the simplest config structure?
    Last edited by brothercake; 12-20-2003 at 02:18 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok,

    For legacy browsers and those with JS disabled you do not want the comlete list of menu items to be displayed (what happens when CSS is disabled, I assume you script relies on it?). So the simplest way I can think of would be:
    Code:
    <ul>
    <li>Item 1
    <script>
    document.write('<ul><li>Item 1.1</li><li>Item 1.2</li></ul>');
    </script></li>
    </ul>
    Last edited by Vladdy; 12-20-2003 at 03:59 PM.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah unfortunately that would break the keyboard navigation - the relationship of one link to the next must be parentNode.nextSibling.firstChild, which it wouldn't be if there was a <script/> in the way.

    In any case that's no easier to implement than what I already have.

    Maybe what I already have is the best approach after all

    As to what happens when CSS is disabled .. well .. if CSS and JS are both unavailable, fine, but if JS is on and CSS is off ... well it's royally screwed But who would do that?
    Last edited by brothercake; 12-20-2003 at 05:15 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •