Scrolling Issue

Discussion in 'Javascript' started by John, Sep 8, 2008.

  1. John

    John Guest

    Hello,

    I am having an issue with a span I create dynamically with an image
    inside that I use as a close button. The image has a css cursor
    property set to pointer, and an onclick event associated with it.
    When
    the the span is scrolled, I reset the position of my image to it is
    always in the top right corner of the span.


    When I scroll down the span element, my image loses its cursor
    property and also its onclick event, unless I scroll back to the very
    top in which case it works again. It is like the onclick event and
    the
    cursor property do not scroll with the image.


    If anyone has any suggestions, I would love to hear them. Thanks!


    function CreateSpan() {
    var sp = document.getElementById('spDetails');
    if (!sp) {
    sp = document.createElement('span');
    sp.style.position='absolute';
    sp.style.overflow='auto';
    sp.style.width='400px';
    sp.style.height='200px';
    sp.style.border='3px solid #000000';
    sp.style.backgroundColor='green';
    sp.style.opacity='.95';
    sp.style.filter='alpha(opacity=95)';
    sp.style.mozOpacity='.95';
    sp.style.color='white';
    sp.id='spDetails';
    sp.style.zIndex=8000;//always want on top, pop-up box style.
    sp.style.visibility='visible';
    sp.onscroll = function () {
    var sp2, sp;
    sp = document.getElementById('spDetails')
    sp2 = sp.getElementsByTagName('img')[0];
    if (sp2) {
    sp2.style.top=(sp.scrollTop + 3).toString() + 'px';
    sp2.style.right='3px';
    } else {
    alert('no img');
    }
    }//end function


    var spInner = new String('');
    spInner += '<img style="height:20px;width:
    20px;cursor:pointer;position:absolute;top:3px;right:3px;border:1px
    solid black;" onclick="HideSpan()" src="somePic.jpg" />';
    spInner += '<table id="poDetTbl"
    style="color:#FFFFFF;position:absolute;top:22px;width:380px"> ';
    spInner += ' <tr> ';
    spInner += ' <td>Data Line 1: </td> ';
    spInner += ' <td></td> ';
    spInner += ' </tr> ';
    spInner += ' <tr> ';
    spInner += ' <td>Data Line 2: </td> ';
    spInner += ' <td></td> ';
    spInner += ' </tr>';
    spInner += ' <tr>';
    spInner += ' <td>Data Line 3: </td>';
    spInner += ' <td></td> ';
    spInner += ' </tr> ';
    spInner += '</table>';


    sp.innerHTML=spInner;
    document.body.appendChild(sp);
    } else {
    sp.style.visibility='visible';
    }//end if-else span already exists
    }//end CreateSpan() function
     
    John, Sep 8, 2008
    #1
    1. Advertising

  2. John

    SAM Guest

    John a écrit :
    >
    > When I scroll down the span element, my image loses its cursor
    > property and also its onclick event, unless I scroll back to the very
    > top in which case it works again. It is like the onclick event and
    > the
    > cursor property do not scroll with the image.


    yes it does but hidden by tds (or trs ?), at least with my Fx

    > If anyone has any suggestions, I would love to hear them. Thanks!


    z-index works when it wants

    put your image outside of your table :

    var spInner = new String(''); spInner += '<table id="poDetTbl"
    style="color:#FFFFFF;position:absolute;top:22px;width:380px"> ';
    spInner += ' <tr> ';
    spInner += ' <td>Data Line 1: <\/td> ';
    spInner += ' <td><\/td> ';
    spInner += ' <\/tr> ';
    spInner += ' <tr> ';
    spInner += ' <td>Data Line 2: <\/td> ';
    spInner += ' <td><\/td> ';
    spInner += ' <\/tr>';
    spInner += ' <tr>';
    spInner += ' <td>Data Line 3: <\/td>';
    spInner += ' <td><\/td> ';
    spInner += ' <\/tr> ';
    spInner += '<\/table>';
    spInner += '<img
    style="height:20px;width:20px;cursor:pointer;position:absolute;top:3px;right:3px;border:1px
    solid black;" onclick="alert(\'OK\');HideSpan()" src="somePic.jpg" />';


    --
    sm
     
    SAM, Sep 8, 2008
    #2
    1. Advertising

  3. John

    John Guest

    On Sep 8, 10:43 am, SAM <>
    wrote:
    > John a écrit :
    >
    >
    >
    > > When I scroll down the span element, my image loses its cursor
    > > property and also its onclick event, unless I scroll back to the very
    > > top in which case it works again. It is like the onclick event and
    > > the
    > > cursor property do not scroll with the image.

    >
    > yes it does but hidden by tds (or trs ?), at least with my Fx
    >
    > > If anyone has any suggestions, I would love to hear them. Thanks!

    >
    > z-index works when it wants
    >
    > put your image outside of your table :
    >
    > var spInner = new String(''); spInner += '<table id="poDetTbl"
    > style="color:#FFFFFF;position:absolute;top:22px;width:380px"> ';
    >         spInner += '  <tr> ';
    >         spInner += '    <td>Data Line 1: <\/td> ';
    >         spInner += '    <td><\/td> ';
    >         spInner += '  <\/tr> ';
    >         spInner += '  <tr> ';
    >         spInner += '    <td>Data Line 2: <\/td> ';
    >         spInner += '    <td><\/td> ';
    >         spInner += '  <\/tr>';
    >         spInner += '  <tr>';
    >         spInner += '    <td>Data Line 3: <\/td>';
    >         spInner += '    <td><\/td> ';
    >         spInner += '  <\/tr> ';
    >         spInner += '<\/table>';
    >        spInner += '<img
    > style="height:20px;width:20px;cursor:pointer;position:absolute;top:3px;righ­t:3px;border:1px
    > solid black;" onclick="alert(\'OK\');HideSpan()" src="somePic.jpg" />';
    >
    > --
    > sm


    Thank you for the quick reply. I already had it out of the table, but
    I took it out of the span and that works great! The only difference is
    when I call HideSpan I have to add an extra line to make the close
    button image disappear as well. (And of course had to use a different
    way to position the image on the scroll. Thanks again.
     
    John, Sep 8, 2008
    #3
  4. John

    SAM Guest

    John a écrit :
    > On Sep 8, 10:43 am, SAM <>
    > wrote:
    >>
    >> put your image outside of your table :

    >
    > Thank you for the quick reply. I already had it out of the table,


    Ho Yes, sorry !
    I wanted to say : put the image after the table
    instead of before it.
    Like that you're sure this button is always above the table
    (and without any z-index)

    > but I took it out of the span and that works great!
    > The only difference is when I call HideSpan I have to add an extra line
    > to make the close button image disappear as well.


    ? you need only one line with code I've given !

    function HideSpan() {
    document.body.removeChild(document.getElementById('spDetails'));
    }

    which delete all the 'spDetails' (with its image-button)


    +/- funny variante :

    function HideSpan() {
    var but = document.getElementById('spDetails');
    but = but.getElementsByTagName('img')[0].cloneNode(true);
    but.onclick = function() {
    CreateSpan();
    document.body.removeChild(this);
    };
    but.style.top=(document.body.scrollTop + 3).toString() + 'px';
    document.body.removeChild(document.getElementById('spDetails'));
    document.body.appendChild(but);
    }


    > (And of course had to use a different
    > way to position the image on the scroll.


    See:
    <http://cjoint.com/?jitQ2sCdKo>
    (not tested with IE)

    --
    sm
     
    SAM, Sep 8, 2008
    #4
  5. John

    John Guest

    On Sep 8, 12:47 pm, SAM <>
    wrote:
    > John a écrit :
    >
    > > On Sep 8, 10:43 am, SAM <>
    > > wrote:

    >
    > >> put your image outside of your table :

    >
    > > Thank you for the quick reply. I already had it out of the table,

    >
    > Ho Yes, sorry !
    > I wanted to say : put the image after the table
    > instead of before it.
    > Like that you're sure this button is always above the table
    > (and without any z-index)
    >
    > > but I took it out of the span and that works great!
    > > The only difference is when I call HideSpan I have to add an extra line
    > > to make the close button image disappear as well.

    >
    > ? you need only one line with code I've given !
    >
    > function HideSpan() {
    > document.body.removeChild(document.getElementById('spDetails'));
    >
    > }
    >
    > which delete all the 'spDetails' (with its image-button)
    >
    > +/- funny variante :
    >
    > function HideSpan() {
    > var but = document.getElementById('spDetails');
    > but =  but.getElementsByTagName('img')[0].cloneNode(true);
    > but.onclick = function() {
    >     CreateSpan();
    >     document.body.removeChild(this);
    >     };
    > but.style.top=(document.body.scrollTop + 3).toString() + 'px';
    > document.body.removeChild(document.getElementById('spDetails'));
    > document.body.appendChild(but);
    >
    > }
    > > (And of course had to use a different
    > > way to position the image on the scroll.

    >
    > See:
    > <http://cjoint.com/?jitQ2sCdKo>
    > (not tested with IE)
    >
    > --
    > sm


    I understand what you are saying, but ended up having the image
    outside of the span 'spDetails', causing the need for another line. It
    just seemed to be a little smoother that way.
     
    John, Sep 8, 2008
    #5
    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. Replies:
    2
    Views:
    774
    Joshua Cranmer
    Mar 13, 2007
  2. Mel
    Replies:
    3
    Views:
    98
    kaeli
    Mar 25, 2005
  3. John

    Scrolling Issue

    John, Sep 8, 2008, in forum: Javascript
    Replies:
    0
    Views:
    106
  4. Replies:
    2
    Views:
    138
  5. TK
    Replies:
    0
    Views:
    127
Loading...

Share This Page