Guy 0

I have an image nested inside an anchor nested inside a div:

<div style="max-width: 600px; overflow-x: scroll;">
  <a href="PoolPanoramaBig.jpg" target="_blank">
    <img src="PoolPanoramaBig.jpg" style=""/>
  </a>
</div>

When the page loads I want the horizontal scroll bar to be scrolled to the right (defaulted to the right) so that if the image is wider than 600px the right edge of the image will be visible and the left edge will be scrolled out-of-sight.

I have been unable to work out how to do this with either CSS or with JavaScript (using jQuery). Any ideas much appreciated.

3 answers

danwellman 5600
1
point
This was chosen as the best answer

Have you tried setting the direction in the CSS?

img { direction:rtl; }

That may only work on text though...

Answered almost 10 years ago by danwellman
  • huh, never heard of this in CSS before... nice. Marcel almost 10 years ago
1
point

If damwellman's suggestion does not work, you could try putting an empty span with an id, <span id="lastarea"></span> and then using this in the url #lastarea

Answered almost 10 years ago by Divya Manian
0
points

For future clarity the solution is this:

<div style="max-width: 600px; overflow-x: scroll; direction: rtl;">
  <a href="PoolPanoramaBig.jpg" target="_blank">
    <img src="PoolPanoramaBig.jpg" style=""/>
  </a>
</div>
Answered almost 10 years ago by Tony Crockford
  • wanted a reference when I come back to see how to do it! Dan was right, but the direction needs to go on the container. Tony Crockford almost 10 years ago