I’ve been asked to create a small web app that has about 4 static background images which I’d like to try and scroll vertically similar to this jquery library - alvarotrigo.com/fullPage/
The web app part would need to appear on the last ‘page’. This would consist of some fairly basic WebListboxes and a few buttons.
Could I replicate this with the animator or might I actually be able to use this query library and some static HTML in the AppHeader section?
Any thoughts greatly appreciated!
this is probably served (so to speak) much better by CSS these days.
Check out this new site for a game. The parallax effect (differing amounts of scroll producing a 3D-ish effect) is very well done, and as far as I know, all done in CSS styles rather than Javascript:
Look up CSS and scrolling images and parallax effect in Google and you’ll probably find tons of stuff. Then use the trick of adding a style sheet to the page that specifies the CSS class using the same name that you give to the element in Xojo.
So the style would be like:
.myStyle {
; } and then name the style myStyle in Xojo and assign it to the controls you want affected. Also, case is very important![quote=220310:@Paul Finer]I’ve been asked to create a small web app that has about 4 static background images which I’d like to try and scroll vertically similar to this jquery library - alvarotrigo.com/fullPage/
The web app part would need to appear on the last ‘page’. This would consist of some fairly basic WebListboxes and a few buttons.
Could I replicate this with the animator or might I actually be able to use this query library and some static HTML in the AppHeader section?
Any thoughts greatly appreciated![/quote]
A long scrolling site with subpages like what you linked to is not difficult to do. A tall page with 4 rectangles as background materializing the scrolling pages
Simply set the minimumHeight of the WebPage to the full height, and it will scroll. To detect the “page” you can use WebPage.Top and then change the style of the buttons or do whatever related animation.
You may need a utility such as RubberViewsWE to maintain the relative size of your pages against that of the browser window, as does that site.
Thanks for the quick replies - I shall investigate both those options. A webapp is probably slightly overkill for this but my javascript/html/css skills are not up to much and I thought I could leverage my Xojo knowledge.
Will post back after some experimenting!
It’s a fairly simple thing to put a number of WebImageView controls on top of a WebCanvas. Then simply scroll/move the canvas and you are scrolling your images…
Jon, thanks for your suggestion. I’ve had a look at the LR for the WebCanvas but couldn’t see any methods for scrolling - how would I go about that?
Change the value of the Top property of the canvas.
Typically you’d do this in a scroll bar. But if you want it to scroll automatically create a timer and increment or decrement the top property every so many milliseconds.
Works on Desktop. Should work on Web too.
I do not think the WebCanvas can be used as a container. It does not become parent, and does not have a scroll method.
He can use a WebContainer, though. Putting all the content on it, then placing it on the WebPage, it will scroll automatically.
Michel,
Thanks. You may be right. I was assuming that it would work like it does on the desktop as far as parent behavior. The web container would definitely work. Probably a much better idea.
[quote=220475:@Jon Ogden]Michel,
Thanks. You may be right. I was assuming that it would work like it does on the desktop as far as parent behavior. The web container would definitely work. Probably a much better idea.[/quote]
The catch with browser technology is that it is so different from Desktop, Xojo was not entirely able to have exactly the same behavior in some controls. WebCanvas being one of them, which cannot be used as container, and does not have a Backdrop picture property. To be fair, Xojo has done a remarkable job at abstracting users from the nitty gritty of HTML and JavaScript, and really a lot of things do behave alike.