Scrolling without pager?

You could achieve this by adding draggable="yes" and dragorientation="vertical" to your panel. But you would probably want to wrap it inside of another panel so it had some boundaries.

Hey Ian, still having trouble. I'm guessing because there are 2 lists within the panel.

My problem is that I need to have a 2 column Table of Contents list. In order to achieve this, I had to create 2 separate lists that stack side by side. By default, the two lists scroll individually. However, we need the entire panel to scroll as one instead.

My thought was to:
Get the dataSourceResultCount for this table of contents json feed
Divider that number by 2
Multiply this number by the height of each Table of Contents Item (170).
This would give me the total height in pixels of what the Table of Contents would need to be.

I am able to arrive at this number correctly. This concept is handled within the "setToc" action.

I then assign this number to [var:tocHeight], and apply it to the panel that contains these 2 lists. This all seems to work fine.

But, when I set this main panel "TOCPANEL" to draggable with a drag orientation, it doesn't seem to work. Do you have any suggestions?

You can see this within my issueSkin project.

It looks like this might be a z-order issue, I can see your issue images and can swipe them in the background (I can see them at the top of the screen under the nav bar.). Can you move the lists in your TOC down in the code so it is under the images block?

I have fixed this, but am still having a problem of not being able to drag/scroll the panel. Maybe we cannot drag the parent container of the 2 lists, b/c normally list items are looking for a scroll?

I tested this by placing a red box over the 2 lists in the form of a 200x200 panel. I made this box draggable and was able to achieve it fine. I then expanded this box and tried to drop my 2 lists inside, and the draggable feature no longer worked.

If this is impossible, is there any other way to achieve what I'm looking for?

I simply want to have my list of Table of Contents items in a double column list format, and to be able to scroll the entire panel as one vertically.

You are right, list tags don't like to be draggable.

I have come up with this solution, you should find it in your code:


<panel name="TOCPANEL" alias="TOCPANEL" width="100%" height="100%" ypos="-200%" hidden="no" background="#000000" padding-top="46" >
<image name="tocBg" alias="TOCBG" source="ui/toc_bg.png" width="100%" height="100%"></image>
<pager name="page" width="100%" height="73.7%" orientation="vertical" ypos="3.5%" paginate="no" >
<panel name="wrap" width="100%" height="150%">
<list name="tocList1" alias="TOCLIST" width="50%" fitheight="yes" datasource="tocFeed" orientation="vertical" paginate="no" align="left">
<object datasource="tocFeed" name="tocItem" class="tocItem" id="[param:id]" size="12" storyName="[param:name]" storyPage="[param:page]" storyAuthor="[param:author]" storyInfo="[param:info]" storyType="[param:type]" storyImage="[param:imgSrc]" lhs="[eval: [param:id] % 2]" operator="e" rhs="1"></object>
</list>
<list name="tocList2" alias="TOCLIST" width="50%" fitheight="yes" datasource="tocFeed" orientation="vertical" paginate="no" align="right">
<object datasource="tocFeed" name="tocItem" class="tocItem" id="[param:id]" size="12" storyName="[param:name]" storyPage="[param:page]" storyAuthor="[param:author]" storyInfo="[param:info]" storyType="[param:type]" storyImage="[param:imgSrc]" lhs="[eval: [param:id] % 2]" operator="e" rhs="0"></object>
</list>
</panel>
</pager>
</panel>


Hey Ian. It works fine with the 16 items we had, but when I add 2 more into my json feed, it cuts them off. Also, when I switch orientations it does something funky.

I'll see if I can build upon what you did. But, I was able to do something similar in the beginning of developing this. Problem is, this table of contents has to be able to take into account a dynamic height calculated each time in the form of [var:tocHeight] (which is done on init). The # of TOC items won't always be the same for every issue published.

A problem I was having in the very beginning was that I couldn't impose a height onto a pager like I could onto a panel through .

Ah yes that changes things a bit.

Well the pager itself should never change height, since it needs to size based on the header screen. The panel inside the pager that contains the list objects is what needs to be dynamic. You should be able to give the panel a fitheight and it will size based on its children and then the pager will just fill out. The only thing you need to watch out for is making sure the panel inside the pager is greater than 100% or the pager won't scroll.

Hey Ian, check out line 671.

Right now, the heights are set to 500 on the TOCWRAP b/c I'm testing the dynamic setting of the height on it. In a perfect world, the TOCWRAP height should be being changed from 500 to 1700 automatically because of line 158. Instead, they are just staying at 500.

If you change the lheight and regular height of TOCWRAP to 1700, and then view the app in fusebox, you'll notice that everything works exactly the way we want it to.

Is there a reason that this TOCWRAP panel height isn't being changed? I feel as if I cannot change the panel height inside of the pager, but I can outside of the pager.

Have you tried just using an assign tag to replace the value of height instead of a scale tag?

<assign property="object:TOCWRAP.height" value="[var:tocHeight]" />


yea that doesn't seem to work either.

oops. That is because assigning height and width object properties is not a live feature yet (currently they are read only). I will check on the status of that ticket and get back to you.

In the meantime let me think about a workaround for this predicament...

I added a background color onto TOCWRAP and it looks like a scale action is working but only when you scale down and while the TOCWRAP panel will scale, the pager will still maintain the original height so there is space under the scaled panel. This is odd and looks like a bug, but it might be a temporary solution for you. I set your TOCWRAP to 200% and the scale seems to work in this fashion.