Javascript in safari

Question

Level 1

5 points

Javascript in safari

I'm working on a javascript that will set the width of a div using the getElementById method.

Problem is that my script will work perfectly in safari if I target a table, an object tag, an embed tag, or it seems like anything but a div. Actually there is a whole subset of questions with regards to this. For example, you will notice some redundant sode in my script, the reason being that for some reason, safari is "losing track" of the variables that I declare in the begining of the script. I recognize this is most likely my fault, but I'm really curious as to how I can make this better.

Keep in mind that I'm a relative neophyte to the javascript world. Here are the details.

This is a snippet from my .JS file

<code>
function changeWide(myID, myWide, pxVal){
var win_width = window.innerWidth;
var table = document.getElementById("myID");

if (pxVal != null) {
//var table = document.getElementById("tableMain");
document.getElementById(myID).setAttribute("width",pxVal);
document.getElementById('extraD').innerHTML=('target = ' + myID + ' Window = ' + win_width + ' pxVal = ' + pxVal + ' var table =' + table);
}

else {
if (win_width < myWide) {
document.getElementById(myID).setAttribute("width", myWide);
document.getElementById('extraD').innerHTML=('target = ' + myID + ' Window = ' + win_width + ' My Width set to = ' + myWide);
}
else {
document.getElementById(myID).setAttribute("width", '100%');
document.getElementById('extraD').innerHTML=('target = ' + myID + ' Window = ' + win_width + ' My Width set to = ' + myWide);
}
}
}
</code>

Here is a dummed down version of my html:

[noparse]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>sizer 3</title>

<style type="text/css">

</style>

<script type="text/javascript" src="../scripts/width.js"></script>

</head>
<body onResize="changeWide('mainMovie', 830, null);" onLoad="changeWide('mainMovie', 830, null);">

this is the div area that should resize

this is the div id 'extraD' to see if the code is working

some extra test buttons
<button onclick="changeWide('mainMovie', 820, '50%');">50%</button>
<button onclick="changeWide('mainMovie', 820, 200);">200px</button>
<button onclick="changeWide('mainMovie', 820, 400);">400px</button>
<button onclick="changeWide('mainMovie', 820, '100%');">100%</button>

</body>
[/noparse]

Only pretend that you can see my div tags, cause I don't know how to make them visible in this forum, sorry 😟

thanks much

G5 Mac OS X (10.4.6)

Posted on Sep 1, 2006 2:58 PM

Reply

Answer 1

Sep 1, 2006 5:14 PM in response to gconrads

Your explanation seems a little long, so I'm not sure if I understood all of it, but in my opinion, instead of

document.getElementById(myID).setAttribute("width",pxVal);

you should use

document.getElementById(myID).style.width = pxVal + "px";

If your still curious on how safari positions elements on a page, download WebKit, then, using Webkit, control-click on any element on a page, and select "Inspect Element" from the contextual menu. You will then get all the css/html/javascript info you want.

iMac G5 Original Model Mac OS X (10.4.7) 1.8 Ghz, 1 GB RAM, 160 GB HD

Reply

Answer 2

gconrads Author

Level 1

5 points

Sep 4, 2006 11:39 AM in response to Dimitri Bouniol

hey, thanks for the direction. I'm guessing that when i styled the attribute, any existing css style for the object still overrid the attribute styling.

Here is a simple version of my solution:

<code>

function autoWide (myID, minWide) {

var targetA = document.getElementById(myID);
var currWidth = self.innerWidth;

if (currWidth < minWide) {
targetA.style.width = minWide;

}
else {
targetA.style.width = '100%';

}
}
</code>

If anyone else is interested the innerwidth method doesn't work in all browsers, here is a link to an explaination.

http://www.quirksmode.org/viewport/compatibility.html

thanks again.

G5 Mac OS X (10.4.6)

Reply

Answer 3

Sep 4, 2006 11:54 AM in response to gconrads

Don't forget to add '+ "px"' after:
targetA.style.width = minWide + "px";
so the browser knows you are using px and not inches (or any other measurement) : )

iMac G5 Original Model Mac OS X (10.4.7) 1.8 Ghz, 1 GB RAM, 160 GB HD

Reply