SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Brussels
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question "dots[i].obj has no properties"

    Hello, I'm trying to adapt a javascript that doesn't seem to work with current versions of Netscape/Mozilla ...

    I have these lines in it:

    dots[i].obj.left = dots[i].X;
    dots[i].obj.top = dots[i].Y;


    And I get this error message from FireFox javascript console:
    "dots[i].obj has no properties"

    How could I correct this ?
    (Thank you)

  2. #2
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Brussels
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Someone suggested this:

    You can try changing:

    if (isNetscape) { this.obj = eval("document.dot" + i);}

    To:
    if (isNetscape) { this.obj = document.getElementById('dot' + i);}
    &

    onMouseMove --> onmousemove

    I don't get the error message anymore, but the javascript still doesn't animate with Mozilla or FireFox.

  3. #3
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Brussels
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And here's the full script code:

    Code:
    see below
    Last edited by Ludwig von 97; Sep 19, 2004 at 12:24.

  4. #4
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Brussels
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the current version.

    It works under Mzilla and FireFox,
    But as soon as the poage as a DOCTYPE (in this case: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//FR" "dtd/xhtml1-strict.dtd"> ), it works only in Internet Explorer again.

    That's good progress for now, but that would be even greatest if it could work with XHTML and Mozilla/FireFoz ...

    PS: Another problem: When there is no DOCTYPE, they don't bounce on the right and on the bottom of the page (they nevrr bounce on the top, but I think that's normal)



    Code:
    The code has changed again. The small remaining problems have moved so far from the subject of the beginning that I'll make a new thread.
    Last edited by Ludwig von 97; Sep 20, 2004 at 08:42.

  5. #5
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Brussels
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    2- In Mozilla/Netscape etc ... the images don't bounce on the right and bottom sides of the window (nor on the bottom, but that's normal)
    Solved by replacing (except it doens't bounce on the bottom side of Opera ) :

    if (isNetscape) {
    height = window.innerHeight + document.scrollTop;
    width = window.innerWidth + document.scrollLeft;
    } else {
    height = document.documentElement.clientHeight + document.documentElement.scrollTop;
    width = document.documentElement.clientWidth + document.documentElement.scrollLeft;
    }

    by

    height = document.documentElement.clientHeight + document.documentElement.scrollTop;
    width = document.documentElement.clientWidth + document.documentElement.scrollLeft;


  6. #6
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Brussels
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the current final version of the script, for me for now:

    demo: http://www.webisdead.net/xhtml-index-test.html
    (index.html under slooow reconstruction)

    enhancements of the last few days:

    - compatible with XHTML (compatible with HTML by replacing "documentElement" by "body")
    - compatible with Netscape/Mozilla/FireFox ... (minor problem left: elements don't bounce on the bottom in Opera)
    - size defined seprately element by element (manually for now)

    Code:
    <div id="dot9" style="width:384; height:204; position:absolute; top:0; left:0;"><img src="megaptere/megaptere.gif"alt="Baleine" /></div>
    <div id="dot8" style="width:1; height:1; position:absolute; top:0; left:0; text-align:left; font-weight:bold"><a href="http://folding.webisdead.net">Folding@Home</a></div>
    <div id="dot7" style="width:1; height:1; position:absolute; top:0; left:0;  visibility: hidden;"><img src="images/penguin01.gif"alt="Pingouin" /></div>
    <div id="dot6" style="width:1; height:1; position:absolute; top:0; left:0;  visibility: hidden;"><img src="images/penguin01.gif" alt="Pingouin" /></div>
    <div id="dot5" style="width:51; height:52; position:absolute; top:0; left:0; "><img src="images/penguin05.gif" alt="Pingouin" /></div>
    <div id="dot4" style="width:35; height:60; position:absolute; top:0; left:0; "><img src="images/penguin04.gif" alt="Pingouin" /></div>
    <div id="dot3" style="width:28; height:60; position:absolute; top:0; left:0; "><img src="images/penguin03.gif" alt="Pingouin" /></div>
    <div id="dot2" style="width:32; height:60; position:absolute; top:0; left:0; "><img src="images/penguin02.gif" alt="Pingouin" /></div>
    <div id="dot1" style="width:32; height:60; position:absolute; top:0; left:0; "><img src="images/penguin01.gif" alt="Pingouin" /></div>
    <div id="dot0" style="width:1; height:1; position:absolute; top:0; left:0; visibility: hidden;"><img src="images/penguin01.gif" alt="Pingouin" /></div>
    <script language="JavaScript" type="text/javascript">
    <!-- Original: Philip Winston (pwinston@yahoo.com) Web Site: <http://members.xoom.com/ebullets> -->
    <!-- 'Scrolling Fix' by Troels Jakobsen <tjak@get2net.dk> -->
    <!-- 'Two dimensions DOTSIZE adaptable element by element' by Ludwig von 97 (http://www.webisdead.net) (!!! DOTSIZEHEIGHT and DOTSIZEWIDTH arrays must be filled manually for now.)  -->
    <!-- Adapted for XTHML + Netscape/Mozilla/FireFox/... by GhislainLavoie on <http://www.editeurjavascript.com/forum>, vwphillips on <http://js-x.com/forum> and Ludwig von 97 (http://www.webisdead.net) , thanks to Willy Duitt too -->
    <!-- To use in HTML instead of XHTML, replace "documentElements" by "body". Last update 21st September 2004 by Ludwig von 97 (http://www.webisdead.net) -->
    <!--
    var nDots = 10; // must be equal to the number of elements (including "dot0")
    var Xpos = 0;
    var Ypos = 0;
    var Ypos = 0;
    
    var DELTAT = .01;
    var SEGLEN = 5;
    var SPRINGK = 6;
    var MASS = 2;
    var GRAVITY = 0;
    var RESISTANCE = 10;
    var STOPVEL = 0.1;
    var STOPACC = 0.1;
    var BOUNCE = 0.60;
    var DOTSIZEHEIGHT = new Array(1,60,60,60,60,52,1,1,10,204); // two dimensions dotsize, must be equal to respective elements height (LV97)
    var DOTSIZEWIDTH = new Array(1,32,32,28,35,51,1,1,1,384); // two dimensions dotsize, must be equal to respective elements width (LV97)
    var isNetscape = navigator.appName=="Netscape";
    var followmouse = true;
    var dots = new Array();
    init();
    
    function init() {
    var i = 0;
    for (i = 0; i < nDots; i++) {
    dots[i] = new dot(i);
    }
    if (!isNetscape) {
    // I only know how to read the locations of the 
    // <LI> items in IE
    // skip this for now
    // setInitPositions(dots)
    }
    for (i = 0; i < nDots; i++) {
    dots[i].obj.left = dots[i].X+"px"; // "+"px"" (XHTML related) suggested by GhislainLavoie
    dots[i].obj.top = dots[i].Y+"px"; // "+"px"" (XHTML related) suggested by GhislainLavoie
    }
    if (isNetscape) {startanimate();}
    else {
    // let dots sit there for a few seconds
    // since they're hiding on the real bullets
    setTimeout("startanimate()", 3000);}}
    
    function dot(i) {this.X = Xpos; this.Y = Ypos; this.dx = 0; this.dy = 0;
    this.obj = eval("document.getElementById('dot'+" + i + ").style");} // previously "if (isNetscape) {this.obj = eval("document.dot" + i);}" (GhislainLavoie)
                                                                        // previously "else {this.obj = eval("dot" + i + ".style");}}" (GhislainLavoie)
    
    function startanimate() {setInterval("animate()", 20);}
    
    function setInitPositions(dots) {
    var startloc = document.all.tags("LI");
    var i = 0;
    for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
    dots[i+1].X = startloc[i].offsetLeft
    startloc[i].offsetParent.offsetLeft - DOTSIZEWIDTH[i]; // two dimension dotsize + adaptable width (LV97)
    dots[i+1].Y = startloc[i].offsetTop +
    startloc[i].offsetParent.offsetTop + 2*DOTSIZEHEIGHT[i]; // two dimension dotsize + adaptable height (LV97)
    }
    dots[0].X = dots[1].X;
    dots[0].Y = dots[1].Y - SEGLEN;
    }
    
    function MoveHandler(e) {
    Xpos = e.pageX;
    Ypos = e.pageY;	  
    return true;
    }
    
    function MoveHandlerIE() {
    Xpos = window.event.x + document.documentElement.scrollLeft; // previously "documentElement" --> "body" (LV97)
    Ypos = window.event.y + document.documentElement.scrollTop; // previously "documentElement" --> "body" (LV97)
    }
    if (isNetscape) {
    // "document.captureEvents(Event.MOUSEMOVE);" <-- removed by GhislainLavoie
    document.onmousemove = MoveHandler;
    } else {
    document.onmousemove = MoveHandlerIE;
    }
    
    function vec(X, Y)
    {this.X = X;
    this.Y = Y;}
    
    // adds force in X and Y to spring for dot[i] on dot[j]
    function springForce(i, j, spring)
    {
    var dx = (dots[i].X - dots[j].X);
    var dy = (dots[i].Y - dots[j].Y);
    var len = Math.sqrt(dx*dx + dy*dy);
    if (len > SEGLEN) {
    var springF = SPRINGK * (len - SEGLEN);
    spring.X += (dx / len) * springF;
    spring.Y += (dy / len) * springF;
    }}
    
    function animate(){	
    var start = 0;
    if (followmouse){
    dots[0].X = Xpos;
    dots[0].Y = Ypos;	
    start = 1;
    }
    for (i = start ; i < nDots; i++ ) {
    var spring = new vec(0, 0);
    if (i > 0) {
    springForce(i-1, i, spring);
    }
    if (i < (nDots - 1)) {
    springForce(i+1, i, spring);
    }
    var resist = new vec(-dots[i].dx * RESISTANCE, -dots[i].dy * RESISTANCE);
    var accel = new vec((spring.X + resist.X)/ MASS, (spring.Y + resist.Y)/ MASS + GRAVITY);
    dots[i].dx += (DELTAT * accel.X);
    dots[i].dy += (DELTAT * accel.Y);
    if (Math.abs(dots[i].dx) < STOPVEL &&
    Math.abs(dots[i].dy) < STOPVEL &&
    Math.abs(accel.X) < STOPACC &&
    Math.abs(accel.Y) < STOPACC) {
    dots[i].dx = 0;
    dots[i].dy = 0;
    }
    dots[i].X += dots[i].dx;
    dots[i].Y += dots[i].dy;
    var height, width;
    height = document.documentElement.clientHeight + document.documentElement.scrollTop; 
    width = document.documentElement.clientWidth + document.documentElement.scrollLeft;
    // the two above lines: previously "if (isNetscape) {height = window.innerHeight + document.scrollTop; width = window.innerWidth + document.scrollLeft;} else {height = document.body.clientHeight + document.body.scrollTop; width = document.body.clientWidth + document.body.scrollLeft;}" (LV97 & vwphillips)
    if (dots[i].Y >=  height - DOTSIZEHEIGHT[i] - 1) { // two dimensions dotsize adapted + adaptable height (LV97)
    if (dots[i].dy > 0) {
    dots[i].dy = BOUNCE * -dots[i].dy;
    }
    dots[i].Y = height - DOTSIZEHEIGHT[i] - 1; // two dimensions dotsize adapted + adaptable height (LV97)
    }
    if (dots[i].X >= width - DOTSIZEWIDTH[i] - 1) { // two dimensions dotsize adapted + adaptable width (LV97)
    if (dots[i].dx > 0) {
    dots[i].dx = BOUNCE * -dots[i].dx;
    }
    dots[i].X = width - DOTSIZEWIDTH[i] - 1; // two dimensions dotsize adapted + adaptable width (LV97)
    }
    if (dots[i].X < 0) {
    if (dots[i].dx < 0) {
    dots[i].dx = BOUNCE * -dots[i].dx;
    }
    dots[i].X = 0;
    }
    dots[i].obj.left = dots[i].X+"px"; // "+"px"" (XHTML related) suggested by GhislainLavoie			
    dots[i].obj.top = dots[i].Y+"px"; // "+"px"" (XHTML related) suggested by GhislainLavoie
    }}
    --></script>


Bookmarks

Posting Permissions

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