2016-11-09 8 views
0

私は、次のコードで水平なデザインで、いくつかのPDFを提示している:私は、PDF文書に関する簡単な説明と同様に、各PDFのdiv要素の上にいくつかのテキストを配置したい各PDFObject divの上部にコンテンツを挿入する方法は?

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Something</title> 
    <style type="text/css"> 
     #scrolly{ 
      width: 100%; 
      height: 800px; 
      /*overflow: auto;*/ 
      /*overflow-y: hidden;*/ 
      margin: 5 auto; 
      white-space: nowrap 
     } 

     .pdfobject-container { 
      /*width: 100%;*/ 
      max-width: 800px; 
      height: 800px; 
      margin: 5em 0; 
      display: inline; 
     } 
     .pdfobject { border: solid 1px #666; max-width: 40%;} 
    </style> 
</head> 
<body> 

    <div id='scrolly'> 
     <div id="pdf1" ></div> 
     <div id="pdf2" ></div> 
     <div id="pdf3" ></div> 
    </div> 

<script src="PDFObject-master/pdfobject.js"></script> 
<script> 

PDFObject.embed("../../overleaf/a/report.pdf", "#pdf1", {pdfOpenParams:{toolbar: '0'}, page: '1'}); 
PDFObject.embed("../../overleaf/b/report.pdf", "#pdf2", {pdfOpenParams:{toolbar: '0'}, page: '2'}); 
PDFObject.embed("../../overleaf/c/report.pdf", "#pdf3", {pdfOpenParams:{toolbar: '0'}, page: '3'}); 
// PDFObject.embed("../../overleaf/d/report.pdf", "#pdf4", options); 
// PDFObject.embed("../../overleaf/e/report.pdf", "#pdf5", options); 
</script> 

</body> 
</html> 

。どうすればいい?

+0

は、あなたのHTML内の別の親のdivと各DIV1、DIV2のn DIV3を囲み? – Lucky

+0

私は非常に初心者です、完全な答えは非常に高く評価されます:) – KcFnMi

答えて

1

スニペット

// each pdf must have a heading stored in the array headings 
 
var headings = ["This is the heading for pdf1", "This is the heading for pdf2", "This is the heading for pdf3"] 
 
//get all pdfs container 
 
all_pdf = document.getElementById("scrolly").children; 
 
//loop through and change innerHTML of pdf 
 
for (var x = 0; x < all_pdf.length; ++x) { 
 
    all_pdf[x].innerHTML = "<h1>" + headings[x] + "</h1>" + all_pdf[x].innerHTML; 
 
}
<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Something</title> 
 
    <style type="text/css"> 
 
    #scrolly { 
 
     width: 100%; 
 
     height: 800px; 
 
     /*overflow: auto;*/ 
 
     /*overflow-y: hidden;*/ 
 
     margin: 5 auto; 
 
     white-space: nowrap 
 
    } 
 
    .pdfobject-container { 
 
     /*width: 100%;*/ 
 
     max-width: 800px; 
 
     height: 800px; 
 
     margin: 5em 0; 
 
     display: inline; 
 
    } 
 
    .pdfobject { 
 
     border: solid 1px #666; 
 
     max-width: 40%; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <div id='scrolly'> 
 
    <div id="pdf1">PDF details1</div> 
 
    <div id="pdf2">PDF details2</div> 
 
    <div id="pdf3">PDF details3</div> 
 
    </div> 
 

 
    <script src="PDFObject-master/pdfobject.js"></script> 
 
    <script

+0

私は最初のスニペットを置くべきですか? – KcFnMi

+0

各PDF divの上にちょうどあるテキストの代わりに、別のhtmlページを挿入したいのですが可能でしょうか? – KcFnMi

+0

すべてのjavascriptコードをコピーし、スクリプトタグに配置します。 scriptタグはbodyタグの下部に配置することもできます。また...ヘッダの代わりに別のhtmlページを挿入することも可能ですが、アプローチは異なります... htmlページはウェブソース? – repzero

関連する問題