I'm trying very hard to understand the object model around the page design and am slowly understanding it. I still don't quite get it but hopefully soon.
My question I want to increase the header height from 40 to 60. When I do this, the center of the page (where the data details live) obviously moves down, and my buttons get pushed off the bottom of the page so they are no longer visible.
In what module is the code the determines the layout sizes? For example, if I want to make my menubar wider or narrower, or change the space for the buttons. Where to I find the "container management" stuff.
Thanks
-Peter
henk
2005-08-18 14:11:45
Peter,
Most of the layout is coded in pieces of plain HTML and javascript. It is in the skins in the includes folder. The default layout is a bit tricky with respect to resizing because it uses javascript to dynamicly adapt a scrollable part of the content to the size of the browser window. This is done by the
scaleContent function. Most of the time this function is simply coded between <script> and </script> tags in the skins. In many cases different pages will have a different funtion because the browser reacts slightly different if the layout is different. But maybe some pages will output the function from the page class.
An example: in skinIndexPart the scaling is done for IndexPages:
<script>
function scaleContent() {
itd = getElement('itemTableDiv');
itd.style.height=0
itd.style.width=(window.document.body.clientWidth)-145;
itd.style.height=(window.document.body.clientHeight)-136;
}
</script>
This will scale the DIV with id=itemTableDiv to be 145 pixels less wide and
136 pixels less high then the client area of the browser window. Browse the list of employees in example1 and try to change the numbers in the skin to see what happens. Be aware that this kind of scaling is hard to het right for both IE and Firefox at the same time.
Success,
Henk Verhoeven.
BTW. I agree that the use of skins and javascript is somewhat primitive, but the advantage is that you can do whatever you want with HTML and javascript to create your own (or your customers) layouts. In an earlier generation of the framework we tried to make the layout WYSYWIG editable but that made the layout hard to maintain (much more duplication) and less advanced (WYSIWYG editors do not expect parts of the layout to grow or shrink with the data that is inserted at runtime). Furthermore, the php community has something of a "manual edit" style, most developers appearently do not use WYSIWYG editors.
Add a Reply
Loading form, please wait
The website will not send you an e-mail when a reply is added to this topic
My question I want to increase the header height from 40 to 60. When I do this, the center of the page (where the data details live) obviously moves down, and my buttons get pushed off the bottom of the page so they are no longer visible.
In what module is the code the determines the layout sizes? For example, if I want to make my menubar wider or narrower, or change the space for the buttons. Where to I find the "container management" stuff.
Thanks
-Peter
Most of the layout is coded in pieces of plain HTML and javascript. It is in the skins in the includes folder. The default layout is a bit tricky with respect to resizing because it uses javascript to dynamicly adapt a scrollable part of the content to the size of the browser window. This is done by the
scaleContent function. Most of the time this function is simply coded between <script> and </script> tags in the skins. In many cases different pages will have a different funtion because the browser reacts slightly different if the layout is different. But maybe some pages will output the function from the page class.
An example: in skinIndexPart the scaling is done for IndexPages:
<script>
function scaleContent() {
itd = getElement('itemTableDiv');
itd.style.height=0
itd.style.width=(window.document.body.clientWidth)-145;
itd.style.height=(window.document.body.clientHeight)-136;
}
</script>
This will scale the DIV with id=itemTableDiv to be 145 pixels less wide and
136 pixels less high then the client area of the browser window. Browse the list of employees in example1 and try to change the numbers in the skin to see what happens. Be aware that this kind of scaling is hard to het right for both IE and Firefox at the same time.
Success,
Henk Verhoeven.
BTW. I agree that the use of skins and javascript is somewhat primitive, but the advantage is that you can do whatever you want with HTML and javascript to create your own (or your customers) layouts. In an earlier generation of the framework we tried to make the layout WYSYWIG editable but that made the layout hard to maintain (much more duplication) and less advanced (WYSIWYG editors do not expect parts of the layout to grow or shrink with the data that is inserted at runtime). Furthermore, the php community has something of a "manual edit" style, most developers appearently do not use WYSIWYG editors.