469,623 Members | 937 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,623 developers. It's quick & easy.

please... some info would be very appreciated.

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>
---

If you could give me any help it would be very much appreciated!
Primus

Jul 23 '05 #1
11 1399
primus wrote:
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>
---

If you could give me any help it would be very much appreciated!
Primus


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 news:US******************@text.news.blueyonder.co. uk
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
Jul 23 '05 #2
ASM
primus wrote:
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>
--
Stephane Moriaux et son [moins] vieux Mac
Jul 23 '05 #3
Thank you! Thank you! Thank you!

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

Again Thank You,
Primus

Jul 23 '05 #4
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

--
Stephane Moriaux et son [moins] vieux Mac
Jul 23 '05 #5

From the event obj, use literally 'this':

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

On Wed, 13 Jul 2005 16:49:05 -0700, primus <pr*****************@gmail.com>
wrote:

--
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
Jul 23 '05 #6
Danny wrote:

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.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Jul 23 '05 #7
ASM wrote:
<snip>
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.
Jul 23 '05 #8
On 14/07/2005 02:03, Robi wrote:
primus wrote:
[snip]
<script language="javascript">
function move(divname){
divname.style.top = 100;
}

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


[snip]
now check message news:US******************@text.news.blueyonder.co. uk
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

--
Michael Winter
Prefix subject with [News] before replying by e-mail.
Jul 23 '05 #9
ASM
Richard Cornford wrote:
ASM wrote:
<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) )
var p = document.layers? '' : 'px';


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
--
Stephane Moriaux et son [moins] vieux Mac
Jul 23 '05 #10
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"
Jul 23 '05 #11
"ASM" <st*********************@wanadoo.fr> wrote in message
news:42***********************@news.wanadoo.fr...

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.

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq
Jul 23 '05 #12

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Baby Blue | last post: by
reply views Thread by Richard Gabriel | last post: by
9 posts views Thread by hope | last post: by
3 posts views Thread by prabhupr | last post: by
reply views Thread by Joe | last post: by
6 posts views Thread by chanko | last post: by
1 post views Thread by Larry Hale | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.