Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Displaying a Image within a scrollable box/canvas of fixed dimensions

Reply
Thread Tools

Displaying a Image within a scrollable box/canvas of fixed dimensions

 
 
crazychrisy54@hotmail.com
Guest
Posts: n/a
 
      03-13-2008
Hi there, I am new to JavaScript and wonder if it could be used to
solve my problem, any help would be much appreciated!

I have a html web page which contains a table on the left hand side
and image on the right, both of which are updating. As the image
updates however it gets bigger and starts to look messy next to the
constant sized updating table.

I just wondered is it possible to use java script to place the ever
growing image into some fixed box/canvas on this page which contains
scroll bars when the image's size exceeds that of the box/canvas.

If this is possible could you perhaps help explain how it would be
done? Any ideas would be gratefully recieved! Thanks for your time

Regards
Chris
 
Reply With Quote
 
 
 
 
SAM
Guest
Posts: n/a
 
      03-13-2008
http://www.velocityreviews.com/forums/(E-Mail Removed) a écrit :
> Hi there, I am new to JavaScript and wonder if it could be used to
> solve my problem, any help would be much appreciated!
>
> I have a html web page which contains a table on the left hand side
> and image on the right, both of which are updating. As the image
> updates however it gets bigger and starts to look messy next to the
> constant sized updating table.
>
> I just wondered is it possible to use java script to place the ever
> growing image into some fixed box/canvas on this page which contains
> scroll bars when the image's size exceeds that of the box/canvas.
>
> If this is possible could you perhaps help explain how it would be
> done? Any ideas would be gratefully recieved! Thanks for your time


It seems to be a CSS question ...
Put the image in an overflowed div
<http://www.w3.org/TR/CSS21/visufx.html#x0>

<table width="100%">
<tr>
<td width=120><img src="1.jpg" alt="small img"></td>
<td rowspan="5">
<div style="overflow:auto;height:500px">
<img src="1B.jpg" alt="big img">
</div>
</td>
</tr>

.....

</table>

All images to insert in the page are made with their right sizes
^^^^^^^^^^^^^^^^^^^^^^
The IMG tags have no size attributes (nor CSS sizing).

--
sm
 
Reply With Quote
 
 
 
 
crazychrisy54@hotmail.com
Guest
Posts: n/a
 
      03-13-2008
On Mar 13, 12:13 pm, SAM <(E-Mail Removed)>
wrote:
> (E-Mail Removed) a écrit :
>
> > Hi there, I am new to JavaScript and wonder if it could be used to
> > solve my problem, any help would be much appreciated!

>
> > I have a html web page which contains a table on the left hand side
> > and image on the right, both of which are updating. As the image
> > updates however it gets bigger and starts to look messy next to the
> > constant sized updating table.

>
> > I just wondered is it possible to use java script to place the ever
> > growing image into some fixed box/canvas on this page which contains
> > scroll bars when the image's size exceeds that of the box/canvas.

>
> > If this is possible could you perhaps help explain how it would be
> > done? Any ideas would be gratefully recieved! Thanks for your time

>
> It seems to be a CSS question ...
> Put the image in an overflowed div
> <http://www.w3.org/TR/CSS21/visufx.html#x0>
>
> <table width="100%">
> <tr>
> <td width=120><img src="1.jpg" alt="small img"></td>
> <td rowspan="5">
> <div style="overflow:auto;height:500px">
> <img src="1B.jpg" alt="big img">
> </div>
> </td>
> </tr>
>
> ....
>
> </table>
>
> All images to insert in the page are made with their right sizes
> ^^^^^^^^^^^^^^^^^^^^^^
> The IMG tags have no size attributes (nor CSS sizing).
>
> --
> sm


Fantastic sm that works like a charm!
Thankyou very much
Chris
 
Reply With Quote
 
crazychrisy54@hotmail.com
Guest
Posts: n/a
 
      03-14-2008
Hi there I now have another question related to this issue.

Putting the image in a overflow div has worked well for when the image
size exceeds that of the div container, scrollable bars horizontally
and vertically are automatically provided. This image however is
gradually increasing after iterative refreshes (of 5 secs) and thus at
it does, the web page will only show the top left part of that image
unless you use the scroll bars to look around.

My question is therefore: Can you make the scroll bars which get
generated from the overflow div to automatically focus to the bottom
right part of the image after every refresh. If not do you have any
ideas of how I can go about adding this functionality.

This would then allow the user to see the latest part of the image
which gets generated after a refresh without having to move the scroll
bars.

Any help would be much appreciated!
Thanks
Chris



 
Reply With Quote
 
SAM
Guest
Posts: n/a
 
      03-14-2008
(E-Mail Removed) a écrit :
> Hi there I now have another question related to this issue.
>
> Putting the image in a overflow div has worked well for when the image
> size exceeds that of the div container, scrollable bars horizontally
> and vertically are automatically provided. This image however is
> gradually increasing after iterative refreshes (of 5 secs) and thus at
> it does, the web page will only show the top left part of that image
> unless you use the scroll bars to look around.
>
> My question is therefore: Can you make the scroll bars which get
> generated from the overflow div to automatically focus to the bottom
> right part of the image after every refresh. If not do you have any
> ideas of how I can go about adding this functionality.
>
> This would then allow the user to see the latest part of the image
> which gets generated after a refresh without having to move the scroll
> bars.



<div id="oveflowed">
<img blah onload="this.marginTop=(this.height-500)+'px';" blah>

and then ... no more vertical lift ... no ?


in place of overflowed div :

<iframe name="viewer" src="myImage.jpg" height="500"></iframe>

My Fx displays the image sized to maxi the free space
a click on the image zoom to normal or back to reduce size

to display another image :

parent.viewer.location = 'myNewImage.jpg";

--
sm
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Scrollable Table with Fixed Headers Mel Smith HTML 27 06-09-2010 10:29 PM
Scrollable Grid With Fixed Header (Please Help Its Urgent) sonali ASP .Net 1 03-08-2010 12:06 PM
Position fixed and scrollable DIV Marcus HTML 0 10-06-2008 10:11 AM
Scrollable table widget with fixed header Mel Javascript 2 07-10-2004 04:34 PM
Scrollable Datagrid w/ fixed headers AND sorting? Stephen P. ASP .Net Datagrid Control 0 06-24-2004 03:48 PM



Advertisments