JSFiddle - React, Tailwind, and code Playground
http://stackoverflow.com/questions/17715380/the-onclick-event-is-not-set/
HTML
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="logo" class="logo">Logo</div>
CSS
.logo {
display:inline-block;
*display:inline; zoom:1; /* IE7 fix */
border:1px solid green;
}
JavaScript
(function () {
if (window.addEventListener) {
window.addEventListener('load', animate, false);
} else if (window.attachEvent) {
window.attachEvent('onload', animate);
}
function animate() {
var logo = document.getElementById('logo');
logo.style.color = 'blue';
logo.style.backgroundColor = '#ff8';
// http://stackoverflow.com/questions/5598743/finding-elements-position-relative-to-the-document
var elem = logo;
var offset = {
top: 0,
left: 0
};
do {
if (!isNaN(elem.offsetLeft)) {
offset.top += elem.offsetTop;
offset.left += elem.offsetLeft;
}
} while (null !== (elem = elem.offsetParent));
//console.log(elem);
//console.log(offset, $(logo).offset());
var c = logo.cloneNode(true);
c.id = '';
c.style.position = 'absolute';
c.style.top = offset.top + 'px';
c.style.left = offset.left + 'px';
c.style.color = 'red';
c.style.backgroundColor = '#8ff';
c.style.width = 0;
c.style.height = logo.clientHeight + 'px';
//logo.parentNode.insertBefore(c, logo.nextSibling);
document.body.appendChild(c);
var maxw = logo.clientWidth,
currw = 0;
var duration = 1000; //miliseconds
var iv = setInterval(function () {
currw += 1;
if (currw > maxw) {
clearInterval(iv);
}
c.style.width = currw + 'px';
}, (duration/maxw));
}
})();