Databases
StackOverflow2013
Postsdbo
PODynamically changing width of div with Javascript
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODynamically changing width of div with Javascript
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload