By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,774 Members | 1,394 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,774 IT Pros & Developers. It's quick & easy.

Maintain aspect ratio

P: n/a

Something I've been tooling around with as a way of creating pag
elements that maintain their aspect ratio on resizing. It finall
works! I've pulled together bits and pieces from things people on th
forum have posted, so thanks to everyone for your help!

Note: I'm still a Javascript newbie, so if there's a more efficient wa
to do this, please let me know! Thanks :)

<html>
<head>
<script language=javascript>
var mydiv = document.createElement("div");
function makeRectangle(left, top, width, height) {

mydiv.style.position = "absolute";
mydiv.style.left = "0px";
mydiv.style.top = "0px";
if (document.body.clientHeight > (document.body.clientWidth*.714))
{
mydiv.style.width = (document.body.clientWidth);
mydiv.style.height = (document.body.clientWidth*.714);
}
else
{
mydiv.style.width = (document.body.clientHeight*1.4);
mydiv.style.height = (document.body.clientHeight);
}
mydiv.style.backgroundColor = 'lightgrey';
mydiv.style.visibility = 'visible';
mydiv.id = 'mydiv';
document.body.appendChild(mydiv);
}
</script>
<script>
function resizeDiv()
{
if (document.body.clientHeight > (document.body.clientWidth*.714))
{
mydiv.style.width = (document.body.clientWidth);
mydiv.style.height = (document.body.clientWidth*.714);
}
else
{
mydiv.style.width = (document.body.clientHeight*1.4);
mydiv.style.height = (document.body.clientHeight);
}
}
</script>
</head>

<body>

<script>
makeRectangle();
window.onresize = resizeDiv;
</script>

</body>
</html

--
Malkalyps
-----------------------------------------------------------------------
Malkalypse's Profile: http://www.highdots.com/forums/member.php?userid=2
View this thread: http://www.highdots.com/forums/showthread.php?t=7169

Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a

Looks like I was able to come up with a tables version (no css) of th
same thing.. if the math in the setAttributes looks a little strange
it's because the initial offset was causing the table to go off th
edge of the page.

Why didn't anyone tell me this was fun? :D

<html>
<head>
<script language="javascript">
var mytable = document.createElement("TABLE");
var mytable_body = document.createElement("TBODY");
function buildTable() {
var mybody = document.getElementsByTagName("body").item();
var mycurrent_row = document.createElement("TR");
var mycurrent_cell = document.createElement("TD");
mycurrent_row.appendChild(mycurrent_cell);
mytable_body.appendChild(mycurrent_row);
mybody.appendChild(mytable);
mytable.appendChild(mytable_body);
mytable.setAttribute("border","1");

if (document.body.clientHeight > (document.body.clientWidth*.714))
{
mytable.setAttribute("width", (document.body.clientWidth)*.975);
mytable.setAttribute("height"
(document.body.clientWidth*.714)*.975);
}
else
{
mytable.setAttribute("width"
(document.body.clientHeight*1.4)*.975);
mytable.setAttribute("height", (document.body.clientHeight)*.975);
}
}
function resizeTable() {
if (document.body.clientHeight > (document.body.clientWidth*.714))
{
mytable.setAttribute("width", (document.body.clientWidth)*.975);
mytable.setAttribute("height"
(document.body.clientWidth*.714)*.975);
}
else
{
mytable.setAttribute("width"
(document.body.clientHeight*1.4)*.975);
mytable.setAttribute("height", (document.body.clientHeight)*.975);
}
}
</script>
</head>

<body onload="buildTable()" scroll="no">

<script>
window.onresize = resizeTable;
</script>

</body>
</html

--
Malkalyps
-----------------------------------------------------------------------
Malkalypse's Profile: http://www.highdots.com/forums/member.php?userid=2
View this thread: http://www.highdots.com/forums/showthread.php?t=7169

Jul 23 '05 #2

P: n/a

I was looking for a way to make the tables version a bit shorter an
more useful, and I came up with the following, but it's not working an
I can't figure out why! Can someone help me out? :(

<html>
<head>
<script language="javascript">

var mt_height;
var mt_width;

// determine height and width for main table
function sizeTable() {
if (document.body.clientHeight > (document.body.clientWidth*.714))
{
mt_width = (document.body.clientWidth)*.975;
mt_height = (document.body.clientWidth*.714)*.975;
}
else
{
mt_width = (document.body.clientHeight*1.4)*.975;
mt_height = (document.body.clientHeight)*.975;
}
}

//build main table
function buildTable() {
sizeTable();
document.write("<table border=2 height="+mt_height+
width="+mt_width+">");
document.write("<tr>");
document.write("<td bgcolor=darkgray></td>");
document.write("<td bgcolor=lightgrey></td>");
document.write("</tr>");
document.write("</table>");
}
</script>
</head>

<!-- buildTable seems to have problems with refreshing whether it's i
the
body onload, or in the script of the body. Also, it doesn't wor
with
the window.onresize at all, although it's not giving an error
-->
<body onload=buildTable() scroll="no">

<script>
window.onresize = buildTable;
</script>

</body>
</html

--
Malkalyps
-----------------------------------------------------------------------
Malkalypse's Profile: http://www.highdots.com/forums/member.php?userid=2
View this thread: http://www.highdots.com/forums/showthread.php?t=7169

Jul 23 '05 #3

P: n/a

Okay, I managed to get my page to the following, and it works just fin
in IE, but Mozilla returns a blank page, and the following error in th
Javascript console:

Error: uncaught exception: [Exception... "Not enough argument
[nsIDOMNodeList.item]" nsresult: "0x8057000
(NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :
file:///C:/Documents%20and%20Settings/Kevin%20Mackey/Desktop/javascript/growtable_test.htm
:: buildTable :: line 25" data: no]

I think I have a vague idea what it's talking about, but I'm not sur
how to go about fixing it.. any help would be appreciated ^^
PHP code
-------------------
<html>
<head>
<script language="javascript">
var maintable = document.createElement("table");
var maintable_body = document.createElement("tbody");
var mt_height;
var mt_width;

function resizeTable() {
if (document.body.clientHeight > (document.body.clientWidth*.714))
{
maintable.setAttribute("width", (document.body.clientWidth)*.975);
maintable.setAttribute("height", (document.body.clientWidth*.714)*.975);
}
else
{
maintable.setAttribute("width", (document.body.clientHeight*1.4)*.975);
maintable.setAttribute("height", (document.body.clientHeight)*.975);
}
}
</script>

<script>
function buildTable(innerTable) {
var mybody = document.getElementsByTagName("body").item();
var myrow = document.createElement("TR");
var mydata = document.createElement("TD");

mybody.appendChild(maintable);
maintable.setAttribute("border","1");
maintable.setAttribute("id","maintable");
maintable.appendChild(maintable_body);
maintable_body.appendChild(myrow);
myrow.appendChild(mydata);
mydata.setAttribute("id","inner_content");

resizeTable();
document.getElementById("inner_content").innerHTML =innerTable;
}
var tableData = "<table height=50% width=50% border=5 bgcolor=lightgrey> <tr> <td align=center> <b>TEST<b> </td> </tr> </table>"
</script>
</head>

<body onload='buildTable(tableData)'>
<script>
window.onresize = resizeTable;
</script>

</body>
</html
-------------------

--
Malkalyps
-----------------------------------------------------------------------
Malkalypse's Profile: http://www.highdots.com/forums/member.php?userid=2
View this thread: http://www.highdots.com/forums/showthread.php?t=7169

Jul 23 '05 #4

P: n/a
Malkalypse wrote:
Okay, I managed to get my page to the following, and it works just fine
in IE, but Mozilla returns a blank page, and the following error in the
Javascript console:

Error: uncaught exception: [Exception... "Not enough arguments
[nsIDOMNodeList.item]" nsresult: "0x80570001
(NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame ::
file:///C:/Documents%20and%20Settings/Kevin%20Mackey/Desktop/javascript/growtable_test.html
:: buildTable :: line 25" data: no]

I think I have a vague idea what it's talking about, but I'm not sure
how to go about fixing it.. any help would be appreciated ^^
PHP code:
--------------------
<html>
<head>
<script language="javascript">
How many times does it have to be said? Get rid of 'language' and use
the required 'type' attribute.

<script type="text/javascript">
var maintable = document.createElement("table");
var maintable_body = document.createElement("tbody");
var mt_height;
var mt_width;

function resizeTable() {
if (document.body.clientHeight > (document.body.clientWidth*.714))
clientHeight/Width is only supported by Mozilla in quirks mode, use
self.innerHeight/Width and feature test as per:

<URL:http://www.quirksmode.org/viewport/compatibility.html>

Here's a version adapted to your page:

function resizeTable() {

var x,y;

if (self.innerHeight) { // all except Explorer
x = self.innerWidth;
y = self.innerHeight;
} else if (document.documentElement // Explorer 6 Strict Mode
&& document.documentElement.clientHeight) {
x = document.documentElement.clientWidth;
y = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
x = document.body.clientWidth;
y = document.body.clientHeight;
}

...
{
maintable.setAttribute("width", (document.body.clientWidth)*.975);
Below is a method to remove reliance on clientWidth, plus you
shouldn't call it so often for performance reasons. I wouldn't use
decimal values without a number before the '.' for maintenance
reasons (i.e. .975 becomes 0.975).
maintable.setAttribute("height", (document.body.clientWidth*.714)*.975);
}
else
{
maintable.setAttribute("width", (document.body.clientHeight*1.4)*.975);
maintable.setAttribute("height", (document.body.clientHeight)*.975);
}
}
The use of setAttribute is discouraged, I've replaced it below but
you may want to keep it. At least replace all those calls to
document.body - following on from the suggested script:

if (y > (x*.714)) {
maintable.style.width = x*0.975;
maintable.style.height = x*0.714*0.975;
} else {
maintable.style.width = y*1.4*0.975;
maintable.style.height = y*0.975;
}
}
</script>

<script>
No need for multiple script elements, put them all in one. And
script must have a type attribute.
function buildTable(innerTable) {
var mybody = document.getElementsByTagName("body").item();
You should use an index value in '.item()', either;

var mybody = document.getElementsByTagName("body").item(0);

or

var mybody = document.getElementsByTagName("body")[0];

will do the trick, but above you've just used document.body, so why
not use it again?

var mybody = document.body;
var myrow = document.createElement("TR");
var mydata = document.createElement("TD");

mybody.appendChild(maintable);
maintable.setAttribute("border","1");
maintable.setAttribute("id","maintable");
maintable.appendChild(maintable_body);
maintable_body.appendChild(myrow);
myrow.appendChild(mydata);
mydata.setAttribute("id","inner_content");
Again, you can address these properties directly. I'd also change
their attributes before adding them to the document. Just my pref.

mydata.id = 'inner_content';
myrow.appendChild(mydata);
maintable_body.appendChild(myrow);
maintable.style.border = '1px solid purple';
maintable.id = maintable;
maintable.appendChild(maintable_body);
mybody.appendChild(maintable);

Note setting of all border properties with style.border. Should also
test for style before using it, but since this is just a test...

resizeTable();
document.getElementById("inner_content").innerHTML =innerTable;
Using innerHTML to build a table this way is nasty - it is MS
proprietary (though widely supported) - and its use with tables is
discouraged. You should use DOM methods as you have above. And using
getElementById without feature testing is not advised.
}
var tableData = "<table height=50% width=50% border=5 bgcolor=lightgrey> <tr> <td align=center> <b>TEST<b> </td> </tr> </table>"
You still need to create valid markup when you create the table. You
should quote attributes, and things like bgcolor & align are
depreciated, use CSS.

</script>
</head>

<body onload='buildTable(tableData)'>
<script>
window.onresize = resizeTable;
</script>

</body>
</html>
--------------------


As a last note, as soon as you add a doctype and IE or Firefox stop
using quirks mode, the results are very different (including between
browsers). Just try adding this before the firs html tag:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

You may get away with it with transitional. Here's the full script:
<html>
<head>
<script type="text/javascript">

var maintable = document.createElement("table");
var maintable_body = document.createElement("tbody");
var mt_height;
var mt_width;

function resizeTable() {

var x,y;

if (self.innerHeight) { // all except Explorer
x = self.innerWidth;
y = self.innerHeight;
} else if (document.documentElement // Explorer 6 Strict Mode
&& document.documentElement.clientHeight) {
x = document.documentElement.clientWidth;
y = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
x = document.body.clientWidth;
y = document.body.clientHeight;
}

if (y > (x*.714)) {
maintable.style.width = x*0.975;
maintable.style.height = x*0.714*0.975;
} else {
maintable.style.width = y*1.4*0.975;
maintable.style.height = y*0.975;
}
}

function buildTable(innerTable) {
var mybody = document.body;
var myrow = document.createElement('TR');
var mydata = document.createElement('TD');

mydata.id = 'inner_content';
myrow.appendChild(mydata);
maintable_body.appendChild(myrow);
maintable.style.border = '1px solid purple';
maintable.id = 'maintable';
maintable.appendChild(maintable_body);
mybody.appendChild(maintable);

resizeTable();
document.getElementById('inner_content').innerHTML =innerTable;
}
var tableData = '<table height="50%" width="50%" border="5" '
+ 'bgcolor="lightgrey"> <tr> <td align="center"> <b>TEST<b>'
+ ' </td></tr></table>';

</script>
</head>

<body onload="buildTable(tableData)">
<script>
window.onresize = resizeTable;
</script>

</body>
</html>
--
Rob
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.