I have a WordPress page where I want to integrate the HTML, CSS and JS code from my Codepen project. The styling appears to be working correctly, but the JavaScript is not functioning as expected.
You can view the page here:
Could someone assist me in properly inserting the code from this Codepen link:
http://codepen.io/eltonmesquita/pen/DcHup/*** Detect the browser's prefixes ***/
if(document.addEventListener){ // Only IE9+ support this ;)
// http://davidwalsh.name/vendor-prefix
// Can't use it in IE8- as it brakes the page...
var isPrefixed = (function () {
var styles = window.getComputedStyle(document.documentElement, ''),
pre = (Array.prototype.slice
.call(styles)
.join('')
.match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
)[1],
dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
return {
dom: dom,
lowercase: pre,
css: '-' + pre + '-',
js: pre[0].toUpperCase() + pre.substr(1)
};
})();
// Deals with prefixes
var prefix = isPrefixed.css;
} else {
var prefix = "";
}
// Rest of the JavaScript code goes here...
// CSS code for styling
.tl-wrapper
ul.timeline
li(data-year="1981").tl-item
.tl-image
img(src=" http://placehold.it/1650x1000/")
.tl-copy
h3.title
| Aw, you're all Mr. Grumpy Face today. They're not aliens, they're Earth…liens!
.tl-description
p Aw, you're all Mr. Grumpy Face today. No… It's a thing; it's like a plan, but with more greatness. They're not aliens, they're Earth…liens! Sorry, checking all the water in this area; there's an escaped fish. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? You've swallowed a planet!
// More timeline items...
I need help in properly integrating this code into my WordPress page. Thank you!