TREE USING UL/LI

pallone · #1 (**permalink**) February 3rd, 2005, 12:35 PM

Hi,

I am trying to create a tree using the ul tag. When I click on the LI item the node expands and I show the contents of a DIV. However, when I click on the DIV contents the tree contracts.

I do not want it to happen. I want the tree to contract only when I click on the LI item(text).

I tried to open the LI tag and closing it before the opening DIV tag but it did not work.

I would appreciate if someone could help me to solve this problem.

Cheers,

Pallone

<UL>
    <li onclick="doExpand(this, desc1)" id="li1" class="itemContracted">Washington
        <DIV class="descExpanded" id="desc1">
            Captial: Olympia<br> Population: 4.8 Million (c. 1990) <br>Area: 68,000 sq miles
        </DIV>
    </li>
</UL>

joefawcett · #2 (**permalink**) February 3rd, 2005, 04:08 PM

In IE you can put

Code:

onclick="event.cancelBubble = true;"

in the div.

--

Joe (Microsoft MVP - XML)

pallone · #3 (**permalink**) February 7th, 2005, 08:10 AM

Hi Joe,

Thanks for your help. This has stopped the div to contract as expected. Would you know how to do that in Netscape?? Thanks

Does anyone know how to position the <li> tag of a nested[list] tag? I am trying
to nest lots of <li> like this:[list]<li>[list]<li></li></ul></li></ul> .

But as I keep adding more[list] and <li> the text (nodes) keeps moving too far to the right. I would like to control the amount of indent that each[list] <li> applies. Is it possible??

Cheers,

Claudio

pallone · #4 (**permalink**) February 10th, 2005, 05:57 AM

Hi,

Maybe my second question was not clear and I would like to try again.

How can use javascript to remove unwnated margin from a[list]<li> tags??

cheers,

Claudio

ChrisScott · #5 (**permalink**) February 11th, 2005, 04:15 AM

Hi Claudio,

More of a css thing - set the margin-left & padding-left properties of the[list] to a width in pixels (padding for mozilla etc, margin for IE).

HTH,

Chris

pallone · #6 (**permalink**) February 11th, 2005, 10:35 AM

Hi Chris,

Thanks. I will try that.

Claudio

pallone · #7 (**permalink**) February 14th, 2005, 08:17 AM

Hi Chris,

I tried to use padding and margin as you suggested but I still cannot control the position of the <li> tag. When I use padding-left : 20px;
margin-left: 20px for the <UL> tag I think the <LI> tag is also using the same values and I get the unwanted margin.

Example

UL{
padding-left : 20px;
margin-left: 20px;
}

Washington <LI>
This is a text <LI>
Second level <LI>

As you can see the text goes to far to the right. Are you sure it is not possible to control the margin with javascritp??

Cheers,

Claudio

ChrisScott · #8 (**permalink**) February 15th, 2005, 05:42 AM

Hi Claudio,

Can you paste the source html for your output and describe exactly how you want it to look, please?

Thanks,

Chris

pallone · #9 (**permalink**) February 15th, 2005, 07:19 PM

Hi Chris,

This is the html I am using. As you can see I have a top <UL> tag and then a <LI> tag. The text for the top <LI> tag is "Washington".

Then, I use a DIV tag to hide the second level which has another <UL> and <LI>.

AS I have said on my previous post, I would like to be able to control the margin of the <LI> tags no matter what level there are in. So instead of having this:

Washington <LI>
         This is a text <LI>
                 Third level <LI>

I would like to have this:

Washington <LI>
This is a text <LI>
  Second level <LI>

Cheers,

Claudio

<body>
<UL>
    <li onclick="doExpand(this, desc1, 2)" id="li1" class="itemContracted">Washington
        <DIV onclick="event.cancelBubble = true;" class="descExpanded" id="desc1">
            [list]
                <li onclick="doExpand(this, desc21, 3);" class="itemContracted" >
                    This is a text
                    <div onclick="event.cancelBubble = true; doRedirect(this);" id="desc21" class="descExpanded">Third level</div>
                </li>
            </ul>
        </DIV>
    </li>

    <li onclick="doExpand(this, desc2, 0)" class="itemContracted">Oregon
        <DIV class="descExpanded" id="desc2" onclick="event.cancelBubble = true; doRedirect(this);">
            Captial: Salem<br> Population: 2.8 Million (c. 1990) <br>Area: 97,000 sq miles
        </DIV>
    </li>
    <li onclick="doExpand(this, desc3, 0)" class="itemContracted">Idaho
        <DIV class="descExpanded" id="desc3">
            Captial: Boise<br> Population: 1.0 Million (c. 1990) <br>Area: 83,000 sq miles
        </DIV>
    </li>
</UL>
</body>

ChrisScott · #10 (**permalink**) February 16th, 2005, 04:54 AM

Hi Claudio,

Try changing the css to this...

Code:

ul{
    padding-left: 3px;
    margin-left: 3px;
    list-style: none;
}

HTH,

Chris

Need to download code?

Navigation