2009-09-22 32 views
0

我想设置两个并排的div由一个较大的div包含到相等的列高度。我尝试使用下面的jQuery脚本:不明白jQuery的 - 设置相同的高度包含div

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

回答

0

尝试除去页面加载()函数(我不认为你是叫它)

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

+0

我得到了预期的对象JScript的错误,如果我删除页面加载。查询确实运行并返回一个很好的值,但不会将其应用于div。 – James 2009-09-22 05:32:30

+0

我的网页适合你吗?你能告诉我你的页面吗? – 2009-09-22 05:36:38

+0

哦,我明白了。是的,你的例子工作正常。先让我检查几件事情。 谢谢,吉姆 – James 2009-09-22 05:41:29

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

注:我在三种不同的方案测试此: 1),其具有文本在div直接编码一列,但没有样式设置为高度 2),其具有文本一个DIV但风格设置为高度 3)没有文本或样式在调用setEqualHeights函数之前设置高度,但jQuery在文档加载中生成文本 在所有3种情况下都工作。 – 2015-12-21 14:15:30