Header and Footer in CSS #590

krono-i2 · 2022-01-04T10:53:09Z

krono-i2
Jan 4, 2022

Hi guys!
First, really thanks for your work! Sozi is wonderful!
I mainly use Sozi for academic presentations (e.g., conferences) and my goal is to realize an svg poster containing all of my research results, and present them using Sozi tools.
I know it is possible to apply an header and/or a footer at frames using levels, but this implies to modify my poster.
Is it possible to insert header and/or footer on all of the frames (or on some of them) using CSS and HTML stuffs?
Thanks for help.

Ivan

aumouvantsillage · 2022-01-04T16:32:54Z

aumouvantsillage
Jan 4, 2022
Maintainer

Hi @krono86

The output of Sozi is a standalone document that assumes it can take all the available space in the browser window. So unless you manage your header and footer as a dedicated layer in the presentation itself, Sozi will not help you achieve what you want.

I thinks that the simplest solution would be to create your own HTML document and embed your presentation in an iframe. Then you can add custom before and after the presentation area.

0 replies

krono-i2 · 2022-01-05T13:50:49Z

krono-i2
Jan 5, 2022
Author

Ok, I'm implementing your suffested solution (without presenter view at the moment).
I've truble with importing the frame name into the header.
Let me show my code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style/main.css">
<title>Presentation Title</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<body>

<div class="header" id="frame-title">Loading&hellip;</div>

<div class="payload">
<iframe src="this-is-not-a-slideshow.sozi.html" width="100%" height="100%" frameBorder="0">
    My Sozi presentation should play here.
</iframe>
</div>

<script>
window.addEventListener("load", function () {
        document.querySelector("iframe").focus();
		var frame = document.querySelector("iframe");
		var player = frame.contentWindow.sozi.player;
		document.getElementById("frame-title").innerHTML = player.currentFrame.title;
		player.addListener("frameChange", function () {
            document.getElementById("frame-title").innerHTML = player.currentFrame.title;
        });
}, false);
</script>
</body>
</html>

With this code, I obtain the error:

Uncaught DOMException: Permission denied to access property "sozi" on cross-origin object index.html:23
    <anonymous> file:///Path/To/File/index.html:23
    (Asinc.: EventListener.handleEvent)
    <anonymous> file:///Path/To/File/index.html:20

What's wrong?
Thanks for help.

Ivan

3 replies

aumouvantsillage Jan 6, 2022
Maintainer

Here is a minimal example that updates the enclosing HTML on frame change:

<!DOCTYPE html>
<meta charset="utf-8">

<h1>The current frame title</h1>

<iframe src="my-presentation.sozi.html" width="800px" height="600px">My Sozi presentation should play here.</iframe>

<script type="text/javascript">
    window.addEventListener("message", evt => {
        switch (evt.data.name) {
            case "loaded":
                evt.source.postMessage({name: "notifyOnFrameChange"}, "*");
                break;

            case "frameChange":
                document.querySelector("h1").innerHTML = evt.data.title;
                break;
        }
    });
</script>

krono-i2 Jan 7, 2022
Author

It works like a charm!
What if I want to project my own presentation (including header/footer) using the presenter view?
No problem if the header and footer are projected only on the output window.
Thanks a lot.

Ivan

aumouvantsillage Jan 7, 2022
Maintainer

I think it will be difficult to use your custom HTML with the presenter.
The presenter window expects to communicate with the presentation window directly. It will not work if the presentation is embedded in an iframe.

aumouvantsillage · 2022-01-05T14:52:53Z

aumouvantsillage
Jan 5, 2022
Maintainer

I think that this solution works only if your web page and your presentation are accessed through a web server.
It used to work for local files, but web browsers have changed their security rules: now a local web page embedded in another local web page is treated as a "cross-origin object".

There is another solution that is already used by the presenter console.
I will update the documentation to use this solution instead.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Header and Footer in CSS #590

{{title}}

Replies: 3 comments 3 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Header and Footer in CSS #590

krono-i2 Jan 4, 2022

Replies: 3 comments · 3 replies

aumouvantsillage Jan 4, 2022 Maintainer

krono-i2 Jan 5, 2022 Author

aumouvantsillage Jan 6, 2022 Maintainer

krono-i2 Jan 7, 2022 Author

aumouvantsillage Jan 7, 2022 Maintainer

aumouvantsillage Jan 5, 2022 Maintainer

krono-i2
Jan 4, 2022

Replies: 3 comments 3 replies

aumouvantsillage
Jan 4, 2022
Maintainer

krono-i2
Jan 5, 2022
Author

aumouvantsillage Jan 6, 2022
Maintainer

krono-i2 Jan 7, 2022
Author

aumouvantsillage Jan 7, 2022
Maintainer

aumouvantsillage
Jan 5, 2022
Maintainer