speed issues traversing the DOM.

[The Natural Philosopher]

If the element has been inserted into the DOM by the html parser, then
yes, you need to find it first somehow, at least once, (walkTheDOM,
use a DOM search method (.getElementXXX) or lookup into an
htmlCollection) in order to get (and save) a reference to it.
If it was inserted into the DOM by your (JS) code, you already have a
reference to it (that you can save) so there's never the need to
search for it.

Ok. That is one pint finally resolved then.

You can build the contents of that shop's catalog at the server and
send it prebuilt tagged as html, or
You can build it dynamically, client-side, by sending the *data* from
the server, not markup no html (usually JSON).

Mmm. I think my ability to do that is constrained by my lack of
familiarity with javascript and the DOM so I'll fie hat for future
reference.

For example: the server's PHP can send it either:

prebuilt as html:

<div id="reference456">Chocolat Cookies</div>
<div id="reference457">Plum Cake</div>

Or as data:

<script>
var catalog= {
'reference456': 'Chocolat Cookies',
'reference457': 'Plum Cake'
};
</script>

Yup.

In the second case, the browser has the catalog as data, and the JS
code (client-side) has to build the presentation of that data:

<script>
(function () {
if (catalog && (typeof catalog === "object")) {

var itemRef, itemName, itemDOMElement;

for ( itemRef in catalog ) {
if (catalog.hasOwnProperty(itemRef)) {

//create the DOM element
itemDOMElement= document.createElement('div');
//Fill the div's content
itemDOMElement.innerHTML= itemName= catalog[itemRef];

//Pack it all into an object
catalog[itemRef]= {
'itemName': itemName,
'itemDOMElement': itemDOMElement,
'anotherUsefulProperty': Math.random()
};

//And insert the element into the page.
document.body.appendChild(itemDOMElement);
/* or:
document.body.appendChild(catalog[itemRef].itemDOMElement);
/*
}
}
}
})();
</script>

You'd end up with a nice JS data structure (object) : catalog= {
'reference456': {
'itemName': "Chocolat Cookies",
'itemDOMElement': (referenceToTheDivDOMElement),
'anotherUsefulProperty': (a random number)
},

'reference457': {
'itemName': "Plum Cake",
'itemDOMElement': (referenceToTheDivDOMElement),
'anotherUsefulProperty': (a random number)
}
}

...and no need to ever search the DOM. But, then, your page is turning
more and more into a webApp.

I don't really care about what its called, just that it actually works.
At the moment, the faster development route is to use html with some script.

Mostly because I am marginally more familiar with HTML than javascript.

I started out using form inputs and select boxes, but it was too
ugly..so the need to add more script has arrived.

I am not quite ready to go 'all script' as it were, but I take your
points to heart and to memory.

You have been *extremely* helpful, and I thank you for that.

I think what I have now works well enough across the browsers it will be
used with, and the cost benefit of going all script simply for
elegance's sake is not there.

It is in fact a webapp in the sense that its a series of forms into a
database, that simply happen to use a web browser as a means of access.
That turns out to be the simplest way to access the database over local
and remote links, on multiple platforms.

Its a million miles away from a public web site with 'scripted
decoration' , that's for sure.

Its been and continues to be an interesting exercise in code
optimisation: On the one hand it may well be used on relatively low
bandwidth connections, and there compressing the HTML has reduced page
load times impressively (well, if the machine that decompresses has the
horsepower anyway) and reducing visual lag by downloading a lot of the
data so that as much as possible apart from strict database updates, is
done in script in the browser.

I am not sure how the ZIP algorithm works, but it seems to be able to
turn 2000 lines of essentially almost identical information into not
very much at all.

Its now at the stage where flyouts follow the mouse with no perceptible
delays, which is all it needs to be. As opposed to the worst case last
week, where 1.5 seconds was the time.

My biggests lag locally is now decompressing the page..about half a second.

A also managed to turn about 100 nested SQL enquiries into a single
incredibly ugly, but a single, one. That , mysql informs me, takes a
mere 40ms to execute, and less if its cached..;-)

So all intersting stuff, and again, many many thanks for the help.

 

[SAM]

Le 11/30/08 2:18 AM, David Mark a écrit :

As mentioned, memory leaks. See below.


Using the "this" identifier in the listener.

with a bit of code I would better understand.

Which is silly. Always test the standard (gEBI in this case) first,
then you won't have a problem.

No that's wrong : gEBI is understood by IE and
in my test I want to use exclusively document.all
(and only if the browser is really IE)

see what M$ says :

No matter. Is isn't needed for this and you didn't test it (or
anything else.)

what for ?
its just a demo to see time spending to run through DOM

The JS copy-clone was only to do not copy-paste manually 200 divs
(ang going back on each of them to correct IDs ans texts).

That would be a start.

As I'am targeting at worst IE6 ... doest it really matter ?

That isn't what you are trying to detect here. You want to know if
you can use document.all without throwing an exception, so you should
detect document.all (only after testing gEBI.)

Once more : no, you're wrong.
I want to detect "IE" and not if the browser is able to do this or that.

Right there it will blow up if some new version of IE eliminates
document.all.

Once more it's to try "document.all" (with actual IEs of course).
Why to pass time to test other obscure and not yet born features ?

Anyway in 30 days the demo-test will be deleted (does M$ expects to
offer a new IE in this delay ?)

I know the feeling.

Google translates 'needless' by 'it' ... :-(

Yes. Hark back to the "what" argument.

Could you code something as example ?
(so I can understand where could be or not the circular ref)
(perhaps ?)

What are you doing creating closures if you know nothing about them?

Why do you laugh at me like that ?
You know how it's easy to do that by miss knowing.

As the cited article indicates, they can be dangerous in IE. Read the
article. If you print it out double-spaced it is maybe three pages.

I've somewhere french tuto about closures on my DD.
(what a brainstorming !)

You are wrong. No argument = no inner function = no closure = no
circular reference = no memory leak.

I begin vaguely to understand (outer function getting inner functions's
variable I think I rode)
Can 'this' be seen as an inner-outer-variable ?
in :

foo.onmouseover = function() {see(this);};

which is a so often used way by programmers.

Would it be better (and is it possible ?) to do :

foo.omouseover = 'see(this)';
foo.omouseover = 'see(e)';
foo.omouseover = see;

Do you mind? I don't speak French.

Didn't I see you spoke Spanish ?

Open your task manager and find out.

??? on My Mac ?
sure I'll find a task manager for IE.linux runing under X11 ;-)

No, you need to learn to write proper scripts.

I wait you for the corrections and not only : "do not do that"

I gave you a link.

About listener and events ?

Yes. Lots of things.

about the listener I mean.
(the rest except the light about leak memory doesn't really matter here)

Throw it back.

And then ?

 

[SAM]

Le 11/30/08 1:05 AM, The Natural Philosopher a écrit :
with 2000 items ... it's not more a menu !
That's a dictionary !

Its a hierarchical tree menu. Elements are in pages
I call a flyout page a frame.

Bon! me voilà bien avancé !
(flyout page ?)

For me a "page" is an html file or at least a fragment of.
You can't download and display a such piece of code on a simple mouse
over (overall, if I well understood, you have images to download)
mouseover has to fire immediately.
So, all is in the displayed main file (how much that could do 2000
images and associated texts ?).

There are an indefinite amount of elements within each flyout page.

???? you'll have to limit this amount !

Each one is either a mouseover event that spawns yet another leaf,

No, that's not possible.
(except if by 'spawn' you mean 'show' something already existing, displayed)

or a clickable entity, so each one is a div.

No, why "so each one is a *DIV*" ?

Perhaps it needn't be, but that makes absolute formatting easier.

Always style in relative (or nothing).
The absolute positioning is only when all other solutions fall down.
Anyway, any tag can be formated as you want.

It is extremely difficult to establish
when one frame flys out, what others should be canceled, so the

The flyed frame gives a value to a global variable.
Ne next flyer will close the opened one known by this variable then set
it with itself one.

algorithnm simply un-dispalys all at the same level or below, except the
direct child of the mouseover one.

You can have :
- each article downloaded with
- a Hn for it's title and getting the onMouseOver
- a layer (DL ?) for it's illustration, comment, price and so
- the product details (DL) is styled in display:none;
- on mouse overing a title (menu's item) that copy-clone corresponding
hidden details in a viewer positioned where you want
Example not finished, to see what I mean, is here :
<http://cjoint.com/?lEnCvKmZ0s>
and :

The problem resolves to the simplest way of creating a substructure to
scan, that has pointers into only the relevant DOM elements that need
scanning.

You are completely in error about the method to adopt for your project.
There has not to browse the DOM to re-hide the details, they are
naturally hidden.
It may be enough to drag the sub div details of the article in another
unique div specialized to serve only viewing the wanted details as
showed in my bad made previous examples.

Why won't you use Json ?
It was made exactly for your project.
All informations extracted from the database are in an array made on
server side, so you no longer need to run through the DOM as it is not
yet complete (at least for parties which must show details that will not
be html coded, keeping them in the Json array)
Don't forgive to download all the necessary pictures before to display
the page.
The mouseover function will just to have to use this Json's array to
display the "flyout" where you want.
(each "flyout" is in a sub-array of the main array declared by the PHP
or ASP in the JS of the head.)

In final the body looks like :

<h3 onmouseover="fly(0)">Sweet candy</h3>
<h3 onmouseover="fly(1)">Chocolate 1</h3>
<h3 onmouseover="fly(2)">Candy 1</h3>
....
<h3 onmouseover="fly(2000)">Candy 2000</h3>

<div id="viewer" onmouseout="this.style.display='';">
Here the details
</div>

My hack is to register each frame as it is turned on by adding it to an
array of elements 'that have been turned on' and to turn off the ones in
that array solely.

The server would have do the job : all in a JS array
And JS would have only to use this array (not to build it !)
fly(index);

I was just hoping that there might be a way to have that array loaded at
download time, but I don't see a simple way of passing a pointer to a
dom object before javascript actually runs, or, how to perform the scan
of the relevant elements efficiently at load time.

forgive to have the page completely made in html
leave the JS to complete from Json array each flyout on demand

If you like,. given a random selection of DOM elements that you want to
access and modify via javascript, how can you tag them so that they and
they alone can be the subject of efficient searches?

not necessary ---> fly(number)
where number is the index of the item and was written by server (PHP,
ASP ...)

Hers is a fragment from a simplert tow level meenu strictire that
illustates this
*************************************
var menus =new Array() // array for our menus.

// switch on div whose id is 'name'+'id' and register it, all others off


function show (id) // expands a menu of this name at this level with
this parent id.

OK or some

Well, I am a goodish coder, but not a great javascripter, and DOMmer and
divs seemed the way to get entities that were absolutely positioned,
could take an ID, and could take mouse events. If you know better, let
me know..

The tag 'A' ?
as shown previously here : <http://cjoint.com/?lDsFPCPNv4>
and that doesn't need javascript (click the top link to see the code)

Yup. I am handling a stores with over 1000 items in about 30 categories,
any one of which must be selectable. The code is generic, but the screen
I am working on is multi-level kitting, so I need to both select a part
- say 'box of chocolates' and craate an assembly that says '2 caramel,
three hazelnut, 1 cherry' and 'box' 'insert' 'contents list' and '5 mins
of packing labour' etc etc.

with a small example it could be easiest to see the purpose.

So the need is to rapidly search through a very large number of
categories and actual items, to insert them in a data structure
representing 'the box of chocolates'

I begin to see.

The same code will be used when entering orders as well, so you can pick
from (a salable subset of) the inventory.

that's the job of a next file, no ?

I tried using straight <SEECT> <OPTION> but that only allowed a one
dimensional search and selecet, and was too clumsy to be functional. The
customer rejected it.


It is done that way. But class is not a unique identifier,,have ti use IDS

I think you need no identifier,
on mouseovering one div the event identifies itself what element we'll
have to treate (using only css or helping by JS).
Doesn't it work on the little demo (without IDs) ?

To catch the hidden layer using JS :

var f = this.getElementsByTagName('P'), n = f.length;
for(var i=0; i<n; i++) if(f.className=='hid')
{
f = f;
break; // or return;
}
f.style.display = 'block';

That David Mark judges very bad.

Yup. That was consistent with my findings. Customer has IE7, and I have
that on a scrappy oldish PC. Mostly I run a mac for the desk, and the
codes on linux/apache/php/mysql

I use too a Mac for all.
I have a standalone IE6 via X11 to see what this BS does (or try to).
<http://www.tatanka.com.br/ies4linux/news/49>

AsI say, I have a solution, just hoping for a better one.

Json ! Json ! Json !

you can create a special 'tag' in CSS?
I thought it was styles alone.

No you can use any html tag (made to inhering content, as DIV, H1..H5,
P, SPAN, etc...) and transform it in what you want (except TABLE that
causes a lot of problems with IE) as such as a 'block'.

Can you give me an example?

I did give them !
Did you have a look to their code ? (CSS, HTML, and sometimes JS)


Because we act here only on a css class (present or not)

Onmouseout proved to be very unreliable with much bubbling.

Not if you leave some space between items (margin).
Not if you have correctly started the IE behavior

Anyway, a click would be a better solution.

M$ mouse capture :

In fact part of te problem I had was with having a second menu 'screen'
that would also clear a selection of primary menus. So a menu clear was
needlessly clearing three menus,

But how much all that can weigh ?
Is it really to send on Internet ?
Which connexion and UC will be necessary to have to be able to open and
scroll this page ?

inneficiently, each one of which was scanning every div in the page.

No. Non sens. Out of work. Bad idea. And so on...

Well that's not nearly good enough. I dont want to clear parent menus
when I move to a child, not least because that leaves my cursor hanging
over nothing.

It's just a question of CSS to arrange the display as you want.

I'd post the URL so you can see it working, but sadly that would nee a
name/password and you then get access to real data on my database which
ain't mine to give away, and contains not a little =intellectual
property. It ain't boxes of chocolates.. ;-)

Not seen that URL.

 

[Laurent vilday]

SAM :

David Mark :

with a bit of code I would better understand.

Instead of :
Au lieu de :

function see(what) {
what.className = what.className==''? 'show' : '';
}
[...]
for(var i=0; i<n; i++) {
d.onmouseover = function() { see(this); };
d.onmouseout = function() { see(this); };
}

You should do something like (probably not exactly what David meant, but
hey, I do what I can with provided rants :
Tu devrais faire quelque chose comme ceci (probablement pas exactement
ce que David voulais dire, mais hey, je fais ce que je peux avec les
coups de gueules fournis :

function see(e/*the event useless here*/)
{
this.className = this.className == '' ? 'show' : '';
}
[...]
for ( var i = 0; i < n; i++ )
{
d.onmouseover = see;
d.onmouseout = see;
}

 

[SAM]

Le 11/30/08 4:29 PM, The Natural Philosopher a écrit :

Its been and continues to be an interesting exercise in code
optimisation: On the one hand it may well be used on relatively low
bandwidth connections, and there compressing the HTML has reduced page
load times impressively (well, if the machine that decompresses has the
horsepower anyway) and reducing visual lag by downloading a lot of the
data so that as much as possible apart from strict database updates, is
done in script in the browser.

The most economic in weight is Json :
- Only an array of (real) contents
(the contents comes in pure text without tags, ids, and so on)
- Only a little JS routine to "write" the html code
(or create the document via the DOM)

You'll find nothing shorter in number of lines
(in final file's weight sent to the browser).

Advantage, if you persevere in your idea to hide all non used divs via
JS, the array is already there, no loop in DOM to build it.

I am not sure how the ZIP algorithm works, but it seems to be able to

gzip worked with Netscape 3 (or 4) no reason that doesn't more work with
new browsers.
Gzipping on server is immediate.
Ungzipping in a browser spend last 1 second.
It was much used when there was not DSL and for numerous tabled datas to
xfer.

turn 2000 lines of essentially almost identical information into not
very much at all.

Its now at the stage where flyouts follow the mouse with no perceptible
delays, which is all it needs to be. As opposed to the worst case last
week, where 1.5 seconds was the time.

My biggests lag locally is now decompressing the page..about half a second.

Anyway you'll have to wait IE decides to display the final html :-(
You're not at 1/2 second for waiting ;-)

 

[Laurent vilday]

SAM :

David Mark :

About listener and events ?

Stéphane, arrêtes de me faire rire STP, je sais que tu sais

Google : event delegation

Simple example, with one single thing very important in mind :

I just don't care about feature detection and other error-prone stuff,
this is just an example to let readers understand the concept of event
delegation, this exact code is not tested and is *not* meant to be used
at all. Let's hope this will prevent another strict flames war.

<ul id="myUL">
<li id="one">1</li>
<li id="two">2</li>
<li id="three">3</li>
</ul>

Let's add a listener to all the <li>, it will alert their id when clicked.

1) "Usual" way to add listeners (kinda bad)
-------------------------------------

function listener(e) { alert(this.id); }

// error-prone, use <body onload="">, blah blah, yeah I know
window.onload = function()
{
// feature detection not here, blah blah, yeah I know
var
li_1 = document.getElementById('one'),
li_2 = document.getElementById('two'),
li_3 = document.getElementById('three');
li_1.onclick = listener;
li_2.onclick = listener;
li_3.onclick = listener;
};


2) Event delegation (better)
---------------------------------

function getTarget(e)
{
var target;
e = e || window.event;
// e.srcElement, is for IE
target = e.target || e.srcElement;
// old safari bug
if ( target.nodeType === 3 ) { target = target.parentNode; }
}

function listener(e)
{
var target = getTarget(e);
// we got a target and it's a LI
// not the more efficient way to detect, blah blah, yeah I know
if ( target && target.tagName.toUpperCase() == 'LI' )
{
alert(target.id);
return false;
}
return true;
}

window.onload = function()
{
var ul = document.getElementById('my_ul');
ul.onclick = listener;
};

Event delegation is the action of setting the listener on a parent of
the intended elements. It is very usefull especially when there is a lot
of child elements.

For example, let's assume the following <li> structure is repeated 50
times, it is, let's say, a listing of articles.

<li>
<a href="del.xxx?id=y" class="delete">delete</a>
<a href="upd.xxx?id=y" class="update">A label</a>
<a href="ac1.xxx?id=y" class="action1">do action 1</a>
<a href="ac2.xxx?id=y" class="action2">do action 2</a>
<a href="ac3.xxx?id=y" class="action3">do action 3</a>
</li>

Once we have 50 of thoses <li>, we have to transform the <a href="..">
to the matching XHR action, don't ask why, it is for the example.

Simple way is to loop the <li>, get the <a> elements on every of them
and add the javascript listener. Which result into 50 <li> multiply 5
<a> = 250 listeners in the document.

It will be more efficient to add a single (one) listener on the <ul>
which will delegate the click to the various <a>

I bet I am not very clear, especially in english, feel free to ask more
information about event delegation I may try to explain more clearly
(doubtfull) but I'm sure people knowing much better than me will
explain it in an easier way.

 

[Laurent vilday]

Laurent vilday :

function getTarget(e)
{
var target;
e = e || window.event;
// e.srcElement, is for IE
target = e.target || e.srcElement;
// old safari bug
if ( target.nodeType === 3 ) { target = target.parentNode; }
}

Oups, my bad, should of course be :

function getTarget(e)
{
var target = null;
e = e || window.event;
// e.srcElement, is for IE
target = e.target || e.srcElement;
// old safari bug
if ( target && target.nodeType === 3 ) { target = target.parentNode; }
return target;
}

 

[SAM]

Le 11/30/08 5:46 PM, Laurent vilday a écrit :

Salut Laurent,

SAM :

Instead of :
Au lieu de :

Ha! enfin quelqu'un qui m'évitera de googleiser l'anglais que
j'interprète mal
Ha! somebody speaking french and english.

function see(what) {
what.className = what.className==''? 'show' : '';
}
[...]
for(var i=0; i<n; i++) {
d.onmouseover = function() { see(this); };
d.onmouseout = function() { see(this); };
}

You should do something like (probably not exactly what David meant, but
hey, I do what I can with provided rants :
Tu devrais faire quelque chose comme ceci (probablement pas exactement
ce que David voulais dire, mais hey, je fais ce que je peux avec les
coups de gueules fournis :

It's almost what I finally did.

function see(e/*the event useless here*/)
{
this.className = this.className == '' ? 'show' : '';
}
[...]
for ( var i = 0; i < n; i++ )
{

except there ... where the listener will do the job.

d.onmouseover = see;
d.onmouseout = see;
}

And now I have trouble with that listener I've found somewhere, and as I
know you're a chief about that, code can be found here :
<http://cjoint.com/?lEs6Hv73eQ>
see : function addEvent()
that seems to me very complicated about attachEvent
spending 4 seconds in my IE.6 against 0.2 seconds in my FF.3

Faudrait que je pense à récupérer les "trucs" sur mokhet, déjà que
'molette' n'y est plus ;-)

Nota :
I've tried to use 'this' for a function harder than see()
and the 'this' in the function returns 'Object Window' instead of the
object getting the event.

<div onmouseover="fly()">
blah
</div>

function fly(e) {
alert(this); // [object Window]
var f = this.getElementsByTagName('dl')[0].cloneNode(true);
// error
// this.getE... is not a function

// blah
}

 

[Jorge]

Nota :
I've tried to use 'this' for a function harder than see()
and the 'this' in the function returns 'Object Window' instead of the
object getting the event.

<div onmouseover="fly()">
    blah
</div>

function fly(e) {
alert(this);  // [object Window]
var f = this.getElementsByTagName('dl')[0].cloneNode(true);
     // error
     // this.getE... is not a function

// blah

}

Sam,

<div onmouseover= "fly()">

turns ~into:

div.onmouseover= function () {
fly();
};

IIRC, to get around that, you can write:

<div onmouseover= "fly(this)">

It will turn ~into:

div.onmouseover= function () {
fly(this);
};

So that you'll get the proper "this" as the 1st parameter (whatever
its name) in your "fly" function:

function fly (p) {

//use "p" instead of "this"

alert(p);
var f= p.getElementsByTagName('dl')[0].cloneNode(true);

//etc.
}

 

[SAM]

Le 11/30/08 6:27 PM, Laurent vilday a écrit :

SAM :

Stéphane, arrêtes de me faire rire STP, je sais que tu sais

Je t'assure que je ne comprends rien à ce que me veut ce Mark.
Avec le barrage de la langue s'il ne donne pas des bouts de code pour
éclairer le propos, je ne trouve pas sa méthode très constructive.

With the barrier of language if David Mark does not give me snippets of
code to clarify the point, I can not find his method very constructive.

Google : event delegation
(snip)

It will be more efficient to add a single (one) listener on the <ul>
which will delegate the click to the various <a>

Ho Yes ! seen like that, it is very useful.
I'll go to try and come back.

Don't move ;-)



Here it is :
<http://cjoint.com/?lEvswiroOX>
and seems to work well in IE.6 or FF.3

M'enfin, c'est quand même une sacrée gymnastique, je trouve.

(<http://translate.google.com/transla...t quand même une sacré gymnastique, je trouve>)

 

[SAM]

Le 11/30/08 7:37 PM, Jorge a écrit :

Sam,

<div onmouseover= "fly()">

turns ~into:

div.onmouseover= function () {
fly();
};

IIRC, to get around that, you can write:

<div onmouseover= "fly(this)">

It's what I had and what worked.

but ...
David Mark made me mad with his histories of memory leak and listener !

If I do :

<p id="here"> example </p>

<script type="text/javascript">

var a = document.getElementById('here');
if ( a.attachEvent ) {
a.attachEvent( "onmouseover", fly );
} else
a.addEventListener( "mouseover", fly, false );

function fly(e) { alert(this.innerHTML); }
</script>

where 'e' is not used and 'this' is dropped from I don't know where.

As, curiously, the unknown 'this' does the expected job,
I tried to do the same in "normal" html.

 

[Jorge]

where 'e' is not used and 'this' is dropped from I don't know where.

As, curiously, the unknown 'this' does the expected job,
I tried to do the same in "normal" html.

Sam,

If/when the event handler function is assigned in JS code, such as in:

div.onclick= handler; or div.addEventListener('click', handler, true);
or Whatever it is in IE, then the "this" in the handler() function is
ok, it points to the element.

The problem comes when the handler is assigned in the .html in this
way:

<div onclick="handler()"></div>

because it is *not* the same as div.onclick= handler; but div.onclick=
function () { handler(); };

Do you see the difference ?
Do you see why "this" gets lost ?

Salut,

 

[SAM]

Le 11/30/08 10:18 PM, Jorge a écrit :

Sam,

If/when the event handler function is assigned in JS code, such as in:

div.onclick= handler; or div.addEventListener('click', handler, true);
or Whatever it is in IE, then the "this" in the handler() function is
ok, it points to the element.

The problem comes when the handler is assigned in the .html in this
way:

<div onclick="handler()"></div>

because it is *not* the same as div.onclick= handler; but div.onclick=
function () { handler(); };

Do you see the difference ?
Do you see why "this" gets lost ?

Where I get difficulties is with the other difference ;-)

from where 'this' gets something when :

div.onclick= handler;

I've so difficulties with prototypes
that forces too much my poor last neurone trying to follow what happens

Salut,

Hola ;-)

¡ Me encanta tu script 'blob' absolutamente !

 

[David Mark]

Well, that you can't append to the body does not mean that the
(already, previously) parsed html elements aren't in-place. They are.

That's not what I said. I said the body hasn't closed.

In any case, if you want to be able to append to the (not yet closed)
body tag just wrap the script into a setTimeout( ,0). That's all:

That is still no guarantee that adding a child to the body will work
(may in fact throw "Operation Aborted.")

[snip]

 

[David Mark]

Le 11/30/08 2:18 AM, David Mark a écrit :




with a bit of code I would better understand.



No that's wrong : gEBI is understood by IE and
in my test I want to use exclusively  document.all
(and only if the browser is really IE)

That is ridiculous.

see what M$ says :
<http://msdn.microsoft.com/en-us/library/ms537630(VS.85).aspx>
... the less worst being conditional comments :-(
Irrelevant.



what for ?
its just a demo to see time spending to run through DOM

The JS copy-clone was only to do not copy-paste manually 200 divs
(ang going back on each of them to correct IDs ans texts).

If you post it here, it should at least be competent. The feature
detection is the least of the worries at the moment.

As I'am targeting at worst IE6 ... doest it really matter ?

And you want it to crash in older browsers?

Once more : no, you're wrong.
I want to detect "IE" and not if the browser is able to do this or that.

And why would you want to do that? It makes no sense.

Once more it's to try "document.all" (with actual IEs of course).
Why to pass time to test other obscure and not yet born features ?

Anyway in 30 days the demo-test will be deleted (does M$ expects to
offer a new IE in this delay ?)

Never mind all of this. Did you fix the leaks?

Google translates 'needless' by 'it' ... :-(
Okay.



Could you code something as example ?
(so I can understand where could be or not the circular ref)
(perhaps ?)

Just lose the extra functions.

Why do you laugh at me like that ?

I am not laughing at you. It is a serious question.

[snip]

I begin vaguely to understand (outer function getting inner functions's
variable I think I rode)
Can 'this' be seen as an inner-outer-variable ?
in :

   foo.onmouseover = function() {see(this);};

which is a so often used way by programmers.

Would it be better (and is it possible ?) to do :

   foo.omouseover = 'see(this)';
   foo.omouseover = 'see(e)';
   foo.omouseover = see;

The last one (the first two are nonsense.) And guess what "this" will
refer to in the listener?

Didn't I see you spoke Spanish ?

Well, I suppose Spanish and French are roughly the same. And don't
believe everything you see (I don't speak Spanish.)

??? on My Mac ?

Obviously not.

sure I'll find a task manager for IE.linux runing under X11 ;-)

So fix your code and forget it (or get a Windows machine.)

I wait you for the corrections and not only : "do not do that"



About listener and events ?

No, about memory leaks.

[snip]

 

[David Mark]

SAM :

David Mark :

with a bit of code I would better understand.

Instead of :
Au lieu de :

function see(what) {
  what.className = what.className==''? 'show' : '';}

[...]
for(var i=0; i<n; i++) {
  d.onmouseover = function() { see(this); };
  d.onmouseout = function() { see(this); };

}

You should do something like (probably not exactly what David meant, but
hey, I do what I can with provided rants :
Tu devrais faire quelque chose comme ceci (probablement pas exactement
ce que David voulais dire, mais hey, je fais ce que je peux avec les
coups de gueules fournis :

Again with the French.

function see(e/*the event useless here*/)
{
  this.className = this.className == '' ? 'show' : '';}

[...]
for ( var i = 0; i < n; i++ )
{
  d.onmouseover = see;
  d.onmouseout = see;

}

That is what I meant (partly.) That fixes the memory leaks and stops
the creation of thousands of useless function objects.

[snip]

 

[David Mark]

Laurent vilday :


Oups, my bad, should of course be :

function getTarget(e)
{
  var target = null;
  e = e || window.event;
  // e.srcElement, is for IE
  target = e.target || e.srcElement;
  // old safari bug

It is not a bug, nor is it specific to Safari (e.g. NN6.2 does this.)

  if ( target && target.nodeType === 3 ) { target =

You don't need a strict comparison for this. But at least you didn't
sniff for Safari (like jQuery.)

[snip]

 

[Jorge]

That is still no guarantee that adding a child to the body will work
(may in fact throw "Operation Aborted.")

Why ? The closing body tag will have been parsed by then.

(Anybody else hates IE as much as I do ?)

 

[David Mark]

Le 11/30/08 7:37 PM, Jorge a écrit :








It's what I had and what worked.

But, you attached the listeners with script, creating a closure and
leaking lots of memory in the process.

but ...
David Mark made me mad with his histories of memory leak and listener !

Sorry for any inconvenience.

If I do :

<p id="here"> example </p>

<script type="text/javascript">

var a = document.getElementById('here');
if ( a.attachEvent ) {
     a.attachEvent( "onmouseover", fly );
   } else
     a.addEventListener( "mouseover", fly, false );

function fly(e) { alert(this.innerHTML); }
</script>

You could have used DOM0 as before.

where 'e' is not used and 'this' is dropped from I don't know where.

IE doesn't set "this" properly when using attachEvent.

 

[Jorge]

from where 'this' gets something when :

   div.onclick= handler;

var anObject= {};
var handler= function () { alert(this); }
anObject.onclick= handler;

handler(); //alerts window.
anObject.onclick(); //alerts anObject

See "Objects and this" in: http://javascript.crockford.com/survey.html

¡ Me encanta tu script 'blob' absolutamente !

You can get a copy and use it freely if you want to.

Salut,