2017-03-03 2 views
1

このページの埋め込みPDFに問題があります。 sponsorshipsこのサイトの以前のバージョンはHTML4とembedこのブートストラップにpdfが埋め込まれていません

<object data="pdf/GreekFestSponsorship2013.pdf" type="application/pdf" width="100%" height="700px"> 
    <p>It appears you don't have a PDF plugin for this browser.</p> 
    <p id="missing-pdf-plugin">You can <a href="pdf/GreekFestSponsorship2013.pdf">click here to download the PDF file</a>.</p> 
    </object> 

ようなオブジェクトタグで行われていたた。これは、PDFは、100%の高さではなく、どのように

/* Flexible iFrame */ 
 
    
 
.flexible-container { 
 
    position: relative; 
 
    
 
    height: 0; 
 
    overflow: hidden; 
 
} 
 
    
 
.flexible-container iframe, 
 
.flexible-container object, 
 
.flexible-container embed { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
<title>Greek Festival Portsmouth NH</title> 
 
<!-- Bootstrap Core CSS --> 
 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
 
<!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles --> 
 
<link href="css/custom.css" rel="stylesheet"> 
 
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> 
 
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
 
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
<!--[if lt IE 9]> 
 
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
 
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
 
<![endif]--> 
 
<!-- Font Awesome JS --> 
 
<script src="https://use.fontawesome.com/a0aac8df13.js"></script> 
 
<meta name="Description" content="Three fun-filled days in Portsmouth NH as the magic of Greece comes to town. The Glendi or party will begin on Friday, July 15th, July 16th and July 17th with authentic Greek food. We will offer live Greek music from the band orfeas and continual music by DJ Meleti. In addition to the food, there will be booths that will offer imported jewelry, arts and crafts from Greece. A children's play area will ensure the entire family enjoys their virtual visit to this ancient land."> 
 
<meta name="Keywords" content=" st. nicholas greek orthodox church, nicholas in greek, greek cuisine, st. nicholas greek orthodox cathedral, charleston food and wine, greek orthodox archdiocese, goarch.org, greek food festivals, st nicholas greek festival, greek food festival, wine events, orthodox christianity, food and wine events, wine tasting events, greek orthodox calendar, dallas greek festival, greek festival st. louis, st nick gift ideas, st nicholas greek orthodox, what to do in portsmouth nh, wine and food events, greek for church, greek orthodox religion, food and wine festival 2016, nicholas greek, st nicholas greek, st louis greek, festival seacoast online calendar, portsmouth events, orthodox music, greek orthodox christian, greek orthodox churches, greek orthodox music, greek orthodox christianity, greek festival st louis mo, greek dates, seacoast nh events, st nick gifts, greek orthodox icon, annunciation ,greek orthodox wine event, orthodox greek food and wine festivals, 2016 food and wine event, church in greek, greek orthodox church ann arbor, famous greek foods, portsmouth high, charleston wine festival, live music in portsmouth nh, activities in portsmouth nh, greek orthodox faith, greek orthodox festival st nicholas, orthodox greek nicholas, food and wine tasting, food and wine shows, food and wine events 2016, moving to portsmouth nh, portsmouth nh food music festival july, portsmouth nh classifieds, greek food items, live music in nh, festival this weekend, festival of food, eastern orthodox music, greek orthodox religious items, glendi festival, music festival, vendors, where is portsmouth nh, portsmouth activities, saint nicholas orthodox, becoming greek orthodox, greek church, music, music festival dates, greek orthodox bishop, orthodox children festival in july, greek orthodox food events in portsmouth, greek orthodox festivals, dates in greek, eastern orthodox new year, greek orthodox schools, food in portsmouth, music festival in july, beer, weekend wine activities, the greek orthodox, on line events, greek orthodox community, orthodox music "> 
 

 
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> 
 
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> 
 
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> 
 
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> 
 
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> 
 
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> 
 
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> 
 
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> 
 
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> 
 
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> 
 
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192"> 
 
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> 
 
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> 
 
<link rel="manifest" href="/manifest.json"> 
 
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> 
 
<meta name="msapplication-TileColor" content="#da532c"> 
 
<meta name="msapplication-TileImage" content="/mstile-144x144.png"> 
 
<meta name="theme-color" content="#ffffff"> 
 
</head> 
 
<body> 
 
<div class="main-navigation-container navbar-fixed-top" id="primary-navbar"> 
 
      <nav class="navbar"> 
 
       <div class="container-fluid"> 
 
        <!-- Mobile Toggle Button and stuff --> 
 
        <div class="navbar-header"> 
 
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#primary-navigation" aria-expanded="false"> 
 
          <span class="sr-only">Toggle navigation</span> 
 
          <span class="icon-bar"></span> 
 
          <span class="icon-bar"></span> 
 
          <span class="icon-bar"></span> 
 
         </button> 
 
         <a class="navbar-brand" href="" title="PortsmouthGreekFestival.com">PortsmouthGreekFestival.com</a> 
 
        </div> 
 
        <!-- End of mobile toggle button --> 
 
        <!-- Start of the navbar --> 
 
        <div class="collapse navbar-collapse" id="primary-navigation"> 
 
         <ul class="nav nav-justified"> 
 
          <li><a href="index.html">Home<span class="sr-only">(current)</span></a></li> 
 
          <li><a href="Menu.html">Menu</a></li> 
 
          <li><a href="photos.html">Photos</a></li> 
 
          <li><a href="events.html">Schedule of Events</a></li> 
 
          <li><a href="sponsors.html">Sponsors</a></li> 
 
          <li><a href="contact.html">Contact</a></li> 
 
          </ul> 
 
        </div> 
 
       </div> 
 
      </nav> 
 
</div> 
 
<header class="masthead"> 
 
     <img src="images/Banner.jpg" alt="Portsmouth Greek Festival Logo"> 
 
</header>  
 
<!-- /.container --> 
 
<!-- Feature --> 
 
<div class="container"> 
 

 
<h1>Sponsorship Opportunities</h1> 
 
<div class="flexible-container-embed"> 
 
<object data="pdf/GreekFestSponsorship2013.pdf" type="application/pdf" width="100%" height="100%"> 
 
    <p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://portsmouthgreekfestival.com/pdf/GreekFestSponsorship2013.pdf">Download PDF</a></p> 
 
</object> 
 
    
 
</div> </div> 
 
<footer>  
 
<!-- Copyright etc --> 
 
<div id="Copyright"> 
 
<p>Copyright &copy; <script>document.write(new Date().getFullYear());</script> PortsmouthGreekFestival.com</p> 
 
</div> 
 
</footer> 
 
<!-- jQuery --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<!-- Bootstrap Core JavaScript --> 
 
<script src="js/bootstrap.min.js"></script> 
 
<!-- IE10 viewport bug workaround --> 
 
<script src="js/ie10-viewport-bug-workaround.js"></script> 
 
</body> 
 
</html>
は、あなたが見ることができる新しいコードでありますこのスクリーンショット。 screenshot

+0

あなたは実際のフィドルを提供できますか? – AVI

答えて

1
  1. あなたはを意図したとおりに動作します2つの余分なルールセットを持っていますが、必要に...
  2. ... HTMLでこれを修正する:

    <div class="flexible-container-embed"> to this: 
    <div class="flexible-container"> 
    
  3. ...これを.flexible-containerに追加するCSSルールセット:

    padding-bottom:100%` 
    
    これらの2つのルールセットを追加する場合は、 <style>要素の中に置いて
  4. 、その後<head>要素内の最後の位置であることをことを追加します。例については、以下のPlunkerリンクを参照してください。

私はあなたが正しいコードを見つけたと思っていますが、それを実装している間に特定のプロパティと値が非常に奇妙に見える理由を理解できませんでした。たとえば、(キャップ​​について申し訳ありませんが、フォーマットが限られている、私は叫んでいないよ):

/* Flexible iFrame */ 

.flexible-container { 
    position: relative; 
    /* This blank line was probably: 
    || padding-top: 56.25%; 
    */ 
    height: 0; 
    overflow: hidden; 
} 

/* This ruleset says: 
|| "Apply the following properties and their values to ANY `<iframe>`, 
|| `<object>`, or `<embed>` THAT IS A CHILD OF any element with the 
|| class of `.flexible-container`. 
*/ 
.flexible-container iframe, 
.flexible-container object, 
.flexible-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

あなたはこれらの2つのルールセットを適用するときは、ラップのdivを与えていた<object>.flexible-container-embedが、両方のルールセットのクラス.flexible-containerのいずれかの子が、<object>、または<embed>のいずれかの要素に適用されます。基本的には、クラス名の -embed部分を削除してください。

次に、padding-bottomプロパティです。これは一般にiframeのコンテナに適用され、高さを9の幅に維持するための適切なコンテキストを56.25%にします。これはワイドスクリーンフォーマットのビデオには適していますが、アスペクト比が8:11または72%のPDFの場合はそれほど良くありません(デモでは100%を使用しています。埋め込みをheight:0と組み合わせると、コンテントの幅に合わせて高さを調整する "シュリンクラップ"のように機能するコンテナが得られます。 更新:PDFプラグインが追加するため、100%から72%に変化はありません。

<object>をより汎用性があるために変更しました。<embed>も使用できます。これを確認してくださいPLUNKER

+0

ありがとうございました – mlegg

+0

私は助けになることができてうれしいです。 – zer00ne

2

完全に100%の高さでPDFファイルを表示するのはかなり難しいです。 Bootstrapのresponsive embedded mediaのアプローチを採用したいと思うかもしれません。その結果、かなり良い結果が得られ、手間も少なくて済みます。 Chromeで

結果:Firefoxで chrome embedded PDF

結果: firefox embedded PDF

ソースコード:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>PDF</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script 
    src="https://code.jquery.com/jquery-2.2.4.min.js" 
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
    crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 
    <div class="container"> 
     <h1>Hello World!</h1> 
     <div class="embed-responsive embed-responsive-4by3"> 
      <object data="test.pdf" type="application/pdf"> 
       <p> 
        Your browser does not support embedded PDF files.<br> 
        <a href="test.pdf">Click here to 
        download the PDF file.</a> 
       </p> 
      </object> 
     </div> 
    </div> 
</body> 
</html> 

ないすべてのブラウザが埋め込まれたPDFファイルをサポートすることを覚えておいてください、それゆえ予告<object>タグ内にあります。

関連する問題