Show a loading screen

Put your questions here on how to do things in ProtoShare.
timssewell
Posts: 29
Joined: Mon Aug 19, 2013 8:40 am

Show a loading screen

Postby timssewell » Tue Aug 20, 2013 1:28 pm

Hi

I want a user to be able to click on a link and then a mask to appear with a loading/searching animation that appears for a period of time. Is there any way of doing this?

Thanks

Tim

Josh Kristof
Posts: 525
Joined: Tue Mar 31, 2009 3:40 pm

Re: Show a loading screen

Postby Josh Kristof » Tue Aug 20, 2013 2:17 pm

Tim,

You can make interstitial pages or timed states by using an advanced HTML component.

This example starts running when a page is loaded. It waits for a delay, 5 seconds in this case, and then redirects you to another page. You'd replace 146 with the id of your page, which you can get by right-clicking your page in the site map and choosing Get URL.

The commented line shows how you could change this to activate a state. You'd want to replace 100 with the id of your state and replace 0 with the index of your state value. 0 is the first value in the state.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
<!--
function delayer(){
var frame = window.parent.frameElement ? window.parent.frameElement : window.frameElement;
if (!frame.s9_workspace) {
window.parent.location = "/wa/page?oid=146";
//window.parent.site9.PageStateMgr.getState(100).setValue(0);
}
}
//-->
</script>
<title></title>
</head>
<body onLoad="setTimeout('delayer()', 5000)" style="background:transparent;">
</body>
</html>
Josh Kristof
customerservice@protoshare.com
Site9, Inc. / Customer Support
blog.protoshare.com | twitter.com/protoshare

timssewell
Posts: 29
Joined: Mon Aug 19, 2013 8:40 am

Re: Show a loading screen

Postby timssewell » Wed Aug 21, 2013 6:21 am

brilliant, thanks that works for one of my situations.

My other situation is that I Want to click a button, have a container appear with this loading screen and then for it to change the state after a period of time. This work to a degree but the delay on the html page is triggered as soon as the page loads, where as what I want it to do is to sit in the background and every time I press a button the html element appears and the delay starts counting, and then is reset ready for the next click.

Thanks

Tim

Nick Jennings
Posts: 165
Joined: Mon May 14, 2012 12:06 pm

Re: Show a loading screen

Postby Nick Jennings » Wed Aug 21, 2013 11:39 am

Hi,

The following code should be sufficient for what you are looking to do:

Code: Select all

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            var running;
            window.parent.site9.PageStateMgr.getState(4331).addListener(
                function( event ) {
                    if ( event.to == 1 && !running ) {
                        running = true;
                        setTimeout(function() {
                            window.parent.site9.PageStateMgr.getState(4331).setValue(0);
                            running = false;
                        }, 5000);
                    }
                }
            , this )
        </script>
        <meta charset="UTF-8"><title></title></head>
    <body>
    </body>
</html>
This will not work properly in Editor mode, but you should have no trouble using it in Review or Run mode.

If you have any questions, please let us know.
Nick Jennings
customerservice@protoshare.com
Site9, Inc. / Customer Support
blog.protoshare.com | twitter.com/protoshare

timssewell
Posts: 29
Joined: Mon Aug 19, 2013 8:40 am

Re: Show a loading screen

Postby timssewell » Wed Aug 21, 2013 12:00 pm

brilliant, thank you very much.


Return to “How Do I...”

Who is online

Users browsing this forum: No registered users and 3 guests

cron