The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

In FF I don't see a border left behind but the image starts going behind the right sidebar as you zoom in. You should consider changing the left position of the image as you zoom in as well as the width of the image, so it is always centered relative to the viewport.

The border issue seems to be a bug in FF. When I hover over it with the Web Developer Extension's "Outline current element" function, it snaps back to the correct width. You might just have to set the width of div#show explicitly.

I don't see why you are doing this though. The images are already full-size and zooming in makes them more pixelated, so there's not much point.

Also, I'd recommend giving the toolbar buttons title attributes. Hovering over them it would be useful to get a tooltip explaining what the button does. The far right one, for instance, is not very clear in what it does. You also should not be using images for the separator. Instead, just give #stop, #next and #out some margin-right.

I tried zooming other elements but can only get it to work for for images.(Can't be right but seems so.) I've taken your other ideas onboard and will apply them before I unleash the page on the public.

What I mean is the containing div won't zoom. I can't get anything to zoom except an image.
clickZoom:function(){
document.getElementById('one').width+=zW;
document.getElementById('one').height+=zH;
document.getElementById('test').width+=zW;
document.getElementById('test').height+=zH;
document.getElementById('frame').width+=zW;
document.getElementById('frame').height+=zH;
},
'one' and 'test' are images, they zoom. 'frame' is simply a div with a border. It won't zoom.

The thing is I am unfamiliar with the Core.js library and I prefer writing things myself. I just wrote this quickly, perhaps it will help you. It zooms the image in and out and as you will see, the border sticks to it properly.

. You are still missing the point, probably my fault for using the word 'borders' when I mean a div used as a frame. See http://climatecalm.org/oldhydro.htm
I can't find any way to make this hang together except by using a table. I know its retrogressive but when needs must.

You will see that it makes three of your same buttons work (using text instead), using 17 lines of javascript, whereas you are using several hundred (including core.js). Please tell me how I'm missing the point. By "frame", I assume you mean a box bounding the image, <select> and list of buttons. A frame is a box with a border. What I did was make the box have a red border. Hence it is a "frame" with a red border.

By 'missing the point' I meant the code you sent at #16 didn't have a frame in the sense of a surrounding div. I'm very impressed with your solution and have adapted it for my use OK. Can you explain what you are doing here

In that line, I am checking if the id of the link that was clicked is "in" (zoom in link). If so, set v to 1.1 (increase size of image by 110&#37. Otherwise, to 1/1.1 (decrease image size by 110%). I suspect you are unfamiliar with the ternary operator:

Code:

condition ? value1 : value2

"condition" must evaluate to true or false. In this case it's "is this.id equal to 'in'?". Then whatever comes before it is assigned value1 if true, value2 is false. You can also use it with things like return:

Code:

return a > b ? a : b;

If a is greater than b, a is returned by the function. Otherwise b is returned.

The ternary operator is often used as a shortcut for if/else statements.