Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Next challenges

Recent achievements

  • Global
  • Personal

Recognition

  • Give kudos
  • Received
  • Given

Leaderboard

  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

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

What do you think is the most *delightful* Confluence feature? Comment for a prize!

- Create your own custom emoji 🔥 - "Shake for Feedback" on mobile 📱 - An endless supply of GIFs via GIPHY 🤩 Is there anything quite as nice as a pleasant surprise? Comment below with what...

383 views 23 8
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