How to auto-scroll a webpage?

Get Help
1

Dear Xibo members, Xibo team,

I would like to scroll down the following website :
http://www.flightstats.com/go/weblet?guid=e0b4268329e1b884:6973da7e:14b50a6af6d:-18d3&weblet=status&action=AirportFlightStatus&airportCode=CDG&airportQueryType=0

I could see that some CSS/HTML codes are used to auto-scroll a webpage, for instance :
http://www.quackit.com/html/codes/scrolling_text.cfm
http://www.brownielocks.com/autoscroll1.html

I am sure there is a way to do so (maybe the Html to embedded) but I am not expert. Therefore, please could you help me for this ?
Thank you very much for your help !

For information :I use Xibo cloud and CMS.

2

Sounds similar to the request here: Scroll Homepage in Xibo

I’ve experimented with scrolling a webpage, and eventually got it working reasonably well for my own webpage. However, as soon as I set the target to someone else’s webpage (i.e. a news site’s), a problem emerged - the target webpage’s height changed throughout the day, as the owner added and removed content. In your example specifically, I suspect this will be a big problem. The number of flights shown on the page will unlikely stay constant over time.

3

I have found some javascripts and codes such as to auto-scroll the web page, but none of these codes work.
I am loosing hope. People tell that it is due to the fact that the server which contain the webpage should contain the scrpit.
But as this server is not mine (because I want to scroll an external webpage), I can’t add this scrpit and then I can’t auto-scroll the page.

This request is a basic use of embedded page. Please help !

EDIT :
Please see my embedded test :
HTML to Embed :

<!DOCTYPE html>
<html>
<head>
<MARQUEE DIRECTION="down">
<meta http-equiv="refresh"content="5;URL=http://www.flightstats.com/go/weblet?guid=e0b4268329e1b884:6973da7e:14b50a6af6d:-18d3&weblet=status&action=AirportFlightStatus&airportCode=CDG&airportQueryType=0">
</MARQUEE>
</head>
<body onLoad="pageScroll()">
</body>
<script type="text/javascript"></script>
</html>

Custom Style Sheets :

< style type=“text/css”>

< /style>

HEAD content to Embed (including script tags) :

< script type=“text/javascript”>
function pageScroll() {
window.scrollBy(0,50); // horizontal and vertical scroll increments
scrolldelay = setTimeout(‘pageScroll()’,100); // scrolls every 100 milliseconds
}
< /script>

4

You need to understand that you can’t take direct action on someone else’s webpage - image the security implications of that (you could host a banking page and capture user input, etc)

Therefore the options available for scrolling an embedded webpage are limited to what you can do in your own parent page - i.e. you embed their page in an iframe with a really big height, and then use JavaScript to scroll your own page.

This is not a function which Xibo supports and will be very difficult to get right if your page gets longer and shorter (as RL said).

Your embed code wont do anything because the first time it refreshes it will be on a different page and your marquee will be gone.

5

Thank you for your quick feedback. And sorry for my bad english, I need to understand your sentence :

Therefore the options available for scrolling an embedded webpage are limited to what you can do in your own parent page - i.e. you embed their page in an iframe with a really big height, and then use JavaScript to scroll your own page.

Does it mean I can scroll my own page ? I understood by the end of your message that it shouldn’t work in Xibo (just impossible), but I would like to confirm. Sorry to insist.

6

You can use JavaScript to scroll your own page - so you embed your target page in an <iframe> with a big height, and then you use JavaScript to scroll your page - not the contents of the <iframe>

7

Hello Dan, I would not want to disturb you anymore but since your reply, I could increase the size of the region (vertically) but I couldn’t succeed to scroll my own page.
Please, could you show me what should I put in each field (HTML to Embed, Custom Style Sheets, HEAD content to Embed) ?
The target page is :
http://www.flightstats.com/go/weblet?guid=e0b4268329e1b884:6973da7e:14b50a6af6d:-18d3&weblet=status&action=AirportFlightStatus&airportCode=CDG&airportQueryType=0

Sorry for disturbing once again but I am sure that a solution it can help other people. Thank you so much.

8

HTML
<iframe src="http://www.flightstats.com/go/weblet?guid=e0b4268329e1b884:6973da7e:14b50a6af6d:-18d3&weblet=status&action=AirportFlightStatus&airportCode=CDG&airportQueryType=0"></iframe>

CSS
iframe { width: 100%; height: 9200px; border: 0; }

JS
$(window).load(function() { $("html, body").animate({ scrollTop: $(document).height() }, 80000); });

Something like that should work

9

Thank you very much for your help echan. We are progressing somehow.
Your code shows a small box on top left side with scroll bars and nothing happen. I have tried to adjust the code. I can have now a long page that I can scroll with my mouse but nothing scrolls automatically. Please, find my updates below and tell me what you think :

HTML

< iframe src=“FlightStats - Global Flight Status & Tracker, Airport Weather and Delays” id=‘inneriframe’>< /iframe>

CSS

< style type=“text/css”>

< /style>

HEAD

< style>
#inneriframe
{ width: 100%; height: 9200px; border: 0; }

$(window).load(function() {
$(“html, body”).animate({ scrollTop: $(document).height() }, 80000);
});
< /style>

10

The function has to be inside script tags, not style tags. Also, you may want to specify the “linear” parameter.

HEAD

< script type=“text/javascript” >

$(window).load(function()
{
$(“html, body”).animate({ scrollTop: $(document).height() }, 80000, “linear”);
});

function EmbedInit()
{
// Init will be called when this page is loaded in the client.
return;
}
< /script >

1 Like
11

HTML to Embed —> any HTML codes go here
Custom Style Sheets —> any CSS style codes go here
HEAD content to Embed —> any JS codes go here

So, the CSS should be placed inside the <style> tag in Custom Style Sheets field.

<style type="text/css">
iframe { width: 100%; height: 9200px; border: 0; }
</style>

1 Like