It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Populate Full HTML With JAVA Script in Confluence Pages

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

 

1 answer

0 votes
Zak_Laughton Atlassian Team Jan 15, 2020

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

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Posted in Confluence

How is your team having fun and bonding, remotely, utilizing Confluence?

Thanks everyone for answering last week’s question. The winner of the random drawing from those who commented is: @LarryBrock I’ll contact you separately with your prize details. This wee...

276 views 9 6
Join discussion

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you