How do I manipulate the scroll bars so that a div with content that changes size shows the content at the same location?
in [JavaScript]
|
Prev: FAQ Topic - What does the future hold for ECMAScript? (2010-03-24)
Next: Tramadol online without doctor prescription, cheap online pharmacy Tramadol, Buy Tramadol order
From: Shauniwthanau on 24 Mar 2010 14:50 I'm sorry if this is the wrong place to ask this but my justification is that I have seen this done in WPF and I am wondering how to implement the same thing that is cross-browser compliant and using only javascript/CSS/HTML. What I have is a div with overflow:auto, but really could be any container, which is for example is 800*800 px and inside of this div is a SVG image, which changes size. It can fit in the div but it can also get very large, say 5000*5000 px, and I need to manipulate the scrollbars so that when the SVG has changed size the scrollbars adjust so that you are seeing the same location on the SVG that you were seeing before. This is what I would like to reproduce: Initially set the center as the center of the SVG so that when the SVG gets larger then the container the scrollbars automatically scroll to show the center of the SVG. If the user scrolls, then the view-ports center is updated and any changes in size now centers your view-port there. In WPF they were able to access the view-port of the container and using that along with the height and width of the container (used to calculate the center) they were able to accomplish this. Any help would be greatly appreciated.
From: Shauniwthanau on 25 Mar 2010 09:55
Here is the code written in WPF: //Gets the center of the viewport Point newPt = new Point( scrollViewer1.ViewportWidth / 2, scrollViewer1.ViewportHeight / 2); //This makes it into a point relative to the print centerPoint = scrollViewer1.TranslatePoint(newPt, PrimaryCanvas); //This divides by the scale of the smart print, so that the point is absolute in reference to the full size smartprint centerPoint.X = (this.DataContext as Work.ViewModel.AddViewModel).TranslateCoordFrom((int)centerPoint.X); centerPoint.Y = (this.DataContext as Work.ViewModel.AddViewModel).TranslateCoordFrom((int)centerPoint.Y); //Recenters view after zooming //This multiplies the points by the new scale, and subtracts half the width of the scrollviewer so that when calling ScrollTo the point is centered. int locx = (this.DataContext as Work.ViewModel.AddViewModel).TranslateCoordTo((int)centerPoint.X); locx -= (int)(scrollViewer1.ActualWidth / 2); int locy = (this.DataContext as Work.ViewModel.AddViewModel).TranslateCoordTo((int)centerPoint.Y); locy -= (int)(scrollViewer1.ActualHeight / 2); scrollViewer1.ScrollToHorizontalOffset(locx); scrollViewer1.ScrollToVerticalOffset(locy); |