2014-05-03 67 views
0

我一直在閱讀一些關於StackExchange的Resposive網站。在我的本地主機上也嘗試了一些代碼,但其中沒有一個爲我工作。如何製作Iframe響應表

項目: - 我做了一個酒店預訂引擎與面向對象編程在PHP我做了一個表格使用表結構,其中用戶可以選擇簽入簽出日期和其他細節。

問題 - 我試圖使窗體resposive但沒有什麼工作對我來說

目的: - 爲了使形式響應,人們可以選擇在檢查離店日期

PHP代碼

$output .='<table cellspacing="2" border="0" style="width: 100%; border-collapse: collapse;">'; 
      if(!empty($output_hotels)){ 
       $output .= '<tr><td><label>'._SELECT_HOTEL.':</label></td></tr> 
         <tr><td nowrap="nowrap">'.$output_hotels.'</td></tr>';     
       $output .= '<tr><td><label>'._SELECT_LOCATION.':</label></td></tr> 
         <tr><td nowrap="nowrap">'.$output_locations.'</td></tr>'; 
      }   
      $output .= '<tr><td>'._CHECK_IN.': '.$output1.'</td>&nbsp;<tb>'._CHECK_OUT.':'.$output2.'</td>&nbsp;<td>'.$output3.'</td>;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'; 
      if(!empty($output_hotels)){ 
       $output .= '<tr><td style="height:5px"></td></tr> 
         <tr><td nowrap="nowrap">'.$output_sort_by.'</td></tr>'; 
      } 
      $output .= '<input class="button" type="button" onclick="document.getElementById(\'reservation-form\').submit()" value="'._CHECK_AVAILABILITY.'" /></table>'; 

IFRAME代碼

if(hsJsHost != ''){ 

    var hsJsKey = (typeof hsJsKey === 'undefined') ? '' : hsJsKey; 
    var hsJsHost = (typeof hsJsHost === 'undefined') ? '' : hsJsHost; 

    if(hsJsKey != '' && hsJsHost != ''){ 

     var encoded_host = encode64(hsJsHost); 
     var encoded_key = encode64(hsJsKey);   

     var filePath = 'widgets/ipanel-left/index.php?host='+encoded_host+'&key='+encoded_key; 

     // setup the iframe target 
     var iframe='<iframe id="frame" name="widget" src="#" width="15px" height="200px" marginheight="0" marginwidth="0" frameborder="no" scrolling="no"></iframe>'; 
     // write the iframe to the page 
     document.write(iframe); 

     var myIframe = parent.document.getElementById("frame"); 
     // setup the width and height 
     myIframe.height = 100; 
     myIframe.width = 815; 

     myIframe.src = hsJsHost+filePath; 
     // set the style of the iframe 
     myIframe.style.border = "1px solid #aaa"; 
     myIframe.style.padding = "8px"; 
     myIframe.style.margin-right = "10px"; 
    } 

} 

請幫忙

回答

0

您需要了解響應式CSS的基礎知識。這意味着媒體查詢,%和EM/REM值等。這裏有一些基本的資源

Mozilla media query page

css units

沒有這個基本的基礎,你不能建立多。