Categories: How To | Web Runtime (WRT) | Code Examples | S60

This page was last modified 23:21, 14 May 2008.

From Forum Nokia Wiki

Compatibility: Web Runtime in S60 3rd Edition, Feature Pack 2

How to resolve the problem of both of the div were shown But we just want to show only the first div

Problem

Most of the time, we use two div in order to change the view showed to user. But I found an unpleasant phenomena when use two div in the below way. It would appear both of the view in a first flash for a very short time. And then the second view was hide.

Code in html caused the problem

In the main html file: Add this to the second view: style="visibility:hidden;"

<div id="firstView">
 
	<TABLE>
		
		<TR>
		<TD>
			Some things.
				
		</TD>
		</TR>
		
		<TR>
		<TD>
	          more things.
		</TD>
		</TR>
	</TABLE>
 
</div>
 
 
<div id=secondView style="visibility:hidden;">
 
<TABLE>
 
	<TABLE>
		
		<TR>
		<TD>
			Some things in the second view.
				
		</TD>
		</TR>
		
		<TR>
		<TD>
	                   many more rows in the second view.
		</TD>
		</TR>
		
		<TR>
		<TD>
	                   many more rows in the second view.
		</TD>
		</TR>
		
		<TR>
		<TD>
	                   many more rows in the second view.
		</TD>
		</TR>
		
		<TR>
		<TD>
	                   many more rows in the second view.
		</TD>
		</TR>
		
		<TR>
		<TD>
	                   many more rows in the second view.
		</TD>
		</TR>
		<TR>
		<TD>
	                   many more rows in the second view.
		</TD>
		</TR>
		<TR>
		<TD>
	                   many more rows in the second view.
		</TD>
		</TR>
		
	</TABLE>
 
</div>

Code in js file caused the problem

In the js file, we use this method to change the view:

document.getElementById("secondView").style.display = "none";
document.getElementById("firstView").style.display = "block";

Solution

In order to avoid the shown of two div in the same time for very short time. We could use below method to just show the first view. The second view not be shown at all.

Code in html could solve the problem

In the main html file:

<div id="firstView">
 
	<TABLE>
		
		<TR>
		<TD>
			Some things.
				
		</TD>
		</TR>
		
		<TR>
		<TD>
	          more things.
		</TD>
		</TR>
	</TABLE>
 
</div>
 
 
<div id=secondView >
 
<TABLE>
 
	<TABLE>
		
		<TR>
		<TD>
			Some things in the second view.
				
		</TD>
		</TR>
		
		<TR>
		<TD>
	                   many more rows in the second view.
		</TD>
		</TR>
		
		<TR>
		<TD>
	                   many more rows in the second view.
		</TD>
		</TR>
		
		<TR>
		<TD>
	                   many more rows in the second view.
		</TD>
		</TR>
		
		<TR>
		<TD>
	                   many more rows in the second view.
		</TD>
		</TR>
		
		<TR>
		<TD>
	                   many more rows in the second view.
		</TD>
		</TR>
		<TR>
		<TD>
	                   many more rows in the second view.
		</TD>
		</TR>
		<TR>
		<TD>
	                   many more rows in the second view.
		</TD>
		</TR>
		
	</TABLE>
 
</div>

Code in js file could solve the problem

In the js file, we use this method to change the view:

function showFirstView()
{
	
	document.getElementById("sitesView").style.display = "none";
	document.getElementById("tickerView").style.display = "block";
}
 
 
function showSecondView(){
 
	document.getElementById("sitesView").style.visibility="visible";
	
	window.widget.prepareForTransition("fade");
	
	document.getElementById("tickerView").style.display = "none";
	document.getElementById("sitesView").style.display = "block";
	
	setTimeout("window.widget.performTransition();", 1);
	
	menu.clear();
	
}