All geek questions in one place

How to get code from Codepen and use it locally?

How do I take code from code and use it locally in a text editor?

http://codepen.io/mfields/pen/BhILt

I try to play with this creation locally, but when I open it in chrome, I get a blank white page in which nothing happens.

<!DOCTYPE HTML> <html> <head> <script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript" src="celtic.js"></script> <link rel="stylesheet" type="text/css" src="celtic.css"></link> </head> <body> <canvas id="animation" width="400" height="400"></canvas> </body> </html>

I have a copy, pasting and saving css and js to different files and saving them, and then tried to link them to the html file as shown above.

I also included the jquery library, as I understand that many of the code files use it.

The only console error I get is

 Uncaught TypeError: Cannot read property 'getContext' of null

which refers to my js file, line 4

 (function(){ var canvas = document.getElementById( 'animation' ), c = canvas.getContext( '2d' ),

Sorry if this is stupid, but I'm new to all of this. I'm sure it's just damn. Any help would be awesome!

+6
source share
5 answers

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

+7
source

Your javascript seems to work before the HTML has finished loading. If you can use jQuery, put js inside this;

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

or you can try it ....

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

it looks like you are calling JS before loading the DOM.

try to wrap it in

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

which coincides with

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

if you are using jQuery.

or you can add a <script> after the content, immediately before the closing body tag, this will ensure that the content is displayed before JS starts

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

 <body onLoad="yourFunction();">
+2
source

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

enter image description here

+1
source

To load the calculated html codef, go to the code of your choice, then click the "Change View" button and switch to "full page" mode.

Now it depends on your browser.

Firefox

display the source code (Cmd + u) and go to the lowest. Find the last iframe and click on the src attribute value. There you go.

Chrome

Right-click on the page (not the codef header) and select the View FRAME source (not the PAGE source). There you go.

0
source

Source: https://habr.com/ru/post/985991/

More articles:


All Articles