0

I have a small digital signage web application where all the pages shown is created in HTML and stored in a database.

I need to make some sort of player that will display all my slides. I have a URL to call that gives me the next page to show: http://example.com/PlayNext This will return the next slide in the given context.

Right now i just have a timeout that will reload the page every 10 seconds. I want to make a much more smooth experience with the player, and load everything from client, without postbacks to server.

So what im thinking is to load the next page in an off screen tag and when thats loaded, slid it into view, and then start loading the next slide off screen. When the show duration has passed, then slide the next page into view and start loading the next one, etc.....

What im wondering is how actually to do this off screen loading thing. I know i can set overflow to be hidden and just place it 3000 px off screen. But how do i make the continuous flow that will allow me to show all the pages i want ?

And a side note - how do i clean up the divs when they no longer should be in use? so that my browser isnt leaking memory?

edit This is the current "player", it is ASP.NET Razor syntax to show the next page url etc. this is what i want changed to load it in an off screen div:

    <script type="text/javascript">  
    var duration = @ViewBag.Duration;  
    var nextPage = "@ViewBag.Address";
    window.setTimeout(reloadbrowser, duration);    

    function reloadbrowser()
    {        
        var path = $.ajax({
        url: "/page/Ping", 
        success: success,
        error: reloadbrowser,
        timeout:5000
        });   
    }

    function success()
    {
      window.location.href = nextPage;
    }
    </script>
</head>
    <body style="height:100%">@Html.Raw(ViewBag.BodyXHTML)</body>   
</html>
Brian Hvarregaard
  • 4,081
  • 6
  • 41
  • 77
  • Perhaps something like this? http://www.troywolf.com/articles/client/siteshow/ – codedude Jul 21 '15 at 13:05
  • Can you show some sample of what you have worked with – codefreaK Jul 21 '15 at 13:07
  • http://jsfiddle.net/5rLDD/ Are trying to do something like this – codefreaK Jul 21 '15 at 13:08
  • 1
    If it was me would load first section per url and make ajax request to store the rest in array or object..then do whatever you need to to switch panes using that stored data. There are lots and lots of content sliders you could use to do this – charlietfl Jul 21 '15 at 13:11
  • Is this what you are looking to do? https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/ – Crob Jul 21 '15 at 13:13
  • @Crob - not really but close. In your example the content is given. I need to load it from the server each time and only one at the time, since a user may change the sequencing of the pages, so I cant cache the pages but need to load the next one each time. – Brian Hvarregaard Jul 21 '15 at 13:15
  • http://jsfiddle.net/5rLDD/2/ Is this what you are looking for – codefreaK Jul 21 '15 at 13:16
  • @Brian - That's just an example. I would assume you could use jquery's load()/ajax with the example setInterval() function they provided to pull your content dynamically instead of statically – Crob Jul 21 '15 at 13:36

1 Answers1

1

if the url http://example.com/PlayNext is a url which retrieves the html from the database then these are the steps you should take:

1. you need to get the html from the database using ajax()

2. load that html inside an iframe

3. position that iframe outside of viewport (position:absolute; left:-100%;)

4. after the iframe is loaded, slide it inside the viewport and the old one outside and then remove() the old one

so you'd come up with something like this:

$(function(){
    function getData(){
        clearTimeout(window.theInterval);
        $.ajax({
            url: "http://example.com/PlayNext",
            type: "POST",
            timeout:5000,
            success : function (databack) {
                var iframe=$('<iframe>'+databack+'<iframe/>', {
                    style:'position:absolute; left:-100%;',
                    load:function(){
                        var that=this;
                        $(this).animate({
                            left:0
                            },500);
                        $('iframe').not(this).animate({
                            left:'-100%'
                            },500,function(){
                                $('iframe').not(that).remove();
                            });
                        }
                    });
                $('body').append(iframe); 
                window.theInterval=setTimeout(function(){
                    getData();
                    },10000);
                },
            error:function(jqXHR, status, message){
                getData();
                }
            });
    }
    getData();
});

NOTE: you must build on this answer to match your project

why use an iframe and not a div

I'm gonna quote some benefits of using an iframe for loading websites inside another one from this answer

1) Iframes implement the cross domain origin policy (images, scripts, and styles do not). This can be useful for pulling in sites / content from other domain names relatively safely. Basically, this allows the advantage of being able to visually show data from other domains without letting them stomp all over your page with unlimited access (like something like JSONP would be able to do).

and the next thing is:

2) You can send multiple types of resources from within an iframe, not just certain mime-types (you're relatively limited to application/javascript, application/x-javascript, text/css, text/xml, image/png, image/jpeg, image/gif with scripts, XHR, images, and sources). For instance, if I want to show you a PDF, I can open an iframe and let the Adobe Reader plugin show you that file. Additionally, in the same domain, if I want to pipeline a script, style, and image all together (inline on the page, image would have to be data URI), I can accomplish this with an iframe (and if it's in the same domain, port, and protocol I can access it with JavaScript as well).

Community
  • 1
  • 1
Amin Jafari
  • 7,157
  • 2
  • 18
  • 43
  • Thanks - why an iframe and not load the HTML into a div? – Brian Hvarregaard Jul 21 '15 at 13:38
  • because you have more control over an iframe for dynamically loaded html, eg trying to add the loaded `script` or `style` tags to the dynamically added html – Amin Jafari Jul 21 '15 at 13:40
  • @Amin I'm confused by that. With iframes you lose control to style/script it unless you style/script it withing the loaded iframe document itself. Maybe I'm misunderstanding something. – Crob Jul 21 '15 at 13:48
  • OK - that will also open for me to do more advanced JS CSS stuff in the future – Brian Hvarregaard Jul 21 '15 at 13:54
  • @Crob please check the **why use an iframe and not a div** section of the answer – Amin Jafari Jul 21 '15 at 14:06
  • @Amin Thanks for that explanation. I definitely get why to use them and in some cases they are a life saver. Although in my experience they are awkward to work with and can often create layout issues that take some time to work out. Also there are the navigation issues. I think this answer sums up my approach to them...use them only when you need to http://stackoverflow.com/questions/362730/are-iframes-considered-bad-practice – Crob Jul 21 '15 at 14:20
  • I have a slide type that just is an embedded youtube, for showing a video. I would like to be able to preload the next slide with the youtube video and then being able to invoke a "play" method that would play the video. How is this achievable with an iframe? The same goes with sliding texts etc. This wasnt a problem in the old setup, but in this setup i need to "start" the slide when it slides into view. Any idea on how to do this? Sliding text are made with CSS animations and transitions – Brian Hvarregaard Jul 21 '15 at 17:26
  • @Amin: I got something working now, but the animation part is still buggin me. I never get into the load event and place it out on the left side and then slide it in, i never get a breakpoint in the load (or the style for that matter). It seems like those properties does not work and never executed. Why is that? – Brian Hvarregaard Jul 21 '15 at 21:21
  • you need to add the style and script tags to the iframe, take a look at these question => http://stackoverflow.com/questions/3935398/how-can-i-load-scripts-into-an-iframe – Amin Jafari Jul 22 '15 at 03:31