Hi,
I am trying to set two side-by-side divs contained by a single larger div to equal column height. I am trying to use the following jquery script:
<script type="text/javascript" language="javascript">
function pageLoad() {
$(document).ready(function() {
setEqualHeight($(".instructionsParent > div"));
});
}
function setEqualHeight(columns) {
var tallestColumn = 0;
columns.each(function() {
currentHeight = $(this).height();
if(currentHeight > tallestColumn) {
tallestColumn = currentHeight;
}
});
columns.height(tallestColumn);
}
</script>
Then the following are my DIV's:
<div class="instructionsParent borderDiv borderTable0" style="overflow:hidden">
<div class="instructionsLeft" style="float:left;width:49.5%">
</div>
<div class="instructionsRight" style="float:right;width:49.5%">
</div>
</div>
The jquery is running and appears to be returning the largest height (451), but doesn't seem to apply it to the two divs. I don't know much jquery or javascript and don't understand the following: "setEqualHeight($(".instructionsParent > div"));"
Could it be that I have that coded incorrectly?
Thank you, James
Ok, here is the entire subform which is my entire page really (I have two subforms on the page with one visible and the other not:
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ActivexInstructionsSubForm.ascx.vb" Inherits="Controls_ActivexInstructionsSubForm" %>
<div class="instructionsParent borderDiv borderTable0" style="overflow:hidden">
<div class="instructionsLeft" style="float:left;width:49.5%">
<table cellspacing="0" class="borderTable0" width="100%" style="height:430px;" >
<tr>
<td align="center">
<br />
<h3 style="font-family:Arial;color:#17238C">"The Important Stuff"</h3>
</td>
</tr>
<tr valign="top">
<td align="center">
<table border="0" cellpadding="1" cellspacing="0"
style="border-collapse: collapse;">
<tr>
<td>
<table border="0" cellpadding="0">
<tr>
<td colspan="2" style="text-align:left;font-family:Arial;font-weight:bold;color:#17238C">
<p style="font-size:11pt"><strong style="text-decoration: underline;font-size:11pt;font-style:normal">If this is the first time</strong> you've used our downloads, you now can see a
skinny information bar at the top of the page.
Click it, and select "Install ActiveX Control" from the dropdown menu.
Then, click "Install" when you see the new dialog box appear.
This does not collect info about you or hurt your machine.
</p>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<script type="text/javascript">
//Create JavaScript object that will embed File Downloader to the page
var fd = new FileDownloaderWriter("FileDownloader", 172, 28);
//For ActiveX control full path to CAB file (including file name) should be specified
fd.activeXControlCodeBase = "aurigma/FileDownloader2.cab";
fd.activeXControlVersion = "2,0,16,0";
//Set the Download button text
fd.addParam("ButtonDownloadText", "Proceed With Download");
//Set the Download button background color
//fd.addParam("BackgroundColor", "#E0EBFF");
fd.addParam("BackgroundColor", "White");
//Set the Download button regular image
fd.addParam("ButtonDownloadImageFormat", "width=172;height=28;BackgroundColor=#17238C;" +
"urlNormal=App_Themes/Default/images/BtnProceedDownloadA.jpg;" +
"urlDisabled=App_Themes/Default/images/BtnProceedDownloadA.jpg");
//Set license key
fd.addParam("LicenseKey", "888822-12222-D8444-111122-55555");
//Set reconnect attampts count
fd.addParam("ReconnectAttemptsCount", "360");
//Set reconnect timeout value (30000 = 10 seconds)
fd.addParam("ReconnectTimeOut", "10000");
//Configure URL from which the file list will be downloaded
//Change this path if necessary
//fd.addParam("FileList", "aurigma/filelist.txt");
//The following listener will perform some actions when the file list is about to be downloaded
fd.addEventListener("DownloadStep", "FileDownloader_DownloadStep");
//The following listener will perform some actions when download of a single file is finished
fd.addEventListener("DownloadItemComplete", "onDownloadItemComplete");
//The following listener will perform some actions when download process is complete
fd.addEventListener("DownloadComplete", "onDownloadComplete");
//The following listener will perform some actions when a general error is detected
//fd.addEventListener("Error", "onError");
//Add page load listener
//fd.fullPageLoadListenerName = "fullPageLoad";
//Set instructions property
fd.instructionsEnabled = false;
//Tell File Downloader writer object to generate all necessary HTML code to embed File Downloader into the page
fd.writeHtml();
</script>
<asp:ImageButton ID="BtnReturnHome" runat="server" AlternateText="Return to Home Page"
ImageUrl="~/App_Themes/Default/images/BtnReturnHomeS.jpg">
</asp:ImageButton>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2" style="text-align:left;font-family:Arial;font-weight:normal;font-style:italic;color:#17238C">
<p style="font-size:10pt"><strong style="text-decoration: underline;font-size:11pt;font-style:normal">Why do I need this?</strong> <strong>
This tiny control-program is only installed ONCE on a given machine,
and is there to assist with all future downloads.
It allows you to download a batch of several files at once, save
them wherever you wish, AND keeps track of the download progress. If your internet connection glitches, the
download will *automatically restart* (after a couple of minutes)
from where it left off, once the internet connection is restored, presuming that your computer remains powered on.
This is a very important feature, since these are BIG files that may take
several hours to download if you have a relatively slow internet connection.</strong>
</p>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="instructionsRight" style="float:right;width:49.5%">
<table cellspacing="0" width="100%" class="borderTable0" style="height:430px;">
<tr>
<td align="center">
<br style="height:20px" />
<h4 style="color:#17238C">Additional Info</h4>
</td>
</tr>
<tr valign="top">
<td align="center">
<table border="0" cellpadding="1" cellspacing="0"
style="border-collapse: collapse;">
<tr>
<td>
<table border="0" cellpadding="0">
<tr>
<td colspan="2" style="text-align:left;font-family:Arial;font-weight:normal;font-style:normal;color:#17238C">
<p style="font-size:9pt"><strong style="text-decoration: underline;font-size:11pt;font-style:normal">Worst-case scenario</strong>: <strong>
If the transfer fails because your computer shut down from a power-outage, there may be a temporary file left on your
machine - but the next time you start the download, it automatically cleans up what was left from the aborted transfer.
If you tend to get hit by electric power outages more often than normal, we recommend that you purchase a battery-backup UPS
(Uninterruptible Power Supply) that has at least 1500VA capacity so that the computer AND your modem AND router can remain
powered-up for several hours when the power goes out. Start the download before going to bed, and TURN OFF the monitor
during that process, so that the UPS would not have to feed it if a power outage hits.</strong>
</p>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2" style="text-align:left;font-family:Arial;font-weight:normal;font-style:normal;color:#17238C">
<p style="font-size:9pt"><strong style="text-decoration: underline;font-size:11pt;font-style:normal">Gotta-shut-down scenario</strong>: <strong>
If you are in the midst of a long download session, but for some reason you must interrupt it and turn off your computer
a while, then if you want to resume the download from where you left off, be sure to HIBERNATE your machine rather than
doing a simple shutdown. You can set this up from Control Panel > Power Options > Hibernate Tab. There will be a button
on your keyboard somewhere that activates hibernation (sometimes called "sleep"). It takes a complete "RAM snapshot" of
what is going on, so that the next time you start the computer, it resumes exactly where it left off (it may take a few
minutes after restart for the download to auto-resume).</strong>
</p>
</td>
</tr>
<tr>
<td colspan="2" style="height:24px">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>