30

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.

  • Full screen does not work from JSFiddle. – Roman C May 25 '17 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 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 at 19:26
35

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

  • 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 '12 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 '12 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 '14 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 '16 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 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.

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.

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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