×
Namespaces

Variants
Actions

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

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Compatibility
Platform(s):
Symbian
Article
Created: fengforky@gmail.com (14 May 2008)
Last edited: hamishwillee (26 Jul 2012)

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

Contents

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();
 
}
This page was last modified on 26 July 2012, at 05:40.
50 page views in the last 30 days.