Jump to content

Search the Community

Showing results for tags 'scrolling'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Categories

There are no results to display.

Forums

  • Welcome to Smart Mobile Studio
    • News and Information
    • Pre-Sales Questions
    • Smart In the Media
    • Smart Contests
    • Meta
  • Smart Mobile Studio Discussion
    • General
    • IDE
    • RTL
    • Code
    • Client Server
    • Platform
    • Graphics
    • Deployment
    • Suggestion box
  • Smart Mobile Studio support
    • Support
    • Bug report
  • General Discussion
    • Pascal
    • Delphi
    • Javascript
    • HTML/HTML5
    • CSS
  • Resources
    • Website
    • Download Smart Mobile Studio

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Location


Interests


Company name


Position

Found 6 results

  1. lynkfs

    scrolling big numbers

    Got challenged the other day by trying to scroll large numbers of rows in a listbox. Browsers are very good at scrolling, but when row numbers become large and the scroll context becomes complex, scroll behaviour deteriorates. A simple un-optimised scrolling div is, rule of thumb, able to scroll comfortably up to a couple of hundred rows. Depending on browser and complexity. In the native framework I tweaked that a bit by setting all rows outside the visible viewport to 'display:none'. That extends comfortable scrolling somewhat, say to numbers in the low thousands. A better way is to completely separate display from content. Meaning that the content needs to be held in some kind of memory structure, not in visual components, and that scrolling is redefined to re-using a small set of visual rows confined to the scroll-window. A structure to make that happen would be a <div> like component (TW3Panel) on a form with NativeScrolling set to true. Set up 2 child-panels on this component, where the first child-panel has dimensions equal to the maximum scrollable area, and a second childpanel dimensioned equal to this parent. The first child-panel is the scroller, which will always be completely empty. The second child-panel contains the visible rows, which will be refreshed on scroll-events. To keep this panel always in view, set the position attribute to '-webkit-sticky'. This demo shows that Chrome can readily handle 500,000 rows, even on mobile. FF a bit less. The good thing is that the number of rows doesn't really matter, scrolling behaviour stays the same regardless. Would be interesting to see if performance gets even better by pushing scrolling to the GPU, pretty sure Chrome does that by default. Infinite scrolling will be easy to implement using this structure too. Code procedure TForm1.W3Button1Click(Sender: TObject); begin //data var column1 := TVariant.CreateArray; for var i := 0 to 500000 do begin column1.push(inttostr(i)); end; var column2 := TVariant.CreateArray; for var i := 1 to 500001 do begin column2.push(inttostr(i)); end; //column2.sort(); //sorting works too //scrolling setup var rowHeight := 30; W3Panel.NativeScrolling := true; //Parent panel (in visual designer : width 408, height 266) var Panel1 : TW3Panel := TW3Panel.Create(W3Panel); //scroller (always empty!) Panel1.SetBounds (0,0,380,column1.length*rowHeight); //but with large height Panel1.BorderRadius := 0; //set up viewport var Panel2 : TW3Panel := TW3Panel.Create(W3Panel); //viewport, only the visual rows Panel2.SetBounds(0,0,380,262); //dimensions same as grid-parent Panel2.BorderRadius := 0; Panel2.handle.style.position := '-webkit-sticky'; Panel2.handle.style.position := '-moz-sticky'; Panel2.handle.style.position := '-ms-sticky'; Panel2.handle.style.position := '-o-sticky'; Panel2.handle.style.position := 'sticky'; Panel2.handle.style.top := '0px'; //set up columns Var CPanel1 : TW3Panel := TW3Panel.Create(Panel2); //column 1 CPanel1.SetBounds(-2,-2,200,264); CPanel1.BorderRadius := 0; Var CPanel2 : TW3Panel := TW3Panel.Create(Panel2); //column 2 CPanel2.SetBounds(200,-2,200,264); CPanel2.BorderRadius := 0; //initial fill viewport prior to first onscroll event for var j := 0 to 8 do begin //only first couple of rows var x : TW3Panel := TW3Panel.Create(CPanel1); //column 1 x.SetBounds(-2,j*rowHeight-2,200,rowHeight); x.BorderRadius := 0; x.innerHTML := column1[j]; x.onclick := procedure(sender:TObject) begin showmessage((sender as TW3Panel).innerHTML); end; // var y : TW3Panel := TW3Panel.Create(CPanel2); //column 2 y.SetBounds(-2,j*rowHeight-2,190,rowHeight); y.BorderRadius := 0; y.innerHTML := column2[j]; y.onclick := procedure(sender:TObject) begin showmessage((sender as TW3Panel).innerHTML); end; end; //fill viewport while scrolling var c1 := CPanel1.handle.children; var c2 := CPanel2.handle.children; W3Panel.onscroll := procedure(sender:tobject) begin var d : integer := trunc(W3Panel.handle.scrollTop/rowHeight); for var k := 0 to 8 do begin c1[k].innerHTML := column1[d+k]; c2[k].innerHTML := column2[d+k]; end; //fall back : ide chrome browser and iOS don't handle 'sticky' very well, //in that case set viewport position manually if Panel2.handle.style.position <> 'sticky' then if not w3_getIsSafari then Panel2.top := W3Panel.handle.scrollTop; end; end; infinity scroll : add to end of W3Panel.onscroll procedure //infinity scroll : if W3Panel.handle.scrollHeight - W3Panel.handle.scrollTop = W3Panel.handle.clientHeight then W3Panel.handle.scrollTop := 0;
  2. Hi i was wondering if someone could explain the process of enabling scrolling on a form without mapping a TW3ScrollBox over the whole thing, and then mapping the components to ScrollBox.Contents? If that's the easiest method that's fine, it's just a bit tedious rearranging the inheritance of a lot of my project if there is a better method available. For example would i want to add a ScrollController property/object to the form and then expect that to be sufficient?
  3. I am still having a hard time with a Listbox and distinguishing between "touch" to select and item in a listbox on a desktop/laptop browser.....and "touch" to begin scrolling (e.g. on a phone/tablet) Using a basic example listbox with 100 items procedure TForm1.Resize; var i: integer; begin inherited; W3ListBox1.Clear; for i:= 1 to 100 do W3ListBox1.Add('Item ' + inttostr(i)); W3ListBox1.SetBounds(0,0,width,height); end; When a user is using the desktop/laptop browser, I need them to be able to use both mouse and touch (case their monitor is touch) to "scroll" and "select" item.....else if using their phone or tablet, need them to be able to use "touch" to scroll and "tap" to select item I assume we dont want to use the standard OnSelected event ? W3ListBox1..OnSelected := HandleLBItemSelected; and probably want to use the OnTouchBegin & OnTouchEnd, as well as the OnMouseDown & OnMouseUp events?????? If So, how? And how do you then handle the scrolling?
  4. IElite

    Scrolling large amounts of text.

    I need to place a large amount of text that needs to be placed in a control and placed on my form. The text needs to able to be word wrapped and scroll-able. However, I do not want visible scrollbars such as seen in a TW3Memo. Can I use TW3ScrollControl for this? I have no idea how much text will be there, but at the most three large paragraphs. The text will need to word wrap based on the size of the control holding the text. I tried using a TW3Label but it seems it has no wrapping procedure TForm1.InitializeForm; var s: string; i: integer; begin inherited; // this is a good place to initialize components fScroll.SetBounds(0,0, ClientWidth, ClientHeight); fScroll.Content.SetBounds(0,0, clientWidth, clientHeight); fText.SetBounds(0,0, fScroll.clientWidth, fScroll.clientHeight); for i:= 1 to 10000 do s:= s + intToStr(i) + ' '; fText.Caption:= s; end; procedure TForm1.InitializeObject; begin inherited; {$I 'Form1:impl'} fScroll:= TW3ScrollControl.Create(self); fText:= TW3Label.Create(fScroll.Content); end; I then tried placing it in the scroll control's InnerHtml procedure TForm1.InitializeForm; var s: string; i: integer; begin inherited; // this is a good place to initialize components fScroll.SetBounds(0,0, ClientWidth, ClientHeight); fScroll.Content.SetBounds(0,0, clientWidth, clientHeight); for i:= 1 to 10000 do s:= s + intToStr(i) + ' '; fScroll.Content.InnerHTML:= '<html> <body> <p>' + S + '</p> </body> </html>';} end; that wraps, but does not scroll beyond the height of the scroll control. Again, I do not know the height of the text at any point, cause of the device size, layout, and amount of text wrapped within. If I set it to some arbitrary such as 5000, then i have extra area to scroll - with no text e.g. fScroll.Content.SetBounds(0,0, clientWidth, 5000); is there a way to place text in a scroll, make it wrap, and make it scroll to the end of its content without any extra space at end (well, there could be a little extra) here is my code here is my demo The #1 president has a large amount of text - so when viewed in a smaller device, or resized browser window, you will see my dilema thanx
  5. using the TW3Scrollbox's Vertical and Horizontal scroll bars work great with the mouse in a browser. Both the bars can be dragged with the mouse, and the arrows at each end can be clicked to move the bars. However, they are not working in my Android Device. Do I have to utilize the Scrollbox's OnGesture or OnTouch events? If so, how do I do so. Btw, the same thing for the TW3Memo control
  6. How to hide scrollbars on TW3Memo? Or, how do I display large amounts of text with word wrap, like in the memo? code https://github.com/holmesshanea/smartmobilestudio/tree/master/preZidents test https://rawgit.com/holmesshanea/smartmobilestudio/master/preZidents/www/index.html test in mobile http://ipadpeek.com/ just select the device and orientation (rotation) What I am trying to achieve is display a large amount of text (wordwrapped) and have it display - no matter the device and orientation - and be able to scroll through the text that isn't visible on the display. Preferably with no scrollbars as is shown with the memo control. Maybe I need to display the text in a div element instead?
×