locked
I want my app to scroll horizontally, but cannot make it a listview. Is it possible?

    Question

  •  Hi,

     I keep adding elements to my app page, as the user adds new items (which are listviews themselves). The new elements get added horizontally and when more items are added it appends at the bottom. Instead I want my app to scroll horizontally.  (My app page cannot be made into a listview)

    How can I achieve that?

    Pls help.

    Thanks


    karthika

    Tuesday, April 23, 2013 3:10 PM

Answers

  • One way to achive this would be to use two container divs. The outer container has the same height and width as your screen. In Addition it's overflow-x property is set to auto. The inner container div has  a height of 100 % and a width of the sum of the width of your elements. You would have to recalculate this width via JavaScript every time when you add a new item.

    so the structure would be something like this

    <div id="outerwrapper" style="height:1080px;width:1920px;overflow-x:auto">
       <div id="innerwrapper" style="height:100%;width:2500px">
           <div id="yourItem1" style="width:400px;margin-
    right:100px" />
           <div id="yourItem2" style="width:400px;margin-right:100px" />
           <div id="yourItem3" style="width:400px;margin-right:100px" />
           <div id="yourItem4" style="width:400px;margin-right:100px" />
           <div id="yourItem5" style="width:400px;margin-right:100px" />
      </div>
    </div>

    The height and width of the outerwrapper div have to be calculated via JavaScript when the page is loaded. The width of the inner wrapper has to be recalculated everytime when you add an item.

    • Marked as answer by ArunKarthika Thursday, April 25, 2013 11:28 PM
    Tuesday, April 23, 2013 10:10 PM

All replies

  • One way to achive this would be to use two container divs. The outer container has the same height and width as your screen. In Addition it's overflow-x property is set to auto. The inner container div has  a height of 100 % and a width of the sum of the width of your elements. You would have to recalculate this width via JavaScript every time when you add a new item.

    so the structure would be something like this

    <div id="outerwrapper" style="height:1080px;width:1920px;overflow-x:auto">
       <div id="innerwrapper" style="height:100%;width:2500px">
           <div id="yourItem1" style="width:400px;margin-
    right:100px" />
           <div id="yourItem2" style="width:400px;margin-right:100px" />
           <div id="yourItem3" style="width:400px;margin-right:100px" />
           <div id="yourItem4" style="width:400px;margin-right:100px" />
           <div id="yourItem5" style="width:400px;margin-right:100px" />
      </div>
    </div>

    The height and width of the outerwrapper div have to be calculated via JavaScript when the page is loaded. The width of the inner wrapper has to be recalculated everytime when you add an item.

    • Marked as answer by ArunKarthika Thursday, April 25, 2013 11:28 PM
    Tuesday, April 23, 2013 10:10 PM
  • Your code was perfect. The div inside the div, worked great Kraemer.  Thanks a lot.

    I did the following. 

    var nexttextjs = document.getElementById("inner");
    nexttextjs.style.width = ((n + 1) * 500) + "px";
    

     I can find this out but if possible, How should I find out the size of the screen for the outer div, in different modes(landscape,portrait etc).


    karthika

    Thursday, April 25, 2013 11:38 PM
  • Also,  When I add a new element, can I scroll to the right end of the screen?

    window.scrollTo(x,y) doesn't work.

    Since it is not a whole listview I am unable to do listview.ensurevisible.

    Pls help.


    karthika

    Sunday, May 5, 2013 2:31 AM