title: Dynamically changing width of div with Javascript
body: <p><a href="http://www.ewsprojects.com/~lyons" rel="nofollow">Here</a>'s the test site.</p>
  
  <p>I'm using a Javascript onClick event function to dynamically change the src of the displayed full-size image. However, this isn't quite working the same way in changing the width of the div that contains the image. I have tested that the function is actually getting the given width and it is, so it's probably just not defining the width value of my div correctly. </p>
  
  <pre><code>&lt;?php
  $username = $_GET['username'];
  session_start();
  $_SESSION['username'] = $username;
  
  //Database Information
  $dbhost = "";
  $dbname = "";
  $dbuser = "";
  $dbpass = "";
  
  //Connect to database
  mysql_connect ( $dbhost, $dbuser, $dbpass)or die("Could not connect:         ".mysql_error());
  mysql_select_db($dbname) or die(mysql_error());
  
  //Do the query
  $query = mysql_query("SELECT * FROM images ORDER BY idnum DESC LIMIT 5");
  
  //Generate an array of all images
  $images = array();
  while($image = mysql_fetch_array($query)) {
  //this adds each image to the images array
  $images[] = $image;
  $image['filename'] = $firstimage;
  }
  ?&gt;
  
  &lt;?php
  
  // Beginning attempt at a caption script.
  
  
  
  ?&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Home - Site in Development&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="styles.css"/&gt;
   &lt;script type="text/javascript"&gt;
  
   // Switches the url to view large image.
  
     function switchImageUrl(url, width) {
      document.getElementById('img-frame').src = url;
      document.GetElementById('center_frame').offsetwidth = width;
  
     }
  
   &lt;/script&gt;
  
  
  
  &lt;/head&gt;
  &lt;body onLoad="CalculateAllImageWidthes()"&gt;
  &lt;div id='account_links'&gt;
    &lt;?php
    if ($_SESSION['username']) {
      echo "Welcome $username!";
    } else { ?&gt;
      &lt;a href='login.php'&gt;Login&lt;/a&gt; | &lt;a href='register.php'&gt;Register&lt;/a&gt;
    &lt;?php } ?&gt;
     &lt;/div&gt;
  
  &lt;h1&gt;Picture Captions&lt;/h1&gt;
  &lt;br/&gt;
  &lt;br/&gt;
  &lt;div id="left_bar"&gt;
    Submit a picture &lt;a href="upload.php"&gt;here&lt;/a&gt;.
  &lt;hr/&gt;
  &lt;h2&gt;Top Images&lt;/h2&gt;
  &lt;br/&gt;
  
  &lt;div id="front_pg_images"&gt;
    &lt;?php foreach($images as $image) { ?&gt;
      &lt;a href="#" onClick="switchImageUrl('&lt;?php echo $image['filename']; ?&gt;', '&lt;?php echo $image['width']; ?&gt;')"&gt;&lt;img src="&lt;?php echo $image['filename'];?&gt;" width="72px" height="58px" id="front_pg_thumbnail"/&gt;&lt;/a&gt;
      &lt;?php echo $image['name']." - by ".$image['submitter']; ?&gt; &lt;br/&gt;
      &lt;br/&gt;
    &lt;?php } ?&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;div id="center_frame" width="&lt;?php echo $image['width']; ?&gt;"&gt;
    &lt;img src="&lt;?php echo $image['filename'];?&gt;" name="default" id="img-frame" align="left" valign="top"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>