Wolfman wrote:
Hi,
I found your Email in the php Newsgroup.
I was looking for some way to resize some graphiks on my HP , to fit the actual Browser size. So I found this:
<HTML><HEAD></HEAD>
<BODY onResize="scaleContent()>
<script>
function scaleContent() {
getElement('itemTableDiv').style.height=(window.do cument.body.clientHeight)-179; getElement('itemTableDiv').style.width=(window.doc ument.body.clientWidth)-130; }
function getElement( elementId)
{
var element;
if (document.all) {
element = document.all[elementId];
}
else if (document.getElementById) {
element = document.getElementById(elementId);
}
else element = -1;
return element;
}
</script>
<div id=itemTableDiv style='height: 300px; width: 600px; overflow:
auto;' valign='top'>
<?php printItemTablePart() ?>
</div>
<script> scaleContent(); </script>
</BODY>
</HTML>
I think I understand the Javascript part, in which you get the Element with special id and set the width and heigth. But I have Problems to understand the Part down from <div...
What are you doing here, or better why? what is printItemTablePart() for?
Thats what I want to do. I want to fit my HP on the screen acoording to the Resolution. I got everything layouted in Tables. The trickey thing is that the left side of my Table has to stay the same size, cause of the menu, the right side should resize. I haven't given any dimensions to the Tables since I got Pictures in the Table, which should be resized (stretched to the right). So got any advice or help in this?
Thanx
Christian
Hi Christian,
The example was meant to explain the javascript. The function
printItemTablePart() was put there mainly to hide the details of how the
contents of the DIV is produced. Hiding such details is fundamental to
structured programming, the predecessor of OOP. Both intend to make code
more readable and reusable, but you probably knew that already.
To see an example of what it may output, take a look at
http://www.phppeanuts.org/examples/e...tType=Employee.
If you take a look at the html source of that page you will find the
scaleContent() function. Comments in the source show the parts from
which the page is assembled. These parts are reusable objects, for more
info see
http://www.phppeanuts.org/site/index...principle.html. The
code of all these parts is available for download, but looking into its
internal workings may result in kind of an OOP brainwash, that may not
be exactly what you are looking for ;-)
The DIV has been given a style 'overflow: auto;' to make it scroll when
the table gets too big. As you can see it will only make a horizontal
scrollbar when the table does fail it its attempt to produce a width of
100%. For our purpose that is good enoug, but if you are putting images
into your table, you may have to resize the images too. The simpelest
way to do that is to give each image an unique id with <image id=
followed by the id and from php, produce a line of javascript in the
scaleContent() function for each image that uses getElement() to access
the document object of the image, then sets the width and height
property as calculated from the window.document.body.clientWidth and
Height like this:
var imageWidth = (window.document.body.clientWidth - 100 ) / 10;
getElement('image1').width=imageWidth;
getElement('image2').width=imageWidth;
etc
(I guess, did not test it. The id of the first image is 'image1'.
replace 100 by the width of your menu, 10 will make the image 1/10th of
the width of the table, experiment with it to get the right sizes)
A more elegant solution may be to access the table document object
itself, get its elements (the rows), iterate though them, then access
their elements (the cells), get their elements, if it is an image,
resize it. But this will obviously require more knowledge of javascript
and DOM.
I hope this helps with the javascript side. If it does'n, try to find
documentation and examples an javascript, document object model (DOM)
and dynamic html (DHTML).
Greetings, succes,
Henk Verhoeven,
www.phpPeanuts.org.
