Sliding panel in web app

Targets Web
1

Hi everybody,

I’m trying to do a web app in xojo for an “stock control” App. I would like to build a sliding panel containing two pages with different fields. I have checked the Xojo Forum but there is nothing. I love the sliding panels from Filemaker, could anyone explain me how to get a similar control in Xojo?

Thank you very much.
Sergio

2

From what I see here

You could use dynamic WebContainers.

See http://documentation.xojo.com/index.php/WebContainer.EmbedWithin

Use a WebAnimator to obtain the slide-in effect.

http://documentation.xojo.com/index.php/WebAnimator

c = new ContainerControl1 c.EmbedWithin(self, self.width, 100, c.width,c.height) Animator1.Move(C, 170, C.Top, 1) Animator1.Play

c is a property of the WebPage c as WebContainer.

3

Thanks Michel, I’m going to test webcontainer and webanimator classes to do the sliding panel. Did you want to show me an imagen or a link at the beginning of your answer? I don’t see anything.

Thank you so much.
Sergio

4

[quote=201629:@Sergio Ciordia]Thanks Michel, I’m going to test webcontainer and webanimator classes to do the sliding panel. Did you want to show me an imagen or a link at the beginning of your answer? I don’t see anything.

Thank you so much.
Sergio[/quote]

I had pasted a Youtube sliding panel tutorial, to make sure that was what you referred to. Some browsers like Chrome sometimes block these scripts and you have to click the shield on the right of the address bar then click “load unsafe scripts”.

https://www.youtube.com/watch?v=Ch5CIGCK2Do
5

Hi Michel,

I have seen the video tutorial and this is exactly the animation effect that I want. Thanks

Sergio

6

[quote=201821:@Sergio Ciordia]Hi Michel,

I have seen the video tutorial and this is exactly the animation effect that I want. Thanks

Sergio[/quote]

You’re welcome.

7

Hi Michel,

I have used your animation code in my webapp but it doesn’t work. This is exactly the code that I use:

Dim c As New RegisterControl Dim Animator1 As New WebAnimator c.EmbedWithin(self, self.width-40, 110, c.Width, c.Height) Animator1.Move(c, 30, c.Top, 1) Animator1.Play

I have a MacBook Pro Retina 2013, when I have debugged the code, I have seen that the Hardware2DSupported is False then I suppose that I don’t use the webanimator class, is that right?. What could I do to slide the containercontrol?

Thanks,
Sergio

8

[quote=202575:@Sergio Ciordia]Hi Michel,

I have used your animation code in my webapp but it doesn’t work. This is exactly the code that I use:

Dim c As New RegisterControl Dim Animator1 As New WebAnimator c.EmbedWithin(self, self.width-40, 110, c.Width, c.Height) Animator1.Move(c, 30, c.Top, 1) Animator1.Play

I have a MacBook Pro Retina 2013, when I have debugged the code, I have seen that the Hardware2DSupported is False then I suppose that I don’t use the webanimator class, is that right?. What could I do to slide the containercontrol?
[/quote]

That has nothing to do with your machine. AFAIK WebAnimator works on any machine that supports JavaScript.

You cannot instantiate a WebAnimator that way. Drag an instance from the library onto your webPage. It looks like a V made out of pearls. Then your code works just fine.

Dim c As New RegisterControl // NO - Drag it from the library instead. Dim Animator1 As New WebAnimator c.EmbedWithin(self, self.width-40, 110, c.Width, c.Height) Animator1.Move(c, 30, c.Top, 1) Animator1.Play

9

Yes, it’s true Michel, It works now. I haven’t seen the animator controller in the library.

Thank you so much.
Sergio