2009-09-22 29 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