More Group Sites
Education Books
School Rankings
Jobless Net
Better Home
Welcome Guest! To enable all features please Login or Register.



Go to last post Go to first unread
#1 Posted : Sunday, 6 March 2016 3:36:46 PM(UTC)

Rank: Administration


Groups: AcademicCoachingSchool, admin, Administration, BookSeller, CatholicSchool, CoachingAdult, CoachingProfessional, CoachingSports, ExtraCurriculumCoaching, IndependentSchool, Moderator, MusicTeacher, PrivateSchool, PublicSchool, SelectiveSchool, tutor
Joined: 23/11/2008(UTC)
Posts: 522

Load external site page html, image, or non-html such as pdf and interactive content

How to load an image and fit to a window or div
<div style="width: 100%; height: 500px"><img src="" style="max-width: 100%;max-height: 100%;"></img></div>

Note that the CSS style "max-width: 100%;max-height: 100%;" will fit the image to the div.

Load an external web page html (external site) or non-html (such as pdf and interactive content)
<div><object type="text/html" data="" style="overflow:auto; width: 100%; height: 500px"></object></div>
<div><object type="application/pdf" data="" style="overflow:auto; width: 100%; height: 100vh;"></object></div>
<div><object type="text/html" data="" style="overflow:auto; width: 100%; height: 500px"></object></div>

Note that the CSS style overflow:auto; width: 100%; height: 100vh" won't be a perfect fit to page. As a workaround, we style the iframe by giving it a relative height value in viewport units (vh) instead of absolute pixels..

We used img and object tags above. Using object tags, loading an external PDF file is just like loading an external web page.

There are more elements available for inserting external domain contents. We can use iframe, embed and object elements.

Primarily used to include resources from other domains or subdomains but can be used to include content from the same domain as well.
<iframe src="images/myimage.pdf" width="800px" height="600px" />

There's no need to use jQuery, CSS even or php if the site isn't preventing itself from being iframed. Otherwise you may need to use file_get_contents, then display the data retrieved in a div or another non-iframe element.

The embed element provides an integration point for an external (typically non-HTML) application or interactive content.
Compared with <object> element, it's older. It was a non standard tag. Behaviour prior to HTML 5 can vary. However, it's been standardised in HTML 5.
<embed src="myfile.pdf" width="800px" height="2100px">
<object data="myfile.pdf" type="application/pdf">
    <embed src="myfile.pdf" type="application/pdf" />

The <object> element can represent an external resource, which, depending on the type of the resource, will either be treated as an image, as a nested browsing context, or as an external resource to be processed by a plugin.
Include a pdf file with object element:
<object data="myfile.pdf" type="application/pdf" width="800px" height="2100px">
  alt : <a href="myfile.pdf">My PDF file</a>


Apart from using the simple html above, you can use jQuery.

            .html('<object data=""/>');
<div id="siteloader"></div>

Edited by user Sunday, 6 March 2016 4:59:40 PM(UTC)  | Reason: Not specified

Rss Feed  Atom Feed
Users browsing this topic
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.