please... some info would be very appreciated.

P

primus

Hello all,

First let me tell you that I have searched this group and the internet
and have not been able to find the answer to my problem. It is probably
because I don't know what to look for. I did though find my question
asked in 1997 by a guy in this group but it seems that noone answered
his(my) question. As a very last resort I ask my question now.

I have a function to handle many divs. How do I pass that function the
'object' of the div, so that I may change its style.

---
<div id="layer1" style="position:absolute;top:0;left:0;"></div>
<script language="javascript">
function move(divname){
divname.style.top = 100;
}

move(window.document.all.layer1);
</script>
 
R

Robi

primus said:
Hello all,

First let me tell you that I have searched this group and the internet
and have not been able to find the answer to my problem. It is probably
because I don't know what to look for. I did though find my question
asked in 1997 by a guy in this group but it seems that noone answered
his(my) question. As a very last resort I ask my question now.

I have a function to handle many divs. How do I pass that function the
'object' of the div, so that I may change its style.

---
<div id="layer1" style="position:absolute;top:0;left:0;"></div>
<script language="javascript">
function move(divname){
divname.style.top = 100;
}

move(window.document.all.layer1);
</script>

one way is:

function move(divname){
document.getElementById(divname).style.top = 100;
}
move("layer1");

but that will only work with browsers that support getElementById

now check message Michael Winter added a nifty checker in there.

there, if I understand it correctly, you would add the "var getReferenceById..." code
into your move() function - changing move(divname) to move(id) or replacing the "id"
references to "divname", whichever is easier for you - and then add

if(getReferenceById && getReferenceById.style) getReferenceById.style.top = 100+'px'.

I'm not sure where 'px' doesn't work, but there is a browser that doesn't work right
if you omit the 'px' addition.

Robi
 
A

ASM

primus said:
Hello all,

Hello alone,
As a very last resort I ask my question now.
I have a function to handle many divs. How do I pass that function the
'object' of the div, so that I may change its style.

<html>
<style type="text/css">
* { text-align: center }
</style>
<script type="text/javascript">
function move(divname,left,top){
if(document.getElementById) {
var d = document.getElementById(divname).style;
if(top) d.top = top+'px';
if(left) d.left = left+'px';
}
}
</script>
<div id="layer1"
style="position:absolute;top:0;left:0;width:200px;border:1px solid red">
<h2>DIV 1 to move</h2>
<p><a href="javascript:move('layer1',100,50);">
move layer1 from window-top = 50, from window-left = 100
</a>
<p><a href="javascript:move('layer2',320,20);">
move layer2 to window-top = 50, and window-left = 320
</a>
</div>
<div id="layer2" style="position:absolute;top:0;
left:-300;width:200px;border:1px solid red">
<h2>DIV 2 to move</h2>
</div>
</html>
 
P

primus

Thank you! Thank you! Thank you!

My headache is gone now! I didn't know it was that easy.

Again Thank You,
Primus
 
A

ASM

ASM wrote:
[snip]
[follow]

if you need a compatibility even with my NC4.5 or IE4
use that :

<script type="text/javascript">
function move(divname,left,top){
var d = (document.all)? document.all(divname).style :
(document.getElementById)?
document.getElementById(divname).style :
(document.layers)? document.layers[divname] :
'';
var p = document.layers? '' : 'px';
if(top) d.top = top+p;
if(left) d.left = left+p;
}
</script>



Sorry, I didn't use :
getReferenceById
from Michael Winter
 
R

Randy Webb

Danny said:
From the event obj, use literally 'this':

<div onclick="alert(this.innerHTML)"> <b> shows this html</b> upon
clicking</div>

And hope the UA supports innerHTML. Learn to code before posting here
please.
 
R

Richard Cornford

ASM wrote:
if you need a compatibility even with my NC4.5 or IE4
use that :

<script type="text/javascript">
function move(divname,left,top){
var d = (document.all)? document.all(divname).style :
(document.getElementById)?
document.getElementById(divname).style :
(document.layers)? document.layers[divname] :
'';

It cannot be a good plan to place the above inside the body of a
function that wants to make reference to a DOM element. Making such a
reference is such a common task that the same (or similar) code would
need to be repeated inside many function bodies as the size of the code
increases.

Instead it would make more sense to recognise that this is a task that
would be more usefully done in a dedicated external function, or two
(one for element reference retrieval and one for style object
normalisation.
var p = document.layers? '' : 'px';

This is object inference. It is not necessarily true that a browser that
implements a document.layers collection does not require/understand 'px'
units appended to a string that is to be assigned to a top or left
property (it is even a bit dubious to be assigning a string).

A more direct test would examine the existing top or left property and
only add units where that property was a string. And where the property
is not a string then it woudl also be better not to be assigning a
string value. The latter can be achieved by taking advantage of the duel
nature of the + operator; E.G.:-

p = (typeof d.top == 'string')?'px':0;

- so:-

d.top = top + p;

Assigns a string with 'px' appended if top was a string, and a number
with zero added (so unchanged) if it was not a string.

There is still an assumption in this approach but it is an assumption
based on a test that has a close relationship with the action taken as a
result, so it is an assumption that is less vulnerable to the influence
of the unknown browser.
if(top) d.top = top+p;
if(left) d.left = left+p;
<snip>

If the function is passed top or left values of zero the above tests
will cause it not to apply those values. Once positions have been set to
non-zero values it is completely reasonable to assign zero value to
those positions.

Richard.
 
M

Michael Winter

primus wrote:
[snip]
<script language="javascript">
function move(divname){
divname.style.top = 100;
}

move(window.document.all.layer1);
</script>
[snip]

now check message Michael Winter added a nifty checker in there.

there, if I understand it correctly, you would add the "var getReferenceById..." code
into your move() function - changing move(divname) to move(id) or replacing the "id"
references to "divname", whichever is easier for you - and then add

if(getReferenceById && getReferenceById.style) getReferenceById.style.top = 100+'px'.

The code I posted results in the creation of one of three functions. The
first is a simple wrapper around the document.getElementById method. The
second uses the document.all collection to emulate gEBI by filtering the
results that the all collection might return. The final function simply
returns null, and will be used if the host supports neither gEBI nor the
all collection.

Part of the purpose of this code is to create a slightly more guaranteed
environment. That is, getReferenceById will always exist, so you can
rely on your ability to call it. All you need to do is check the return
value to make sure you have an object reference.

So, instead of:

var obj = document.getElementById('myElement');

if(obj) ...

you'd write:

var obj = getReferenceById('myElement');

if(obj) ...

[snip]

Mike
 
R

Robi

Michael Winter wrote:
[...]
The code I posted results in the creation of one of three functions. The
first is a simple wrapper around the document.getElementById method. The
second uses the document.all collection to emulate gEBI by filtering the
results that the all collection might return. The final function simply
returns null, and will be used if the host supports neither gEBI nor the
all collection.

Part of the purpose of this code is to create a slightly more guaranteed
environment. That is, getReferenceById will always exist, so you can
rely on your ability to call it. All you need to do is check the return
value to make sure you have an object reference.

So, instead of:

var obj = document.getElementById('myElement');

if(obj) ...

you'd write:

var obj = getReferenceById('myElement');

if(obj) ...

Mike, thanks for the explanation.
You can tell, I had some understanding problems :)


Robi "s/some//g"
 
A

ASM

Richard said:
ASM said:
<script type="text/javascript">
function move(divname,left,top){
var d = (document.all)? document.all(divname).style :
(document.getElementById)?
document.getElementById(divname).style :
(document.layers)? document.layers[divname] :
'';


It cannot be a good plan to place the above inside the body of a
function that wants to make reference to a DOM element. Making such a
reference is such a common task that the same (or similar) code would
need to be repeated inside many function bodies as the size of the code
increases.

Yes you're absolutly right and I agree with you.
(but in this answer the purpose was not to rebuild the world
nor to confuse querer (fr: questionneur) )
p = (typeof d.top == 'string')?'px':0;

- so:-

d.top = top + p;

Good ! thanks
If the function is passed top or left values of zero the above tests
will cause it not to apply those values. Once positions have been set to
non-zero values it is completely reasonable to assign zero value to
those positions.

not understood (I'll try and see)

I dit test on Mac my function in : NC4.5, FF 10, IE 5.2
and ... did work correctly :)

thanks for *validate* corrections
 
G

Grant Wagner

ASM said:
function move(divname,left,top){
if(document.getElementById) {
var d = document.getElementById(divname).style;
if(top) d.top = top+'px';
if(left) d.left = left+'px';
}
}

This code is not completely safe. There is no guarantee that
document.getElementById() will return a non-null object reference. Any
attempt to access the -style- attribute of a null object reference will
result in an error. Also, your tests -if (top)- and -if (left)- will
never allow you to set your move() to [0,y] or [x,0].

function move(divId, left, top) {
var d;
if (document.getElementById &&
(d = document.getElementById(divId)) &&
(d = d.style)) {
if ('number' == typeof top) d.top = top + 'px';
if ('number' == typeof left) d.left = left + 'px';
}
}

will provide a slightly more robust implementation, although it still
doesn't guarantee that setting d.top/d.left will actually do anything.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top