Helo. I have another question. I want to create a horizontal scroll, that would stack panels at left. Lets say i have 5 panels all shown successively, and horizontal scroll. Now, panel 1 has fix position as first panel, when i scroll 2+ will cover 1 till end point (end point for panel 2 is 24px margin left). When it hits 24px on X, the 3 panel starts to cover panel 2 till it reaches 48px margin on X and so on. This picture shows the far right scroll and state of all panels stacked. When i scroll back it goes vice versa, the 4 panel will cover 3 until 4 reaches at end of panel 3. Than both moves till 3 reaches end of panel 2, than 2+ all moves together etc.
Right now i have no clue how to create this. Can someone help me please?
Hm…your rp does not work. Can you also explain a bit what you did with variables?
EDIT: ow i see how you did. I have to minimize browser. Can this be done inside dynamic div? Like in my .rp? I need it inside of dynamic panel, but than i think ScrollX wont work.
I used local Variables (“LVAR1”,“LVAR2”, …) to retrieve data about widgets on the screen:
a. width of the dynamic panel
b. distance between two panels
and I only looked when dynamic had the right to scroll ( when the scroll of the windows is less than the width of the 1st dynamic panel minus 24px for the 2nd Dynamic panel)
Else I force the 2nd panel to move to the place where there is 24px with the 1st panel (1st-panel.X + 24px)
I didn’t know you wanted it all in a panel.
Could you send me your prototype so I look at it?
Hey. Thank you for this explanation, makes sense now :). And sorry, i see i did not specify i want this in a dynamic panel. So yes, i need this to be in dynamic panel (.rp below). Altho i did come just a step further…i have created local variable for each panel [[second.x]] and to calculate this at scroll. But the thing is i only get starting point of panels. Can not figure how to track scrolling/position of element, and how to pin element when it reaches left margin.
I saw the pin to browser but for some reason, margin is disabled on left, i do not know why:
I hadn’t used variables in this prototype (width-24px) but directly the value => 276, 552, 828 & 1104px.
So I you want to parametrize your widgets (change the width, change the padding, …) please use my previous prototype as a model
The trick here is the way to block panels. On want to see the panels so they are at 24, 48, 72, … px from the left edge of the “wrapper”
I use the move action like in the previous prototype
To manage dynamic panel scroll, one need to use it in the formula
-“wrapper”.scrollX + 24 for the 2nd panel,
-“wrapper”.scrollX + 48 for the 3rd panel,
- …
So it seems that panels are at 24, 48, 72, … px from the left edge of the “wrapper”.
In reality they move at the same speed as the scroll plus 24, 48, … px
This! Thank you :). I had same idea, but just could not make it work. Tracking scrolling panel and few ifs is good method. In my case i just could not make local variable and .scrollX work. As i see you put all this on scrolling panel onScroll event. I understand this all now, but one thing, is the first “if true” a must? I did not put that before, so maybe this was the case of not working?
Again one thing (just a question, not to bug you ), when i scroll i get random margins between panels. Why is this? Is this something you just can not pass or is this just because mockup?
I did not get this part:
So I you want to parametrize your widgets (change the width, change the padding, …) please use my previous prototype as a model
In original prototype i have various widths of panels, in my mind i think this should also work with this method or did you mean that with various widths it will not work?
Ow and another thing i have noticed and do not know why, the scroll X (display) is not accurate. Example: when i scroll slowly to one point, the value is not the same if i scroll fast to same point. It can get to ±50 or even 100. Why is that? Because of this, we see margins between panels as you mentioned earlier.
I built on your solution, adding conditions to move the panels as the scroll is less than or equal to certain points, in addition to your conditions to move them as the scroll is greater than or equal to those points. This aims to move them to their starting–or expanded–locations when needed, in the same way you move them to their collapsed locations. This handles the gaps which can occur when the scroll speed is too fast or too slow. Although, if you scroll back and forth quickly you can briefly see the gaps. See Home (2) in the .rp below.
Jerry000, I also made a variation to handle dynamic panel “cards” of different widths. To do this I had to use variables and some basic math–which is all PierreJ was saying, I believe, in terms of using his approach as a model.
This looks like you were referring to the "If True set text on scroll equal to [[LVAR1.scrollX]]"
–and no, that is not required for any of this, just a way to debug and track the current value of the scrollX variable.
@mbc66, this is great or perfect :). However, i still need some explanation. From where did you get .right? I look at Variables in RP7 list and there is no .right. Is this some hidden trick?
In your prototype if i made it simple for explanating your prototype (just to see if i get it). the function .width reads panels width, than you took that width and add next panel width (+). So, if scroll number is less than panel1 width + panel2 width, it moves all elements by scroll. And vice versa, if scroll number is greater than panel1 width + panel 2 width than move all panels…here is where i get stuck “[[LVAR1.scrollX+48]]”.
Other than that, this is what i was looking for. Thank you both very much @mbc66 and @PierreJ
(.rp below). Altho i did come just a step further…i have created local variable for each panel [[second.x]] and to calculate this at scroll. But the thing is i only get starting point of panels. Can not figure how to track scrolling/position of element, and how to pin element when it reaches left margin.
:
with .left, .bottom and .top.
