?
Solved

Improve embed procedure - part2

Posted on 2011-10-24
20
Medium Priority
?
261 Views
Last Modified: 2012-08-13
The following code embeds a PDF file so that it comes up inside the browser page as shown in the result below.  I also need it to center, remove any PDF app borders, and automatically size itself for the computer it is being viewed on such that there is no scrolling required to see the entire contents of the page.  Assistance is greatly appreciated.

<OBJECT data="http://www.frugalmule.com/wp-content/uploads/2011/10/fmhp.pdf" TYPE="application/x-pdf" TITLE="SamplePdf" 
WIDTH=200 HEIGHT=100> 
</object>

Open in new window

Result:  http://sdparkes.co.uk/test/noname2.html
0
Comment
Question by:rtod2
  • 12
  • 8
20 Comments
 
LVL 11

Expert Comment

by:maeltar
ID: 37022422
To center the object you could just place it in a ceneterd div or <p> tag :

You cannot remove the scrollbar unfortunatley as the is placed by the adobe reader, as are the controls..
The only way I have figured to stop the scroll bars being active is to set the object size to that of the pdf size (In this case Letter, which is approx 1200px high)..

  <p align="center" ><OBJECT style="height: 1200px;width:50%;" border="0" data="http://www.frugalmule.com/wp-content/uploads/2011/10/fmhp.pdf" align="middle" TYPE="application/x-pdf" TITLE="SamplePdf" > 
</object></p>

Open in new window

0
 

Author Comment

by:rtod2
ID: 37022452
Maeltar,  Thanks for putting your suggestions inside your code!!

I tried that here with better, but not ideal results as shown http://www.frugalmule.com/.  

Please suggest further if possible.
0
 
LVL 11

Expert Comment

by:maeltar
ID: 37022461
Ok, set the width to the width of your content div which is 670px

I have set it to 600px in the example below so you should have a small border around the pdf

<p align="center" ><OBJECT style="height: 1200px;width:600px;" border="0" data="http://www.frugalmule.com/wp-content/uploads/2011/10/fmhp.pdf" align="middle" TYPE="application/x-pdf" TITLE="SamplePdf" > 
</object></p>

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:rtod2
ID: 37022469
Not exactly the embedded look I was after but certainly a little closer with this code
<p align="center" ><OBJECT style="height: 1200px;width:670px;" border="0" data="http://www.frugalmule.com/wp-content/uploads/2011/10/fmhp.pdf" align="middle" TYPE="application/x-pdf" TITLE="SamplePdf" > 
</object></p>

Open in new window

Result:  www.frugalmule.com
0
 
LVL 11

Expert Comment

by:maeltar
ID: 37022470
Or ....  Set the width to 100%

	

<p align="center" ><OBJECT style="height: 1200px;width:100%;" border="0" data="http://www.frugalmule.com/wp-content/uploads/2011/10/fmhp.pdf" align="middle" TYPE="application/x-pdf" TITLE="SamplePdf" > 
</object></p>

Open in new window

0
 

Author Comment

by:rtod2
ID: 37022492
no cigar

I tweaked this a little and it's closer, but not quite.  Let's start here if possible
<OBJECT style="height: 900px;width:100%;" border="0" data="http://www.frugalmule.com/wp-content/uploads/2011/10/fmhp.pdf" TYPE="application/x-pdf" TITLE="fmhp" > 
</object>

Open in new window

I have to figure out a way to eliminate those borders on the PDF viewer.
0
 
LVL 11

Expert Comment

by:maeltar
ID: 37022506
The width is governed by the div the object is inside, which has an id of "content" on your site, unless you increase the size of the required div's it is contained in it will not get any wider..
0
 

Author Comment

by:rtod2
ID: 37022509
Can you include the <div> tags in the code the way you are talking about?
0
 

Author Comment

by:rtod2
ID: 37022522
Here is the screenshot of where I am editing.
http://screencast.com/t/lqdmgsK2gI

I seem to remember something like a <span style=></span> tag or something that would allow you to basically override any pre-existing CSS code in order to change the borders or something.  I don't know.  This http://www.frugalmule.com/ still looks pretty bad though as is.
0
 

Author Comment

by:rtod2
ID: 37022536
Closer
<OBJECT style="height: 870px; width:100%;" border="0" data="http://www.frugalmule.com/wp-content/uploads/2011/10/fmhp.pdf" TYPE="application/x-pdf" TITLE="fmhp" > 
</object>

Open in new window

Still need border help though...

Here is the screenshot of where I am editing.
http://screencast.com/t/lqdmgsK2gI

I seem to remember something like a <span style=></span> tag or something that would allow you to basically override any pre-existing CSS code in order to change the borders or something.  I don't know.  This http://www.frugalmule.com/ still looks pretty bad though as is.
0
 
LVL 11

Expert Comment

by:maeltar
ID: 37022543


<p><span style="width:800px;display:block;">
<OBJECT style="height: 900px;width:100%;" border="0" data="http://www.frugalmule.com/wp-content/uploads/2011/10/fmhp.pdf" TYPE="application/x-pdf" TITLE="fmhp" > 
</object></span></p>

Open in new window

0
 

Author Comment

by:rtod2
ID: 37022571
Considerably better...

screenshot:  http://screencast.com/t/Vdu0HN3dqin

page:  www.frugalmule.com
<p><span style="width:800px;display:block;">
<OBJECT style="height: 870px;width:100%;" border="0" data="http://www.frugalmule.com/wp-content/uploads/2011/10/fmhp.pdf" TYPE="application/x-pdf" TITLE="fmhp" > 
</object></span></p>

Open in new window

However, the pdf plug-in border still exists.  Might need to let this sit for a while and see if anyone chimes in on it.
Also, still not quite fitting inside the page without browser scrolling as shown in the screenshot.
0
 

Author Comment

by:rtod2
ID: 37022586
Also, when the PDF is set to 100% it gets even bigger but scrolling is required both inside the PDF frame and inside the browser frame.  Eventually, I want to be able to throw any PDF file in there and have it appear within the browser frame on any computer without scrolling in either the PDF plugin or within the browser.
0
 
LVL 11

Accepted Solution

by:
maeltar earned 2000 total points
ID: 37022607
I think I have it sorted....

<span style="width:800px;display:block;">
<embed style="height: 900px;width:100%;" border="0" src="http://www.frugalmule.com/wp-content/uploads/2011/10/fmhp.pdf#toolbar=0&navpanes=0&scrollbar=0">
</span></p>

Open in new window

0
 

Author Comment

by:rtod2
ID: 37022632
A whole lot closer!!

Here is a screenshot of how I see it http://screencast.com/t/hDWji6MxT.  You can see that there is still some browser scrolling needed but it is MUCH closer.

Updated Code:
<!-- This code should allow us to have any PDF file appear exactly like the designer intended it to appear, but with no PDF plug-in borders no browser or PDF scrolling at all. TRP -->

<span style="width:800px;display:block;">
<embed style="height: 900px;width:100%;" border="0" src="http://www.frugalmule.com/wp-content/uploads/2011/10/fmhp.pdf#toolbar=0&navpanes=0&scrollbar=0">
</span></p>

Open in new window

0
 
LVL 11

Expert Comment

by:maeltar
ID: 37022647
All you can do is adjust the height to fit your requirements...

After reading your message :

Also, when the PDF is set to 100% it gets even bigger but scrolling is required both inside the PDF frame and inside the browser frame.  Eventually, I want to be able to throw any PDF file in there and have it appear within the browser frame on any computer without scrolling in either the PDF plugin or within the browser.

Due to the inherant size ( height/width) of the pdf files you would never be able to get the pdf show at a reasonable size without some scrolling of the web page.
0
 

Author Comment

by:rtod2
ID: 37022659
Should be a way to shrink it to fit the parameters.  There has to be an HTML tag that will do that, especially in HTML5
<!-- This code should pass validation for HTML5 at 
http://validator.w3.org/check, allow us to have any 
PDF file appear exactly like the designer intended 
it to appear, but with no PDF plug-in borders, 
no PDF scrolling, and no browser scrolling at all. TRP -->

<span style="width:800px;display:block;"><embed style="height: 900px;width:100%;" border="0" src="http://www.frugalmule.com/wp-content/uploads/2011/10/fmhp.pdf#toolbar=0&navpanes=0&scrollbar=0</span></p>

Open in new window

We are obviously MUCH closer though!!
0
 
LVL 11

Expert Comment

by:maeltar
ID: 37022676
If you shrink the height to fit the page one of 3 things will happen, you will lose information from the bottom of the pdf, or it will distort and become unreadable, it will resize the width of the pdf proportionally to the selected height...
0
 

Author Comment

by:rtod2
ID: 37022701
Yeah, I think if it re-sizes proportionally based on the size of the PDF, we should be fine.  

The idea is to make it fit the entire frame regardless of the size of a computer screen, resolution settings, or previous PDF view percentage settings.

The gray borders need to go away also, somehow.  I greatly appreciate your help sir!
<!-- This code should pass validation for HTML5 at 
http://validator.w3.org/check, allow us to have any 
PDF file appear exactly like the designer intended 
it to appear, but with no PDF plug-in borders, 
no PDF scrolling, and no browser scrolling at all. 

It is fine if it re-sizes proportionally based on the 
size of the PDF. The idea is to make it fit the entire 
frame regardless of the size of a computer screen, 
resolution settings, or previous PDF view percentage 
settings  -TRP -->

<span style="width:800px;display:block;"><embed style="height: 900px;width:100%;" border="0" src="http://www.frugalmule.com/wp-content/uploads/2011/10/fmhp.pdf#toolbar=0&navpanes=0&scrollbar=0</span></p>

Open in new window

0
 

Author Comment

by:rtod2
ID: 37022725
Much closer but still gray borders and not adjusting so that no scrolling occurs.
<!-- This code should pass validation for HTML5 at http://validator.w3.org/check.
It should allow us to have any PDF file appear exactly like the designer intended it to appear. 
It should contain no PDF plug-in borders, no PDF scrolling, and no browser scrolling at all. 
It should re-size proportionally based on the size of the PDF such that it fits the entire 
frame regardless of the size of a computer screen, resolution settings, or previous PDF view 
percentage settings  -TRP -->

<span style="width:800px;display:block;"><embed style="height: 900px;width:100%;" border="0" src="http://www.frugalmule.com/wp-content/uploads/2011/10/fmhp.pdf#toolbar=0&navpanes=0&scrollbar=0</span></p>

Open in new window

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question