How Do I Take Code From Codepen, And Use It Locally?

How do I take the code from codepen, and use it locally in my text-editor? http://codepen.io/mfields/pen/BhILt I am trying to have a play with this creation locally, but when I ope

Solution 1:

Joe Fitter is right, but I think is better to export your pen (use the export to export.zip option for using your pen locally). This will give you a working version of your pen without having to copy and paste the CSS, JavaScript and HTML code and without having to make changes on it for making it work.

Solution 2:

Right click on the result frame and choose View Frame source. And you can copy the source code and paste it in your own text-editor.

Solution 3:

It seems your javascript is running before the HTML has finished loading. If you can use jQuery put the js inside of this;

    $( document ).ready(function() {
      // js goes in here.
    });

either u can try this....

function init() {
     // Run your javascript code here
  }
document.addEventListener("DOMContentLoaded", init, false);

Solution 4:

looks like you are calling the JS before the DOM is loaded.

try wrapping it in a

$(function() {
    // your code here
});

which is the same as

$(document).ready(function() {
    // your code here
});

if you are using jQuery.

or you could include the <script> tag after the content, just before the closing body tag, this will ensure the content has been rendered before the JS is executed

Or you could name the function in your JS and execute it onLoad of the body:

<bodyonLoad="yourFunction();">

Solution 5:

To download the computed html of a codepen, go to the codepen of your choice, then click the "Change View" button and go to the "full page" mode.

Now depends on your browser.

Firefox

display the source code (Cmd+u) and go at the very bottom. Look for the last iframe and click on the value of the src attribute. There you go.

Chrome

Right click in the page (not the codepen header) and choose the View FRAME source (not the view PAGE source) option. There you go.