Question

Hi I have an app that is basically a html page.
I have a problem though as the html page is longer than the viewable screen and the page wont scroll.

Ive added this div:

<div id="scrollerId" style="width:320px; height:100px" x-mojo-element="Scroller"> 
    <div >scrolling content</div>
</div>

but it doesn’t do anything.

Please can someone help explain how to add one. or if i need to add anything to my javascript file or anything else ?

source/helloworld.js

    enyo.kind({
        name: "HelloWorld",
        kind: enyo.VFlexBox,
        components: [
        {kind: "PageHeader", components: [
        {content: "Page Header"}
    ]},
    {flex: 1, kind: "Pane", components: [
    {flex: 1, kind: "Scroller", components: [
    //Insert your components here
    ]}
    ]},
    {kind: "Toolbar", components: [
     ]}
]
});

Im a newbie to webos dev so go easy on me.

Answer 1

It might help to know what device(s) you’re targeting. You’ve got a mix of a Mojo app and an Enyo app there, it looks like. Mojo is for the phones. If you’re targeting the TouchPad, you should probably switch entirely to Enyo.

For the Mojo scroller to work in webOS you need to enable it as follows:

this.controller.setupWidget("myScroller",
    this.attributes = {
    },
    this.model = {
       scrollbars: true,
        mode: "free"
    });

You can read more about scrollers in Mojo here:

http://webos101.com/Scroller

However, I think you want an Enyo scroller so you get rid of the HTML in your app and use the method described above by XRay Enabler.

It is possible to use JavaScript functions to pull in content from a DIV in your HTML into an Enyo kind. Here’s an example using jQuery:

this.$.myContent.setContent($("#someDiv").html());

Keep in mind you’ll have to set allowHtml to true to allow HTML content.