Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

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

From 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 02:40.
71 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×