Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Using modified xeyes script, not lining up on page right

    I'm pretty new to javascript, and I wanted to do something nice for my forum, so I've tried using the xeyes script found here:
    http://www.propix.hu/www/jseyes/jseyes.html
    I modified it, it looks great, the eye moves, but the problem is it seems to think it is positioned at the top left of the screen, when in fact it's nested in my logo div. When I move the mouse to the top left, the eye centers, which it should only do when the mouse is moved over the center of the eye. Not sure if this is a problem with the script or my divs.

    I just need to know how to get the eye to track the cursor correctly.

    Please be gentle, I don't understand a lot yet.

    My forum: http://s9.zetaboards.com/GEEK_ZONE/index/

    The divs html
    Code:
    <div id="logo"><div id="eyeball">
      <script>
        jseyeswr();
      </script>
    </div></div>
    The relevant CSS
    Code:
    #logo {
    background:none;
    border:none;
    border-bottom:0;
    clear:both;
    margin-left:auto;
    margin-right:auto;
    padding:none;
    position:relative;
    width:920px;
    z-index:2;
    text-align:center;
    }
    
    #eyeball {
    position:absolute;
    margin-top:34px;
    }
    My xeyes javascript (I realize it's a long code, but I think it's all relevant.)
    Code:
    /* jseyes.js
     
     
    The classic Xeyes in JavaScript
    (c) PROPIX Ltd,  Written by Pint�G�r
    Sz�sfeh�� Kriv�i u. 15.
    H-8000, HUNGARY
    Tel: +36 30 3489752
    Fax: +36 22 304326
    Email: propix@freemail.hu
    Web: http://www.propix.hu
     
    Revisions:
      V1.0  10/14/2001  Original release
      V1.1  12/08/2001  NS6.1
      V1.2  12/17/2001  More parameters
      V1.3  08/14/2002  Adjustable speed
      V1.31 08/26/2002  Improved adjustable speed
     
     
    This program is free software; you can redistribute it and/or
    modify it under the terms of the GNU General Public License
    as published by the Free Software Foundation; either version 2
    of the License, or (at your option) any later version.
     
    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.
     
    http://www.gnu.org/copyleft/gpl.html
    http://www.propix.hu/share/GPL.html
     
    For commercial license, and for other professional
    JavaScript and Java components please contact the author.
     
     
     
     
     
    Usage:
      1. Include this file from the head of your page
      2. Define parameters or accept the defaults
      3. Insert the image
     
    This script requires Internet Explorer 5+ or Nescape Navigator 6+! In other browsers it does nothing.
     
     
     
    1. Include jseyes.js from the head of your page
    Insert the following line into the head of your page:
      <script src="jseyes.js"></script>
     
     
    2. Define parameters
    You can accept the defaults or assign new values to these variables:
     
    jseyes= { img:"jseyes.gif", w:150, h:150, link:"http://www.propix.hu" };
      The main image (img), size (w, h), and onclick link (link).</p>
     
    jseye1= { img:"jseyeblue.gif", w:21, h:29, x:46,  y:58, xr:7, yr:17 };
    jseye2= { img:"jseyeblue.gif", w:21, h:29, x:102, y:58, xr:7, yr:17 };
      The eyes image (img), size (w, h), position (x, y), radius (xr, yr).
      Other images in this package:
        jseyegreen.gif, jseyebrown.gif,
        jseyegrey.gif, jseyeblack.gif, jseyerainbow.gif.
     
    jseyesdeltat= 40;
      Refresh rate in ms. You do not normally edit it.
     
    jseyesfollow= 100;
      Mouse trailing speed in percents (1..199). 
      180%=crazy, 100%=fast, 50%=nice, 10%=slow, 5%=sleepy.
     
    4. Insert the image
    Call jseyeswr() where you want to see the image:
      <script>
        jseyeswr();
      </script>
     
    Or call jseyeswr(x, y) to show the image at absolute position:
      <script>
        jseyeswr(100,100);
      </script>
     
     
     
    Example: http://www.propix.hu/www/jseyes/jseyes.html
     
    */
     
     
     
     
    // Defaults
    var jseyes= { img:"http://z1.ifrm.com/7062/128/0/f5016699/eyebg.png", w:920, h:158, link: "http://www.thegeekzone.org" };
    var jseye1= { img:"http://z1.ifrm.com/7062/128/0/f5016703/eyebloodshot.png", w:70, h:70, x:99,  y:100, xr:20, yr:20 };
    var jseye2= { img:"http://z1.ifrm.com/7062/128/0/f5016697/blankeye.png", w:40, h:40, x:460,  y:100, xr:20, yr:20 };
    var jseyesdeltat= 40; // ms
    var jseyesfollow= 80; // %
     
    // Browser detection
     
    // Private global variables
    var browserversion= 0.0;
    var browsertype= 0; // 0: unknown; 1:MSIE; 2:NN
    var mousex= 0, mousey= 0;
    var followx= 0, followy= 0;
     
    // Return true if MSIE or NN detected
    function browserdetect() {
      var agt= navigator.userAgent.toLowerCase();
      var appVer= navigator.appVersion.toLowerCase();
      browserversion= parseFloat(appVer);
      var iePos= appVer.indexOf('msie');
      if (iePos!=-1) browserversion= parseFloat(appVer.substring(iePos+5, appVer.indexOf(';',iePos)));
      var nav6Pos = agt.indexOf('netscape6');
      if (nav6Pos!=-1) browserversion= parseFloat(agt.substring(nav6Pos+10))
      browsertype= (iePos!=-1) ? 1 : (agt.indexOf('mozilla')!=-1) ? 2 : 0;
      return(browsertype>0);
    }
     
    browserdetect();
     
     
     
    // General utils
     
    // Find object by name or id
    function jseyesobj(id) {
      var i, x;
      x= document[id];
      if (!x && document.all) x= document.all[id];
      for (i=0; !x && i<document.forms.length; i++) x= document.forms[i][id];
      if (!x && document.getElementById) x= document.getElementById(id);
      return(x);
    }
     
     
    // Move eyes
    function jseyesmove() {
      var ex, ey, dx, dy;
      dx= mousex-followx;
      dy= mousey-followy;
      followx+= dx*jseyesfollow/100;
      followy+= dy*jseyesfollow/100;
      if (jseyes.o && jseye1.o && jseye2.o && jseyes.o.style) {
        dx= followx-jseyes.o.offsetLeft-jseye1.x;
        dy= followy-jseyes.o.offsetTop- jseye1.y;
        r= Math.sqrt(dx*dx/(jseye1.xr*jseye1.xr)+dy*dy/(jseye1.yr*jseye1.yr));
        if (r<1) r=1;
        jseye1.o.style.left= (dx/r+jseye1.x-jseye1.w/2)+"px";
        jseye1.o.style.top=  (dy/r+jseye1.y-jseye1.h/2)+"px";
        dx= followx-jseyes.o.offsetLeft-jseye2.x;
        dy= followy-jseyes.o.offsetTop- jseye2.y;
        r= Math.sqrt(dx*dx/(jseye2.xr*jseye2.xr)+dy*dy/(jseye2.yr*jseye2.yr));
        if (r<1) r=1;
        jseye2.o.style.left= (dx/r+jseye2.x-jseye2.w/2)+"px";
        jseye2.o.style.top=  (dy/r+jseye2.y-jseye2.h/2)+"px";
      }
    }
     
     
     
    // Main
    function jseyeswr() {
      var img;
      var x, y, a=false;
     
      // Relative or abslute position
      if (arguments.length==2) {
        x= arguments[0];
        y= arguments[1];
        a= true;
      }
     
      // Create image
      if (browsertype>0 && browserversion>=5) {
        img=
          "<div id='jseyeso' style='position:"+
         (a ? "absolute; left:"+x+"px; top:"+y+"px" : "relative")+
         "; z-index:5; overflow:hidden; "+
         "width:"+jseyes.w+"px; height:"+jseyes.h+"px'>\n"+
     
         "<div id='jseye1o' style='position:absolute; z-index:6; "+
           "left:"+(jseye1.x-jseye1.w/2)+"px; top:"+(jseye1.y-jseye1.h/2)+"px; "+
           "width:"+jseye1.w+"px; height:"+jseye1.h+"px'>\n"+
           "<img src='"+jseye1.img+"' "+
             "width='"+jseye1.w+"px' height='"+jseye1.h+"px' "+
             "onClick=\"location.href='"+jseyes.link+"'\">\n"+
         "</div>\n"+
     
         "<div id='jseye2o' style='position:absolute; z-index:6; "+
           "left:"+(jseye2.x-jseye2.w/2)+"px; top:"+(jseye2.y-jseye2.h/2)+"px; "+
           "width:"+jseye2.w+"px; height:"+jseye2.h+"px'>\n"+
           "<img src='"+jseye2.img+"' "+
             "width='"+jseye2.w+"px' height='"+jseye2.h+"px' "+
             "onClick=\"location.href='"+jseyes.link+"'\">\n"+
         "</div>\n"+
     
         "<img src='"+jseyes.img+"' "+
           "width='"+jseyes.w+"px' height='"+jseyes.h+"px' "+
           "onClick=\"location.href='"+jseyes.link+"'\">\n"+
     
           "</div>\n";
        document.write(img);
        jseyes.o= jseyesobj('jseyeso');
        jseye1.o= jseyesobj('jseye1o');
        jseye2.o= jseyesobj('jseye2o');
     
        // Install capture mouse position handler
        switch (browsertype) {
          case 1:
            document.onmousemove= mousemoveIE;
        break;
          case 2:
            document.captureEvents(Event.MOUSEMOVE);
        document.onmousemove= mousemoveNS;
        break;
        }
     
        // Animate
        setInterval("jseyesmove()", jseyesdeltat);
      }
    }
     
     
    // Capture mouse position
    function mousemoveNS(e) {
      mousex= e.pageX;
      mousey= e.pageY;
      return(true);
    }
    function mousemoveIE() {
      mousex= window.event.clientX + document.body.scrollLeft;
      mousey= window.event.clientY + document.body.scrollTop;
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,455
    Thanks
    23
    Thanked 631 Times in 630 Posts
    Just looked at with FF browser and the eyes follow me the way they should. Do not see the eyes centering when arrow at top left.
    Repeat in FF eyes are OK.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    They don't work for me the correct way in any browser, and all of my users have reported the same thing happening (and many of them use FF, while some use Chrome and IE). When we move our cursor over the words "get started" at the top left of our screen, the eye thinks the cursor is centered over it, and stares straight ahead, rather than to the left like it should.

  • #4
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Found out I was just using an old code that didn't support divs or something like that. It works now.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •