×

Discussion Board

Page 1 of 3 123 LastLast
Results 1 to 15 of 35
  1. #1
    Registered User
    Join Date
    Jan 2009
    Posts
    3

    Scrolling inside a widget

    I couldn't make it work to make a div style="height:XXpx;overflow:scroll;" to work.

    it seems that the widget avoids any scrolling mechanism and only allow it on body.

    how can i workaround it?

    i am creating a app that i set a navigation (top, side or bottom) and i have a div where show all the content, so when the user scrolls it should scroll only the content and not move the navigation.

    any ideas? am i clear...?!

  2. #2
    Regular Contributor
    Join Date
    Apr 2003
    Location
    Akron Ohio USA
    Posts
    229

    Re: Scrolling inside a widget

    I used the following and was able to create an interface with a "title" div on top and scrolling "content" div below

    CSS overflow: auto
    Widget: tabbed navigation trapping up/down key down events
    javascript: standard scrolling with the scrollTop property applied to the content div

  3. #3
    Registered User
    Join Date
    Aug 2009
    Location
    Germany
    Posts
    24

    Re: Scrolling inside a widget

    I know this is an old thread, but since I've got the same question, I might as well reuse it

    Do I understand the answer here right:
    Title-Area is set normale
    Content-Area has a certain size/height
    and there are buttons, which on touch/press/whatever send a scrollTop-Event to the Content-Area?

    1. Is there no way to solve it without buttons? Just smooth scrolling

    2. And what if I need a footer as well? Somehow I can't seem to get the content-Area to be small enough

    Thanks in advance for any answers
    Last edited by cgessner; 2009-09-29 at 10:44. Reason: added missing words -.-

  4. #4
    Nokia Developer Champion
    Join Date
    Nov 2007
    Location
    Rome, Italy
    Posts
    2,406

    Re: Scrolling inside a widget

    Hi cgessner,

    1) where not directly supported by S60 browser versions, only way to have smooth scrolling is to implement it by using JavaScript

    2) check out this Forum Nokia Wiki article for some useful code:

    http://wiki.forum.nokia.com/index.ph...nd_Buttons_Bar

    Pit

  5. #5
    Registered User
    Join Date
    Aug 2009
    Location
    Germany
    Posts
    24

    Re: Scrolling inside a widget

    I've been fiddeling around with that code all day now , but I can't seem to get anywhere.

    My structure is the same as on the page now -
    A container Div containing:
    Header-Div
    Content-Div
    Footer-Div

    They all contain tables.

    But when I tell the content-div that it's height is only limited (via Java Script, when ever I set content I also do "mp_content.style.height = x") the div only ignores me!
    Is that because of it's content being a table?
    I tried setting the tables height as well, but doesn't help either (only results in a thicker border)

    I really have to say, java script is frustrating
    Last edited by cgessner; 2009-09-29 at 15:21. Reason: container div

  6. #6
    Nokia Developer Champion
    Join Date
    Nov 2007
    Location
    Rome, Italy
    Posts
    2,406

    Re: Scrolling inside a widget

    Are you testing on a 3rd or on a 5th edition device/emulator?

    Pit

  7. #7
    Registered User
    Join Date
    Aug 2009
    Location
    Germany
    Posts
    24

    Re: Scrolling inside a widget

    Actually I'm testing on a N97, so I'd asume 5th Edition, but I wouldn't know where to check : /
    Last edited by cgessner; 2009-09-29 at 15:37. Reason: edition

  8. #8
    Nokia Developer Champion
    Join Date
    Nov 2007
    Location
    Rome, Italy
    Posts
    2,406

    Re: Scrolling inside a widget

    Two questions:

    * when you set the content-div height, do you also specify "px"? Something like:
    Code:
    mp_content.style.height = "200px";
    or, if you have your height stored in some variable:
    Code:
    mp_content.style.height = heightVar + "px";
    * which value are you setting to the CSS overflow property of your content-div?

    Pit

  9. #9
    Registered User
    Join Date
    Aug 2009
    Location
    Germany
    Posts
    24

    Re: Scrolling inside a widget

    I have the height stored in a variable - I did miss the +"px" part before, but I checked and it's there now.

    In the CSS I tried all kinds of variants, atm I have overflow-y: auto

  10. #10
    Registered User
    Join Date
    Aug 2009
    Location
    Germany
    Posts
    24

    Re: Scrolling inside a widget

    I don't understand why, but it's working today.
    At least basically, I think it would, atm I can't get a hold of the scrollbar, since it's sooo slim, but as far as I can see it should be working now. Maybe I'll build a custom scrollbar.

    Thanks a bunch

  11. #11
    Nokia Developer Champion
    Join Date
    Nov 2007
    Location
    Rome, Italy
    Posts
    2,406

    Re: Scrolling inside a widget

    Hi cgessner,

    happy to know it works now. Take a look at Forum Nokia Wiki for some scrollbar customization sample code.

    Pit

  12. #12
    Registered User
    Join Date
    Aug 2009
    Location
    Germany
    Posts
    24

    Re: Scrolling inside a widget

    Heya Pit,

    thanks again for your help!
    I've found the How-to.

    I'm just not sure if it will be ok to add a custom scrollbar, since that would change the layout so much. And reduce content space a significant lot, if it should be useable by thumb.

    The "Mobile Design Pattern: Scrollbar"-Page talks about
    "Allow scrolling by dragging the screen - for touch enabled devices."
    which worked when my content was still overflowing all the way - is there a way to catch those events and scroll?
    - can't seem to find anything helpful via "drag"-boardsearch.

    thanks in advance

  13. #13
    Nokia Developer Champion
    Join Date
    Nov 2007
    Location
    Rome, Italy
    Posts
    2,406

    Re: Scrolling inside a widget

    Hi cgessner,

    mouse/drag events are not practically usable within WRT widgets, so my personal advice on touch devices is to rely on standard S60 browser scrolling mechanism.

    Pit

  14. #14
    Registered User
    Join Date
    Aug 2009
    Location
    Germany
    Posts
    24

    Re: Scrolling inside a widget

    And "standard S60 browser scrolling mechanism" would be the tiny little scrollbar?
    (or a custom one on top, which uses the same mechanism)

    Or would that be something else?

  15. #15
    Nokia Developer Champion
    Join Date
    Nov 2007
    Location
    Rome, Italy
    Posts
    2,406

    Re: Scrolling inside a widget

    I mean, the standard touch-and-drag functionality of S60 5th edition browser. If you want to change the scrollbar look'n'feel, you can look at these:

    http://wiki.forum.nokia.com/index.ph...untime_widgets
    http://wiki.forum.nokia.com/index.ph...untime_widgets

    If you make the scrollbar large enough, you could also try to intercept onclick events and let user scroll by directly clicking on the scrollbar itself. About dragging the scrollbar slider, I'm not sure it can be easily implemented.

    Pit

Similar Threads

  1. Distorted widget icon
    By xbit- in forum Symbian
    Replies: 8
    Last Post: 2009-10-20, 12:12
  2. Help with facebook widget
    By mkr10001 in forum Symbian
    Replies: 6
    Last Post: 2009-10-02, 15:08
  3. create and delete widget shortcut icon
    By priti2208 in forum Symbian
    Replies: 9
    Last Post: 2009-07-31, 11:08
  4. A bug in the example 'Keypad' widget
    By jgroman in forum Symbian
    Replies: 0
    Last Post: 2008-04-19, 18:50

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×