How to avoid white space/screen in WRT when loaded?

**hrr** · 2011-11-22, 02:05

I have a problem with my WRT widget. When open from the device, it is loaded with a white space/screen before enter the flash.swf

I have added a css like this : background: url(splash.png) no-repeat; but it doesn't work.

Where shall I put the splash image ? If can provide with sample code. I am newbie into javascript.

Does anyone experience this problem before ?

Below is my sample html code.

<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=360,user-scalable=no" />
<link rel="stylesheet" href="style/style.css" type="text/css"/>
<script tyce="text/javascript" src="script/default.js"></script>

<script type="text/javascript">
function setPortrait() {

if(widget.isrotationsupported) {

widget.setDisplayPortrait();

}
};

window.onresize = function() {
setPortrait();
}

</script>

</head>

<body onload="init();">

<div id="fullscreen">

<div style="margin:-1px; width:360px; height:640px">

<div class="flash">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="360" height="640" id="MyFlash" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="happyBirthday.swf" />
<param name="loop" value="true" />
<param name="menu" value="true" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="bgcolor" value="#ffffff" />
<embed src="happyBirthday.swf" loop="false" menu="false" quality="high" wmode="opaque" bgcolor="#ffffff" width="360" height="640" name="Finish" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflash"/>
</object>
</div>
</div>
</div>
</body>

**isalento** · 2011-11-22, 08:06

Hello and welcome to forum!

There are couple of tricks to try:

1) Not exactly splash screen, but try setting body background color something that matches your content, could be an easy way to get rid of the white screen.

2) Putting flash lite content to a div, with display: none, and use another div for splash screen. Then toggle the splash screen visibility in JavaScript after some time.

Code:

function init(){
	setTimeout(function(){
		document.getElementById("splash").style.display ="none";
		document.getElementById("fullscreen").style.display ="block";
	}, 2000);
}

Br,
Ilkka

**hrr** · 2011-11-23, 08:03

Originally Posted by isalento

Hello and welcome to forum!

There are couple of tricks to try:

1) Not exactly splash screen, but try setting body background color something that matches your content, could be an easy way to get rid of the white screen.

2) Putting flash lite content to a div, with display: none, and use another div for splash screen. Then toggle the splash screen visibility in JavaScript after some time.

Code:

function init(){
	setTimeout(function(){
		document.getElementById("splash").style.display ="none";
		document.getElementById("fullscreen").style.display ="block";
	}, 2000);
}

Br,
Ilkka

OIC. I will try this method.

Thank you very much for the help. I will let you know if I'm successful.

**hrr** · 2011-11-23, 10:47

Originally Posted by isalento

Hello and welcome to forum!

There are couple of tricks to try:

1) Not exactly splash screen, but try setting body background color something that matches your content, could be an easy way to get rid of the white screen.

2) Putting flash lite content to a div, with display: none, and use another div for splash screen. Then toggle the splash screen visibility in JavaScript after some time.

Code:

function init(){
	setTimeout(function(){
		document.getElementById("splash").style.display ="none";
		document.getElementById("fullscreen").style.display ="block";
	}, 2000);
}

Br,
Ilkka

I have been trying your methhod but the splash screen only appear when I exit the application. I keep on thinking what's wrong.

Here is my Javascript code :

function init(){

setTimeout(function(){
document.getElementById("showSplash").style.display ="none";
document.getElementById("showFullScreenView").style.display ="block";
}, 2000);
return false;
}

function showSplash(){
document.getElementById('fullscreen').style.display = "none";
document.getElementById('splash').style.display = "block";
}

function showFullScreenView(){
document.getElementById('splash').style.display = "none";
document.getElementById('fullscreen').style.display = "block";
}

Here is my HTML code :

<body onload="init();">

<div id="splash">
</div>

<div id="fullscreen">
</div>

</body>

I also put a splash image at the CSS body:

body{
width:100%;
height: 100%;
margin: 0;
padding: 0;
background-image: url('splash.png') no-repeat;
}

**isalento** · 2011-11-23, 12:46

Hi,

You might want to put splash.png as background image of splash -div instead of body. Then make sure that splash div covers whole screen.
Then in init() you can modify setTimeout to call showFullScreenView function after the timeout. Last but not least make sure that fullscreen-div has display:none as default style.
Hope these help

Br,
Ilkka

**fonurr** · 2011-12-05, 07:52

My widget start with a white screen and my starting background image is shown after that a few seconds. It must be because html elements are loaded at last (after javascript files vs.), is there a way to load the image at the exact start of the widget?

**isalento** · 2011-12-05, 09:12

In that case you might be interested in dynamic script tag injection:
http://www.developer.nokia.com/Commu..._splash_screen

Br,
Ilkka

**hrr** · 2011-12-06, 08:40

Hi,

I had tried my best to modify here & there but no avail.

When I put display to none in the body, it doesn't display the fullscreen after that. When I quit the WRT, it will load the splash screen and then quit.

Here is my js code :
function init(){

setTimeout(function(){
document.getElementById("showSplash").style.display ="none";
document.getElementById("showFullScreenView").style.display ="block";
},1000);

showFullScreenView();

}

function showSplash(){
document.getElementById('fullscreen').style.display = "none";
document.getElementById('splash').style.display ="block";
}

function showFullScreenView(){
document.getElementById('splash').style.display = "none";
document.getElementById('fullscreen').style.display = "block";

}

Here is my body html

<body onload="init();">

<div id="splash">
<div style="margin:0; background-color:ffffff; display:none; width:362px; height:642px">
<img id="splashimage" alt"splash" src="splash.png"/>
</div>

<div id="fullscreen">

</div>
</div>
</div>

</body>

**isalento** · 2011-12-07, 10:05

Hi,

In body.html the splash div contains the fullscreen div. That could be changed and see if it works then.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Basic Symbian Web Runtime Widget</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		
		<style type="text/css">			
		body{
			width:100%;
			height: 100%;
			background-color:#f3f3d1;	   		
			margin: 0;
 			padding: 0;
		}
	
		#fsWrapper{
	   		width: 100%;
 	   		overflow: hidden;
 	   		position: absolute;
	   		left: 0;
	   		top: 0;
	   		margin: 0;
	   		padding: 0;
		}
		
		#splash{
			width:100%;
			height:100%			
		}
		
		#fullscreen{
			display:none;
		}
					
     </style>
        <script type="text/javascript">
            function init(){            
                setTimeout(showFullScreenView, 2000);
				
		if(widget.isrotationsupported) {
			widget.setDisplayPortrait();
		}       
            }
                                   
            function showFullScreenView(){
                document.getElementById('splash').style.display = "none";
                document.getElementById('fullscreen').style.display = "block";                
            }
        </script>
    </head>
    <body onload="init();">
   	<div id="fsWrapper">
   		
	    <div id="splash">        
	       <img id="splashimage" alt="splash" src="splash.png"/>      
		</div>
		
	    <div id="fullscreen">
	            Fullscreen
	    </div>
	</div>        
</body>
</html>

Br,
Ilkka

**hrr** · 2011-12-08, 11:13

Originally Posted by isalento

Hi,

In body.html the splash div contains the fullscreen div. That could be changed and see if it works then.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Basic Symbian Web Runtime Widget</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		
		<style type="text/css">			
		body{
			width:100%;
			height: 100%;
			background-color:#f3f3d1;	   		
			margin: 0;
 			padding: 0;
		}
	
		#fsWrapper{
	   		width: 100%;
 	   		overflow: hidden;
 	   		position: absolute;
	   		left: 0;
	   		top: 0;
	   		margin: 0;
	   		padding: 0;
		}
		
		#splash{
			width:100%;
			height:100%			
		}
		
		#fullscreen{
			display:none;
		}
					
     </style>
        <script type="text/javascript">
            function init(){            
                setTimeout(showFullScreenView, 2000);
				
		if(widget.isrotationsupported) {
			widget.setDisplayPortrait();
		}       
            }
                                   
            function showFullScreenView(){
                document.getElementById('splash').style.display = "none";
                document.getElementById('fullscreen').style.display = "block";                
            }
        </script>
    </head>
    <body onload="init();">
   	<div id="fsWrapper">
   		
	    <div id="splash">        
	       <img id="splashimage" alt="splash" src="splash.png"/>      
		</div>
		
	    <div id="fullscreen">
	            Fullscreen
	    </div>
	</div>        
</body>
</html>

Br,
Ilkka

Hi,

I have experimented your revised code but my fullscreen disappear, weird. I tried to change the fullscreen to block same thing happen. After loading the splash screen and then it goes white without fullscreen display. I'm trying to get this done.

**isalento** · 2011-12-08, 11:34

Hi,

If you want, I could take a look at your widget. You can send a download URL in a private message to me.

Br,
Ilkka

**hrr** · 2011-12-08, 16:16

Originally Posted by isalento

Hi,

If you want, I could take a look at your widget. You can send a download URL in a private message to me.

Br,
Ilkka

I've just sent you a private message with link.

**shpe** · 2011-12-12, 08:52

yes I observe this problem too...

It doesn't work with css (div with background and in that div the .swf - the white of the loading swf is over and not transparent to see background div)

the best solution is how isalento said... but that function should be called from first frame of the .swf just to be sure that timeout is not too long or too short...

Discussion Board

Thread: How to avoid white space/screen in WRT when loaded?

Thread Tools

Search Thread

Rate This Thread

Display

Similar Threads

white space-string prob

Missing white space after #define AKN_EDITOR_EXTENSIONS

Extra not wanted white space in XHTML MP ??!

Posting Permissions