Help With AnimatedCollapse IMG Null

[jsnoobie]

1) Script Title: Animated Collapsible DIV v2.4

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...edcollapse.htm

3) Describe problem: I love this script but I can't seem to make it work with an image to toggle a DIV collapsed or expanded. I've followed the instructions exactly, and everything works fine but the toggling image itself won't display in any browser. When I "inspect element" the img shows up as "null" and I don't understand why. I've tried lots of variations but can't get it to work. Please help?

A couple of screenshots attached...

Many thanks!

[jscheuer1]

Are you using the method described here (from the demo page):

If your toggler link is an image link, you can insert these two attributes inside it to automatically update the image based on the state of the DIV it toggles. For example:

 <a href="#" rel="toggle[jason]" data-openimage="expand.jpg" data-closedimage="collapse.jpg"><img src="collapse.jpg" style="border-width:0" /></a>

With the above two attributes defined, the toggler's image above will automatically be updated to show one of the two images specified inside them depending on whether the DIV it toggles is currently expanded or collapsed.

and shown in detail with example 4 from Step 2:

<p><b>Example 4 (part of group "pets"):</b></p>

<a href="#" rel="toggle[cat]" data-openimage="collapse.jpg" data-closedimage="expand.jpg"><img src="collapse.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('cat')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('cat')">Slide Up</a>

<div id="cat" style="width: 400px; background: #BDF381;">
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
</div>

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[jsnoobie]

Yes, that is the method I'm trying to use. Here is a link to the page:

http://www.probenefits.com/Debit/Flex-Card-Q-and-A.html

Thanks in advance!

[jscheuer1]

.

Your page is in violation of Dynamic Drive's usage terms, which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

As to your problem, replace this:

<P><A REL="toggle[14]" HREF="#"><IMG SRC="collapsed.jpg"></A>
<A REL="toggle[14]" HREF="#">Q: I swiped my Flex Card, now where's my reimbursement?</A></P>

<DIV ID="14" CLASS="hidden"><P>A: When you use your Flex Card, fu . . .

with (addition highlighted):

<P><A REL="toggle[14]" HREF="#" data-openimage="expanded.jpg" data-closedimage="collapsed.jpg"><IMG SRC="collapsed.jpg"></A>
<A REL="toggle[14]" HREF="#">Q: I swiped my Flex Card, now where's my reimbursement?</A></P>

<DIV ID="14" CLASS="hidden"><P>A: When you use your Flex Card, fu

[jsnoobie]

I have now reinstated the notice. Sorry about that.

Regarding your response to the problem, I can see why you responded by telling me to add the data-openimage and data-closedimage attributes to the <A> tag. The strange thing is that they ARE added. Those attributes are there in the HTML file (see attached) that is live on the server but for some reason, when one views the source through a web browser, those attributes disappear. Is there something I'm doing wrong?

Thank you,
Kelly

[jscheuer1]

Yes, you're doing something wrong. But it might not really be your fault. I made a local copy of the page and inserted the:

data-openimage="expanded.jpg" data-closedimage="collapsed.jpg"

attributes myself into it and it worked.

I also noticed that in your attached zip file we see all lower case tags and attributes, while in the served source code of the page these have become uppercase - a tell tail sign of sorts - it usually indicates a Microsoft product has touched the file.

What's probably happening is that your code is being edited. Are you by any chance using FrontPage or Microsoft Expression Web and/or Sharepoint Designer. If so they might be changing your code for you.

Any editor really could potentially do this, those are simply the biggest offenders I know of. Generally this doesn't happen during editing though, rather during the upload process.

So, how are you uploading the file to the server?

In any case, those attributes aren't valid in HTML 4.01 Strict - the DOCTYPE you're using for the page, so a strict editor or uploader would sort of be within their rights to strip them. One thing you could try is changing:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

at the very beginning of the page to:

<!DOCTYPE html>

which is the HTML 5 specification in which those attributes are valid.

If that doesn't work, you may need another editor or another method of uploading the file.

It's possible the server itself is doing this, but doubtful. And it might be something else. But it's obvious that either something like this is happening, or that you're simply mistaken about what file you put where on the server.

If it is the editor or the editor's upload component, there are settings and/or syntax to prevent it from doing that. Unfortunately I'm not well versed in those for any particular product. My recommendation would be to use a text only editor, and a standalone ftp program to upload the file.

[jsnoobie]

Thanks for your help.

Our web server is a Windows machine that is here on-site, so I actually just remote-desktop to that machine and edit files (using Notepad) directly on the web server. The files are being served to the web by Apache, I believe. I tried changing the DOCTYPE as you suggested but that didn't seem to work. I did notice when I viewed the webpage after changing the DOCTYPE that the served version seemed to ignore the DOCTYPE tag and just put a ">" at the top of the page.

Any other thoughts? I'm beginning to think this is way over my head.

[jscheuer1]

Try using ftp.

[jsnoobie]

I finally found the solution to my problem here:

http://www.dynamicdrive.com/forums/s...ad.php?t=52145

I just changed the name of the attributes to something that my DOCTYPE would support.

Thanks!

[jscheuer1]

Well OK if that works for you. My inclination would be to get a situation where you may upload whatever code you like. Using title will cause a tooltip sort of thing and the rev and rel attributes are technically invalid for this use. The HTML 5 DOCTYPE should certainly be allowed, along with the data- attributes for it in any case. Any software that does otherwise is broken. And as I say, sooner or later you are going to need a situation where your software isn't editing your code. I'd consider this a wakeup call. Your existing software can probably handle it with minor configuration tweaks. If not, other software should be found.