Email conversation
| From | Tonya |
|---|
| To | Me |
|---|
| Subject | Hello & Nesting collapsing script query please |
|---|
| Date | 27 November 2006 16:10 |
|---|
Hello
First may I say that your site is really nice, easy to browse around and
very interesting.
As the owner of a personal site that started out many years ago as a place
to test web skills and have some fun that has grown and developed a whole
life of its own I really liked yours.
I was browsing the internet for some script that would help me achive
something a little like the code that is used on this site
[URL]
I found all sorts of scripts most were pretty much the same as some old code
I once used to create a sitemap.
[URL]
This was many moons ago and I must confess has not been updated for quite a
while and has a few bugs that I have noticed. Really I was only testing it
for use on a customers site.
For many years now I have been IT trainer mostly teaching web skills.
Everything from packages like Macromedia Dreamweaver etc to Javascript, ASP
& PHP. I have also now and then done some development work for our family
business but these are small clients with small budgets.
Anyway to the point. I love the script for the collapsing menu but have a
few queries.
Is it possible to get the submenu to stay open when browsing the pages
within it? Then close only when a parent node on the tree is clicked ie
another of the main menu links.
Also can you swap the + & - to the right hand side rather than stay on the
left where I feel they get a little lost?
Hope you can advise
Regards and Merry Christmas
Tonya
| From | Me |
|---|
| To | Tonya |
|---|
| Subject | Re: Hello & Nesting collapsing script query please |
|---|
| Date | 29 November 2006 00:42 |
|---|
Tonya,
> Is it possible to get the submenu to stay open when browsing the pages
> within it? Then close only when a parent node on the tree is clicked ie
> another of the main menu links.
Each page can call the selfLink function to make it expand to show the
correct submenu. You may also want to use the ability to save the current
state in a cookie. Both of these are documented in the source of the script
itself, with some examples here:
http://www.howtocreate.co.uk/tutorials/jsexamples/listCollapseExample.html
> Also can you swap the + & - to the right hand side rather than stay on the
> left where I feel they get a little lost?
Also fairly easy. Just replace this in your call to compactMenu:
'± '
with this:
'<span class="expcolap">±<\/span>'
and add this to your stylesheet:
.expcolap { float: right; }
Hope that helps.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Tonya |
|---|
| To | Me |
|---|
| Subject | Re: Hello & Nesting collapsing script query please |
|---|
| Date | 23 December 2006 15:57 |
|---|
Hi
Sorry for delay in reply.
[Snip.]
I will have a go at the code again in the New Year
Meantime have a lovely Christmas
Best wishes and thank you for your help
Tonya
| From | Tonya |
|---|
| To | Me |
|---|
| Subject | Hello message about collapsing script issue |
|---|
| Date | 2 September 2008 21:33 |
|---|
Hello
I emailed you once upon a time before & actually when I read through your
emails page even found my own email LOL
I have a confession to make. I sorted out how to change the script so that
the plus sign appears on the right but was never able to get the lists to
stay expanded in child menu mode
Eh book list 2 stay expanded until you click on a different parent node.
I know that you say the instructions are on the page but I have to be honest
& say I am many years from JavaScript mode & have had a baby since then -
brain does not work as it should
I simply can't work out where to put what code.
I understand that the code has to use the cookie.js file to keep menu's
expanded but have no idea how it knows which menu - I guess you assign a
class to it - but what do I name this? Have you already written this into
your code? If so what is the class & where do I place it - in the child li
tags???
Do you have an example I can see working & see the html code etc?
Thanks once again for great code
Tonya
| From | Tonya |
|---|
| To | Me |
|---|
| Subject | Re: Hello message about collapsing script issue |
|---|
| Date | 2 September 2008 22:44 |
|---|
Hi there
No its simply no good no matter what way I try things I just cant seem to
get it to work like your third example.
I simply want the sub menu to stay open while the pages in it are being
clicked on then close when a different parent node - book choice is made.
You need to add really simple easy instructions on how to do this - if it
means adding extra css classes can you please explain - sorry but I have
spent 3 hrs trying to get my head around it and just cant seem to get it to
work - Perhaps you could add that third example options in extra script at
the bottom - eg show any differences made in HTML & exactly what window or
body open or load code is inserted
Thanks
Am off to bed
Tonya
| From | Me |
|---|
| To | Tonya |
|---|
| Subject | Re: Hello message about collapsing script issue |
|---|
| Date | 2 September 2008 23:10 |
|---|
Tonya,
My site is aimed at web developers - people who want to learn how to write
their own code. With scripts, this means they are expected to either be able
to read JavaScript code, or to be using the tutorial to learn it. Although
there are scripts available for download, it really is not there to cater
for sites that just want to copy/paste.
Hopefully this will be enough for you to get it working - I assume you have
already tried looking at all of the documentation inside the JavaScript file
itself.
The cookies are only used to keep the menu open when a new page is loaded,
so basically it remembers how it was on the last page you used it on.
> I simply can't work out where to put what code.
If you _really_ want to use the cookie option (I don't think you do from the
sound of your second email, but your first email sounded like you did...):
http://www.howtocreate.co.uk/tutorials/jsexamples/listCollapseExample.html
See the part of the article starting with "If you want to remember the state
of the branches". Just after it there is a block of code, which you should
use. Put it inside the HEAD of your document.
Make sure you also have a copy of the listCollapse.js and cookie.js files in
the same directory (download links are at the top of the page). Give the
outermost list that you want to collapse an id. In the example code, it is:
<ul id="someID">
> get it to work like your third example
Just under "Use your choice of CSS for styling, then use the script to
collapse the lists" is the example you need to copy (though obviously you
should only use the option that does what you want - this is the
auto-child-collapse example in demo 3).
Demo 3 also uses selfLink('someID','selfhighlight',true); immediately after
the command that calls compactMenu, as described later on in the article.
Tarquin
| From | Tonya |
|---|
| To | Me |
|---|
| Subject | Re: Hello message about collapsing script issue |
|---|
| Date | 3 September 2008 10:26 |
|---|
Dear Tarquin
Thank you for your reply
Yes you are right I should be able to work through this code - once upon a
time I even taught javascript. That however was many years ago and most
recently I have been mum to a toddler which tends to addle the brains with
plastic toys and books about pigs LOL.
Thank you for your patience. I will of course work through the script again.
Yes I read the js file but I think it got so late that I started to simply
wilt.
You are right because I do want the menu to remember its state - ie stay
open at submenu when on a link inside that menu - so need to use the cookie
file. I think what I was missing is the selflink as I am guessing this
identifies the sub menu links and when on a link in the submenu keeps this
menu open.
Once again thank you for your patience.
Tonya
| From | Tonya |
|---|
| To | Me |
|---|
| Subject | Re: Hello message about collapsing script issue |
|---|
| Date | 3 September 2008 23:29 |
|---|
Tarquin
Thank you I now have the script working but have a new problem
I have links in the menu that have no children - they are just simply links
When the user clicks on these I also want the child menu's to collapse
How do I get that to work? At the moment the last menu that was open stays
open when other links on the menu are clicked.
Thanks
Tonya
| From | Me |
|---|
| To | Tonya |
|---|
| Subject | Re: Hello message about collapsing script issue |
|---|
| Date | 6 September 2008 09:33 |
|---|
Tonya,
> When the user clicks on these I also want the child menu's to collapse
See this makes it sound like you _don't_ want it to store the state with
cookies. Comment out the two lines that are storing and recovering
cookies, and see if that does what you wanted.
| From | Tonya |
|---|
| To | Me |
|---|
| Subject | Re: Hello message about collapsing script issue |
|---|
| Date | 6 September 2008 10:34 |
|---|
HI there
Yes I do want the cookie file because when there are menu choices with a sub
menu (child nodes ) I want these to stay open when the user is browsing this
menu
But then when they click on other choices in the menu I want that sub menu
to collapse & not stay open
Like this example [URL]
Here is the site I am actually trying to get this to work on & it would be
better if when the user was in house pictures that part of the menu stayed
open
[URL]
The rest of the menu is just straight links
Does that make sense?
Thanks again
Tonya
| From | Me |
|---|
| To | Tonya |
|---|
| Subject | Re: Hello message about collapsing script issue |
|---|
| Date | 6 September 2008 11:57 |
|---|
Tonya,
> Yes I do want the cookie file because when there are menu choices with a sub
> menu (child nodes ) I want these to stay open when the user is browsing this
> menu
I think you have misunderstood what the features do.
A
B
B.1
B.2
B.2.i
B.2.ii
B.2.iii
B.3
C
C.1
C.2
D
Scenario 1:
You are on page A. You expand branch B. You expand branch B.2. You now open
page D. The cookies feature will now re-expand branch B and B.2, even though
you are on page D - in other words, cookies remember the exact state of the
entire menu no matter what page you are on. It even remembers it if you
visit another Web site, then come back to the site with the collapsed list
later.
Scenario 2:
You are on page A. You expand branch C. You expand branch B. You expand
branch B.2. You now visit page B.2.ii. The selfLink function can expand
branch B and B.2.ii (but not branch C) and optionally highlight the link to
page B.2.ii. I think this is exactly what you want to use.
Scenario 3:
You are on page A. You expand branch C. You expand branch B. The
auto-collapse feature will collapse branch C. I think you also want to use
this feature.
In your source code, you are also collapsing menus that don't exist and have
copied completely unrelated code, like you have copied my samples without
editing them to suit your page. This is throwing errors which are causing
the script to fail to expand the branches at all. Try using a browser that
has a good error console, as I say on my contact page, and you will see
these errors for yourself. From what I can tell, this is what you want to
use:
<script type="text/javascript">
compactMenu('odo2',true,'± ');
selfLink('odo2','samePage',true);
</script>
| From | Tonya |
|---|
| To | Me |
|---|
| Subject | Re: Hello message about collapsing script issue |
|---|
| Date | 7 September 2008 22:26 |
|---|
Hi Tarquin
I really appreciate your help but confess I am so way out of my depth trying
to read this code that I can't believe once upon a time I actually taught
this stuff. Clearly my head is full of other topics these days & I must
admit wow its 2008 & my last course in javascript was probably about 8 years
ago.
I will be honest & say I thought your code was one of these download make a
few tweeks & it will work fine. Clearly there was a lot more to it than
that.
The two files cookie.js & listCollapse.js I did not change at all but have
attempted to read through them.
I thought I could use your examples & simply choose the code I inserted at
the top of the page.
You were right I want the sub menu to expand & when you click inside this
menu for it to stay expanded. Eg - house photos - allow you to browse the
sleeping photos, eating etc & these sub menu options stay visible and remain
visible until you click on another link. When you choose a blank link (ie
one without children nodes) then I want all sub-menu's to collapse.
An example of a menu that works like this is here
[URL] the home link & useful links are simple
straight page links with no sub menu
I changed my code to the code you suggested
[URL]
[URL]
It did not work at all unless I added the last unload statement ?
?????????? LOL
I have a friend who is still a developer I will try & contact him to get him
to problem solve for me as I know that really you don't do this - it says on
your site that you don't support this script & I do really appreciate your
help.
Its just combining the collapsing with the simple link as you suggested in
scenario 2
Tonya
| From | Me |
|---|
| To | Tonya |
|---|
| Subject | Re: Hello message about collapsing script issue |
|---|
| Date | 8 September 2008 06:34 |
|---|
Tonya,
> I changed my code to the code you suggested
No you didn't. You have used this, which looks nothing like what I told you
to use:
<script type="text/javascript">
window.onload = function () {
compactMenu('odo2',true,'± ');
selfLink('odo2','samePage',false);
//stateToFromStr('odo2',retrieveCookie('menuState'));
//compactMenu('someID2',true,'± ');
}
window.onunload = function () {
setCookie('menuState',stateToFromStr('odo2'));
}
</script>
I never said to use an onunload listener. I also said to use _true_ not
_false_ as the third parameter in the call to selfLink:
compactMenu('odo2',true,'± ');
selfLink('odo2','samePage',true);
You also previously had your script tag after the list, not before it, so
you didn't need an onload listener. Either way works, of course, but with
your script tag where it currently is, you should be using this:
<script type="text/javascript">
window.onload = function () {
compactMenu('odo2',true,'± ');
selfLink('odo2','samePage',true);
}
</script>
Please copy that _exactly_ and replace your existing script with it - do not
add, remove, or change anything. If you decide to put your script tag after
the list like it used to be, then copy exactly what I put in the last email
instead.
Hope you manage to get this working now - things are going to get very busy
for a while and I will not be able to reply (or read your replies) until
things calm down.
| From | Tonya |
|---|
| To | Me |
|---|
| Subject | Re: Hello message about collapsing script issue |
|---|
| Date | 8 September 2008 15:35 |
|---|
Hi there
You must be really frustrated with me sorry LOL - got to laugh really
Sorry the page you were looking at was the one I was using when I was trying
various things, had commented out some things & left others in to error
test, see what errors were thrown up etc
It was late last night & I must have not uploaded the correct file.
The page I actually finished with was this which has an onload in the script
tags in header & the code exactly as you wrote it
What happens now is it opens the menu for Book 1 & that menu is the one it
appears to remember & open every time - when the page loads & when other
links are clicked also opens when you click book 4, 5 & 6 at the bottom of
the list.
Not sure why this is happening?
Tonya
| From | Tonya |
|---|
| To | Me |
|---|
| Subject | Re: Hello message about collapsing script issue |
|---|
| Date | 9 September 2008 21:51 |
|---|
Hi there
Did you get my message apologising that it was the wrong file that I had
uploaded and you were looking at a test page I was running error codes
through to see if I could follow the script.
I still can't get a positive result
Tonya
| From | Me |
|---|
| To | Tonya |
|---|
| Subject | Re: Hello message about collapsing script issue |
|---|
| Date | 11 September 2008 17:03 |
|---|
Tonya,
> What happens now is it opens the menu for Book 1 & that menu is the one it
> appears to remember & open every time - when the page loads & when other
> links are clicked also opens when you click book 4, 5 & 6 at the bottom of
> the list.
Presumably because you have not set the links up properly as real links,
to real, unique pages, and instead, they all point to the same page. See
the documentation of the selfLink function for more details - it only
shows the _first_ matching link, not the actual link you clicked on.
Again, I will be very busy for a while (many days) and I will not be able
to reply (or read your replies) until things calm down.