CSS Codes
CSS Layouts
Results 1 to 7 of 7

Thread: assinging classname dynamically to nested list

  1. 12-19-2008, 01:19 PM #1
    smrdo
    smrdo is offline New Comer (less than 5 posts)
    Join Date
    Dec 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default assinging classname dynamically to nested list

    I have the following (this is just a skeleton example) menu which is created by a cms (Immediacy). I need to loop through the nested lists and change the class names
    Code:
    <ul>
  <li>
     <ul class="need">
        <li>
            <ul class="needSubLevel"> </ul><!-- this works fine -->
        </li>
   </ul>
  </li>
  <li>
     <ul class="need">etc..</ul>
  </li>
  <li>
     <ul class="need">etc..</ul>
  </li>
</ul>
    so i have the following function, which finds any sublevel <ul> and assigns a class of "needSubLevel"
    Code:
    function applyClassNavSubLevel() {  
var topDIV = document.getElementById("nav");
var subList = topDIV.getElementsByTagName("ul");
var subItem = topDIV.getElementsByTagName("li");
var subSubList = topDIV.getElementsByTagName("ul");
var subSubListLi = topDIV.getElementsByTagName("li");
var subSubListUl = topDIV.getElementsByTagName("ul");
for (var i = 1; i < subSubListUl.length; i++){
    if(subSubListUl[i].className.match("need") != "need")
    subSubListUl[i].className = "needSubLevel";
    }
   
}
    in addtion to this, i need to loop through and change the parent ul (the ones with an initial class of "need") to something unique, i.e need1, need2, need3

    there will only be 3 of these, but there could be anyamount of the sub levels items. The cms dynamically creates the menu, so i cant assing the names in the initla code, it has to be after it has rendered.
    hope that makes sense
    thanks in advance
    Last edited by smrdo; 12-19-2008 at 01:26 PM. Reason: mis posted title
    Reply With Quote Reply With Quote
  2. 12-19-2008, 03:43 PM #2
    vwphillips
    vwphillips is offline Elite Coders
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.cls {
  background-Color:yellow;
}
.cls1 {
  background-Color:red;
}
.cls2 {
  background-Color:green;
}
.cls3 {
  background-Color:blue;
}

/*]]>*/
</style><script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function UL(cls,nu){
 var ul=document.getElementsByTagName('UL')[nu||0];
  ul.className=cls;
 uls=ul.getElementsByTagName('UL')
 for (var zxc0=0;zxc0<uls.length;zxc0++){
  var zul=uls[zxc0],cnt=0;
  while (zul.parentNode&&zul!=ul){
   if (zul.nodeName=='UL') cnt++;
   zul=zul.parentNode;
  }
  uls[zxc0].className=cls+cnt;
 }
}

/*]]>*/
</script></head>

<body onload="UL('cls',0);">
<ul>
  <li>Tom
   <ul>
    <li>Tom 1
     <ul>
      <li>Tom 1 1
       <ul id="tst" >
        <li>Tom 1 1 1</li>
        <li>Tom 1 1 2</li>
       </ul>
      </li>
      <li>Tom 1 2</li>
     </ul>
    </li>
    <li>Tom 2</li>
   </ul>
  </li>
  <li>****</li>
</ul>
</body>

</html>
    Reply With Quote Reply With Quote
  3. 12-19-2008, 03:57 PM #3
    smrdo
    smrdo is offline New Comer (less than 5 posts)
    Join Date
    Dec 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks very much,

    the only problem is that the parent levels are all assigned as class="cls1", these need to be unique, so if possible cls1, cls2, cls3,
    Reply With Quote Reply With Quote
  4. 12-19-2008, 04:33 PM #4
    vwphillips
    vwphillips is offline Elite Coders
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    not sure I understand the problem
    but

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.cls1 {
  background-Color:yellow;
}
.cls2 {
  background-Color:red;
}
.cls3 {
  background-Color:green;
}
.cls4 {
  background-Color:blue;
}

/*]]>*/
</style><script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function UL(cls,nu){
 var ul=document.getElementsByTagName('UL')[nu||0];
  ul.className=cls+1;
 uls=ul.getElementsByTagName('UL')
 for (var zxc0=0;zxc0<uls.length;zxc0++){
  var zul=uls[zxc0],cnt=0;
  while (zul.parentNode&&zul!=ul){
   if (zul.nodeName=='UL') cnt++;
   zul=zul.parentNode;
  }
  uls[zxc0].className=cls+(cnt+1);
 }
}

/*]]>*/
</script></head>

<body onload="UL('cls',0);">
<ul>
  <li>Tom
   <ul>
    <li>Tom 1
     <ul>
      <li>Tom 1 1
       <ul id="tst" >
        <li>Tom 1 1 1</li>
        <li>Tom 1 1 2</li>
       </ul>
      </li>
      <li>Tom 1 2</li>
     </ul>
    </li>
    <li>Tom 2</li>
   </ul>
  </li>
  <li>****</li>
</ul>
</body>

</html>
    or show the HTML code with the class hard coded
    Reply With Quote Reply With Quote
  5. 12-19-2008, 04:54 PM #5
    smrdo
    smrdo is offline New Comer (less than 5 posts)
    Join Date
    Dec 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I've posted an example f the rendered nav as out put by the css, bascially the three instnqaces of the class cls2 need to be unique, whiles any instqances of cls3 need to remian the same. Hope this code illustrates it a little clearer, thanks
    - so all second level drop downs have the same class name, first level drop downs (x3) have a unique class name
    Code:
    <ul class="cls1">
    <li><a class="Home" title="Home" href="/princestrust/default.aspx"> Home </a> </li>
    <li><a href="/princestrust/home.aspx" title="Home" class="Home"> Home </a> </li>
    <li><a href="/princestrust/need_help.aspx" title="Need help?" class="Needhelp_sel"> Need help? </a>
        <ul class="cls2"><!-- needs to be unique -->
            <li><a href="/princestrust/need_help/the_team_programme.aspx" title="The Team Programme" class="TheTeamProgramme"> The Team Programme </a> </li>
            <li><a href="/princestrust/need_help/get_into_short_courses.aspx" title="Get into Short Courses" class="GetintoShortCourses"> Get into Short Courses </a> </li>
                <ul class="cls3">
                    <li><a href="/princestrust/need_help/inspiring_stories/about_the_trust.aspx" title="The Trust" class="TheTrust"> The Trust </a> </li>
                    <li><a href="/princestrust/need_help/inspiring_stories/about_team_success.aspx" title="About Team success" class="AboutTeamsuccess"> About Team success </a> </li>
                </ul>
            </li>
            <li><a href="/princestrust/need_help/news_1.aspx" title="News #1" class="News#1"> News #1 </a> </li>
            <li><a href="/princestrust/need_help/my_events.aspx" title="My Events" class="MyEvents"> My Events </a>
                <ul class="cls3">
                    <li><a href="/princestrust/need_help/my_events/event1.aspx" title="event1" class="event1"> event1 </a> </li>
                    <li><a href="/princestrust/need_help/my_events/event2.aspx" title="event2" class="event2"> event2 </a> </li>
                </ul>
            </li>
            <li><a href="/princestrust/need_help/insertanything.aspx" title="InsertAnything" class="InsertAnything"> InsertAnything </a> </li>
            <li><a href="/princestrust/need_help/new_page.aspx" title="New Page" class="NewPage"> New Page </a>
                <ul class="cls3">
                    <li><a href="/princestrust/need_help/new_page/new_page.aspx" title="New Page" class="NewPage_sel"> New Page </a> </li>
                    <li><a href="/princestrust/need_help/new_page/new_page-1.aspx" title="New Page" class="NewPage"> New Page </a> </li>
                </ul>
            </li>
            <li><a href="/princestrust/need_help/embedsite.aspx" title="embedSite" class="embedSite"> embedSite </a> </li>
            <li><a href="/princestrust/need_help/regularform.aspx" title="REgularForm" class="REgularForm"> REgularForm </a> </li>
            <li><a href="/princestrust/need_help/newbanner.aspx" title="newbanner" class="newbanner"> newbanner </a> </li>
            <li><a href="/princestrust/need_help/positivestories.aspx" title="PositiveStories" class="PositiveStories"> PositiveStories </a> </li>
        </ul>
    </li>
    <li><a href="/princestrust/support_us.aspx" title="Support us" class="Supportus"> Support us </a>
        <ul class="cls2"><!-- needs to be unique -->
            <li><a href="/princestrust/support_us/test.aspx" title="test" class="test"> test </a>
                <ul class="cls3">
                    <li><a href="/princestrust/support_us/test/sublevel.aspx" title="sublevel" class="sublevel"> sublevel </a> </li>
                    <li><a href="/princestrust/support_us/test/new_page.aspx" title="New Page" class="NewPage"> New Page </a> </li>
                </ul>
            </li>
            <li><a href="/princestrust/support_us/new_page.aspx" title="New Page" class="NewPage"> New Page </a> </li>
            <li><a href="/princestrust/support_us/me.aspx" title="me" class="me"> me </a> </li>
        </ul>
    </li>
    <li><a href="/princestrust/about_the_trust.aspx" title="About The Trust" class="AboutTheTrust"> About The Trust </a>
        <ul class="cls2"><!-- needs to be unique  -->
            <li><a href="/princestrust/about_the_trust/celebrate_success.aspx" title="Celebrate success" class="Celebratesuccess"> Celebrate success </a> </li>
            <li><a href="/princestrust/about_the_trust/what_we_do.aspx" title="what we do" class="whatwedo"> what we do </a> </li>
        </ul>
    </li>
</ul>
    Reply With Quote Reply With Quote
  6. 12-19-2008, 06:02 PM #6
    vwphillips
    vwphillips is offline Elite Coders
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.cls1 {
  background-Color:yellow;
}

.cls2 {
  background-Color:red;
}

.cls21 {
  background-Color:#CC33FF;
}
.cls22 {
  background-Color:#FFCC66;
}
.cls23 {
  background-Color:#99FFCC;
}

.cls3 {
  background-Color:green;
}
.cls4 {
  background-Color:blue;
}

/*]]>*/
</style><script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function UL(cls,nu){
 var ul=document.getElementsByTagName('UL')[nu||0];
  ul.className=cls+1;
 uls=ul.getElementsByTagName('UL')
 for (var cnt2=1,zxc0=0;zxc0<uls.length;zxc0++){
  var zul=uls[zxc0],cnt=1;
  while (zul.parentNode&&zul!=ul){
   if (zul.nodeName=='UL') cnt++;
   zul=zul.parentNode;
  }
  if (cnt==2)  uls[zxc0].className=cls+cnt+(cnt2++);
  else uls[zxc0].className=cls+cnt;
 }
}

/*]]>*/
</script>
</head>

<body onload="UL('cls',0);">

<ul >
    <li><a class="Home" title="Home" href="/princestrust/default.aspx"> Home </a> </li>
    <li><a href="/princestrust/home.aspx" title="Home" class="Home"> Home </a> </li>
    <li><a href="/princestrust/need_help.aspx" title="Need help?" class="Needhelp_sel"> Need help? </a>
        <ul ><!-- needs to be unique -->
            <li><a href="/princestrust/need_help/the_team_programme.aspx" title="The Team Programme" class="TheTeamProgramme"> The Team Programme </a> </li>
            <li><a href="/princestrust/need_help/get_into_short_courses.aspx" title="Get into Short Courses" class="GetintoShortCourses"> Get into Short Courses </a> </li>
                <ul >
                    <li><a href="/princestrust/need_help/inspiring_stories/about_the_trust.aspx" title="The Trust" class="TheTrust"> The Trust </a> </li>
                    <li><a href="/princestrust/need_help/inspiring_stories/about_team_success.aspx" title="About Team success" class="AboutTeamsuccess"> About Team success </a> </li>
                </ul>
            </li>
            <li><a href="/princestrust/need_help/news_1.aspx" title="News #1" class="News#1"> News #1 </a> </li>
            <li><a href="/princestrust/need_help/my_events.aspx" title="My Events" class="MyEvents"> My Events </a>
                <ul >
                    <li><a href="/princestrust/need_help/my_events/event1.aspx" title="event1" class="event1"> event1 </a> </li>
                    <li><a href="/princestrust/need_help/my_events/event2.aspx" title="event2" class="event2"> event2 </a> </li>
                </ul>
            </li>
            <li><a href="/princestrust/need_help/insertanything.aspx" title="InsertAnything" class="InsertAnything"> InsertAnything </a> </li>
            <li><a href="/princestrust/need_help/new_page.aspx" title="New Page" class="NewPage"> New Page </a>
                <ul >
                    <li><a href="/princestrust/need_help/new_page/new_page.aspx" title="New Page" class="NewPage_sel"> New Page </a> </li>
                    <li><a href="/princestrust/need_help/new_page/new_page-1.aspx" title="New Page" class="NewPage"> New Page </a> </li>
                </ul>
            </li>
            <li><a href="/princestrust/need_help/embedsite.aspx" title="embedSite" class="embedSite"> embedSite </a> </li>
            <li><a href="/princestrust/need_help/regularform.aspx" title="REgularForm" class="REgularForm"> REgularForm </a> </li>
            <li><a href="/princestrust/need_help/newbanner.aspx" title="newbanner" class="newbanner"> newbanner </a> </li>
            <li><a href="/princestrust/need_help/positivestories.aspx" title="PositiveStories" class="PositiveStories"> PositiveStories </a> </li>
        </ul>
    </li>
    <li><a href="/princestrust/support_us.aspx" title="Support us" class="Supportus"> Support us </a>
        <ul ><!-- needs to be unique -->
            <li><a href="/princestrust/support_us/test.aspx" title="test" class="test"> test </a>
                <ul >
                    <li><a href="/princestrust/support_us/test/sublevel.aspx" title="sublevel" class="sublevel"> sublevel </a> </li>
                    <li><a href="/princestrust/support_us/test/new_page.aspx" title="New Page" class="NewPage"> New Page </a> </li>
                </ul>
            </li>
            <li><a href="/princestrust/support_us/new_page.aspx" title="New Page" class="NewPage"> New Page </a> </li>
            <li><a href="/princestrust/support_us/me.aspx" title="me" class="me"> me </a> </li>
        </ul>
    </li>
    <li><a href="/princestrust/about_the_trust.aspx" title="About The Trust" class="AboutTheTrust"> About The Trust </a>
        <ul ><!-- needs to be unique  -->
            <li><a href="/princestrust/about_the_trust/celebrate_success.aspx" title="Celebrate success" class="Celebratesuccess"> Celebrate success </a> </li>
            <li><a href="/princestrust/about_the_trust/what_we_do.aspx" title="what we do" class="whatwedo"> what we do </a> </li>
        </ul>
    </li>
</ul>
</body>

</html>
    Reply With Quote Reply With Quote
  7. 01-05-2009, 01:23 PM #7
    smrdo
    smrdo is offline New Comer (less than 5 posts)
    Join Date
    Dec 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    great, worked a treat thanks
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules