469,319 Members | 2,437 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

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

image/row cloning with attached behaviors. clicking cloned image, executes methods on original.

Hello,

I am cloning a table row which contains images that have behaviors
attached to them as well as onclick events.

The problem is that the cloned row seems to be executing the
behavior/events on the original rows image. I overwrote the onclick as
well as attached a behavior to the image in cloned row, but events such
as onmouseover execute now on both images when the duplicate is mouse
overed.

here is how i clone the row:

var oldRow = t.rows[0];
var newRow = oldRow.cloneNode( true );

I know that i can re-create the new row/image from scratch, however, I
would like to be able to use the cloning technique because of the way
the original is crated ( on the server ) with alot of properties/events
that would need to be re-created. The only thing i need to change on
the cloned row is the id's of most elements. I got everything to work
correctly accept for one last issue explained in teh first half of this
post.

Aug 16 '05 #1
7 2566
ASM
sonic wrote:
Hello,

I am cloning a table row which contains images that have behaviors
attached to them as well as onclick events.

The problem is that the cloned row seems to be executing the
behavior/events on the original rows image. I overwrote the onclick as
well as attached a behavior to the image in cloned row, but events such
as onmouseover execute now on both images when the duplicate is mouse
overed.

here is how i clone the row:

var oldRow = t.rows[0];
var newRow = oldRow.cloneNode( true );


now is to know how you made your roll-over function on images ...
(if it works on name (or id) of images
that will want to roll 2 (or more) same nammed images )

You know you can use css to do a roll-over ?
(automaticaly pre-loaded image and no possibility to confuse)
simple css roll-over
http://perso.wanadoo.fr/stephane.mor..._etats_css.htm

--
Stephane Moriaux et son [moins] vieux Mac
Aug 16 '05 #2
the rollover is a small part of the attached behaviors.
what would be the difference if it was done by name vs id in the
context of my original question ?

Aug 17 '05 #3
ASM
sonic wrote:
the rollover is a small part of the attached behaviors.
what would be the difference if it was done by name vs id in the
context of my original question ?


<cite>
but events such
as onmouseover execute now on both images when the duplicate is mouse
overed.
</cite>

I understood :
- you clone a row with images
- images have a rollover

I supose you appendChild somewhere this clone (and its images)

So we get 2 teams of images with same ids or names
if you rollover the image nammed 'img_1'
wich one of both 'img_1' the browser has to roll ?

--
Stephane Moriaux et son [moins] vieux Mac
Aug 17 '05 #4

Chances are is due to the absolute addressing, the IDs, instead, either,
rename the ids on the cloned one, or, do not use IDs in the source, and
use 'this' or just node/sibling addressing instead.
Danny

--
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
Aug 17 '05 #5
hi,
that is correct,
however after cloning, i override the image id's in the cloned row.
i also attempted to override names, but those don't seem to get
overriden !
id's appear with new names when i write out the new rows innerHTML

Aug 17 '05 #6
use 'this' it might work
forget abt id or name if you are using IE

i clone a row and then do getElementsByName('firstrow') and guess what
i have 2 rows with the same name... oh yeah i did set the id,name of
the cloned row differently but as u now IE is special. btw i also
found out if u have an element without an name but an id. and do
getElementsByName it will fethch the element with the id but no name
@#$@#$
and getElementsByName is case insensitive as well :((

Aug 17 '05 #7
ASM
sonic wrote:
hi,
that is correct,
however after cloning, i override the image id's in the cloned row.
i also attempted to override names, but those don't seem to get
overriden !
id's appear with new names when i write out the new rows innerHTML


did you also correct the mouse-envent calling ?
simple JS rollover without name of image (nor id of link) :
(to see if it corrects pblems with clones ?)

function roll(obj,newImg) {
obj = obj.getElementsByTagName('IMG')[0].src
obj = newImg;
}

<a href="foo_1.htm" id="lk_1"
onmouseover="roll(this,'pict_1o.jpg');"
onmouseoout="roll(this,'pict_1.jpg');">
<img src="pict_1.jpg">
</a>
<a href="foo_2.htm" id="lk_2"
onmouseover="roll(this,'pict_2o.jpg');"
onmouseoout="roll(this,'pict_2.jpg');">
<img src="pict_2.jpg">
</a>

and much beter using pre-loaded images

and once more : use css roll-overs

--
Stephane Moriaux et son [moins] vieux Mac
Aug 17 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by Csaba Gabor | last post: by
reply views Thread by meh | last post: by
8 posts views Thread by kurotsuke | last post: by
2 posts views Thread by genojoe | last post: by
2 posts views Thread by Janis Papanagnou | last post: by
1 post views Thread by colmkav | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by Gurmeet2796 | last post: by
reply views Thread by harlem98 | last post: by
reply views Thread by listenups61195 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.