On 23/06/2011 00:42, Dr J R Stockton wrote :
Hello John,
I want to be able to zoom one of my Web pages, by Ctrl-+, Ctrl--, Ctrl-
0, Ctrl-Mousewheel, and to have the top of a given element remain at (or
return to) the top of the screen (without reloading the page).
Preferably for all GUI browsers, or for Firefox 3& Safari 5, but any of
MSIE 8, Opera 11, Chrome 12 would be of some use.
Rather than the top of an element, the position of the last double-click
would do.
There are many things to consider here. Firstly, if you want to keep a
box at the same place on the view, then I suggest that you use some
fixed positioning. Note that IE supports fixed positioning only in
standard mode.
You may have noted though, that the box will still move in the view when
you change the zoom, even if it is fixed-positioned. There would be two
ways to adjust for this: a manual way and an automatic way. The manual
way implies to reposition the box on some user action: a double click
event, as you would like, would be a fine way to do it. The automatic
way implies to dynamically reposition the box when a zoom has happened.
ISTM that there ought to be an onzoom event, and documentation for it.
AFAICS, I was half right; it exists in FF 3.6.18.
I am unfortunately not familiar with modern browsers, so I could not
tell whether zoom events, as you have researched, have been defined
consistently cross browsers. However, if you have no event dispatched,
then you may dispatch it yourself, i.e. examine regularly the state of
the view (using setInterval or setTimeout), determine if there is a zoom
(for instance comparing the actual size of an element to an expected
size), and if there is, dispatch the event or take proper action.
The following script should give an illustration of how this could be
performed. I have kept it simple to demonstrate the technique, but you
will have to adjust it to your needs, if you intend to use it. I would
still favor the manual way, though: using intervals like I do below is
not neat, and uses some computer resources.
---
<!DOCTYPE html>
<html>
<head>
<title>Test Zoom</title>
<meta charset="UTF-8">
<style type="text/css">
#info-box {
background-color : yellow;
position : fixed;
top : 10px;
left : 10px;
}
</style>
<script type="text/javascript">
window.onload = (function(evt) {
function setPosition (element, left, top) {
element.style.left = left + "px";
element.style.top = top + "px";
}
function getLeft(element) {
if(!element) return 0;
return element.offsetLeft + getLeft(element.offsetParent)
}
function getTop(element) {
if(!element) return 0;
return element.offsetTop + getTop(element.offsetParent)
}
// Init
if(document.getElementById) {
var info = document.getElementById("info-box");
if(info) {
// Calculate the zoom regularly and reposition accordingly
var interval = setInterval(
(function (originalWidth) {
return (function (){
if (document.body.offsetWidth != originalWidth) {
var zoom = document.body.offsetWidth / originalWidth;
setPosition(info, getLeft(info)*zoom, getTop(info)*zoom);
originalWidth = document.body.offsetWidth;
}
});
})(document.body.offsetWidth),
42
);
// Reposition on double click
document.ondblclick = (function (evt) {
var e=evt||window.event;
setPosition(info, e.clientX, e.clientY);
});
}
}
});
</script>
</head>
<body>
<div id="info-box">Hello, World!</div>
</body>
</html>
