addEventListener issue

[KrysD]

Hi @iOiurson,
I make a pres with reveal.js framework.
At the end of the pres i put an <iframe> to embeded a dashboard.

To make sure the <iframe> take the full size of the slide i put several code :

• Css style for fullscreen state

/*********************************************
 * OTHER STATES
 *********************************************/

.fullscreen .state-background {
  width: 100%;
  height: 100%;
}

.fullscreen .reveal .slides {
  margin: 0px;
  width: 100%;
  height: 100%;
  max-width: 100%;
  left: 0px;
  right: 0px;
  top:0px;
  bottom: 0px;
}

.fullscreen .reveal .slides > section {
  position: absolute;
  width: 100%;
  height: 100%;
  min-height: 100%;
  text-align: left;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin:0px;
  padding:0px;
  padding-top: 0px;
}

.fullscreen .reveal .slides > section > section {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  min-height: 100%;
  margin: 0px;
  text-align: left;
  padding:0px;
  padding-top: 0px;
}

• js event at the end of the pres

Reveal.addEventListener('fullscreen',function(event){
    Reveal.configure({
        width: '100%',
        height: '100%'
    });
});

It work "correctly" (it does not take the full page width...) but when i change slide all the other slides have the size changed because of the cofigure event.

I try to add Reveal.configure.currentSlide but it doesn't work.

So is it possible to set the width and height only for this slide and conserve the initial configuration for the other slides ?

Or is their a way to put <iframe> inside the background and make it always interactive?

[bleucitron]

I'm not sure I understand correctly what you are trying to do, but:

• if you want to select only the iframe you need to be careful with your CSS selectors. You can use something like

iframe {
    width: 100%; height: 100%;
}

From what i can read in your snippet, it seems you are selecting the sections, which is probably why all sections in your prez are modified. You can also use the id attribute (not recommended in general, but sometimes necessary)

• Be careful with 100%, it means "100% of the width of the parent" (or height depending on the use case). It does not mean "100% of the viewport". For viewport height or width you can always use stuff like 100vh or 100w You can find more info here.
• I'm not enough familiar with Reveal and the configure method, i will try to have a look
• I don't see what you mean by 'put an <iframe> inside the background, but it seems something weird to do.

Would you have your code somewhere on Github so i can have a look ?

[KrysD]

I dont have issue to put the iframe dimension to 100% of the parent. But to put the parent <section> of the slide to 100% of the viewport.

I will post a reproductible example to be clearer.

[bleucitron]

I would advise to add an id attribute to the corresponding section, and use

section[id='your-id'] {
    whatever: whatever
}

[KrysD]

I put a reproductible example on my repo.
You can see what happen Here.

If you go to the second slide the site web is greater than other slides, but if you go back to the first slide the size is changed, and dont know how to make it back to the initiale state

[bleucitron]

Okay, i've looked into it a bit.

Using Reveal.configure() seems to apply a new configuration to your entire presentation, not only the slide you're focusing on. This implies that you would need to unapply the 'fullscreen' configuration (or apply a 'regular screen' configuration) when changing back the slide.

Other option, it seems you can indeed use an iframe as background:
hakimel/reveal.js#1029

<section data-background-iframe="http://weareants.fr"
</section>

Careful though, i think some of the interactions are disabled when using the iframe as a background.

I'm not a Reveal.js expert, so i might be forgetting some stuff.

[KrysD]

Yes i had seen the use of the background but i need to use all the interactions.

Otherwise if i found the intial configuration width and height of the slide i can add another eventListener which look when i'm not on the "fullscreen" slide and modify the dim in consequences.

Reveal.addEventListener('notFullscreen',function(evt){
                Reveal.configure({
                    width: initial width,
                    height: initial height
                });
            });

[bleucitron]

Yes, i believe this is the way to go.