Forum Moderators: open
<body>
<script type="javascript">
<!--#include file="javascriptEnabledMenu.html" -->
<noscript>
<!--#include file="javascriptDisabledMenu.html" -->
</sript>
</body>
Basically I am trying to stay validated XHTML 1.0 strict in my coding, I want to have a expandable and collapsible menu on my page, but I want different XHTML for the menu to be loaded if there isn't javascript support with a users browser so that I can meet the accessibility standards.
This might seem strange but I like the idea of having a highly interactive site, and as of late Im really starting to try being standards compliant. I don't want to resort to having two different versions of a page, just one page that is more responsive and very accessible.
Is this possible? I will have PHP and Server Side Include support with my server if that helps open any avenues. I think it can be done with a hell of a lot of document.write commands but that is a very weak solution that I don't much care for.
The above menu would also require loading 2 outside files, menu.js and menu.css, and all I have found on this has been using a script that uses document.write as well. I would much rather not resort to that but if thats my best alternative I will.
Any help would be great, and thanks to anyone that tries to help solve this.
<script type="javascript">
<!--#include file="javascriptEnabledMenu.html" -->
</script>
<noscript>
<!--#include file="javascriptDisabledMenu.html" -->
</noscript>
Both menus are downloaded.
In a script-enabled browser this would be OK, we'd only get javascriptEnabledMenu. The disabled would be ignored.
However, in a disabled browser both parts are 'visible', and we'd get 2 menus displayed.
2 solutions:
1. Have the script tag linking to a script that writes the menu. I know you find doc.write messy, but it can be reasonably clean -ish.
<script src='javascriptEnabledMenu.js'></script>
<noscript>
<!--#include file="javascriptDisabledMenu.html" -->
</noscript>
By using single quotes to open / close, and escaping line endings, your HTML menu could be 'converted' into a doc.write statement reasonably painlessly, and in a form that's easily editable without going back to the original. So the javascriptEnabledMenu.js file could look like this:
[pre][blue]document.write[/blue]
[blue]('\[/blue]
<div id="menu">[blue]\[/blue]
<div class="item">hello</div>[blue]\[/blue]
<div id="item">hello</div>[blue]\[/blue]
</div>[blue]\[/blue]
[blue]')[/blue][/pre]- It's not shown here, but you can keep the code indents too.
The doc.write could also include a script block containing all the code necessary to make the menu work - possibly a weighty package. The reason why I put forward the approach is that you stand to gain from the usual benefits of the 'script include' being cached by the browser.
(or) 2. Simply include a <style> block inside the <noscript> tags that contains a rule that sets the javascript-enabled menu container element to 'display:none'
(and hope they don't have CSS turned off too)
