Switch Content Script (set.Status)

[Kikitten]

1) Script Title: Switch Content Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm

3) Describe problem:

Hi... well I'm using the 2nd example.

And this is my website > http://www.animesbasket.com/kagome/
On Firefox and Opera it works, but the XHTML is wrong. So I want to do it in the right way.

I tried to hide just the <li> tags, 'cause I want to get together (when closed) the top of the menu with the bottom, just as you can see now, on Firefox and Opera.

But I made it by the wrong way, even it works...
<ul><div which hides><li's></div></ul>

So I created an image with the top and the bottom together, and then I could use it when it's closed, but I must use it as a background, not an image.


<script type="text/javascript">

var joeexample=new switchcontent("switchgroup2", "p") //Limit scanning of switch contents to just "p" elements
joeexample.setStatus('[open] ', '[closed] ')
joeexample.setColor('green', 'red')
joeexample.collapsePrevious(false) //Allow more than 1 content to be open simultanously
joeexample.setPersist(false)
joeexample.defaultExpanded(0,1)
joeexample.init()
</script>

I know I must do it in this line > joeexample.setStatus('[open] ', '[closed] ')

I tried many things, like stylesheet and scripts, but I wasn't able to do it.

If I wasn't clear, please ask.

Thanks.

Cristiane

[ddadmin]

Semantically you can't have a DIV tag within a UL list. Why not just remove the DIV, and have the script contract/expand the entire UL, something like:


<h3 id="joecontent1-title" class="top">Navega&ccedil;&atilde;o</h3>
<!--Início Menu Principal-->

<ul id="joecontent1" class="switchgroup2">
<!--Início div#joecontent1 - Função Show/Hide Menu-->
<li><a href="./" title="Home">Home</a></li>
<li><a href="#H" title="Home">Not&iacute;cias</a></li>
<li><a href="#H" title="Home">Pesquisa</a></li>
<li><a href="#G" title="Graduação">Arquivos</a></li>

<li><a href="#PG" title="Pós-Graduação">RSS Feeds</a></li>
<li><a href="#PG" title="Pós-Graduação">Contato</a></li>

</ul>

Be sure to have the script scan for UL elements instead:


var joeexample=new switchcontent("switchgroup2", "ul")

[Kikitten]

Yes already changed it, but that rounded part on the bottom of menu is a background of UL... and the top part of menu is a background of H3 (menu title)...

Well... maybe I should make this easier and change that bottom part... maybe using another tag just for it under the menu.

Anyway ^^ thanks for your answer.

[Kikitten]

Just one thing... instead of using <img> or a text like [open] can I define a CSS to close and another to open... so this way I could change the backgroung?

And how can I do it here? > joeexample.setStatus('[open] ', '[closed] ')

[ddadmin]

Just one thing... instead of using <img> or a text like [open] can I define a CSS to close and another to open... so this way I could change the backgroung?

And how can I do it here? > joeexample.setStatus('[open] ', '[closed] ')

Hmmm are you asking how to change the background of the header depending on whether its corresponding content is expanded or contracted? There's a modification I did that does this: http://www.dynamicdrive.com/forums/showthread.php?p=108222

[Kikitten]

Thanks It works... but I realized that I could use the image "Closed" to both... and I just needed to change "paddingBottom" ... so I made some changes on the .js file... And It's working fine.

http://www.animesbasket.com/kagome/ (test site)