[rick.gommers]

Hi all,

My app has some content that is dynamically added to an HTML widget. When the content overflows the visible area, the user should scroll in order to view all of the content.

This works fine in the simulator with the following code:

#m1-Screen02-cartBody {
overflow: scroll;
overflow-x: hidden; 
}

::-webkit-scrollbar { 
    display: none; 
}

However, on my android test device (running Android 4.1) I am not able to scroll in the HTML widget.

Do you have any suggestions for this?

Thx in advance! 🙂

[Brandon]

This post should have what you need to do it:
http://www.genuitec.com/support-genuitec/viewtopic.php?f=14&t=3818

[rick.gommers]

Hi CinciPlanet, Thx for the link!

I have instantiated the iScroll object. However I can’t seem to get the refresh function working.

Please have a look at this code:

console.log('myScroll: '+myScroll);
console.log('scroller: '+$("#scroller")[0]);
$("#scroller")[0].myScroll.refresh();

First console.log returns an [object Object], second console.log returns html div element. So I’d say that both are defined.

However, this refresh function throws an error saying

ERROR: undefined: Cannot call method ‘refresh’ of undefined

I have created a global variable for the iScroll object, but no luck with that. Do you have any ideas on how to fix this?

Thx in advance!

[Brandon]

Can you post the code of where and how you are calling both the iScroll and the refresh
I have noticed it is kind of picking on when you call the refresh

[Brandon]

Actually I think I linked the wrong tutorial this one might help more:
http://www.genuitec.com/support-genuitec/viewtopic.php?f=14&t=5264

[rick.gommers]

Forum is having problems with accepting my posts with code inside them. I’ve used the code tags properly, but still… Bad request errors.

I’ll try again tomorrow 😉

[rick.gommers]

@Michael/Octavio: What is wrong with your forum?? I can’t post the code that is requested by CincyPlanet. Getting bad request errors.

I hope this won’t mean that the forum software is actually trying to execute the code i’m posting here??

Please check the email I send to you yesterday! It’ll contain the contents I’m trying to post here.

Thx in advance!

[Brandon]

I am guessing your code has a percent symbol in it? phpBB forums will not let you post them. you can replace them with the text ‘percent’

[rick.gommers]

That sounded hopeful, but sadly there’s no percent symbol in my post.

I found another solution. Here’s a link to the contents I was trying to post. It’s from my public dropbox folder: https://dl.dropboxusercontent.com/u/15584788/forumpost.docx

Don’t know if you have MS Word, but this doc has syntax highlighting. If you have any problems viewing it please let me know.

Thx!

[Brandon]

Two things

1. I dont see in that code where you actually place the HTML wrapper:
<div id=”wrapper” style=”width:100;height:100″> <!– add a percent sign to both 100 values – –>
<div id=”scroller”> <!– not shown due to portal’s hatred for percent chars –>
<!– custom content goes here –>
</div>
</div>

2. Try calling the refresh after the page change, in the default page change codes.

[rick.gommers]

Thx Cincy!

Apparantly there was a percent sign in my post which I failed to spot, so that was the cause of the problem 🙂

I have the wrapper in place. It looks like this:

<div id="wrapper" style="width:100;height:100"> <!-- with percent signs -->
   <div id="scroller">                                       
           <table id="shoppingCart">          
            <thead>
            </thead>
            <tbody>
            </tbody>
        </table>
   </div>
</div>

Running the refresh method after page transition results in this error:

ERROR: undefined: Cannot call method 'refresh' of undefined
Stack:
TypeError: Cannot call method 'refresh' of undefined
    at phoneui.postPageTransition (http://127.0.0.1:9090/get/470a88fd4c4647f1ad3824f4a343317f/RingDesign01_custom.js:21:30)

[Brandon]

Not sure if it will help, or if you already did, by try declaring the myScroll oustide any function.

var myScroll;

$(document).ready(function() {
    console.log('initialise iScroll');
        myScroll = new iScroll('wrapper', {         
           vScroll : true,
            vScrollbar: false,
           hScroll : false,
            hScrollbar: false,
            bounce: false,
        });
    });

[rick.gommers]

@CincyPlanet wrote:

Not sure if it will help, or if you already did, by try declaring the myScroll oustide any function.

Yeah I have declared it in the top of my custom.js file

[Brandon]

Without seeing the entire code I cant really say what else could be the problem.

[rick.gommers]

No problem Brandon, thx for your help!

I’ll let this wait for a bit until I’ve finished my app. I’m putting too much time in what should be a very simple option..

In the meantime if someone has an idea on how to fix this.. you’re more than welcome 🙂

[Author]

Posts