Preserved Topic: The front lines of the Browser Wars

I want to write some major code in Javascript and I need to make it cross-browser compatible. I want to use pointers (at least the concept- if you've programmed in C, you know what I'm talking about) to the DOM objects.

For example, I'd write a function named 'initMyObjects()' that would set (example) 'properlayername' to point to 'document.whatever.myLayer'

So then, in my code, I would only need to type "properlayername.pixelLeft = 23"

How does that work in Javascript?

You know what I mean or should I elaborate some more...?


Harmonizing new illusions...
ICQ: 67751342

AFAIK you can use a simple variable for that:

var properlayername = document.whatever.myLayer;

Actually I don't know if that's still a 'simple variable' but it's working in one of my scripts (it's based on a script from www.webreference.com/dhtml/ and I guess they know what they're doing).

kuckus (cell #282)

you can assign a variable to any value. if that value is not a simple data value, then it is an object reference already. so you can hold a reference to a textbox form element, but you can't hold a reference to the string value contained in it.

just ask yourself if it's a "thing" that you're assigning: a layer, style object, DOM element, etc. if so, it's a reference.

so, if I:

"var properlayername = document.whatever.myLayer;"

what happens when I:

"var properlayername.pixelTop = 23;"

??


Harmonizing new illusions...
ICQ: 67751342

That's equivalent to

document.whatever.myLayer.pixelTop = 23;

Objects (including functions and arrays) are copied by reference. Primitive types (like numbers) are copied by value.

This is how I do it.
Requires a browser sniff.
And this is a kinda simplified version I'd add a crapload of other properties depending on what I need but you should get the idea.
I got this from my current site which I made before any stable releases of the Mozilla browser so I don't have the DOM in here but again you should get the idea.

The main keyword here is the "this" stuff.

function newObject(id) {
if (n){
this.css = this.elm = document.layers[id];
this.x = this.css.left;
this.y = this.css.top;
}
if (ie) {
this.elm = document.all[id];
this.css = document.all[id].style;
this.x = this.elm.offsetLeft;
this.y = this.elm.offsetTop;
}

}

you create your object like so.

myObj = new newObject("someDivId");

Where someDivId is the name of an element on your page. If you run this after page load you can grab the css of the relevant element.

to change the x position (left/right) you'd just do:
myObj.x = 23;

Then the div named "someDivId" will move to 23 pixels to the left.

if you want to create a method for your objects it's pretty simple

add
this.methodName = functionName
after all the relevant browser specific stuff.

If you look at my page you'll see a pretty simple example of this.
This i a bit more complicated than just assigning variable names to crossbrowser elements however it's extremely powerful when used properly. (It's true OOP) What you are doing here is creating your own objects similar to the JS built in objects (Images and arrays are examples)



.:[ The Tao of Steve ]:.
Be Desireless
Be Excellent
Be Gone
...................................


[This message has been edited by bitdamaged (edited 06-12-2002).]

Very interesting thread. I like these discussions. Helps clear up things for me since I am trying to grasp all this myself.

I am a little confused about something in bit's code. What is this:

this.css = [b]this.elm[/b] = document.layers[id];

The "this.elm" is what I don't understand.

If I understand this correctly the "this.css" is what you are using to ajust certain elements like movement and such that may correspond with CSS stuff. This is being assigned to the "document.layers[id]" in NN and "document.all[id]" in IE etc. . .

But what is the "this.elm" doing?

This is similar to how Bratta does his scripts. Anyway, if you help explain what that means that would be great.

Thanks.

Later,
C:\


~Binary is best~

[This message has been edited by CPrompt (edited 06-12-2002).]

In some cases you may not want to affect the css properties of an element. (say if you want to write to a layer via innerHTML or .write) so you need to just refrence the layer. In NN it's the same as the style properties so I can set them all to the same thing. but in IE you have the seperate style ref.



.:[ The Tao of Steve ]:.
Be Desireless
Be Excellent
Be Gone
...................................

Oh, I see. So let me get this straight. With this:

this.css = this.elm = document.layers[id];

You are setting the this.css and this.elm to the same thing which will be a reference to the document.layers[id]. This way in case you want to access the CSS properties of the layer you can use this.css[id].width=100 and then if you wanted to access something other than CSS properties to the same id you can access it by this.elm.write('Hello')

Right?

Later,
C:\


~Binary is best~

[This message has been edited by CPrompt (edited 06-12-2002).]

hmm.. kinda you're on the right track.

Except the refrence is a bit different. You see how I have in the example
myObj = new newObject("someDivId");

That create's one object corresponding to the name of the DIV I passed in. If I want to use more DIV's I create an object for each. (personally I usually use a naming convention like "bigblueDIV" for Div ID's and then name the object refrences "bigblue" you can't have the DIV name and the obj name the same)

so if I want to change something for that DIV I use
myObj.css.x = 25;

or myObj.elm.write = "Something";




.:[ The Tao of Steve ]:.
Be Desireless
Be Excellent
Be Gone
...................................

Right. Got it. I actually realized that but I was trying to keep the examples pertaining to what I had the question about, which was the this.elm.

Very cool. I appreciate the help in uderstanding this.

Javascript is starting to become a lot more easy to me with all the threads that I have been reading.

now if we could just keep all the threads this interesting, informative an on track, I think we wouldn't loose anymore respected Asylumites

Thanks Bit!

Later,
C:\


~Binary is best~