Email conversation
| From | Bob Gay |
|---|
| To | Me |
|---|
| Subject | Problem with Nested List Collapsible Script |
|---|
| Date | 26 October 2004 21:06 |
|---|
I am having problems with you Nested List Collapsible Script.
I downloaded your ListcollapseExample files, but the script is not
functioning correctly on my own hard drive as it does on your website.
1) Instead of the 3 collapsed boxes in the second example, I now see 6:
one lighter colored box with a plus/minus sign above each of the boxes
that list the book title. Clicking on the lighter colored box will open
the collapsed menu, clicking on the darker colored book title links back
to the top of the page.
2) The bottom example that is already partially on your web page
displays as collapsed when viewed from the hard drive.
3) The top example that is fully expanded shows no change.
I have tested the page on Mozilla 1.73, IE5, the preview window of
HTML-Kit (which uses both IE5 and Mozilla/Gecko) and Opera 7.54.
Again, I stress that this behavior is only when run the page on the
local hard drive and that all the examples view normally through the
same browsers when I view your web page.
What am I doing wrong, or is the file possibly corrupting somehow during
the download?
Thanks,
Bob Gay
| From | Me |
|---|
| To | Bob Gay |
|---|
| Subject | Re: Problem with Nested List Collapsible Script |
|---|
| Date | 27 October 2004 8:49 |
|---|
Bob,
Ok, let's see if we can work out what causes this.
> 1) Instead of the 3 collapsed boxes in the second example, I now see 6:
exactly how did you save this? Did you use a browser's 'save as' feature?
And exactly which browser (name and version).
Was it Mozilla (or another gecko based browser) by any chance? Because if
so, yes, it has corrupted it. What my script does is it adds a link around
the text. When mozilla saves it, instead of saving the original, it saves
the changes the script made as well (it really shouldn't do this, because
it will cause no end of problems with other pages as well). So when you run
it locally, the script runs again (like it should), but this time, there is
already a link there, so it creates another one just to house the plus/minus
sign. Because one of the styles I applied to links was display:block; these
appear on separate lines.
IE will also reformat the source if you download, removing any styles it
does not understand, meaning that the local copy would then look stupid in
other browsers.
Opera is the only one out of these that will save it properly. 'File - Save
with images as'. (you may want to create a directory to save this into
because opera does not use a separate folder for associated files)
> 2) The bottom example that is already partially on your web page
> displays as collapsed when viewed from the hard drive.
Correct. In that example, the script looks for the link that points to the
current page. No matter what browser you use, this will get changed when
you save the page using 'save as' - with Mozilla and IE, it changes the
link to point to the online version. With Opera, it changes it to point to
the folder that you saved it in.
It would work normally, it is just that 'save as' in all these browsers
tries to be clever, in an attempt to make sure the links on the page still
work.
Hope this explains it all. If you want to save a copy that is not corrupted
in any way, use 'view - source' in Opera or IE (not Mozilla, it plays silly
games again), and save that - you will need to manually change the <script>
tags to point to your local copy of the collapsing script and cookie script,
and change any image references to point to the local copy of the images.
When saving, you will need to give it the correct name if you want the auto
expand on the third list: listCollapseExample.html
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Bob Gay |
|---|
| To | Me |
|---|
| Subject | Re: Problem with Nested List Collapsible Script |
|---|
| Date | 27 October 2004 16:35 |
|---|
Mark,
Thanks for getting back to me on this. I thought I was losing my mind,
what little there is left of it.
Yes, I initially saved the page using Mozilla 1.7.3. Thanks too for the
heads up on the Mozilla problems.
I'll fiddle a bit with the script and then get back to you on how it all
comes together. I'm creating a site map for a medium sized site and
think that your script will work best both from the point of style, but
also because it will work across browsers.
Thanks again,
Bob Gay
| From | Bob Gay |
|---|
| To | Me |
|---|
| Subject | Workarounds for Nested List Collapsible Script |
|---|
| Date | 5 November 2004 20:54 |
|---|
Mark,
Thanks again for previous reply. I find your script to be very
versatile and I'm enjoying working with it. Here is the current test
version I have constructed (Please ignor the colors, I'm still fiddling
with it). It is just as you wrote it.
[demo page]
I hope you won't find this message an intrusion, but I have found a
small problem when a DOCTYPE is inserted into the top of the HTML page.
Your original had no DOCTYPE in it. With the Strict DOCTYPE used, as in
this example, problems start to crop up (the same problems occur when
Transitional is used).
[demo page]
In Mozilla, all is well. In IE, however, the layout of the list changes
and any of the boxes in the collapsed list that have more than one line
of text fail to wrap the text and, instead, overlap.
If you look at the CSS code, I have changed a couple of parameters to
correct another problem, which caused the entire collapsed list to
overlap itself in IE. Adding height:100% to the ul,li property solves
this problem. Unfortunately, I am just not sure if this is a problem
in CSS or in the Javascript itself and I'm not adept enough to get all
this to work.
One possible workaround is to insert the code 'white-space: nowrap'
into the ul, li property. This keeps the text from overlapping itself in
IE, but in Mozilla, it causes the text to extend out beyond the edge of
the box.
This is just about as far as my ideas go at this point. I'm presenting
them to you because I like your script and would like to see it gain
more exposure. The DOCTYPE is a problem, in that the page will not
validate if that is not in place.
If you can come up with a way around this pesky problem, please let me
know. You are also welcome to add any of my suggestions and fixes to
your initial code, it they will help.
Most of this type of stuff is an intellectual exercise for me to keep my
brain limber. Heck, if you are interested, I came up with a way to make
the list appear fully extended in normal font for Netscape4 and the
method behind it doesn't interfere with IE or Mozilla. I can post it so
you can see it if you would like.
Best,
Bob Gay
| From | Me |
|---|
| To | Bob Gay |
|---|
| Subject | Re: Workarounds for Nested List Collapsible Script |
|---|
| Date | 6 November 2004 10:38 |
|---|
Bob,
Easier than you think. The problem relates to IE's handling of CSS. Add this:
li { display: inline; }
li a { display: block; }
ul > li { display: list-item; }
I protected IE from one of its many bugs by not letting it see the display:block;
(in quirks mode this does not matter). I have since found that the easy way
to avoid the bug is to set the display style of the LIs to inline. (If you
are interested, the bug is that if you make a link display:block; while it
is in a LI, any empty space after the LI will be rendered as a blank line.)
This will also remove the need for your 100% height fix.
I notice you also have the stretched box problem (which is why in Opera and
Mozilla, the LIs correctly overlap the edge of the list, but in IE they do
not). Looks like you may have hit the difference with the traditional and
W3C box models. The easy thing is to ignore it, because it doesn't look too
bad at all :)
> I came up with a way to make the list appear fully extended in normal
> font for Netscape4
Yeah, Netscape seems to cram everything on one side, very ugly, but netscape
4 is way behind in its CSS handling, so a simple @import will protect it
from the styles that it does not like. Was this what you used?
Tarquin
| From | Bob Gay |
|---|
| To | Me |
|---|
| Subject | Workarounds for Nested List Collapsible Script |
|---|
| Date | 6 December 2004 5:49 |
|---|
Mark,
Thanks so much for getting back to me. I didn't get a chance to get
back to working on the page until last week and now have it up and
running with your changes in place and it all works well.
[site using the script]
Actually, when I wrote you before, I had never used the @import rule
before, so I laid the page out with some ancient Netscape tags that the
other browsers ignored. I don't have those put into this page as of
yet, but may add them so the logo stays intact. However, the list
itself degrades wonderfully with the @import rule in effect, so I may
just leave it as is.
BTW: did I put the copyright information in the document in an
acceptable fashion for you?
Thanks again,
Bob Gay
| From | Me |
|---|
| To | Bob Gay |
|---|
| Subject | Re: Workarounds for Nested List Collapsible Script |
|---|
| Date | 6 December 2004 9:45 |
|---|
Bob,
The page is looking good. Always nice to see one of my scripts in use like that.
> the list itself degrades wonderfully with the @import rule in effect, so I
> may just leave it as is.
yep, one of the things I like best about that script is that it degrades to
be completely accessible in all browsers, even if script or CSS is disabled.
The @import just makes the degrading that extra bit better for browsers
with old or broken CSS implementations (like Netscape 4).
> BTW: did I put the copyright information in the document in
> an acceptable fashion for you?
That will do just fine :)
Enjoy.
Cheers
Tarquin