onload

**magsterrrr** · 12-10-2012, 04:57 PM

A Javascript newbie here. I forked this code and cannot get it to run outside of JSFiddle or Codepen. From what I read, I should try putting the Script after the page info and it still will not work for me. The error in Debug mode console: Uncaught TypeError: Cannot set property 'onmousemove' of null

Not sure what I am doing wrong. I have had the same issue with a few other things I forked.. I just can't seem to get the logic down as to when/where the Javascript loads.

Thank you for any help :-)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
</title>
<link rel="stylesheet" type="text/css" href="css/shadow.css" />
</head>

<body>
<div class="wall">
<p id="tsb-text">Cool Shadow
</p>
<div>
</div>
</div>
<div id="tsb-spot">
</div>
</div>

<script type="text/javascript">

var text;
var spot;
//window.onload = init;
init();
function init() {
text = document.getElementById('tsb-text');
spot = document.getElementById('tsb-spot');

document.getElementById('text-shadow-box').onmousemove = onMouseMove;
document.getElementById('text-shadow-box').ontouchmove = function (e) {e.preventDefault(); e.stopPropagation(); onMouseMove({clientX: e.touches[0].clientX, clientY: e.touches[0].clientY});};

onMouseMove({clientX: 300, clientY: 200});
}
function onMouseMove(e) {
var xm = e.clientX - 300;
var ym = e.clientY - 175;
var d = Math.sqrt(xm*xm + ym*ym);
text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d / 5 + 10) + 'px black';

xm = e.clientX - 600;
ym = e.clientY - 450;
spot.style.backgroundPosition = xm + 'px ' + ym + 'px';
}

</script>

</body>
</html>

+++++++++++++++++++++++

The CSS

body{
background: url(http://iweb.uz/wp-content/uploads/20...ml5webbg.png);
}
#text-shadow-box {
position: relative;
width: 598px;
height: 406px;
background: #666;
overflow: hidden;
cursor: none;
border: 1px solid #333;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
}

#text-shadow-box div.wall {
position: absolute;
top: 175px;
left: 0;
width: 100%;
}

#tsb-text {
margin: 0;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
font-size: 80px;
line-height: 0.1em;
height: 1px;
font-weight: bold;
text-align: center;
}

div.wall div {
position: absolute;
background: #999;
top: 42px;
left: 0;
height: 300px;
width: 100%;
}

#tsb-spot {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(http://iweb.uz/wp-content/uploads/2012/06/spotlight.png) top center;

**ReFreezed** · 12-10-2012, 05:16 PM

You don't have an element with the ID "text-shadow-box", thus document.getElementById('text-shadow-box') returns null.

**magsterrrr** · 12-11-2012, 09:47 AM

Thank you, refreezed! I am not sure how I missed that.

Thread: onload

Thread Tools

Display

onload

Thank you

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions