32

I have the following JSFiddle, http://jsfiddle.net/brantolsen/ejUWt/. It does the simple task of changing from full screen to non-full screen each time the body is clicked using the Fullscreen API. This works correctly when all content is copied into a local web page and is correct according to the documentation found here. However, on JSFiddle nothing happens.

Is is possible to make example code on JSFiddle go full screen?

Please note that I do not mean viewing the result as full screen, but getting the javascript full screen commands working.

Improve this question
3
  • Full screen does not work from JSFiddle.
    – Roman C
    May 25, 2017 at 10:21
  • This was fixed a while ago. Trying the jsfiddle today click the text in the body and it will go fullscreen.
    – gman
    Jun 11, 2019 at 7:08
  • @gman I'd recommend editing that into Brant's answer (I would suggest writing another answer, but I think their answer includes some additional information that might be helpful)
    – jonsca
    Jun 11, 2019 at 19:26

4 Answers 4

Reset to default
36

You view the result in full screen like this -

http://jsfiddle.net/brantolsen/ejUWt/embedded/result/

Just click the share button on top -

enter image description here

Update: The "Share" button no longer is displayed at all. You can still get the full screen display by manually adding embedded/result/ to the end of the URL of your Fiddle

Improve this answer
5
  • Sorry, I was unclear with what I meant by full screen. I meant that I could not get the Javascript full screen api to work in jsfiddle not how to view the result as full screen. Thanks anyways.
    – Brant Olsen
    May 9, 2012 at 21:56
  • 1
    Understood. JsFiddle uses iframes to show output. In fact, all those 4 boxes are iframes. So, there can be no regular way in which you can achieve this.
    – Bibhas
    May 10, 2012 at 4:32
  • 2
    Note that this "Share" button does not appear until after you save the JSFiddle once, by clicking the "Save" button.
    – Rory O'Kane
    Jul 25, 2014 at 18:31
  • 8
    I think the "Share" button no longer is displayed at all. You can still get the full screen display by manually adding embedded/result/ to the end of the URL of your Fiddle.
    – Kai Carver
    Jan 16, 2016 at 19:45
  • this quesiton is not about running jsfiddle without an iframe. It's about the JavaScript/HTML Fullscreen API not working in jsfiddle
    – gman
    Jun 11, 2019 at 6:56
8

Use http://fiddle.jshell.net/your-fiddle-id/show/light/ for example this fiddle URL. This will open it without any frames.

Improve this answer
2
3

Found the reason after playing around with Chrome and inspect element. The result code is placed inside an iframe which disallows full screen commands.

I was able to temporarily work around this by adding mozallowfullscreen and webkitallowfullscreen, found at https://developer.mozilla.org/en/HTML/Element/iframe, to the iframe through the use of firebug and Chrome's debug tools.

However, it does not look like JSFiddle will allow you to customize the iframe that the code is wrap in at this time.

Improve this answer
2

I think the other respondents to your thread looked at the iframe (crossdomain) issues and ignored the question.

Another awesome JSFiddle user, Jennifer Perrin, answered more than half your question in her post "Get current page URL and title with jQuery".

All that remains for you to do is to apply some logic on the URL returned and fashion it into a functional http://jsfiddle.net/[userid]/[postid]/embedded/result/ link in an anchor that changes it's href to toggle fullscreen.

Improve this answer
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.