473,574 Members | 2,588 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

IE6: setInterval, this==window arrgh

At line
this.timerId = setInterval (function(){thi s.step()}, 100)
I get error dialog
Error:Object doesn't support this property or method.
If I change it to
this.timerId = setInterval (function(){thi s==window}, 100)
I see true, the sad fact that 'this' is window and not an anim.

What are some proper ways ?
I would like to avoid
this.timerId = setInterval ("Anim.step ( ' "+ this.o.id + " ' ) ", 100)
and avoiding the need for a global hash array (Anim.anims) to keep tracking
of my anims (key:td id, value:anim instance) that would have to be looked up
during each step.

--------
function X (s,cp) {
// cp - cell id prefix
document.write (
'<P>' + s + '</P>'
+'<TABLE BORDER="1">'
+ '<TR>'
+ '<TD ID="cell_1"'
+ ' onMouseOver="X. over(this)"'
+ ' onMouseOut="X.o ut(this)"'
+ '>this cell gets handled</TD>'
+ '<TD ID="cell_2"'
+ ' onMouseOver="X. over(this)"'
+ ' onMouseOut="X.o ut(this)"'
+ '>me too</TD>'
+ '</TR></TABLE>'
)

}

function X.over (o) { o.style.backgro und='Black' }
function X.out (o) {
o.anim = new Anim(o);
o.anim.start();
}

var Anim = function (o)
{
this.o = o
this.count=0
}
Anim.prototype. start = function ()
{
this.step();
this.timerId = setInterval (function(){thi s.step()}, 100)
}
Anim.prototype. step = function ()
{
this.count += 4
if (this.count > 15)
this.stop()
else {
level = anim.count * 16 - 1
anim.o.style.ba ckground = 'rgb('+level+', '+level+','+lev el+')'
}
}
Anim.prototype. stop = function ()
{
clearTimeout (this.timerId)
}
-----

--
Richard A. DeVenezia, subclassing Text Pad Control
http://www.devenezia.com/downloads/s...ndex.php?id=22
Jul 20 '05 #1
10 7764
"Richard A. DeVenezia" <ra******@ix.ne tcom.com> wrote in message
news:bj******** ****@ID-168040.news.uni-berlin.de...
At line
this.timerId = setInterval (function(){thi s.step()}, 100)
I get error dialog
Error:Object doesn't support this property or method.
If I change it to
this.timerId = setInterval (function(){thi s==window}, 100)
I see true, the sad fact that 'this' is window and not an anim.

What are some proper ways ?
I would like to avoid
this.timerId = setInterval ("Anim.step ( ' "+ this.o.id + " ' ) ", 100) and avoiding the need for a global hash array (Anim.anims) to keep tracking of my anims (key:td id, value:anim instance) that would have to be looked up during each step.


Bad form writing to myself ?
I found the answer to be that setinterval function (anonymous or otherwise)
can't use this reference but can use local copy of object's this.
http://www.faqts.com/knowledge_base/...d/2311/fid/128
X.Anim.prototyp e.start = function ()
{
dit = this // homage to Nederlanders
dit.step()
this.timerId = setInterval (function() {dit.step()}, 100)
}

-----
function X (s) {
document.write (
'<P>' + s + '</P>'
+'<TABLE BORDER="1">'
+ '<TR>'
+ '<TD ID="cell_1"'
+ ' onMouseOver="X. over(this)"'
+ ' onMouseOut="X.o ut(this)"'
+ '>this cell gets handled</TD>'
+ '<TD ID="cell_2"'
+ ' onMouseOver="X. over(this)"'
+ ' onMouseOut="X.o ut(this)"'
+ '>me too</TD>'
+ '</TR></TABLE>'
)

}

function X.over (o) { o.style.backgro und='Black' }
function X.out (o) {
o.anim = new X.Anim(o);
o.anim.start();
}

X.Anim = function (o)
{
this.o = o
this.count=0
}

X.Anim.prototyp e.start = function ()
{
dit = this
dit.step()
this.timerId = setInterval (function() {dit.step()}, 100)
}
X.Anim.prototyp e.step = function ()
{
anim = this

anim.count++
if (anim.count > 16)
anim.stop()
else {
level = anim.count * 16 - 1
anim.o.style.ba ckground = 'rgb('+level+', '+level+','+lev el+')'
}
}
X.Anim.prototyp e.stop = function ()
{
clearTimeout (this.timerId)
}

X('Hello')
--
Richard A. DeVenezia
Jul 20 '05 #2
Richard A. DeVenezia wrote:

function X.over (o) { o.style.backgro und='Black' }
function X.out (o) {
o.anim = new X.Anim(o);
o.anim.start();
}

These declarations are generating errors in Mozilla ("X.over" and
"X.out" are not identifiers and failing ECMA syntax checks for a
function declaration)

X.over =function (o) { o.style.backgro und='Black' }
X.out = function (o) {
o.anim = new X.Anim(o);
o.anim.start();
}

seems to fix it,

Cheers,
Dom

Jul 20 '05 #3
"Dom Leonard" <do************ *@senet.andthis .com.au> wrote in message
news:WM******** *********@nnrp1 .ozemail.com.au ...
Richard A. DeVenezia wrote:

function X.over (o) { o.style.backgro und='Black' }
function X.out (o) {
o.anim = new X.Anim(o);
o.anim.start();
}

These declarations are generating errors in Mozilla ("X.over" and
"X.out" are not identifiers and failing ECMA syntax checks for a
function declaration)

X.over =function (o) { o.style.backgro und='Black' }
X.out = function (o) {
o.anim = new X.Anim(o);
o.anim.start();
}

seems to fix it,

Cheers,
Dom


Dom: Thank you!

I've another question now....

I want to 'stuff' some information into the <td> i am dynamically
generating, so that it will be available to the event handler without having
to pass the value in the handler invocation.

Both these work in IE

A. <TD onmouseover='Ov er(this)' style="myProper ty:myValue">
or
B. <TD onmouseover='Ov er(this)' myProperty="myV alue">

and in the handler

A. function Over(o) { alert (o.style.myProp erty) } // shows myValue
B. function Over(o) { alert (o.myProperty) } // shows myValue

Wondering if both techniques would work in most other browsers and if not
would A. version (style version) be more widespread applicable ?

Would it be possible to include an object literal or object reference in
generated TD ?

--
Richard A. DeVenezia
Jul 20 '05 #4
"Richard A. DeVenezia" <ra******@ix.ne tcom.com> writes:
I want to 'stuff' some information into the <td> i am dynamically
generating, so that it will be available to the event handler without having
to pass the value in the handler invocation.
Why not pass it? It won't take more space than putting it in the tag
in other ways, and probably will take less.
Both these work in IE
And neither work in Opera 7 or Mozilla.
However, using getAttribute works in all three:
---
<table><tr>
<TD onmouseover='Ov er(this)' myProperty="myV alue">X</td>
</tr></table>
<script type="text/javascript">
function Over(o) { alert (o.getAttribute ("myProperty ")) } // shows myValue
</script>
---
A. <TD onmouseover='Ov er(this)' style="myProper ty:myValue">
A browser *should* ignore CSS properties that it doesn't understand.
This is illegal CSS
B. <TD onmouseover='Ov er(this)' myProperty="myV alue">
This is illegal HTML by any HTML standard.

The DOM doesn't have to make attributes available as properties
of the object, except those specifically mentioned in the DOM
specification (e.g. id and name). It doesn't have to use the same
name as the attribute (e.g., class/className). It doesn't have
to make the attribute available as a string (e.g., style and any
on<event> handler).
Wondering if both techniques would work in most other browsers and if not
would A. version (style version) be more widespread applicable ?
From my sample base, I would say no.
Would it be possible to include an object literal or object reference in
generated TD ?


Easy.
<td onmouseover='Ov er(this,{x:42,y :10})'>
or
<td onmouseover='Ov er(this,objRef) '>
or
<td onmouseover='va r foo=new Object();Over(t his,foo);'>

It really is *much* simpler to put what you need directly in the
onmouseover javascript, than to put it into an attribute, and then
have to parse it.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #5
"Richard A. DeVenezia" <ra******@ix.ne tcom.com> wrote in message
news:bj******** ****@ID-168040.news.uni-berlin.de...
"Richard A. DeVenezia" <ra******@ix.ne tcom.com> wrote in message
news:bj******** ****@ID-168040.news.uni-berlin.de... X.Anim.prototyp e.start = function ()
{
dit = this
dit.step()
this.timerId = setInterval (function() {dit.step()}, 100)
}
X.Anim.prototyp e.step = function ()
{
anim = this

anim.count++
if (anim.count > 16)
anim.stop()
else {
level = anim.count * 16 - 1
anim.o.style.ba ckground = 'rgb('+level+', '+level+','+lev el+')'
}
}


dit=this should be var dit=this
anim=this should be var anim=this,
level=... should be var level=...

--
Richard A. DeVenezia
Jul 20 '05 #6
Lasse, I applaud you and other contributors excellent discourse and the
lists collective willingness to help others. Keep up the great work.
[worthy of top-post]

"Lasse Reichstein Nielsen" <lr*@hotpop.com > wrote in message
news:ad******** **@hotpop.com.. .
"Richard A. DeVenezia" <ra******@ix.ne tcom.com> writes:
I want to 'stuff' some information into the <td> i am dynamically
generating, so that it will be available to the event handler without having to pass the value in the handler invocation.
Why not pass it? It won't take more space than putting it in the tag
in other ways, and probably will take less.


Yup, see that now. Can't help but think these ideas haven't been hashed to
death in the past, I just can't seem to find such prior threads.
Easy.
<td onmouseover='Ov er(this,{x:42,y :10})'>
or
<td onmouseover='Ov er(this,objRef) '>


But in keeping with oo flavour, suppose each cell had 10 runtime controlling
factors determined at table generation time; the run time data can be
effectively encapsulated in a 'parametric' object with 10 properties.
I would prefer not to pass the 10 factors, but rather the reference to the
object containing the ten properties.

So, then, is it possible to document.write html that would pass a function
var to the handler

i.e.
function foo ()
{
....
var adjunctData = { a:1, b:2, c:3, ..., j:10 }
document.write ('... <TD onmouseout="Out (this, adjunctData)" > text
</TD>...')
....
}
won't work since adjunctData would have to be global scope. I don't want to
pollute global space.

I don't think that
document.write ('... <TD onmouseout="Out (this, ' + adjunctData + ')" > text
</TD>...')
would work either. If I recall in IE adjunctData works out to something like
[Object] object

document.write ('... <TD onmouseout="Out (this, ' + function () { return
adjunctData } + ')" > text </TD>...')
might work (will try soon)? If so, at what number of 'outs' would any
appreciable degradation in browser reponse/resource utilization occur?

versus

adding and managing a function property of type array that holds references
to the 'parametric' objects and pass the index into this array

X = function () {
....
var adjunctData = { a:1, b:2, c:3, ..., j:10 }
var index = X.adjunctDatas. push ( adjunctDatas )
document.write (... <TD onmouseout="X.O ut(this," + index + ")" > text
</TD>...
....
}
X.adjunctDatas = []

X.Out = function (o, index)
{
var adjunctData = X.adjunctDatas[index]
....
}
Of these is there a 'best of breed' technique, or is it more a matter of
personal style ?

--
Richard A. DeVenezia
Jul 20 '05 #7
"Richard A. DeVenezia" <ra******@ix.ne tcom.com> writes:
So, then, is it possible to document.write html that would pass a function
var to the handler

i.e.
function foo ()
{
...
var adjunctData = { a:1, b:2, c:3, ..., j:10 }
document.write ('... <TD onmouseout="Out (this, adjunctData)" > text
</TD>...') ...
}
won't work since adjunctData would have to be global scope. I don't want to
pollute global space.
Exactly.

This is actually similar to the problems you get when using strings
as arguments to setTimeout or using the Function constructor function.
The text that you write is "just a string", and cannot capture
the variables in the current scope the way a closure can.

What you can do, is to assign the onmouseout handler from Javascript
instead:

var adjunctData = { a:1, b:2, c:3, ..., j:10 }
document.write( '<td id="foo"> .... </td>');
document.getEle mentById("foo") .onmouseout =
function () {
Out(this,adjunc tData);
};

This avoids Javascript creating more scripts as strings, which I
personlly don't like.

I don't think that
document.write ('... <TD onmouseout="Out (this, ' + adjunctData + ')" > text
</TD>...')
would work either. If I recall in IE adjunctData works out to something like
[Object] object
Yes. That would only work if the toString method returned a literal
that evaluates to the same value ... and that is equivalent to including
the entire object in each location.

document.write ('... <TD onmouseout="Out (this, ' + function () { return
adjunctData } + ')" > text </TD>...')
might work (will try soon)?
Probably not. The function is still converted to a string. That string
is then parsed again as Javascript, but in a different scope. The
scope is lost because you go through a string. Strings have no notion
of scope or evaluation context.
If so, at what number of 'outs' would any
appreciable degradation in browser reponse/resource utilization occur?
That depends on the garbage collectior. The functions you create are
lost immediately, and can be garbage collected.

My bet is that if those functions cause a significant drain on
ressources, your page is too large to build with DHTML anyway.
adding and managing a function property of type array that holds references
to the 'parametric' objects and pass the index into this array ....

This is simply the simplest way of not polluting the global namescape:
Create *one* global variable, put an object (e.g., a function) in it,
and store the rest of your variables in that object.

Building an array, and using an integer as index, is not different from
indexing an object by name ... it's just easier to come up with the
names :)
Of these is there a 'best of breed' technique, or is it more a matter of
personal style ?


Personal style goes a long way :)

I would try to not write scripts. Javascript writing Javascript just
seems like a waste to me. Why build a string and the parse it again,
when I can just write Javascript directly.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #8
"Lasse Reichstein Nielsen" <lr*@hotpop.com > wrote in message
news:ad******** **@hotpop.com.. .
<snip>
A.<TD onmouseover='Ov er(this)' style="myProper ty:myValue">


A browser *should* ignore CSS properties that it doesn't
understand. This is illegal CSS

<snip>

There is some unusual Opera 7 (up to 7.11 at least) behaviour that makes
setting and reading any expando properties on a style object extremely
risky. The style object's property name resolving strategy seems to be
based on a HashTable with a very simple algorithm. Sufficient to
distinguish all of the CSS properties from each other but such that
trying to set a non-CSS property may actually end up assigning a value
to an entirely unintended existing property.

For example, on Opera 7.11 setting the "position" property and then
reading the non-CSS property "abbr" will return the value that was just
set. Similarly setting "abbr" will be interpreted as setting the
"position". Working out which property names would accidentally hash to
the same values as existing CSS properties is also hindered slightly by
the fact that revisions of Opera 7 have shown evidence of slight changes
in the hashing algorithm (probably as CSS support has been expanded).

It would definitely be safest never to add any new properties to a style
object.

Richard.
Jul 20 '05 #9
Subject has been changed...

"Lasse Reichstein Nielsen" <lr*@hotpop.com > wrote in message
news:n0******** **@hotpop.com.. .
"Richard A. DeVenezia" <ra******@ix.ne tcom.com> writes:
What you can do, is to assign the onmouseout handler from Javascript
instead:

var adjunctData = { a:1, b:2, c:3, ..., j:10 }
document.write( '<td id="foo"> .... </td>');
document.getEle mentById("foo") .onmouseout =
function () {
Out(this,adjunc tData);
};
I like this solution very much and is quite in step with my concept that the
adjunctData really belongs to the cell.
I don't like having to id and get, but in this approach those steps are
unavoidable.

As you stated prior it's not good practice or valid to add custom properties
to HTML tags, but how about post rendering of the HTML ? This works, but is
adding properties to existing window objects.

document.write( '<td id="foo" onmouseout="Out (this)"> .... </td>');
document.getEle mentById("foo") .adjunctData = { a:1, b:2, c:'I will appear',
d:4, e:5, f:6 }

Out = function (o)
{
o.innerHTML = o.adjunctData.c // cell innerHTML changes to 'I will
appear'
}


This avoids Javascript creating more scripts as strings, which I
personlly don't like.

concur

document.write ('... <TD onmouseout="Out (this, ' + function () { return
adjunctData } + ')" > text </TD>...')
might work (will try soon)?


Probably not. The function is still converted to a string. That string
is then parsed again as Javascript, but in a different scope. The
scope is lost because you go through a string. Strings have no notion
of scope or evaluation context.


didn't work, the return was undefined ... unless it was a global ref
adding and managing a function property of type array that holds references to the 'parametric' objects and pass the index into this array ...

This is simply the simplest way of not polluting the global namescape:
Create *one* global variable, put an object (e.g., a function) in it,
and store the rest of your variables in that object.

Building an array, and using an integer as index, is not different from
indexing an object by name ... it's just easier to come up with the
names :)


I've done this on other pages, but get annoyed I have to id something I
already have.
Of these is there a 'best of breed' technique, or is it more a matter of
personal style ?


Personal style goes a long way :)


After a fair amount of experimentation , I found I could build the table
without document.writin g any HTML at all!
Not sure how cross-browser this is, but works for my windows IE6 and is spot
on for my personal style.
Again the question of propriety and validness is raised regarding adding
properties to window elements. I don't know.

function X (s) {
this.abc = 123

document.write (
'<P>' + s + '</P>'
+'<TABLE ID="myTable" BORDER="1" CELLPADDING="10 "></TABLE>'
)

table = window.myTable;
// is document.getEle mentById really needed if window.<id> or
window['<id>'] seems to always work ?

row = table.insertRow (0);
cell = row.insertCell (0);

cell.innerHTML = 'Show me'
cell.foo = '123'
cell.adjunctDat a = { a:1, b:2, c:'I will appear', d:4, e:5, f:6 }
cell.onmouseove r = function (EventSource) { X.over (this) } // during
invocation context this is the cell
}

X.over = function (o)
{
o.innerHTML = o.adjunctData.c
}

X('Hello')

--
Richard A. DeVenezia
Jul 20 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
2257
by: Franklin P Patchey | last post by:
<P><A style="COLOR: rgb(0,0,0); FONT-SIZE: 80%; FONT-FAMILY: 'Comic Sans MS', cursive; TEXT- ALIGN: left" href="javascript:self.close();"><FONT size=4><STRONG>Close this window!</STRONG></FONT></A></P>
6
7290
by: rob | last post by:
Hi I'm trying to create a "roll-up" effect when a window loses focus and then "roll-down" when it regains focus. This statement works properly with every browser I can get my hands on EXCEPT WinIE6. WinIE6 says there's an error in the code, but the debugging info says the problem is on line 1 char 1, which are comments. <Body...
5
9310
by: John A Grandy | last post by:
I have a js function that dynamically generates a block of html that includes an anchor tag : <a href="http://www.google.com" target="_blank" /> When the user clicks this link, the new IE6 browser window is full vertical size, but only half horizontal size (of available screen area). Starting iexplore.exe independently opens a full-size...
3
5786
by: shawn | last post by:
Hi All Was trying to get this bit of code working (simplified of course) for (i=0;i<uuid_num;i++) { window.setInterval(InitMap(uuidValues), timePeriod); } Where uuid_num, uuidValues, timePeriod are defined above, along with function InitMap.
5
2203
by: mikewse | last post by:
I'm having a strange problem with window.name (from JavaScript) on *some* of our computers. OS is Windows 2000 so Internet Explorer version is IE6 sp1. I really need some help here... We are using window.name to set a hidden value in the browser that persists between page navs on our site. So the first page will set this value, giving the...
3
1393
by: satya61229 | last post by:
Hello experts Do you know what is the use of str = (this != window)?this:str; in a function. str is arg passed to that function. regards Satya Prakash
4
67987
by: Roger | last post by:
Hi, I am confused about the differences between this.window.focus(), window.focus(), and this.focus(). I want to use the calls in a <body onload="..."tag. What are the differences between these forms that may make one succeed and another fail? In particular, this.window.focus() fails in Opera 9.10 with an "object not found", and...
4
3247
by: vunet | last post by:
Hello, My HTML form submits some values to a hidden iframe. However, this is done for file upload fields only. After file uploading is finished I am using this form to submit all other data (inputs, textareas, etc.) normally. The file upload mechanism is structured in the way that it sets form's enctype (multipart) and target to iframe...
0
7808
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
8063
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
1
7822
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
1
5626
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
3742
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3754
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2249
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1347
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
1062
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.