不明白jquery - 设置相等的高度包含div

时间:2009-09-22 05:21:06

标签: javascript jquery

我试图将一个较大的div包含的两个并排div设置为相等的列高度。我正在尝试使用以下jquery脚本:

<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>

然后以下是我的DIV:

<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>

jquery正在运行并且似乎返回了最大高度(451),但似乎没有将它应用于两个div。我不太了解jquery或javascript并且不理解以下内容:“setEqualHeight($(”。instructionsParent&gt; div“));”

我的编码错误吗?

谢谢你, 詹姆斯

好的,这是我的整个页面的整个子表单(我在页面上有两个子表单,其中一个是可见的,另一个不是:

<%@ 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.&nbsp;&nbsp;
                                            Click it, and select "Install ActiveX Control" from the dropdown menu.&nbsp;&nbsp;
                                            Then, click "Install" when you see the new dialog box appear.&nbsp;&nbsp;
                                            This does not collect info about you or hurt your machine.
                                        </p>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        &nbsp;
                                    </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>
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <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">
                                        &nbsp;
                                    </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>&nbsp;&nbsp;<strong>  
                                            This tiny control-program is only installed ONCE on a given machine,
                                            and is there to assist with all future downloads.&nbsp;&nbsp;
                                            It allows you to download a batch of several files at once, save
                                            them wherever you wish, AND keeps track of the download progress.&nbsp;&nbsp;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.&nbsp;&nbsp;
                                            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">
                                        &nbsp;
                                    </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>:&nbsp;&nbsp;<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.&nbsp;&nbsp;
                                            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.&nbsp;&nbsp;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">
                                        &nbsp;
                                    </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>:&nbsp;&nbsp;<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">
                                        &nbsp;
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>
</div>

2 个答案:

答案 0 :(得分:1)

删除页面加载功能对我有用。我工作页面上的脚本为:

<script type="text/javascript" language="javascript">

    $(document).ready(function() {
       setEqualHeight($(".instructionsParent > div"));
    });    


    function setEqualHeight(columns) {
        console.log("here")

        var tallestColumn = 0;

        columns.each(function() {
            currentHeight = $(this).height();
            if(currentHeight > tallestColumn) {
                tallestColumn = currentHeight;
            }
        });
        columns.height(tallestColumn);
    }
</script>

答案 1 :(得分:0)

尝试删除pageLoad()函数(我认为你没有调用它)。

见: http://paulisageek.com/tmp/jquery/equal_height.html