Ensure that a image in a table (scrolled) is visible

  • Thread starter Thread starter Lloyd Sheen
  • Start date Start date
L

Lloyd Sheen

I have a table (produced from a datalist) that has an image followed by
text. The image is a 32px scalled down version of the actual image. When
the user moves over the image I want the image to expand to 72px. This
works fairly well but if I am on the last image and that image is in a list
which requires a scrollbar, the javascript code that expands the image makes
it show such that only a couple of pixels are visible and the mouse now does
not hover over the image. I would like to scroll in the table such that the
image will show once the image is expanded.

Any ideas??

TIA
Lloyd Sheen
 
I have a table (produced from a datalist) that has an image followed by
text.  The image is a 32px scalled down version of the actual image.  When
the user moves over the image I want the image to expand to 72px.  This
works fairly well but if I am on the last image and that image is in a list
which requires a scrollbar, the javascript code that expands the image makes
it show such that only a couple of pixels are visible and the mouse now does
not hover over the image.  I would like to scroll in the table such thatthe
image will show once the image is expanded.
Click to expand...

1) Add to the last image

window.scrollBy(0,100);

it would scroll down +100px

2) Check current image position and a window size (e.g. using
document.body.clientHeight) and decide if you need to scroll the
window down or image is visible.

Hope it helps
 
I have a table (produced from a datalist) that has an image followed by
text. The image is a 32px scalled down version of the actual image. When
the user moves over the image I want the image to expand to 72px. This
works fairly well but if I am on the last image and that image is in a
list
which requires a scrollbar, the javascript code that expands the image
makes
it show such that only a couple of pixels are visible and the mouse now
does
not hover over the image. I would like to scroll in the table such that
the
image will show once the image is expanded.
Click to expand...

1) Add to the last image

window.scrollBy(0,100);

it would scroll down +100px

2) Check current image position and a window size (e.g. using
document.body.clientHeight) and decide if you need to scroll the
window down or image is visible.

Hope it helps


The table is in an area of the page in which the scrolling is only to keep
the number of items to a dull roar. I allow only 10 items to be shown. If
there are more then a scrollbar will be shown (auto). It is not the page
that needs scrolling, just the table within the scroll area.

I am not real good with Javascript and have by using debugger; been looking
at the properties but can see nothing that will ensure that the image is
shown within the scroll area.

Lloyd
 
1) Add to the last image

window.scrollBy(0,100);

it would scroll down +100px

2) Check current image position and a window size (e.g. using
document.body.clientHeight) and decide if you need to scroll the
window down or image is visible.

Hope it helps

The table is in an area of the page in which the scrolling is only to keep
the number of items to a dull roar.  I allow only 10 items to be shown.  If
there are more then a scrollbar will be shown (auto).  It is not the page
that needs scrolling, just the table within the scroll area.
Click to expand...

Ok, do you mean something like this?

<div id="div1" style="height:500px;overflow:scroll">

....long table here....

</div>

If yes, then here the script which could scroll the div to the end:

<script>
var objDiv = document.getElementById("div1");
objDiv.scrollTop = objDiv.scrollHeight;
</script>
 
Back
Top