I have a website layout that can be dynamically changed as shown below:
The menu (purple box) can be hidden, and the image (yellow box) is resized. That uses this javascript code:
var SaveWidth = 0;
var maxwidth;
var resized = false;
var oldleft;
var oldtop;
function ResizeImage(boxresize) {
var img = document.getElementById("pjimage");
if(SaveWidth == 0) {
SaveWidth = img.width;
}
if(hidden) {
maxwidth = 700;
} else {
maxwidth = 525;
}
if(resized) {
resized = false;
if(boxresize) {
var offset = findPos(img)
oldleft = offset[0];
oldtop = offset[1];
ResizeImage(false);
} else {
var oldwidth = img.width;
img.width = SaveWidth;
if(tag_count > 0) {
ResizeTags(oldwidth, SaveWidth, oldleft, oldtop);
}
}
} else {
if(maxwidth > SaveWidth) {
var oldwidth = img.width;
img.width = SaveWidth;
if(tag_count > 0) {
ResizeTags(oldwidth, SaveWidth, oldleft, oldtop);
}
} else {
var oldwidth = img.width;
img.width = maxwidth;
if(tag_count > 0) {
ResizeTags(oldwidth, maxwidth, oldleft, oldtop);
}
}
resized = true;
if(boxresize) {
var offset = findPos(img)
oldleft = offset[0];
oldtop = offset[1];
ResizeImage(false);
}
}
}
The code not only needed to allow custom selection between the fullsized image, and the resized one, it also needed to carry this variable across to when the menu is collapsed, so the image either remains full size, or resizes itself accordingly.
The problem arises when the "tags" are added into the equation. This is why there are random "oldleft" references, and links to "ResizeTag" functions etc
The tag's top and left offset need to be moved as and when the image is resized. Whether this is because the full image is being shown, or because the menu is hidden.
I can't for the life of me work out a way of calculating the new offsets for the resized "tag". Can anyone offer an insight as to what the ResizeTags() function would be like?
Some random things to note:
findPos(obj)[0] = obj.AbsoluteLeft;
findPos(obj)[1] = obj.AbsoluteTop;
And "hidden" is set in another function
