Switch Content Script not working right in IE

[Jleagle]

1) Script Title: Switch Content Script

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

3) Describe problem:

Im using the script here.

The trouble is, its very buggy in IE, while it works perfectly in FF.

Can anyone help me to get the script to operate the same in both?

Thanks.

[ddadmin]

Buggy how? I just checked your page using IE7, and don't see anything out of the ordinary. One thing I see is that you're also including virtualpaginate.js, which you shouldn't need to if all you're using is the Switch Content script (versus the Virtual Pagination script).

BTW, please note that your page is currently in violation of our usage terms, since the credit notice doesn't appear inline on the page. Please reinstate the credit notice:

[Jleagle]

The best way to see how its supposed to work would to try it in FF.

After you have clicked a filename to open the contents, hovering your mouse anywhere seems to highlight all 3 links (the two inside and the filename). When clicking on either of the two links inside, it closes it. For instance, clicking "play" closes it, when its supposed to stay open.

Ive removed virtualpaginate.js and put your credits back in the right place.

Thanks.

[ddadmin]

I think I see the problem, which isn't a bug with the script per say, but the way IE treats certain element relationships. Right now you're using <li> as the Switch Content title, and a <p> immediately following it as the content to expand/ collapse. The problem is, technically, there shouldn't be any other elements in between <li> tags. This is what you have:

<li id="joecontent3-title" class="handcursor">Alf.mp3</li>

<p id="joecontent3" class="switch">
<A href="tunes.php?page=bottom&amp;file=Alf.mp3" target="bottom">Play</A>
<br /><A href="tunes/Alf.mp3">Download</A>
</p>

In IE, it is confused by this relationship, and treats the <p> as contained within the <li>, causing the entire block above to become part of the Switch content title. That's why clicking on the links inside the <p> in IE also closes the content.

You'll need to experiment with a different containership so IE doesn't complain. One idea would be something like:

<li><span id="joecontent3-title" class="handcursor">Alf.mp3</span>
<div id="joecontent3" class="switch">
<A href="tunes.php?page=bottom&amp;file=Alf.mp3" target="bottom">Play</A>
<br /><A href="tunes/Alf.mp3">Download</A>
</div>
</li>

[Jleagle]

Thanks, i changed it to the code you suggested but now the javascript is working and nothing collapses or expands..

Do i need to change something in switchcontent.js to reflect the tag changes?

http://jimeagle.com/tunes.php