So I'm trying to make a pair of functions but I'm running into difficulty and I'm wondering if anyone might be able to see what I'm doing wrong.
Ok so I have a container that is set to hide its overflow inside the container is an image, the first function zooms from the centre of the image making it bigger and smaller the second function lets me pan the image when its to big to fit inside its container.
Now when I zoom out making the image smaller everything is fine the trouble comes when I zoom in, you see because I'm zooming from the centre of the image the top and left portions of the image end up positioned with negative values and as such the top and left portions of the image become inaccessible since scrollTop and scrollLeft don’t take negative values.
So the question is how do I fix this because if I move the image so that its top and left edged are at 0 then the zoom no longer zooms from the centre of the image and instead when happens is as I zoom in the centre point moves down and right instead of staying in the centre of the container.
in any event here is what I have so far.
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
div#frame
{
position: relative;
width:250px;
height:250px;
border: 1px solid red;
overflow:hidden;
margin-top:10px
}
input
{
display: inline-block;
vertical-align: middle;
height: 1px;
border: none;
padding: 8px 0px;
}
lable
{
display: inline-block;
vertical-align: middle;
margin-top:-5px
}
img
{
position: absolute;
top:0px;
left:0px;
}
</style>
</head>
<body>
<lable>Zoom:</lable>
<input id="slider" min="50" max="150" value="100" type="range">
<div id="frame">
<img src="image.png" alt=""/>
</div>
<script>
window.onload = document.querySelector('input#slider').value = document.querySelector('input#slider').defaultValue;
function zoom()
{
var rules = document.styleSheets[0].cssRules
var default_value = document.querySelector('input#slider').defaultValue;
var current_value = parseFloat(document.querySelector('input#slider').value);
var image_width = parseFloat(document.querySelector('img').naturalWidth);
var image_height = parseFloat(document.querySelector('img').naturalHeight);
var img_offset_top = 125;
var img_offset_left = 125;
if(current_value < 100)
{
document.querySelector('img').style.width = image_width / 100 * current_value + "px";
document.querySelector('img').style.height = image_height / 100 * current_value + "px";
for (i=0; i < rules.length; i++)
{
if(rules[i].selectorText == "img")
{
var top = ((parseFloat(rules[i].style.top) * current_value) / 100);
var left = ((parseFloat(rules[i].style.left) * current_value) / 100);
var offset_top = ((default_value - current_value) / 100) * img_offset_top;
var offset_left = ((default_value - current_value) / 100) * img_offset_left;
document.querySelector('img').style.top = top + offset_top + "px";
document.querySelector('img').style.left = left + offset_left + "px";
}
}
}
if(current_value == 100)
{
document.querySelector('img').style.width = image_width + "px";
document.querySelector('img').style.height = image_height + "px";
if(rules[i].selectorText == "img")
{
for (i=0; i < rules.length; i++)
{
if(rules[i].selectorText == "img")
{
document.querySelector('img').style.top = top + "px";
document.querySelector('img').style.left = left + "px";
}
}
}
}
if(current_value > 100)
{
document.querySelector('img').style.width = image_width / 100 * current_value + "px";
document.querySelector('img').style.height = image_height / 100 * current_value + "px";
for (i=0; i < rules.length; i++)
{
if(rules[i].selectorText == "img")
{
var top = ((parseFloat(rules[i].style.top) * current_value) / 100);
var left = ((parseFloat(rules[i].style.left) * current_value) / 100);
var offset_top = ((default_value - current_value) / 100) * img_offset_top;
var offset_left = ((default_value - current_value) / 100) * img_offset_left;
document.querySelector('img').style.top = top + offset_top + "px";
document.querySelector('img').style.left = left + offset_left + "px";
}
}
}
}
window.addEventListener("change", zoom);
function scroll()
{
var top_position = 0;
var left_position = 0;
var element = document.querySelector("#frame");
element.scrollTop = top_position;
element.scrollLeft = left_position;
var startY = 0;
var scrollTop = 0;
var startX = 0;
var scrollLeft = 0;
element.onmouseover = cursor;
element.onmousedown = mouse_down;
function mouse_down(event)
{
event.preventDefault();
startY = event.pageY - element.offsetTop;
scrollTop = element.scrollTop;
startX = event.pageX - element.offsetLeft;
scrollLeft = element.scrollLeft;
document.onmouseup = mouse_up;
element.onmousemove = mouse_move;
cursor(event);
}
function mouse_move(event)
{
event.preventDefault();
var y = event.pageY - element.offsetTop;
var scroll = y - startY;
element.scrollTop = scrollTop + scroll;
var x = event.pageX - element.offsetLeft;
var scroll = x - startX;
element.scrollLeft = scrollLeft + scroll;
cursor(event);
}
function mouse_up(event)
{
document.onmouseup = null;
element.onmousemove = null;
cursor(event);
}
element.onmouseout = cursor
function cursor(event)
{
if(event.type == "mouseover" || event.type == "mouseup")
{
element.style.cursor = "grab";
}
if(event.type == "mousedown" || event.type == "mousemove")
{
element.style.cursor = "grabbing";
}
if(event.type == "mouseout" || event.type == "load")
{
element.removeAttribute("style");
}
}
}
window.addEventListener("load", scroll);
</script>
</body>
</html>