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

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • crazychrisy54@hotmail.com
    #1

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

    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
    Tags: None
    • SAM
      #2
      Re: Displaying a Image within a scrollable box/canvas of fixed dimensions

      crazychrisy54@h otmail.com 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:50 0px">
      <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

        Comment

        • crazychrisy54@hotmail.com
          #3
          Re: Displaying a Image within a scrollable box/canvas of fixeddimensions

          On Mar 13, 12:13 pm, SAM <stephanemoriau x.NoAd...@wanad oo.fr.invalid>
          wrote:
          crazychris...@h otmail.com 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:50 0px">
          <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

            Comment

            • crazychrisy54@hotmail.com
              #4
              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



                Comment

                • SAM
                  #5
                  Re: Displaying a Image within a scrollable box/canvas of fixed dimensions

                  crazychrisy54@h otmail.com 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.ma rginTop=(this.h eight-500)+'px';" blah>

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


                  in place of overflowed div :

                  <iframe name="viewer" src="myImage.jp g" 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.l ocation = 'myNewImage.jpg ";

                  --
                  sm

                    Comment

                    Previous template Next
                    Working...