Scrolling inside a widget

[cgessner]

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.

[jappit]

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

Pit

[cgessner]

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

Thanks a bunch again

[cgessner]

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?)

<!-- 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:

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

#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

[jappit]

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

[cgessner]

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:

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);
}

[cgessner]

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?

[jappit]

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

[cgessner]

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

[cgessner]

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.

[cgessner]

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

[wildabeast]

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?

[cgessner]

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

[wildabeast]

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 ...

[cgessner]

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