Expandble menu w/t JavaScript /SOLUTION!/

Hi guys,

It originally was my post in the Struts-Menu diskussion forum, but Matt wanted me to post it here

Today I'm finally implemented a "stupid user has JavaScript (JS) off" solution for expandable menu (I supose,
that the solution for other displayers would be quite similar).

My chef was really concerned about 10% visitors with no JS and I can understand it.

The solution is kind of quick&dirty (as usual), but it works. I was using ListMenu displayer and expandable menu CSS & JS. The
problems/solutions are:

(1)

Problem: With no JS user only sees the root entries of menu.

Solution: make an alternative CSS, which expands all the menus by
default. We gonna use this one in no JS mode, and if JS is one we
will use the default one.

(2)

Problem: The actuators ( "+" and "-" icons) are linked to "#"-path.
Clicking it with JS off results blank page in my case.

Solution: Mess with the StrutsMenu JavaCode. Change the properties,
let the actuators link to the same page as the link. Quite easy,
just change the DisplayerStrings.properties and build the project again.

(3)

Problem: This is more general. How to know, if the user has the JS on,
so I can just choose between showing the JS-powered and no-JS all expanded menu.

Solution:

in my Menu.jps, which is called from every entry point on my site I do:

<c:if test="$

">
<script type="text/javascript">
if(document.getElementById)self.location.replace("http://localhost:8080/changeSettings.do?javaOn=1");</script>
</c:if>

That means, if I don't know if JS is turned on, I try to redirect to a page, which does only change the SessionScope attribute telling me about what I know about JS.

Now back to the CSS from the (1), now we can just use our SessionScoped info to choose the CSS:

<c:choose>
<c:when test="$

">
<link rel='stylesheet' type='text/css' media='all'
href='<c:url value='/jsp/styles/menuExpandable.css'/>' />
<script type="text/javascript"
src="<c:url value="/jsp/scripts/menuExpandable.js"/>">
</script>
</c:when>
<c:otherwise>
<link rel="stylesheet" type="text/css" media="all"
href="<c:url value="/jsp/styles/menuExpandable2.css"/>" />
</c:otherwise>

(4)

OK, our last little problem. Live changing of the JS-on setting by user.
Let's see.

Case 1. If JS was off and then was turned on our redirect will work, so we can use the nice JS-powered stuff again. No work needed hered.

Case 2. If JS was on and then was turned off we are in kind of stupid
situation. Of course we can blame the user, but though, giving him the
possibility to deal with situation is nice. Here we just can use the
<NOSCRIPT> tag, telling the user about JS-off or linking to the
no-JS option. This tag is only showed, if JS was on and then off, so
that users with no-JS browsers or guys afraid of JS are not distressed by some warnings.

OK! That's not a superb solution, but it's fast and easy. The biggest problem of course, it that no-JS users have to live with huge, all expanded menu, but what the hack, that's only 10% and it's better than
no menu at all

Cheers,
Danny

harpsnake(et)yahoo.de

-------------------------------------------------------
This SF.net email is sponsored by: Splunk Inc. Do you grep through log files
for problems? Stop! Download the new AJAX search engine that makes
searching your log files as easy as surfing the web. DOWNLOAD SPLUNK!
http://sel.as-us.falkag.net/sel?cmd=lnk&kid=103432&bid=230486&dat=121642