Search code examples
javascripthtmljsfiddle

Is there a way to remove the top bar in JSFiddle embedded view

When I go to the JSFiddle embedded full screen view (<url of fiddle>/embedded/result), there is always a bar at the top with JSFiddle on it, as shown here with where it says result:

Is there a way to remove this bar from the view?

Note:

You can also access this view by going to URL <url of fiddle>/show.

Solution

  • Before you read, please note that jsfiddle is a nice site and they do this so that people can't just use them for hosting and then embed their links.

    Consider that before removing all their branding - don't be a jerk.

    I don't know if they've changed this since Noel's answer, but it still shows the bar at the top for me.

    It can still be done though.

    Example:

    https://fiddle.jshell.net/vmt32w4d/11/show/

    The trick is to find the source of the iframe which is on fiddle.jshell.net as Noel suggests.

    They keep this on a separate origin to give you a cross-origin exception if you try to access elements outside of the iframe.

    This is no problem, just link to that instead and add the following code:

    $("header",window.parent.document).remove();
$("#tabs",window.parent.document).css({
    'margin-top':'0px',
    'height':'100vh'
});
$("#result",window.parent.document).css({
    'margin-top':'0px',
    'height':'100vh'
});

    I included the jquery library for this to work - otherwise you could just edit the code to alter the css using vanilla JS.

    There may be a better way to alter the css or whatever, but now you know how to do so 🙂