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

Discussion in 'Javascript' started by sonic, Aug 16, 2005.

  1. sonic

    sonic Guest

    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.
    sonic, Aug 16, 2005
    #1
    1. Advertising

  2. sonic

    ASM Guest

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

    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.moriaux/truc/bouton_3_etats_css.htm

    --
    Stephane Moriaux et son [moins] vieux Mac
    ASM, Aug 17, 2005
    #2
    1. Advertising

  3. sonic

    sonic Guest

    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 ?
    sonic, Aug 17, 2005
    #3
  4. sonic

    ASM Guest

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

    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
    ASM, Aug 17, 2005
    #4
  5. sonic

    sonic Guest

    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
    sonic, Aug 17, 2005
    #5
  6. sonic

    sancha Guest

    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 :((
    sancha, Aug 17, 2005
    #6
  7. sonic

    ASM Guest

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

    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
    ASM, Aug 17, 2005
    #7
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. misiek
    Replies:
    0
    Views:
    2,279
    misiek
    Feb 20, 2006
  2. Replies:
    11
    Views:
    934
    Oliver Wong
    Apr 26, 2006
  3. Sameeksha
    Replies:
    0
    Views:
    117
    Sameeksha
    Apr 7, 2005
  4. Mark Kremers

    Behaviors in Behaviors

    Mark Kremers, Jul 31, 2003, in forum: Javascript
    Replies:
    0
    Views:
    117
    Mark Kremers
    Jul 31, 2003
  5. Weston C
    Replies:
    1
    Views:
    85
    Eric Bohlman
    Dec 26, 2003
Loading...

Share This Page