Javascript Scollbar Movement

[driveflexfuel]

I started with an image that is over 60,000 px wide and sliced it into squares to decrease load time. I also decreased the size of the code so that the customer can zoom in and out to view the image. This image table is viewed in a fixed size div. The code below is the javascript i am using to zoom in and out.

    var zoom_percent = 50;
    var rows = 8;
    var cols = 16;


    var zoom_percent = 50;
    var rows = 8;
    var cols = 16;

function zoom_in(){
    percent = zoom_percent / 100;
    var w = document.images;
    var width = w[0].width;
    var height = w[0].height;
    var w_percent = width*percent;
    var h_percent = height*percent;
    // increase width and height on all images
    for ( var i in w ){
       w[i].width = w[i].width + w_percent;
       w[i].height = w[i].height + h_percent;
    } 
    // move scrollbars evenly with image
    var v_movement = (h_percent*rows)/2;
    document.getElementById('image_box').scrollTop = document.getElementById('image_box').scrollTop + v_movement;
    var h_movement = (w_percent*cols)/2;
    document.getElementById('image_box').scrollLeft = document.getElementById('image_box').scrollLeft + h_movement;
}

function zoom_out(){
    percent = zoom_percent / 100;
    var w = document.images;
    var width = w[0].width;
    var height = w[0].height;
    var w_percent = width*percent;
    var h_percent = height*percent;
    // Reduce width and height on all images
    if (w[0].height>height){
        for ( var i in w ){
           w[i].width = w[i].width - w_percent;
           w[i].height = w[i].height - h_percent;
    }
    // move scrollbars evenly with image
    var v_movement = (h_percent*rows)/2;
    document.getElementById('image_box').scrollTop = document.getElementById('image_box').scrollTop - v_movement;
    var h_movement = (w_percent*cols)/2;
    document.getElementById('image_box').scrollLeft = document.getElementById('image_box').scrollLeft - h_movement;
    } 

}

The code works great for zooming in on the image by increasing the image size by 50% but I am trying to get the scrollbars to align properly so that it zooms in to one location and does not jump all over.

 

[descalzo]

Working one dimension (vertical) and one way (zoom out) at a time. See if it works first, and then adjust the other dimension/directions.

................... Top of content
 
This height is scrollTopOld
 
------------------- Top of container
 
 
        X    Center of the map--[B]what you want to stay stationary[/B]
 
 
------------------- Bottom of container

You want X to stay stationary.

From TopOfContent to CenterOfMap (ie X ) is

scrollTopOld + 0.5*H ,

where H is the height of the container.

When you zoom out, that distance will stretch to

1.5*( scrollTopOld + 0.5*H)

If the X is to remain centered, the distance will be

scrollTopNew + 0.5*H

So, setting them equal,

1.5*( scrollTopOld + 0.5*H) = scrollTopNew + 0.5*H

or,

scrollTopNew = 1.5*scrollTopOld + 0.25*H

Make sure you take scrollTopOld before you resize the images.

>>>>only done on paper, it seems right to me.

 

[driveflexfuel]

Ok i used the code below to zoom in but i have been unable to figure out how to get it to zoom out.

document.getElementById('image_box').scrollTop = 1.5*scrollTopOld + 0.25*enc_h;
document.getElementById('image_box').scrollLeft = 1.5*scrollLeftOld + 0.25*enc_w;

 

[descalzo]

I take it the concept worked for zoom out.

Go through my steps, but this time the distance from the top of the content to the X shrinks.

Also, zooming out you went from 100 to 150. So you grow by 50 percent, and you multiply by 1.5

Zoom in, your sizes go from 150 to 100, so you shrink by 33.3 percent. And you multiply by 0.67

 

[driveflexfuel]

I am trying to understand the mathematical equations you are using to solve this. The zoom percent is going to be adjusted for different images so i need to understand how to adjust this. I am going to dumb down your calculations to see if I am understanding them properly.


Zoom in works

percent = .50 // zoom percentage

if ScrolltopOld = 200

Scrolltopnew = ((1+percent)*scrollTopOld) + ((percent/2)*enclosure_height);

Scrolltopnew should = 425

I have not been able to figure out the zoom out feature. The last post did not help me figure it out. If you could possibly format it like i did above it would be greatly appreciated. Thanks for all the help.

 

[xav0989]

For the zoom out feature, try to extend this.The zoom percentage takes the old scrolltop value (100, the value before the last zoom) and the current scroll top value. It divides the two of them to create the percentage, which is used to return to the scroll top value before the last zoom.

percent = ScrolltopReallyOld/ScrolltopOld;

//if ScrolltopOld = 150

Scrolltopnew = (percent*scrollTopOld);

//Scrolltopnew should = 100

 

[driveflexfuel]

I have tried that but it does not work.

 

[descalzo]

Your zoom factor zooming out is +50 percent.
Your zoom factor zooming in is -33 percent, not 50 percent. You should use that percent on the width/height of the images.

(assuming you want zoom in + zoom out ==> original )

................... Top of content
 
This height is scrollTopOld
 
------------------- Top of container
 
 
        X    Center of the map--[B]what you want to stay stationary[/B]
 
 
------------------- Bottom of container

You want X to stay stationary.

From TopOfContent to CenterOfMap (ie X ) is

scrollTopOld + 0.5*H ,

where H is the height of the container. Note that the 0.5 comes from the fact that we are talking about the center of the display area. It has nothing to do with zoom in/out factors.

When you zoom in, that distance will shrink to

.66667*( scrollTopOld + 0.5*H)

If the X is to remain centered, the distance will be

scrollTopNew + 0.5*H

So, setting them equal,

.66667*( scrollTopOld + 0.5*H) = scrollTopNew + 0.5*H

or,

scrollTopNew = .66667*scrollTopOld - 0.16667*H

Make sure you take scrollTopOld before you resize the images.

 

[driveflexfuel]

I entered your suggestion into my coding ant it does move properly. I created a test page you can see at the link below.

www.demonwares.com/sdm

The code in question is as follows.

function shrink(){
    percent = zoom_percent / 100;
    var w = document.images;
    var width = w[0].width;
    var height = w[0].height;
    var w_percent = width*percent;
    var h_percent = height*percent;
    var scrollTopOld = document.getElementById('image_box').scrollTop; // find current scrollbar possition 
    var scrollLeftOld = document.getElementById('image_box').scrollLeft; // find current scrollbar possition 
    // Reduce width and height on all images
    
    if (w[0].height>org_height){
        for ( var i in w ){
           w[i].width = w[i].width - w_percent;
           w[i].height = w[i].height - h_percent;
    }
    // move scrollbars evenly with image
    document.getElementById('image_box').scrollTop = .66667*scrollTopOld - 0.16667*enc_h;
    document.getElementById('image_box').scrollLeft = .66667*scrollLeftOld - 0.16667*enc_w;
    } 
}

 

[xav0989]

The zoom out feature moves the view to the bottom right corner...

 

[descalzo]

Again, if you are going from images 100x100, to 150x150, your zoom percentage is 50.
If you are going the other way, from 150x150 to 100x100, your zoom percentage is 33.

zoom_out_percent = [B][SIZE=2]33[/SIZE][/B] ;
function shrink(){
    percent = [SIZE=2]zoom_out_percent[/SIZE] / 100;
    var w = document.images;
    var width = w[0].width;
    var height = w[0].height;
    var w_percent = width*percent;
    var h_percent = height*percent;
    var scrollTopOld = document.getElementById('image_box').scrollTop; // find current scrollbar possition 
    var scrollLeftOld = document.getElementById('image_box').scrollLeft; // find current scrollbar possition 
    // Reduce width and height on all images
 
    if (w[0].height>org_height){
        for ( var i in w ){
           w[i].width = w[i].width - w_percent;
           w[i].height = w[i].height - h_percent;
    }
    // move scrollbars evenly with image
    document.getElementById('image_box').scrollTop = .66667*scrollTopOld - 0.16667*enc_h;
    document.getElementById('image_box').scrollLeft = .66667*scrollLeftOld - 0.16667*enc_w;
    } 
}

http://brightbeauty.x10hosting.com/Bright.htm (I borrowed and adjusted your code...)

Another question is why you split the images. It actually should take longer to download the pieces than it would take to download the whole thing.

 

[driveflexfuel]

Thank you so much. I was just getting so frustrated my brain quit working there for a day. descalzo I added to your rep Thanks again.