×

Discussion Board

Page 2 of 3 FirstFirst 123 LastLast
Results 16 to 30 of 35
  1. #16
    Registered User
    Join Date
    Aug 2009
    Location
    Germany
    Posts
    24

    Re: Scrolling inside a widget

    Let me see if I understand -
    normally the browser should automatically react to touch-and-drag events in a div that has overflow:auto?
    'cause then I got to be doing something wrong : /

    It only shows me a maybe 2-3px wide scrollbar which I can't even seem to hit with the stylus.

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

    Re: Scrolling inside a widget

    On S60 touch devices: yes, it should scroll if you drag the content (not the scrollbar) of the overflowing div.

    Pit

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

    Re: Scrolling inside a widget

    For all I know a N97 should be a S60 touch device so I must be doing something wrong.

    Thanks a bunch again

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

    Re: Scrolling inside a widget

    Ok - since I can't finde the error I'm hoping for some more help

    index.html (reduced since header and footer shouldn't matter, right?)
    Code:
    <!-- FULLVIEW ------------------------------------------------------------ -->
            <div id="bigcontainer" class="hidden" style="width: 100%; height: 100%;">
                <div class="page" style="width: 100%; height: 100%;">
                    <!-- HEADER ------------------------------------------------------------ -->
                    <div style="width: 100%;">
                           ..................
                    </div><!-- MAIN PAGE --------------------------------------------------------- -->
                    <div id="mp_content">
                    </div>
                    <!-- FOOTER ------------------------------------------------------------ -->
                    <div class="table mode1" style="margin-top: 5px; margin-bottom: 15px;">
                          ...................
                    </div>
                </div>
            </div>
    JavaScript-function which builds the table and attaches it to mp_content:
    Code:
    function mp_render_content_list() {
    	// generate table
    	var table = document.createElement("table");
    	table.className = "list";
    	
    	for (var i = 0; i < articles.length; i++) {
    		/* Das Element anzeigen */
    		var thumbnail = document.createElement("div");
    		thumbnail.className = "thumbnail";
    		thumbnail.style.width = mp_imgsize + "px";
    		thumbnail.style.height = mp_imgsize + "px";
    		
    		var image = articles[i][2];
    		updateImage(image, mp_imgsize);
    		
    		// Ein Hyperlink, damit auf dem Bild ein Hand-Cursor angezeigt wird
    		var aImage = document.createElement('a');
    		aImage.appendChild(image);
    		aImage.setAttribute('href', 'javascript:void()');
    		thumbnail.appendChild(aImage);
    
    		var tdimage = document.createElement("td");
    		tdimage.appendChild(thumbnail);
    		tdimage.style.width = mp_imgsize + "px";
    		
    		/* Den text mit angehangenem text-element erzeugen: */
    		var date = document.createElement("div");
    		var header = document.createElement("b");
    		var description = document.createElement("div");
    		date.innerHTML = articles[i][4];
    		date.className = "date";
    		header.appendChild(document.createTextNode(articles[i][0]));
    		header.className = "header";
    		description.innerHTML = articles[i][5];
    		description.className = "description";
    		
    		var text = document.createElement("div");
    		text.appendChild(date);
    		text.appendChild(header);
    		text.appendChild(document.createElement("br"));
    		text.appendChild(description);
    		text.className = "info-text";
    		
    		var height = mp_imgsize + 2;
    		text.style.height = height - (height - MPLISTHEADHEIGHT) % TEXTFONTSIZE;
    		text.style.overflow = "hidden";
    		
    		// Link, damit die Hand angezeigt wird
    		var a = document.createElement('a');
    		a.appendChild(text);
    		a.setAttribute('href', 'javascript:void()');
    		
    		// text td 
    		var tdinfos = document.createElement("td");
    		tdinfos.style.verticalAlign = "top";
    		tdinfos.appendChild(a);
    		
    		// tr
    		var tr = document.createElement("tr");
    		tr.appendChild(tdimage);
    		tr.appendChild(tdinfos);
    		tr.url = articles[i][3];
    		
            /* Funktion erzeugen, die die in tr.url gespeicherte URL aufruft: */
            tr.addEventListener("click", function(){
                widget.openURL(this.url);
            }, false);
    		tr.style.cursor = "pointer";
    		table.appendChild(tr);
    	}
    	
    	// insert new table
    	mp_content_set(table);
    }
    And here's the CSS parts for mp_content and .list
    Code:
    #mp_content .list tr {
        border: 1px;
    }
    
    #mp_content .list tr:hover {
    }
    
    #mp_content {
        background-color: #f3f6f9;
    	width: auto;
    	margin-left: 5px;
    	margin-right: 5px;
    	overflow-y: scroll;
    	/* border: 1px solid #7389ad; */
    }
    
    .list {
        width: auto;
    	margin-top: 5px;
    }
    
    .list td {
        overflow: hidden;
        padding: 5px;
    	padding-top: 0px;
    }
    
    .page {
        padding: 0px;
        margin: 0px;
        border: 0px;
    	width: 100%;
    	height: 100%;
    }
    Not sure if the error could be anywhere else, but I wouldn't think so - and the whole code is way to much.

    thanks in advance for any help
    Last edited by cgessner; 2009-09-30 at 11:18. Reason: added page CSS

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

    Re: Scrolling inside a widget

    Haven't still looked the whole code, but a first guess that would hopefully help: there should probably be an 'overflow: auto' property for the 'page' CSS class, since that is the element that has a fixed height.

    Pit

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

    Re: Scrolling inside a widget

    No, Page is the whole View - the part with set height is mp_content (since the content is the part I want to scroll), it is set when ever I place content into the content-div:

    Code:
    function mp_content_set(element){
        var mp_content = document.getElementById("mp_content");
        
        mp_content.style.height = (window.innerHeight - HEADHEIGHT - FOOTHEIGHT) + "px";
        
        set_content(mp_content, element);
    }

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

    Re: Scrolling inside a widget

    I've taken out the "page"-div, since I couldn't really find a reason to keep it in

    so now it's only the FullView-Container containing
    Header-div (with tables)
    content-div (starting empty, adding a table as content, setting height at the same time)
    and
    footer-div (also containing a table)

    it show's the setup correctly, when I've set the height of the content-div, but it does not react to touch-drag at all : / I've got no clue, what so ever, since it does, when I do not set height of the content-div.
    Then I can touch-drag the fullview to scroll down to the footer.

    Is there a way to tell it that touch-drag-events are now for the content-div?

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

    Re: Scrolling inside a widget

    Hi cgessner,

    I've tested your code on a N97, adapting the mp_render_content_list() method to use some fake data, and scrolling actually works for me. I've uploaded the test widget here:

    http://www.jappit.com/m/forumnokia/t...crollTests.wgz

    Pit

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

    Re: Scrolling inside a widget

    kk, thanks a bunch, I'll compare the code

    - ok, it's working on my N97 as well, so I guess I got to be doing something wrong
    Last edited by cgessner; 2009-10-01 at 09:23.

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

    Re: Scrolling inside a widget

    So I've been searching ...

    Neither Header nor Footer are the problem, I can empty them down to "..." and I still can't scroll.
    I changed the header of my index.html to basically match yours, but that didn't change anything either.
    The widget has a mini-view, with scrolling text, but I wouldn't understand why that could have anything to do with it. Other than that it requests a RSS Feed and parses the xml into an array from which I fill the table.
    So nothing really interacts with the content other than what I've postet, I'm confused.
    Any hints on where I might search further?

    One other thing:
    Somehow reading out HEADER- and FOOTER-Size doesn't do the trick for me.
    (I changed Footer-line to be offsetHeight, not Width, so it's not that)
    It does hand me numbers, but they are over 100px to small, all together.
    (Like I have to substract an additional 145px from the height to have it match the display on my N97)
    It fit's perfect in Aptana 1.5 Emulator though, kind of weird.

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

    Re: Scrolling inside a widget

    Anybody got any ideas what could be interfere with the scrolling?

  12. #27
    Regular Contributor
    Join Date
    Aug 2009
    Posts
    57

    Re: Scrolling inside a widget

    I was having the problem where my scrolling divs would not touch-scroll, but only in certain cases.

    I fixed it by removing the overflow:hidden property from the divs that were INSIDE the scrolling div. Touch-scrolling worked after this. Bug?

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

    Re: Scrolling inside a widget

    Unfortunately that didn't help : / (tds had overflow:hidden) - thanks anyway though
    But it does sound kind of weird, might be a bug *nod*

  14. #29
    Regular Contributor
    Join Date
    Aug 2009
    Posts
    57

    Re: Scrolling inside a widget

    Quote Originally Posted by cgessner View Post
    Unfortunately that didn't help : / (tds had overflow:hidden) - thanks anyway though
    But it does sound kind of weird, might be a bug *nod*
    oh, i think position:relative was messing it up too ...

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

    Re: Scrolling inside a widget

    Hum ... that would be bad.
    I wouldn't know how else to clip my images. Is there one?

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
  •  
×