Viewing Codepen Facilitation
Codepen Facilitation
|
User: Les C. 7 years ago
|
|
|
Can anyone provide the general procedure of implementing a codepen (https://codepen.io) into EverWeb, i.e., where to put html, css, and js code fields for a specific page? Thanks, LC |
|
|
User: Roddy 7 years ago
|
|
|
Enclose CSS in style tags <style></style> and paste into the Head Code box in the Page inspector. Paste the HTML into an HTML Snippet. Enclose java script in scrip tags <script></script> If it is dependent on jQuery you also need <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> In general, JS can go in the Head Code box, the Footer code box or the HTML Snippet. However, sometimes you will come across a script that needs to go in a specific place. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
✔ Best Answer
|
|
|
User: Les C. 7 years ago
|
|
|
--Roddy Fantastic. Thanks! Best, LC |
|
|
User: Les C. 7 years ago
|
|
|
--Roddy As a follow up, I noticed that when I place codepens into an EverWeb page, they all consistently display approximately 600px from the top of the page. I've removed header, footer, even content height. Same scenario. Any ideas why? Thanks, LC |
|
|
User: Les C. 7 years ago
|
|
|
Last edit 7 years ago |
|
|
User: Roddy 7 years ago
|
|
|
Can you post the URL to a CodePen that does that?
------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Les C. 7 years ago
|
|
|
--Roddy Here you go: https://codepen.io/timseverien/pen/VbGqdv I put the CSS code I put into the header with the <style></style> markers. There is no HTML. I put the java script I put into the footer with the required <script></script> markers. I also added an additional step to your prescription (I presume that I should) of putting the java script scripts I saw listed in the pen's setting window ("Add External java script"): [code] <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script> <script src="https://threejs.org/examples/js/GPUComputationRenderer.js"></script> <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script> [/code] I tried three different pens and experienced the same result. Any thoughts would be appreciated. Best, LC Last edit 7 years ago |
|
|
User: Les C. 7 years ago
|
|
|
--Roddy I also noticed that if I put an image or text box on the page, the codepen shifts down. Maybe there is some way to get it to always display from the top of the page? Best, LC |
|
|
User: Roddy 7 years ago
|
|
|
I'm not sure why you would want to use this. The script is trying to lock up my code editor, Firefox and Safari are struggling to display it and Google's Chrome doesn't want to know about it all! To get it to display at top in EverWeb, note the additional properties I have added to the canvas selector in the styles ... <style class="cp-pen-styles"> canvas {display: block;position:absolute;top:0;margin:0} </style> ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Les C. 7 years ago
|
|
|
Thanks Roddy. That fixed everything! Best, LC |
|
| Post Reply |
| You must login or signup to post. |