Scrolling Issue

[John]

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

 

[SAM]

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;cursorointer;position:absolute;top:3px;right:3px;border:1px
solid black;" onclick="alert(\'OK\');HideSpan()" src="somePic.jpg" />';

 

[John]

John a écrit :




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


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;cursorointer;position:absolute;top:3px;righ­t:3px;border:1px
solid black;" onclick="alert(\'OK\');HideSpan()" src="somePic.jpg" />';

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.

 

[SAM]

John a écrit :

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)

 

[John]

John a écrit :

On Sep 8, 10:43 am, SAM <[email protected]>
wrote:

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)

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.