#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2002
    Location
    UK
    Posts
    59
    Rep Power
    13

    Javascript object assignment


    Hi all,

    How come when I do this:

    document.MM_Time[0][1].obj = document.all['sometext'];
    alert(document.MM_Time[0][1].obj);

    I see the result sometext but if I do this:

    document.MM_Time[0][1].obj = document.all[myObject.name];
    alert(document.MM_Time[0][1].obj);

    All I see in the alert box is [object] (literally)? Why isn't it allowing me to assign the string name contained in my object's 'name' property to the document.all[] object?

    Any help greatly appreciated.
    Thanks
    Torrent
    www.ski-info-online.com

    ...silently carving the soft deep powder...
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    14
    Not enough info to really answer your question. What is 'sometext'? document.all[] is a little more than just an object: it's Internet Explorer's mother-of-all-collections; it's managed by the system and can't simply be assigned objects as if it were a user-created array. Also - the .alert() function can only display a string value, so various .toString() methods are routinely invoked when you attempt to alert() some value or other; the displayed string may not be indicative of what's really being referenced.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2002
    Location
    UK
    Posts
    59
    Rep Power
    13
    Yep, sorry perhaps a bit of background would help. The sometext is actually a name for a "layer" that I am animating. If I hard-code the name it all works perfectly (my first example above).

    What I have though is an object I created myself. Here it is in longhand:

    var ImageLayer = new Object();
    ImageLayer.name = "imgLayer1";
    ImageLayer.image = "demo_files/biglayer22.gif";
    ImageLayer.sPos = 15;
    ImageLayer.ePos = -100;
    ImageLayer.ypos = TextLayer.ypos;
    ImageLayer.width = 145;
    ImageLayer.height = 22;
    ImageLayer.showILayer = showILayer;


    Instead of hard-coding the layer's name with document.all['sometext'], I am attempting to use the name contained with my object, i.e. document.all[ImageLayer.name]

    For info, here is the code in that area of the function (although the if's and elses merely take care of browser incompatibilities):
    Code:
    if (ns4)
            document.MM_Time[0][2].obj = document[ImageLayer.name];
        else if (ns5)
            document.MM_Time[0][2].obj = document.getElementById(ImageLayer.name);
        else
            document.MM_Time[0][2].obj = document.all ? document.all[ImageLayer.name] : null;
        document.MM_Time[0][2].keyFrames = new Array(25, 39);
        document.MM_Time[0][2].values = new Array(2);
    Does this make more sense? Interesting what you say about the alert() but as you can see the value should be string.

    Thanks again for your help.
    Torrent
    www.ski-info-online.com

    ...silently carving the soft deep powder...
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    14
    Getting warmer....but you've still left out the most important thing: the (HTML) Element. Your ImageLayer object is simply a custom JS object for managing the actual browser object; without seeing the code that instantiates that object, it's hard to judge what's happening. Maybe I'm missing something (been a long weekend).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2002
    Location
    UK
    Posts
    59
    Rep Power
    13
    Those long weekends certainly do numb the mind. That's probably the cause of this whole problem
    Anyway, here's more of the picture...

    Function which displays the layer:
    Code:
    function showTLayer() {
      document.write("<div id=\"" + this.name + "\" style=\"Z-INDEX: -2; LEFT: " + this.xpos + "px; WIDTH: " + this.width + "px; POSITION: absolute; TOP: " + this.ypos + "px; HEIGHT: " + this.height + "px\">");
      document.write("<div align=<center><p>" + this.text + "</p></div></div>");
    }  
    
    function showILayer() {
      document.write("<div id=\"" + this.name + "\" style=\"Z-INDEX: -1; LEFT: " + this.xpos + "px; WIDTH: " + this.width + "px; POSITION: absolute; TOP: " + this.ypos + "px; HEIGHT: " + this.height + "px; BACKGROUND-COLOR: #435b81; layer-background-color: #435B81 visibility: hidden;\">");
      document.write("<img onMouseOver=\"MM_initTimelines(); MM_timelinePlay('Timeline1')\" height=\"" + this.height + "\" src=\"" + this.image + "\" width=\"" + this.width + "\">");
      document.write("</div>");
    }
    ...and here are the object definitions again and the evals which invoke the layers to be displayed:
    Code:
    var TextLayer = new Object();
    TextLayer.name =new String("txtLayer");
    TextLayer.text = "<font face=\"verdana\" size=\"1\" color=\"#EEFFFF\">Big Resources</font>";
    TextLayer.xpos = 53;
    TextLayer.ypos = 167;
    TextLayer.width = 120;
    TextLayer.height = 25;
    TextLayer.showTLayer = showTLayer;
    
    var ImageLayer = new Object();
    ImageLayer.name = new String("imgLayer");
    ImageLayer.image = "demo_files/biglayer22.gif";
    ImageLayer.sPos = 15;
    ImageLayer.ePos = -100;
    ImageLayer.ypos = TextLayer.ypos;
    ImageLayer.width = 145;
    ImageLayer.height = 22;
    ImageLayer.showILayer = showILayer;
    
    eval ("TextLayer.showTLayer()");
    eval ("ImageLayer.showILayer()");
    The part of the code where the problem occurs relates only to the image layer (ImageLayer.name). I have included the text layer references
    for your info. If you would like to download the whole code (in its unfinished state) then you can pick it up from here

    Appreciate your persistance with this
    Torrent
    www.ski-info-online.com

    ...silently carving the soft deep powder...
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2002
    Location
    UK
    Posts
    59
    Rep Power
    13
    You were right (Richard?)!
    The problem is that the alert() can not display the contents of objects. It displays [object] instead. Sooo....I got hold of a script that prints
    the contents of any specified object. I think this is such a useful snippet that I have included it here for others to use.
    Code:
    function dumpProps(obj_name) {
     if (!obj_name) obj_name = prompt ("Enter object" , "document");
     if (!obj_name) return false;
     var result = ""
     var kount = 0
     var obj = eval(obj_name);
     var objStr = '' + obj_name;
     if (typeof(obj) == "object")
        for (var j in obj) {
            kount++;
            if (kount > 20) {
               alert(result);
               kount = 0;
               result = "";
            }
            if (typeof(obj[j]) != "unknown")
                result += objStr + "." + j + " = " + obj[j] + "\n";
        }
     else
        result += "Value of " + objStr + " is " + obj;
     alert(result);
    }
    You invoke it like: dumpProps(Object), e.g. dumpProps(document.MM_Time[0][1].obj);

    Unfortunately, all this has done is show me the underlying problem I have isn't where I expected it to be. If you run the script
    (available at the url in my previous post) and mouseOver the first icon down on the left, you will see it moves the wrong layer.
    Any ideas why that is?

    Apologies in advance for the srappiness of the script. As you will be able to tell it's very much in development.
    Torrent
    www.ski-info-online.com

    ...silently carving the soft deep powder...
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    14
    Here's a quick observation: you're on the right track to writing object-oriented JavaScript,
    but you've only gone part of the way. What you've got is a
    sort-of-hybrid of procedural JS and something truly object-centric.
    IMO, might as well go whole-hog on this; create a class and use it:

    function TextLayer(id,HTML,wid,hgt,Xpos,Ypos) {
    this.id = id;
    this.HTML = HTML;
    this.xpos = Xpos;
    this.ypos = Ypos;
    this.width = wid;
    this.height = hgt;
    this.showTLayer = TL_showTLayer;
    }

    function TL_showTLayer() {....etc.

    var TL1 = new TextLayer('TL1' , '<font face="verdana" size="1" color="#EEFFFF">Big Resources</font>' , 120 , 25 , 53 , 167);

    Among many advantages: you can create a custom .toString() method
    for the class that displays data about the object instance in a format that you design.
    Way too involved to go much deeper here; here's a good start (if you're interested):

    http://www.webreference.com/js/column79/index.html
    http://developer.netscape.com/evange.../?cp=brictrdv3
    http://www.dansteinman.com/dynduo/en/newobjects.html
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2002
    Location
    UK
    Posts
    59
    Rep Power
    13
    Once again you are spot on. Last evening I discovered the way I
    had implemented the oo code in javascript was wrong. This was
    why it was moveing the wrong layer. I have since changed it but
    have a couple of small bugs I am working through to get me back
    to where I thought I was at.

    In all honesty this was a bit of an ambitious intro into
    javascript Still I am learning loads on the way and am now
    determined to see it through. I'm very grateful for the help you
    have given, you certainly cleared up a few grey areas for me.

    I'm off to work now but when I return later I will pickup your
    sample oo code and compare mine against it to see what else I
    can learn/implement.

    Tx again.
    Torrent
    www.ski-info-online.com

    ...silently carving the soft deep powder...

IMN logo majestic logo threadwatch logo seochat tools logo