horizontal navigation in a vertical scroller

[Jellobus]

Hi guys,

Is it possible to make few images horizontally scrollable inside of a vertical scroller in the mobile environment? So a user can navigate images horizontally in a menu while a user scrolls it up and down.

Cheers,

Louis

[EddieLee]

Hi Jello,

Why don't you want to use a horizontal scroller instead of vertical?

[Jellobus]

I want to use both vertical and horizontal scrollers on the same card. The thing is that a horizontal scroller need to be inside of vertical scroller. For example, a user can view horizontally arranged images in a vertical list but the list can be scrolled up and down so the horizontally arranged images can be out of sight depends on the movement of vscroll.

[richmond62]

a user can navigate images horizontally in a menu while a user scrolls it up and down

Um:

Do you mean that there are:

1. 2 scroll bars (1 horizontal and 1 vertical)?

2. A vertical scroll bar and some sort of menu controlled horizontal scroll?

[richmond62]

Here's something I just brewed up in about 15 minutes,
which, admittedly, may not be what you want:
-

-
This allows you to scroll a grouped image using the arrow keys.

Scrolly.livecode.zip

Here's the stack

(134.04 KiB) Downloaded 146 times

[Jellobus]

Hi Richmond62,

Thanks for your suggestion. Here I made a sample stack. I added modified scripts from other sample stacks. I added a custom horizontal scroll in the native vertical scroll. A vertical scroll works fine but a horizontal scroll not working well in the mobile environment. It'll be nice if it can be improved..Please see an attached stack.

[bn]

Hi Louis,


if you block the group script and set the card script to

Code: Select all

global tScrollerRect, tContentRect, tScrollerID

on opencard
   setVScroller
end opencard

on setVScroller
   if the environment is "mobile" then
      put 0,0,375,667 into tScrollerRect
      put 0,0,375,1841 into tContentRect
      mobileControlCreate "scroller", "Vscrolltest"
      put the result into tScrollerID
      mobileControlSet "Vscrolltest", "rect", tScrollerRect
      mobileControlSet "Vscrolltest", "contentRect", tContentRect
      mobileControlSet "Vscrolltest", "visible", true
      mobileControlSet "Vscrolltest", "vIndicator", true
      mobileControlSet "Vscrolltest", "vscroll", 0
      mobileControlSet "Vscrolltest", "hscroll", 0
   end if
end setVScroller

on scrollerDidScroll hOffset, vOffset
   lock screen
   set the vScroll of group "scrolltest" of current card to vOffset
   unlock screen
end scrollerDidScroll

local sLastCoordA
on touchStart pTouchID
   if the long name of the target contains "hScroll"then
      put true into sLastCoordA[pTouchID]["hScroller"]
   else
      put false into sLastCoordA[pTouchID]["hScroller"]
   end if
end touchStart

on touchMove pTouchID, pTouchX, pTouchY
  
   if (sLastCoordA[pTouchID]["hScroller"]) then 
      
      if sLastCoordA[pTouchID]["x"] is not empty then 
         put (pTouchX - sLastCoordA[pTouchID]["x"]) into txDiff
         put (pTouchY - sLastCoordA[pTouchID]["y"]) into tyDiff
         if abs(txDiff) > abs(tyDiff) then
            put the hScroll of group "HScroll" into tCurrScroll
            set the hScroll of group "Hscroll" to tCurrScroll - txDiff
         else
          -- code
         end if
      end if
   end if
   
   put pTouchX into sLastCoordA[pTouchID]["x"]
   put pTouchY into sLastCoordA[pTouchID]["y"]
end touchMove

on touchEnd pTouchID
   delete variable sLastCoordA[pTouchID]
end touchEnd

does this help?

Kind regards
Bernd

[bn]

Hi Louis,

here is an attempt at two mobile scrollers for your problem.
It is not perfect since you have to first click to change the scroller
and click again when changing back before you can scroll in the respective scroller.

What makes your approach difficult is that mobile does not like two active overlapping scrollers at the same time and furthermore one of them (the horizontal scroller) changes its position when it is scrolled vertically with the main scroller.

Anyways here is an attempt at it. Please change the Standalone preferences back to your preferences. I had to go for a higher minimal version for testing in 9.0.

Kind regards
Bernd

PS maybe you should think about your interface and change it to a more manageable solution.

ScrollTest.livecode 2.zip

(4.09 KiB) Downloaded 151 times

[Jellobus]

Hi Bernd,

Thanks for your input. It was very tricky to build two scrollers on a mobile but your suggestion can be used with a modified interface. now I need to create a suitable interface for this.

Thank you so much,

Louis