Dynamically changing width of div with Javascript

Here's the test site.

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.

<?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;
}
?>

<?php

// Beginning attempt at a caption script.



?>

<html>
<head>
<title>Home - Site in Development</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
 <script type="text/javascript">

 // Switches the url to view large image.

   function switchImageUrl(url, width) {
    document.getElementById('img-frame').src = url;
    document.GetElementById('center_frame').offsetwidth = width;

   }

 </script>



</head>
<body onLoad="CalculateAllImageWidthes()">
<div id='account_links'>
  <?php
  if ($_SESSION['username']) {
    echo "Wele $username!";
  } else { ?>
    <a href='login.php'>Login</a> | <a href='register.php'>Register</a>
  <?php } ?>
   </div>

<h1>Picture Captions</h1>
<br/>
<br/>
<div id="left_bar">
  Submit a picture <a href="upload.php">here</a>.
<hr/>
<h2>Top Images</h2>
<br/>

<div id="front_pg_images">
  <?php foreach($images as $image) { ?>
    <a href="#" onClick="switchImageUrl('<?php echo $image['filename']; ?>', '<?php echo $image['width']; ?>')"><img src="<?php echo $image['filename'];?>" width="72px" height="58px" id="front_pg_thumbnail"/></a>
    <?php echo $image['name']." - by ".$image['submitter']; ?> <br/>
    <br/>
  <?php } ?>
 </div>
 </div>
 <div id="center_frame" width="<?php echo $image['width']; ?>">
  <img src="<?php echo $image['filename'];?>" name="default" id="img-frame" align="left" valign="top">
</div>

Here's the test site.

<?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;
}
?>

<?php

// Beginning attempt at a caption script.



?>

<html>
<head>
<title>Home - Site in Development</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
 <script type="text/javascript">

 // Switches the url to view large image.

   function switchImageUrl(url, width) {
    document.getElementById('img-frame').src = url;
    document.GetElementById('center_frame').offsetwidth = width;

   }

 </script>



</head>
<body onLoad="CalculateAllImageWidthes()">
<div id='account_links'>
  <?php
  if ($_SESSION['username']) {
    echo "Wele $username!";
  } else { ?>
    <a href='login.php'>Login</a> | <a href='register.php'>Register</a>
  <?php } ?>
   </div>

<h1>Picture Captions</h1>
<br/>
<br/>
<div id="left_bar">
  Submit a picture <a href="upload.php">here</a>.
<hr/>
<h2>Top Images</h2>
<br/>

<div id="front_pg_images">
  <?php foreach($images as $image) { ?>
    <a href="#" onClick="switchImageUrl('<?php echo $image['filename']; ?>', '<?php echo $image['width']; ?>')"><img src="<?php echo $image['filename'];?>" width="72px" height="58px" id="front_pg_thumbnail"/></a>
    <?php echo $image['name']." - by ".$image['submitter']; ?> <br/>
    <br/>
  <?php } ?>
 </div>
 </div>
 <div id="center_frame" width="<?php echo $image['width']; ?>">
  <img src="<?php echo $image['filename'];?>" name="default" id="img-frame" align="left" valign="top">
</div>

Share Improve this question edited Oct 30, 2011 at 17:31 JJJ 33.2k20 gold badges94 silver badges103 bronze badges asked Oct 30, 2011 at 4:41 Mark Lyons 1,4227 gold badges23 silver badges60 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 7

This is the problematic line:

document.GetElementById('center_frame').offsetwidth = width;

the correct name of the method is getElementById - JavaScript is case-sensitive
replace offsetwidth (which should have been offsetWidth anyway) with style.width
replace width with width + 'px'

so your line looks like:

document.getElementById('center_frame').style.width = width + 'px';

instead of .offsetwidth = width use .style.width = width;

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Dynamically changing width of div with Javascript - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)