Moving Eyeballs!

[dotmidi]

So I found this code from https://www.mf2fm.com/rv/dhtmlmovingeyes.php they have a lot of cool decorations!
Basically it is a set of moving eyeballs which is perfect for me because I love muppets
the issue is though, it is set and fixed on the center of the webpage and i am NOT good at javascript one bit
I understood how to not make it "fixed" however, i dont know how to put it on the top of my page and be able to serve as a header I suppose
here is the code if any of you are good at javascript

Code

<script type="text/javascript">
// <![CDATA[
var width=144; // radius of the eyes in pixels
var colour="#06c"; // colour of the eye - bluey green in this case
var iris="#111"; //  colour of the iris (normally black);

/***************************\
*  Moving Eyeballs Effect *
*(c)2012-20 mf2fm web-design*
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
\***************************/
var swide=800;
var shigh=600;
var sleft=sdown=0;

var glasses, lefteyeball, righteyeball, lefteye, righteye;

function addLoadEvent(funky) {
 var oldonload=window.onload;
 if (typeof(oldonload)!='function':wink: window.onload=funky;
 else window.onload=function() {
  if (oldonload) oldonload();
  funky();
 }
}

addLoadEvent(draw_eyes);

function draw_eyes() {
 var i, j, l, r;
 glasses=document.createElement("div":wink:;
 i=glasses.style;
 i.position="fixed";
 i.top="50%";
 i.left="50%";
 i.width="1px";
 i.height="1px";
 i.overflow="visible";
 i.zIndex="100";
 i.pointerEvents="none";
 document.body.appendChild(glasses);
 lefteyeball=document.createElement("div":wink:;
 righteyeball=document.createElement("div":wink:;
 i=lefteyeball.style;
 j=righteyeball.style;
 i.position=j.position="absolute";
 i.width=j.width=(width*2)+"px";
 i.height=j.height=(width*2)+"px";
 i.top=j.top=(-width)+"px";
 i.left=(-2.1*width)+"px";
 j.left=(.1*width)+"px";
 i.borderRadius=j.borderRadius="50%";
 i.backgroundColor=j.backgroundColor=colour;
 i.background=j.background="radial-gradient(circle at "+width+"px "+width+"px, #fff, "+colour+" 75%)";
 i.opacity=j.opacity="0.5";
 i.zIndex=j.zIndex="100";
 glasses.appendChild(lefteyeball);
 glasses.appendChild(righteyeball);
 lefteye=document.createElement("div":wink:;
 righteye=document.createElement("div":wink:;
 i=lefteye.style;
 j=righteye.style;
 i.position=j.position="absolute";
 i.width=j.width=width+"px";
 i.height=j.height=width+"px";
 i.top=j.top=(-width/2)+"px";
 i.left=(-1.6*width)+"px";
 j.left=(.6*width)+"px";
 i.borderRadius=j.borderRadius="50%";
 i.backgroundColor=j.backgroundColor=iris;
 i.opacity=j.opacity="0.8";
 i.zIndex=j.zIndex="101";
 glasses.appendChild(lefteye);
 glasses.appendChild(righteye);
 set_width();
 set_scroll();
}


document.onmousemove=mouse;
function mouse(e) {
 var x, y, xdiff, ydiff, distn;

 y=(e)?e.pageY:event.y;
 x=(e)?e.pageX:event.x;
 x-=sleft;
 y-=sdown;

 xdiff=x+(1.1*width)-(swide*0.5);
 ydiff=y-shigh/2;
 distn=Math.pow(xdiff*xdiff+ydiff*ydiff,0.5);
 if (distn>width/2.5) {
  xdiff=xdiff*width/distn/2.5;
  ydiff=ydiff*width/distn/2.5;
 }
 lefteye.style.top=(ydiff-width/2)+"px";
 lefteye.style.left=(xdiff-1.6*width)+"px";

 xdiff=x-(1.1*width)-(swide*0.5);
 ydiff=y-shigh/2;
 distn=Math.pow(xdiff*xdiff+ydiff*ydiff,0.5);
 if (distn>width/2.5) {
  xdiff=xdiff*width/distn/2.5;
  ydiff=ydiff*width/distn/2.5;
 }
 righteye.style.top=(ydiff-width/2)+"px";
 righteye.style.left=(xdiff+0.6*width)+"px";
}

document.onscroll=set_scroll;
function set_scroll() {
 if (typeof(self.pageYOffset)=="number":wink: {
  sdown=self.pageYOffset;
  sleft=self.pageXOffset;
 }
 else if (document.body.scrollTop || document.body.scrollLeft) {
  sdown=document.body.scrollTop;
  sleft=document.body.scrollLeft;
 }
 else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
  sleft=document.documentElement.scrollLeft;
	sdown=document.documentElement.scrollTop;
 }
 else {
  sdown=0;
  sleft=0;
 }
}

window.onresize=set_width;
function set_width() {
 var sw_min=999999;
 var sh_min=999999;
 if (document.documentElement && document.documentElement.clientWidth) {
  if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
  if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
 }
 if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
  if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
  if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
 }
 if (document.body.clientWidth) {
  if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
  if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
 }
 if (sw_min==999999 || sh_min==999999) {
  sw_min=800;
  sh_min=600;
 }
 swide=sw_min;
 shigh=sh_min;
}
// ]]>
</script>

[dotmidi]

boosting this, i just want to know how to position it via coordinates or what have you

[nymphaeaphoo]

okay so moving about the eyes' position is quite simple if you know javascript, but doing that alone breaks the program

ive made it so that you can move the eyes by defining which element you want the eyes to be a child of (thus move to) by specifying the parents id (as a variable in the script) but theres a problem


broken eyes demo on my homepage

you can see how the pupils still move as if they were still in the centre, the script itself uses the centre as a point of reference to base the movement of the pupils, so forcing the eyes in the centre isnt a bad idea, under this circumstance.

fixing this issue was a bit more involved, you basically have to create an offset -based on the eyes' new location- and use it to modify the coordinates that were taken from the cursor's location.


fixed eyes demo on my homepage

ive given the eyes its own id (name of which can be found and changed in the script) so you can mess about with it in css


i havnt tested it much so do post again if you have any issues

Code

<script type="text/javascript">
// <![CDATA[
var width=144; // radius of the eyes in pixels
var colour="#06c"; // colour of the eye - bluey green in this case
var iris="#111"; //  colour of the iris (normally black);
var parentId = "parent" // id of the element you want the eyes to be a child of, must be a valid id otherwise the eyes will not display
var eyesId = "muppetEyes" // id of the eyes (so you can modify it in css)

/***************************\
*  Moving Eyeballs Effect *
*(c)2012-20 mf2fm web-design*
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
\***************************/
var swide=800;
var shigh=600;
var sleft=sdown=0;

var glasses, lefteyeball, righteyeball, lefteye, righteye, glassesCoords;

function addLoadEvent(funky) {
 var oldonload=window.onload;
 if (typeof(oldonload)!='function':wink: window.onload=funky;
 else window.onload=function() {
  if (oldonload) oldonload();
  funky();
 }
}

addLoadEvent(draw_eyes);

function draw_eyes() {
 var i, j, l, r;
 glasses=document.createElement("div":wink:;
 i=glasses.style;
 i.position="absolute";
 /*
 i.top="50%";
 i.left="50%";
 */
 i.width="1px";
 i.height="1px";
 i.overflow="visible";
 i.zIndex="100";
 i.pointerEvents="none";
 glasses.setAttribute("id",eyesId);
 document.getElementById(parentId).appendChild(glasses);
 lefteyeball=document.createElement("div":wink:;
 righteyeball=document.createElement("div":wink:;
 i=lefteyeball.style;
 j=righteyeball.style;
 i.position=j.position="absolute";
 i.width=j.width=(width*2)+"px";
 i.height=j.height=(width*2)+"px";
 i.top=j.top=(-width)+"px";
 i.left=(-2.1*width)+"px";
 j.left=(.1*width)+"px";
 i.borderRadius=j.borderRadius="50%";
 i.backgroundColor=j.backgroundColor=colour;
 i.background=j.background="radial-gradient(circle at "+width+"px "+width+"px, #fff, "+colour+" 75%)";
 i.opacity=j.opacity="0.5";
 i.zIndex=j.zIndex="100";
 glasses.appendChild(lefteyeball);
 glasses.appendChild(righteyeball);
 lefteye=document.createElement("div":wink:;
 righteye=document.createElement("div":wink:;
 i=lefteye.style;
 j=righteye.style;
 i.position=j.position="absolute";
 i.width=j.width=width+"px";
 i.height=j.height=width+"px";
 i.top=j.top=(-width/2)+"px";
 i.left=(-1.6*width)+"px";
 j.left=(.6*width)+"px";
 i.borderRadius=j.borderRadius="50%";
 i.backgroundColor=j.backgroundColor=iris;
 i.opacity=j.opacity="0.8";
 i.zIndex=j.zIndex="101";
 glasses.appendChild(lefteye);
 glasses.appendChild(righteye);
 set_width();
 set_scroll();
}


document.onmousemove=mouse;
function mouse(e) {
 var x, y, xdiff, ydiff, distn;

 glassesCoords = glasses.getBoundingClientRect();
 x=((e)?e.pageX:event.x) + (window.screen.availWidth/2) - glassesCoords.x;
 y=((e)?e.pageY:event.y) + (window.screen.availHeight/2) - glassesCoords.y;
 x-=sleft;
 y-=sdown;

 xdiff=x+(1.1*width)-(swide*0.5);
 ydiff=y-shigh/2;
 distn=Math.pow(xdiff*xdiff+ydiff*ydiff,0.5);
 if (distn>width/2.5) {
  xdiff=xdiff*width/distn/2.5;
  ydiff=ydiff*width/distn/2.5;
 }
 lefteye.style.top=(ydiff-width/2)+"px";
 lefteye.style.left=(xdiff-1.6*width)+"px";

 xdiff=x-(1.1*width)-(swide*0.5);
 ydiff=y-shigh/2;
 distn=Math.pow(xdiff*xdiff+ydiff*ydiff,0.5);
 if (distn>width/2.5) {
  xdiff=xdiff*width/distn/2.5;
  ydiff=ydiff*width/distn/2.5;
 }
 righteye.style.top=(ydiff-width/2)+"px";
 righteye.style.left=(xdiff+0.6*width)+"px";
}

document.onscroll=set_scroll;
function set_scroll() {
 if (typeof(self.pageYOffset)=="number":wink: {
  sdown=self.pageYOffset;
  sleft=self.pageXOffset;
 }
 else if (document.body.scrollTop || document.body.scrollLeft) {
  sdown=document.body.scrollTop;
  sleft=document.body.scrollLeft;
 }
 else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
  sleft=document.documentElement.scrollLeft;
	sdown=document.documentElement.scrollTop;
 }
 else {
  sdown=0;
  sleft=0;
 }
}

window.onresize=set_width;
function set_width() {
 var sw_min=999999;
 var sh_min=999999;
 if (document.documentElement && document.documentElement.clientWidth) {
  if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
  if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
 }
 if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
  if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
  if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
 }
 if (document.body.clientWidth) {
  if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
  if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
 }
 if (sw_min==999999 || sh_min==999999) {
  sw_min=800;
  sh_min=600;
 }
 swide=sw_min;
 shigh=sh_min;
}
// ]]>
</script>

here is the diff output (changes made) incase youre interested

Code

5a6,7
> var parentId = "parent" // id of the element you want the eyes to be a child of, must be a valid id otherwise the eyes will not display
> var eyesId = "muppetEyes" // id of the eyes (so you can modify it in css)
17c19
< var glasses, lefteyeball, righteyeball, lefteye, righteye;
---
> var glasses, lefteyeball, righteyeball, lefteye, righteye, glassesCoords;
34c36,37
<  i.position="fixed";
---
>  i.position="absolute";
>  /*
36a40
>  */
42c46,47
<  document.body.appendChild(glasses);
---
>  glasses.setAttribute("id",eyesId);
>  document.getElementById(parentId).appendChild(glasses);
85,86c90,92
<  y=(e)?e.pageY:event.y;
<  x=(e)?e.pageX:event.x;
---
>  glassesCoords = glasses.getBoundingClientRect();
>  x=((e)?e.pageX:event.x) + (window.screen.availWidth/2) - glassesCoords.x;
>  y=((e)?e.pageY:event.y) + (window.screen.availHeight/2) - glassesCoords.y;

[dotmidi]

THANK U SM for the help
i almost gave up on having this thing on my webpage entirely until u came along!! im very happy to add this guy now

[ToxicMolly]

Does anyone know if it'd be possible to do this with pre-drawn eyes instead of using the draw feature? Javascript is basically witchcraft to me so I have no clue.