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="http://192.168.5.35/Images/
    poPics/close.gif" />';
    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 function CreateSpan
    John, Sep 8, 2008
    #1
    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:
    760
    Joshua Cranmer
    Mar 13, 2007
  2. Mel
    Replies:
    3
    Views:
    88
    kaeli
    Mar 25, 2005
  3. John

    Scrolling Issue

    John, Sep 8, 2008, in forum: Javascript
    Replies:
    4
    Views:
    108
  4. Replies:
    2
    Views:
    124
  5. TK
    Replies:
    0
    Views:
    108
Loading...

Share This Page