Page 1 of 2 12 LastLast
Results 1 to 10 of 17

Thread: Dynamic AJAX Content - cant load PDFs

  1. #1
    Join Date
    Sep 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Dynamic AJAX Content - cant load PDFs

    1) Script Title: Dynamic Ajax Content

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...jaxcontent.htm

    3) Describe problem:

    I'm using this AJAX script to load external content into a DIV tag.
    The problem is when i want to load PDF files to display in the DIV, all i get is illegible binary code.

    So how i can i have the the actual PDF files display instead?

    [I was originally using an IFRAME to load all the content, but switched to AJAX to avoid the two sets of scrollbars - one for the actual HTML page and one for the IFRAME.]


    HTML Code:
    <div id="leftcolumn">
    <a href="javascript:ajaxpage('myPage.htm', 'rightcolumn');">HTML content - loads fine</a>
    <a href="javascript:ajaxpage('PDFs/ReadMe.pdf', 'rightcolumn');">A PDF file - gobbledigook!</a>
    </div>
    
    <div id="rightcolumn">
    <h3>PDF files wont render properly here.</h3>
    </div>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,994
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    AJAX can only be used to import HTML code. There is a tag for displaying PDF. The object tag used for Flash and other multimedia content is used.

    In IE 8, Firefox, Safari, Opera, and Chrome (all these the latest versions available for Windows 7 that I'm aware of), this works:

    HTML Code:
    <object data="1234.pdf" type="application/pdf" width="600" height="600">
      alt : <a href="1234.pdf">1234.pdf</a>
    </object>
    Acrobat reader opened in the object and scaled the document to the dimensions specified. The only scrollbar was for vertically scrolling the document in Acrobat, no scrollbars for the object tag. If the object tag is tall enough in relation to its width, there could be no scrollbar at all. If possible, this would be controlled by how the PDF was saved. With mine I got an empty vertical scrollbar, in Acrobat, not on the object tag.

    Browsers that cannot show the PDF file with the object tag should show the nested text and link.

    I also imported the above via AJAX. As with all pages so imported, it's best to only include the HTML code that you need to make a valid xml document that also will get you the content you desire. In this case, the above code is all that is required. This also worked in all of the browsers mentioned.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That worked great. Thanks.

    But how can i dynamically (?) set the height in the object/PDF so that it fills the entire height of the document body?

    i tried setting its height to 100%, but that didnt work.

    Code:
    <object data="1234.pdf" type="application/pdf" id=myObject width="600" height="100%">
    i also tried this script, but no joy here either:

    Code:
    document.getElementById('myObject').style.minHeight = (document.body.scrollHeight);
    any ideas?
    Last edited by ralph; 09-04-2010 at 07:14 PM. Reason: mistake

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,994
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Which document? If you followed my instructions exactly, it already fills 100% of the document it's on, the imported document, as it's what sets that document's height.

    But I think you mean the document that it's being imported to. For that it would have to be a child of the body element or a child of another element or elements all direct descendants of the body and all set to 100% height. If not using quirks mode (no DOCTYPE, where the html and body elements are assumed to be 100% height) one must also set the html and body to 100% height. It's also important (regardless of mode) to set the margin and padding of the html and body to 0. Some browsers will probably require overflow hidden on the html and body. Finally, there must not be anything else above or below the object, otherwise things will get weird.

    Using jQuery for the import and HTML 5 standards, here's an example 'top' page:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <style type="text/css">
    html, body {
    	margin: 0;
    	padding: 0;
    	overflow: hidden;
    	height: 100%;
    }
    object {
    	margin: 0;
    	padding: 0;
    	height: 100%;
    	width: 100%;
    }
    #target {
    	width: 600px;
    	height: 100%;
    }
    input {
    	float: right;
    }
    </style>
    <script type="text/javascript">
    jQuery(function($){
    	$('input').click(function(){
    		$('#target').load('1234.htm');
    	});
    });
    </script>
    </head>
    <body>
    <input type="button" value="Go">
    <div id="target">
    
    </div>
    </body>
    </html>
    Here's the external file (1234.htm, in this case):

    Code:
    <object data="1234.pdf" type="application/pdf">
      alt : <a href="1234.pdf">1234.pdf</a>
    </object>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Sep 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The problem occurs when the height of the parent window is greater than the height of the pdf in the child document.
    I get two scrollbars - just as when i was using an iframe. And if i set the parent window to
    overflow: hidden
    , then i cant scroll down the content within the parent document.

    I used the AJAX script to achieve a single scrollbar for all the content - parent and child. But, as the AJAX didnt render the PDF, i tried embedding and then the double scrollbar issue comes up all over again.

    You can see my first attemp at a solution here, using the original DD AJAX script...

    http://fulcrum.ws/pdf_menu/index.htm

    and here, using your solution:

    http://fulcrum.ws/pdf_menu/index1.htm

    Heres the code i used with your solution ("index1.htm" as in the link immiedately above).
    [i didnt know how to write text hyperlinks with jQuery, so the only working link is the "Go" input button.]


    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript" src="jquery.min.js"></script>
    
    <style type="text/css">
    html, body {
    	margin: 0;
    	padding: 0;
    	height: 100%;
    }
    object {
    	margin: 0;
    	padding: 0;
    	height: 100%;
    	width: 600px;
    }
    
    #target {
    	float: left;
    	width: 600px;
    	height: 100%;
    	background: pink;		
    }
    
    #menu	{float: left;
    	width: 400px;
    	height: 100%;
    }
    
    input {
    	float: right;
    	padding: 50px;
    }
    
    A	{
    	float: right;
    	display: block;
    	padding: 100px;
    	}
    
    </style>
    
    <script type="text/javascript">
     jQuery(function($){
    	$('input').click(function(){
    		$('#target').load('1234.htm');
    	});
    });
    </script>
    </head>
    <body>
    
    <h1>HEADER</h1>
    
    <div id="target">
    <object data="abcd.pdf" type="application/pdf">
      alt : <a href="abcd.pdf">abcd</a>
    </object>
    </div>
    
    
    <div id="menu">
    <input type="button" value="Go">
    
    <A>LINK 1 of 6 :: 1234.htm</A>
    <A>LINK 2 of 6 :: abcd.htm</A>
    <A>LINK 3 of 6 :: 1234.htm again</A>
    <A>LINK 4 of 6 :: abcd.htm again</A>
    <A>LINK 5 of 6 :: 1234.htm again</A>
    <A>LINK 6 of 6 :: abcd.htm again</A>
    </div>
    
    </body>
    </html>
    Last edited by ralph; 09-05-2010 at 03:18 AM. Reason: unclear explanation

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,994
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Well, one can always make something up that "doesn't work". All I was saying is that if you want the object to take up 100% of the height of the body, there are things you can do.

    In both of your examples it doesn't appear as though you want 100% of the height of the body, which is what you asked. In your first example, the target is only 400px high, at least it must be 100% high for the object it will contain to also be 100% high. In your second example there's a header above the PDF. If the PDF is 100% high, there will either be no room for the header, or no room for part of the PDF.

    I'm thinking that perhaps what you are after is to get one page of the PDF to take up 100% of the height of the object. To do that all you need to do is determine the ratio of width to height required. It's roughly 8.5 x 11 (the ratio of an actual piece of paper, but that doesn't account for Acrobat's "chrome"). Then use a fixed width and a fixed height that will accommodate that. 600 x 800 (you may want to tweak these) pixels seems about right:

    Code:
    <object data="1234.pdf" type="application/pdf" width="600" height="800">
      alt : <a href="1234.pdf">1234.pdf</a>
    </object>
    Then just make sure that the target container you are importing to has at least those dimensions, and the only scrollbars you will have will be in Acrobat and for the page itself. The scrollbars for the page will not be present unless needed, or if viewing in IE 6 or less where there is always a vertical bar for the browser whether required by the page or not.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Sep 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Of course, you are right. I apologise for not explaining myself properly the 1st (and 2nd!) time round .

    what i actually want is: the height of the target in which the linked content appears to (dynamically) equal the scroll height of the parent/window itself. Or, more precisely, i want the scroll height of the parent/window to at least equal the full height of the linked content in the target, and thus, rendering the scrollbar of the target DIV redundant. phew! got there in the end. LOL.

    the original DD script allows for this to happen with HTML. i've edited the code in "index.htm" (see: http://fulcrum.ws/pdf_menu/index.htm) to set all the heights to 100% and have added a header above both boxes.

    as you can see, the new first link "pureHTML" links to a html page (pureHTML.htm) several thousand pixels in height. yet the ony scrollbar is that of the overall parent window. the target height has been stretched to accomodate all the content - removing the need for another scrollbar.

    the problem remains with the other links (1234.htm, abcd.htm) to the embedded PDF files. i just cant get them/the target DIV/the object to strech out to the scrollHeight of the parent window.

    incidentally, i first found this workaround for loading HTML content in an iframe:

    HTML Code:
    <BODY onload="resizeFrame(document.getElementById('target'))">
    Code:
    <script type="text/javascript">
    	function resizeFrame(f) {
    	f.style.height = f.contentWindow.document.body.scrollHeight + "px";
    	}
    	</script>
    it forces the target frame to take the height of the parent. but i couldnt get PDFs to fill the height in the same way. hence the recourse to AJAX.

    so, bascially, can you pls show me how to render/stretch the height of the target - as achieved with external HTML content via the DD AJAX script or the script above - for embedded PDF content? [in order for there to be no need to scroll through the target content independantly of the overall window content itself.]

    your knowledge and patience is much appreciated.
    Last edited by ralph; 09-05-2010 at 06:01 AM.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,994
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    I still don't understand, and think you may be over complicating things. Forget about getting 100% of anything. If the object has the correct width to height ratio, it will have no scrollbars. If the target division's width is equal to or greater than the object and has no height set (either explicitly or implicitly), it will have no scrollbars. In fact, if the target division is not constrained at all - no width or height limits, it will never have a scrollbar.

    Note: After playing around with this, it seems that the dimensions of the object are best set in style on the 'top' page:

    Code:
    <style type="text/css">
    
    object {
    	width: 600px;
    	height: 800px;
    }
    
    </style>
    Last edited by jscheuer1; 09-05-2010 at 03:53 PM. Reason: add note
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,994
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    As I say, I'm still not real clear on what you are going for, here's something I'm playing with:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    object {
    	display: none;
    	overflow: hidden;
    }
    #header {
    	overflow: hidden;
    }
    h1 {
    	float: left;
    	width: 8em;
    }
    input {
    	float: left;
    	margin-left: 1em;
    	position: relative;
    	top: 2em;
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(function($){
    	var win = $(window), b = $('body'), t = $('#target'), m = parseInt(b.css('marginTop')) + parseInt(b.css('marginBottom')), count = 0, h, w;
    	function sizeIt(){
    		$('#objectStyle_' + (count - 1)).remove();
    		h = win.height() - $('#header').outerHeight(true) - m;
    		w = Math.round(h * (6 / 8.25));
    		$('head').append('<style id="objectStyle_' + (++count) + '" type="text/css">object {display: block; height: ' + h + 'px; width: ' + w + 'px; }<\/style>');
    	}
    	sizeIt();
    	win.resize(sizeIt);
    	
    	$('input.loader').click(function(){
    		t.load(this.value + '.htm', function(data){t.html(data);});
    	});
    });
    </script>
    </head>
    <body>
    <div id="header">
    <h1>Header</h1>
    <input class="loader" type="button" value="1234">
    </div>
    <div id="target">
    
    </div>
    </body>
    </html>
    1234.htm:

    Code:
    <object data="1234.pdf" type="application/pdf">
      alt : <a href="1234.pdf">1234.pdf</a>
    </object>
    Notes: This is a little non-standard for jQuery because of IE quirks. Ordinarily using the data of the load() function in the manner I have here is redundant. But it produces valid HTML 5 markup. Otherwise IE would frequently refuse to show the imported PDF.

    Removing the next to most recently added style object during window resizing seemed only to be required in IE as well. Seems IE can only handle so many style sections in the head before it starts ignoring them. And it was unable to consistently keep the object tag visible without keeping at least one around during the process of inserting the next.

    The markup and styles are fairly standard, but a bit constrained. Care should be taken in adding to this layout. An understanding of floats within an overflow: hidden container helps. For example, the header division should not be given dimensions. If so, some of its content may disappear.

    Any external .htm file may be loaded by an input with the class 'loader'. It will be the value of the input + the .htm extension. So it can be used with selects or text inputs (caution here, the user can enter anything) as well as button inputs (as in this example) or with a radio button group. With a little tweaking to check for the checked state checkboxes could be used as well. Checkboxes and text inputs don't make a lot of sense to me though.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Sep 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hopefully, this picture paints a thousand words.

    Pls goto: http://fulcrum.ws/pdf_menu/abcd2.htm

    The screenshot image in "abcd2.htm" illustrates the desired effect.

    (In context: http://fulcrum.ws/pdf_menu/index.htm)

    1. The PDF displays as a single unscrollable block. it width is fixed at @600px, regardless of the height - which will vary depending upon the number of pages the linked-to files contain (in this case 4).

    2. The height of the PDF is is filled/stretched to near enough 100% of the target DIV in the parent/containing window.

    4. In order to scroll through either the PDF or the HTML content, the HTML window - not the PDF object - is scrolled. Because the PDF displays as one single block of fixed width and dynamically fixed full height, no other scrollbar is reqired

    5. The height cannot be in ratio to the width as any one document may contain 4 pages (as here) or 400 pages. Hence the attempt to force the height to 100% of the available height - although obviously this hasnt solved the problem.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •