Javascript Problem!

[cedwa]

I am developing a site at http://www.nwlmi.org.uk

The problem lies with the CSS/XHTML Menu which relies on JavaScript to
open and close the sections. The parent sections open and close fine
but when you click on one of the subsection items and go to the desired
page the menu fails to remain open.

The javascript code is embeded inthe html for reference.

Is this a JS issue I wonder. The original script/code derived from
Alsacreations but there is no documentation to aid this problem.

Thanks in advance for any tips :)

Chris

[cwdjrxyz]

cedwa wrote:

I am developing a site at http://www.nwlmi.org.uk

The problem lies with the CSS/XHTML Menu which relies on JavaScript to
open and close the sections. The parent sections open and close fine
but when you click on one of the subsection items and go to the desired
page the menu fails to remain open.

The javascript code is embeded inthe html for reference.

Is this a JS issue I wonder. The original script/code derived from
Alsacreations but there is no documentation to aid this problem.

I do not see your script problem off hand; perhaps someone else will
find it. However, on your page, you state: "This site is valid XHTML
and CSS" near the bottom of the page. The code is written as xhtml 1.0
strict, and the code does validate at W3C. However, if you valadate at
the W3C using the extended version, you find that the content type
being served is text/html, not the correct one for xhtml which is
xhtml+xml or xml. The reason for this is that you are using the
extension .html which nearly all servers associalte with ordinary html.
To server xhtml, you have to define a mime type for xhtml at the server
and associate it with an extension such as .xhtml or .xml. Then you
will find you are serving xhtml. However you will also find that the
page will not work on IE6, because IE6 can not handle true xhtml. To
overcome this problem you either have to provide both html and xhtml
pages, or play with the header exchange, often using a php include, to
automatically rewrite the page as html when the header exchange
indicates that the browser will not support xhtml+xml. As now served,
your page would be much better written as html 4.01 strict. Your css
validates at the W3C, but there are many warnings listed concerning it.
The warning only means that certain css code you use might not produce
a desired effect in some cases and that you need to examine the code to
be certain that this is not the case. In other words, just because
something is correct from a code viewpoint, does not mean that it
always will have the effect that you had in mind.

[Laurent Bugnion]

Hi,

cedwa wrote:

I am developing a site at http://www.nwlmi.org.uk

The problem lies with the CSS/XHTML Menu which relies on JavaScript to
open and close the sections. The parent sections open and close fine
but when you click on one of the subsection items and go to the desired
page the menu fails to remain open.

The javascript code is embeded inthe html for reference.

Is this a JS issue I wonder. The original script/code derived from
Alsacreations but there is no documentation to aid this problem.

Thanks in advance for any tips :)

Chris

The menu doesn't remain open because you didn't tell it that it should:
You set the onload event of the page to execute show, which closes the
whole menu. However, by using

window.onload = show;

you will execute show without parameters. Thus no menu item will be
expanded.

If you want to preserve the state of the menu between postbacks, you
must preserve the information. When the page is reloaded, the whole
JavaScript code is erased and reloaded.

There are different ways to preserve information: cookies (dated or just
for the session), sending a hidden field to the server and then back to
the client (needs server logic), using the query string in the URL,
using the VIEWSTATE in ASP.NET. I tend to prefer cookies for this kind
of work, especially for "pure" client-side tasks. If your menu is built
on the server, however, then you can definitely use one of the other
techniques I mention (cookies might be disabled by the client.

I have a menu on my webpage http://www.galasoft-lb.ch which does pretty
exactly what you want. The code is still in pre-release stage, but you
can use these links. Feel free to copy if you want.

For cookies:
http://www.galasoft-lb.ch/myjavascri...kie/index.html

For the menu:
view-source:http://www.galasoft-lb.ch/script/gsl...000000D0003.js

The menu is also draggable and the position is saved. You don't need
this for your own menu, but in case you're interested, this is the
object which does this:

view-source:http://www.galasoft-lb.ch/script/gsl...000000D0001.js

HTH,
Laurent
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
Private/Malaysia: http://mypage.bluewin.ch/lbugnion
Support children in Calcutta: http://www.calcutta-espoir.ch

[cedwa]

Hi Laurent

Thank you so much for the information. Im afraid JavaScript is a
weakness for me :( And so are Cookies. Do I need to link to the
JavaScript file that creates the session cookie for it to work?

I see how it works very well for your menu when dragged - and this sort
of memory/session is what my client needs in order that the menu
remains open.

Is there a good source that details how to do this? I am lost in all
the code :(

Thanks again
Chris

Laurent Bugnion wrote:

Hi,

cedwa wrote:

I am developing a site at http://www.nwlmi.org.uk

The problem lies with the CSS/XHTML Menu which relies on JavaScript to
open and close the sections. The parent sections open and close fine
but when you click on one of the subsection items and go to the desired
page the menu fails to remain open.

The javascript code is embeded inthe html for reference.

Is this a JS issue I wonder. The original script/code derived from
Alsacreations but there is no documentation to aid this problem.

Thanks in advance for any tips :)

Chris

The menu doesn't remain open because you didn't tell it that it should:
You set the onload event of the page to execute show, which closes the
whole menu. However, by using

window.onload = show;

you will execute show without parameters. Thus no menu item will be
expanded.

If you want to preserve the state of the menu between postbacks, you
must preserve the information. When the page is reloaded, the whole
JavaScript code is erased and reloaded.

There are different ways to preserve information: cookies (dated or just
for the session), sending a hidden field to the server and then back to
the client (needs server logic), using the query string in the URL,
using the VIEWSTATE in ASP.NET. I tend to prefer cookies for this kind
of work, especially for "pure" client-side tasks. If your menu is built
on the server, however, then you can definitely use one of the other
techniques I mention (cookies might be disabled by the client.

I have a menu on my webpage http://www.galasoft-lb.ch which does pretty
exactly what you want. The code is still in pre-release stage, but you
can use these links. Feel free to copy if you want.

For cookies:
http://www.galasoft-lb.ch/myjavascri...kie/index.html

For the menu:
view-source:http://www.galasoft-lb.ch/script/gsl...000000D0003.js

The menu is also draggable and the position is saved. You don't need
this for your own menu, but in case you're interested, this is the
object which does this:

view-source:http://www.galasoft-lb.ch/script/gsl...000000D0001.js

HTH,
Laurent
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
Private/Malaysia: http://mypage.bluewin.ch/lbugnion
Support children in Calcutta: http://www.calcutta-espoir.ch

[Laurent Bugnion]

Hi,

cedwa wrote:

Hi Laurent

Thank you so much for the information. Im afraid JavaScript is a
weakness for me :( And so are Cookies. Do I need to link to the
JavaScript file that creates the session cookie for it to work?

The cookie file can be added to your source code by using

<script type="text/javascript" src="scriptFolder/ccookie.js"></script>

Once you did that, you can use all the function which are defined inside
this file.

I see how it works very well for your menu when dragged - and this sort
of memory/session is what my client needs in order that the menu
remains open.

Is there a good source that details how to do this? I am lost in all
the code :(

The code I use to save my menu's state cannot really be reused for your
menu without adapting it. I was hoping you could do it, but without some
JavaScript knowledge, it's going to be tough.

I would help you, but I am going in holidays from wednesday until end of
july, so I won't have time. I recommend you to look for someone with a
little more JavaScript knowledge to help you out. Also, if you use
Venkman (google for it) together with Firefox, you can debug the code,
so you understand better what happens. You can also debug it with Visual
Studio and IE, in case you have it.

Thanks again
Chris

Sorry I cannot help more.
Greetings,
Laurent
--
Laurent Bugnion, GalaSoft
Software engineering: http://www.galasoft-LB.ch
Private/Malaysia: http://mypage.bluewin.ch/lbugnion
Support children in Calcutta: http://www.calcutta-espoir.ch