Populate Full HTML With JAVA Script in Confluence Pages

[Ansar Rezaei]

Hi

I need to add something like this timeline https://codepen.io/bcarvalho/pen/RZqmZX in a specific confluence page. It contains 3 Part, HTML, JAVA Script and CSS.

 I add CSS to Spaces style sheet and Add HTML and Javascript inside HTML Macro. I add js between <script> </script>tag. What is missing here that I couldn't render a page like a demo provided in that link?

When I save the page, I see this error on the Console tab of the browser:

batch.js?locale=en-US:1975 Failed to run init function: Cannot read property 'top' of undefined ƒ (){var a;sessionStorage.viewPort&&(a=JSON.parse(sessionStorage.viewPort));if(a&&a.pageId==d.params.pageId){var b;b=c("#main-content");var f=c("#header");b=-1!==a.blockIndex?b.children().first().child… TypeError: Cannot read property 'top' of undefined
at batch.js?build-numbe…e&locale=en-US:3256
at batch.js?locale=en-US:2110 TypeError: Cannot read property 'top' of undefined

[Zak Laughton]

Hi Ansar,

I understand you're receiving an error when attempting to implement a design from CodePen into Confluence.

The main part of the error that seems to indicate an issue here is: "TypeError: Cannot read property 'top' of undefined". So Javascript is trying to find a property called "top", but it's not sure what item should have this property. I have some guesses where this is coming from.

Looking in the CodePen code, "top" is used 3 times, and all in the CSS module. In addition, I noticed the CodePen is using the Sass (SCSS) processor which is not supported in Styling Confluence with CSS as far as I'm aware. This means that there is syntax and characters in the CSS section of the code pen that Confluence will not recognize (most predominantly: nesting and the ampersand).

If you want this CSS to work, you'll likely need to translate the SCSS to basic CSS. In addition, the HTML in the CodePen is using a Pug HTML preprocessor that will also need to be converted to HTML.

Also, since you are trying to run custom HTML inside Confluence, there are many ways that Confluence could impact the behavior differently than running the code on another page. I recommend making small incremental changes to build the timeline to narrow the scope of troubleshooting in case of issues. At the very least, I'd recommend starting with the HTML, then the CSS, then the Javascript.

I hope this helps!

– Zak