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

Discussion in 'Javascript' started by crazychrisy54@hotmail.com, Mar 13, 2008.

  1. Guest

    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
    , Mar 13, 2008
    #1
    1. Advertising

  2. SAM Guest

    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
    SAM, Mar 13, 2008
    #2
    1. Advertising

  3. Guest

    Re: Displaying a Image within a scrollable box/canvas of fixeddimensions

    On Mar 13, 12:13 pm, SAM <>
    wrote:
    > 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
    , Mar 13, 2008
    #3
  4. Guest

    Re: Displaying a Image within a scrollable box/canvas of fixeddimensions

    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
    , Mar 14, 2008
    #4
  5. SAM Guest

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

    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
    SAM, Mar 14, 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. sonali
    Replies:
    1
    Views:
    3,448
    eliza81
    Mar 8, 2010
  2. Marcus
    Replies:
    0
    Views:
    468
    Marcus
    Oct 6, 2008
  3. Mel Smith
    Replies:
    27
    Views:
    3,955
    dorayme
    Jun 9, 2010
  4. Stephen P.

    Scrollable Datagrid w/ fixed headers AND sorting?

    Stephen P., Jun 24, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    148
    Stephen P.
    Jun 24, 2004
  5. Mel
    Replies:
    2
    Views:
    186
    Thomas 'PointedEars' Lahn
    Jul 10, 2004
Loading...

Share This Page