Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Contributor
Wongadob
Posts: 40
Registered: ‎05-12-2012
My Device: 9800

ScrollTop reset to top of div onclick event?

I have an issue when changing screens from an onclick event. I am writing a piece of software that displays messages and conversations. I click on a message and bring up the relevant conversation. The list of messages scrolls up and down using focus based navigation, or touch and drag scrolling.

 

The problem I am having does not show up on simulator, only on device.

 

What is happening is when the message is selected 'onclick' via knockoutjs. it resets the scrollTop to the top of the div prior to calling the function. I think this becuase the first line of my function is to hide the div. even if I just hide the div then return false it still happens prior to hiding the div.

 

I do have a couple of other event functions on the same element. They are for touch start and touch end. Touch start just sets a timer going and touch end which checks the timer for a 'tap' and then used to set the focus to the element touched (I removed that bit to test and same result)

 

function touchStart()
{
	tapStart = new Date().getTime();
}

function touchEnd(event,el)
{
	var tapEnd = new Date().getTime();
	if(tapEnd - tapStart<500 && el.id !="")
	{
		console.log("element is ",el);
		console.log("in the tap end it is setting the focus to ",el.id);
	//	blackberry.focus.setFocus(el.id);
	}
	event.stopPropagation(); 
}

 

This is my HTML. It is using knockoutjs to populate the screen. so the data-bind click function binds a click function to the element

 

	<div class = "messageitem"  x-blackberry-onDown="navDown();" x-blackberry-onUp="navUp();" x-blackberry-focusable="true" onmouseover="this.style.backgroundColor='#cceeff';" onmouseout="this.style.backgroundColor='#ffffff';" ontouchstart="touchStart()" ontouchend="touchEnd(event,this)"
data-bind = "click: showthread.bind($data, event, thread(),'th_mb' + $index() ), attr: { 'id': 'th_mb' + $index()}">

 

 The function it calls is this.

 

function showthread(event,thread_id, id)
{
	document.getElementById('mainbodyThreadHeaders').style.display="none";
	appViewArray.viewThread = false;
	
	lastFeedHeader = id;
	console.log ("show thread sets  lastFeedHeader to: ",lastFeedHeader);	
	initConversation(thread_id, false, 'thread', null);
	return false;
}

 

As I say even if I remove the return false to the top of the function it still resets the div scroll to the top.

 

Any ideas why this may be happening?