[Typo3] pagination possible in "Menu of subpages"

[Peter Klein]

From: "Torsten Schrade" <schrade at lineara.de>
Newsgroups: typo3.english
Sent: Tuesday, October 11, 2005 3:46 PM
Subject: Re: [Typo3] pagination possible in "Menu of subpages"


> Peter Klein schrieb:
>> Another solution would be to create menublocks of x items, and then wrap 
>> those with style="display:block" on the 1st one and style="display:none" 
>> on the remaining.
>> Then create some javascript to toggle the displaymode of the "pages".
>> That way you doesn't have to reload the page whenever you want to see the 
>> next "page of menuitems".
>>
> I think I'd prefer this method! It's much less TS-Hazzle :-) Something 
> like css-whatever:hover menus.

It still requires som TS. Here's a code example which creates up to 4
"pages" (You can easily add more) of 5 items each.

Add this to your SETUP field:
--- cut ---
page.headerData.10 = TEXT
page.headerData.10.value = <script
src="fileadmin/scripts/toggle.js"></script>

lib.pbmenu = COA
lib.pbmenu {
  10 = COA
  10 {
    wrap = <ul>|</ul>
    10 = HMENU
    10.maxItems = 5
    10.1 = TMENU
    10.1 {
      wrap = <li><ul id="menublock-1" style="display:block;">|</ul></li>
      NO {
        allWrap = <li>|</li>
      }
    }
    20 < .10
    20.begin = 6
    20.1.wrap = <li><ul id="menublock-2" style="display:none;">|</ul></li>
    30 < .10
    30.begin = 11
    30.1.wrap = <li><ul id="menublock-3" style="display:none;">|</ul></li>
    40 < .10
    40.begin = 16
    40.1.wrap = <li><ul id="menublock-4" style="display:none;">|</ul></li>
  }

  50 = TEXT
  50.value = Page 1
  50.wrap = <a href="javascript:;" onclick="toggleUL('menublock-1');return
false;">|</a>&nbsp;
  50.if.isTrue.cObject < .10.10

  60 = TEXT
  60.value = Page 2
  60.wrap = <a href="javascript:;" onclick="toggleUL('menublock-2');return
false;">|</a>&nbsp;
  60.if.isTrue.cObject < .10.20

  70 = TEXT
  70.value = Page 3
  70.wrap = <a href="javascript:;" onclick="toggleUL('menublock-3');return
false;">|</a>&nbsp;
  70.if.isTrue.cObject < .10.30

  80 = TEXT
  80.value = Page 4
  80.wrap = <a href="javascript:;" onclick="toggleUL('menublock-4');return
false;">|</a>
  80.if.isTrue.cObject < .10.40
}

page.1 < lib.pbmenu
--- cut ---


Create a file named "fileadmin/scripts/toggle.js" add fill it with this
content:

--- cut ---
function toggleUL(id) {
 // Toggle display mode on UL tags (c) 2005 Peter Klein.
 el = document.getElementById(id);
 siblings = el.parentNode.parentNode.childNodes;
 for (i=0;i<siblings.length;i++) {
  if (siblings[i].nodeName=="LI" && siblings[i].lastChild.nodeName=="UL") {
   node = siblings[i].lastChild;
   node.style.display = (node==el)?"block":"none";
  }
 }
}
--- cut ---

--
Peter Klein / Umloud Untd.