×

Discussion Board

Results 1 to 13 of 13
  1. #1
    Registered User
    Join Date
    Aug 2011
    Posts
    10

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

    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>

  2. #2
    Nokia Developer Expert
    Join Date
    Jun 2008
    Location
    Tampere
    Posts
    833

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

    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

  3. #3
    Registered User
    Join Date
    Aug 2011
    Posts
    10

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

    Quote Originally Posted by isalento View Post
    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.

  4. #4
    Registered User
    Join Date
    Aug 2011
    Posts
    10

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

    Quote Originally Posted by isalento View Post
    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;
    }

  5. #5
    Nokia Developer Expert
    Join Date
    Jun 2008
    Location
    Tampere
    Posts
    833

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

    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

  6. #6
    Registered User
    Join Date
    Oct 2011
    Posts
    34

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

    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?

  7. #7
    Nokia Developer Expert
    Join Date
    Jun 2008
    Location
    Tampere
    Posts
    833

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

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

    Br,
    Ilkka

  8. #8
    Registered User
    Join Date
    Aug 2011
    Posts
    10

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

    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>

  9. #9
    Nokia Developer Expert
    Join Date
    Jun 2008
    Location
    Tampere
    Posts
    833

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

    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

  10. #10
    Registered User
    Join Date
    Aug 2011
    Posts
    10

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

    Quote Originally Posted by isalento View Post
    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.

  11. #11
    Nokia Developer Expert
    Join Date
    Jun 2008
    Location
    Tampere
    Posts
    833

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

    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

  12. #12
    Registered User
    Join Date
    Aug 2011
    Posts
    10

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

    Quote Originally Posted by isalento View Post
    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.

  13. #13
    Nokia Developer Champion
    Join Date
    Feb 2011
    Location
    bucharest
    Posts
    151

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

    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...

Similar Threads

  1. white space-string prob
    By jselvakumar26071988 in forum Mobile Java General
    Replies: 9
    Last Post: 2008-12-16, 12:55
  2. Replies: 2
    Last Post: 2006-11-15, 17:05
  3. Extra not wanted white space in XHTML MP ??!
    By mohsleem in forum Browsing and Mark-ups
    Replies: 1
    Last Post: 2006-04-27, 09:15

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×