I have a huge content in an HTML page and i want to put the same within iframe. But putting the content within iframe tag within page, page shows that part as blank. Please suggest how does we put content within iframe in the same HTML. What should be placed in src if applying the same page content.
<iframe src="">
//Content
</iframe>
Thanks.
I strongly recommend that if you want to place a large section of your current page's output into a scrollable area of your page, don't use an iframe, instead do something like this:
<div style="overflow-y: auto; width: 100%; height: 400px;">
<!-- put all of your large amount of content after this comment, before the closing div tag -->
<p>this is my huge amount of content (just an example.... you'd have hundreds of lines of code here I suspect</p>
</div>
Of course you can change the height and width of the div to suit your needs.
the div style="overflow-y: auto;" with a specified width and height should (I think) create a scrollable area in your page similar to the output of an iframe, but without requiring the browser to load two copies of the contents. Also you avoid the possibility of an infinite loop.
you could also add a border around the area if you like, for example after height: 400px; by changing the first line to this:
<div style="overflow-y: auto; width: 100%; height: 400px; border: 2px solid grey;">
You would put the link to the page you need to display the content from
<iframe src="http://www.yoursite.com"></iframe>
src = URL potentially surrounded by spaces Gives the address of a page
that the nested browsing context is to contain.
read up on iframes
Say for example all of your HTML is inside index.html, simply set the src attribute to index.html.
Like so:
<iframe src="index.html"></iframe>
Remember, this doesn't necessarily work correctly as you'll run the <iframe> into a continuous loop. Though, correct me if I'm wrong, it will only repeat the iframe twice as a security policy.
<iframe src="URL or pagename.html"></iframe>
Related
I have an iframe that I would like to align perfectly within the container on my website. Right now, there is still a border when I inspect the container containing the iframe element:
The iframe is embedded as following:
<style>
iframe {
width: 100%;
min-height: 500px;
}
</style>
<iframe id="myIframe" frameborder="0" height="100%" width="100%"src="path_to_my_file"></iframe>
I would also like for the height of the iframe to automatically be adjusted to the height of the container. That would mean that it would need to be adjusted every time the window size changes, so I would probably need a javascript method. Is there an efficient way to achieve that?
I know this has been asked multiple times before but none of those solutions have worked and hopefully since then someone has figured it out.
I have created a HTML page that i will be printing using Chromes browser print utility, i need to add an image at the bottom of the last page, the problem is that the content within the page is dynamic, so most methods i have looked at just place the image where the content ends, and not at the bottom of the last page.
<head>
<title></title>
<style>
#footer:before {
display: block;
content: "";
margin-top: 100%;
}
</style>
</head>
<body>
<div id="content">
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
</div>
<div id="footer">
<img src="https://get.clt.re/wp-content/uploads/2014/12/footer-background-01.jpg" style="">
</div>
</body>
This is a very simplified example, the content will be dynamic so there could be multiple pages, and the image in the footer will be large,
essentially i need the footer to look like this:
https://i.stack.imgur.com/Wh9s0.png
but only on the last printed page
any javascript or jquery solution is welcome
You could essentialy generate two footers, one for your page content and one for printing. Use CSS then for displaying:
#media print {
.content-footer {
display: none;
}
.print-footer {
display: block;
//Always at the bottom
position: absolute;
bottom: 0;
}
}
I don't think there is an answer here. If you want to place that image on each page then Idan Cohen has a good solution here: https://medium.com/#Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a
As to just the last page ... not even the CSS 2 Spec. for Paged Media supports a :last page selector (but does for :first). But even #page is unreliable as most browsers have scaled down support for things like page counters etc. (See #Page Browser Compatibility)
Your best bet is to explore either a compromise (either the image on each page, or the image at the end of the content - but not necessarily at the bottom of the page) or explore the possibility of getting the job done via a JavaScript library that generates PDF on the fly.
iframe-screenshot
The image shows to iframes, sometimes I need to show 3 iframes.
My goal is to make it so that the iframes are all responsive inside.
Here is my current css styling:
iframe {
width: 100%;
height: 100%;
}
you can like this:
if you have class,you can delete,the src is the page you want to display
<iframe class="" src="" style="width:100%;height:100%;"></iframe>
I found a similar question Scroll PDF embedded in HTML but didn't see an answer. Does anyone have any suggestions for how to manipulate a PDF displayed within an iframe? Similar to the previous post link, I'm trying to scroll the PDF when the iframe doesn't have the focus (the host page does).
Thanks!
Actually there is an answer in the link You provided:
Hardly.
What you might be able to do is to put the iframe into a div with
overflow: auto, and give the iframe a very large height value so the
containing PDF is at full size. Make the surrounding div less tall
than the iframe. When your buttons get clicked, scroll the surrounding
div.
I haven't tested it so there may be some snag on the way, but this
could work - and is probably the best you can do.
~Pekka 웃
It's pretty easy. That's how you do it:
It depends on whether the iframe is "out-source", not from your server.
Let's just say that it is out-source
CODE
<div id="iframeContainer" style="width: 800px; height: 600px; overflow: auto;">
<iframe width="1800" height="6000" src="yourPDFfileSRC" scrolling="no">
</iframe>
//You have to know exact width and height of PDF file
</div>
<script type="text/javascript">
$("document").ready(function()
{
$("#iframeContainer").scrollTop(1400);
});
</script>
BONUS
You could animate it like that:
<script type="text/javascript">
$("document").ready(function()
{
$("#iframeContainer").animate({scrollTop: 1400}, 500); //500 - time of animation
});
</script>
The design for the project I'm working on has live chat plugin and an image on the header that says online/offline. I'm trying to work on script that will place the "online" image when the agent is online.
The heading of the plugin displays the status, like so
<span __jx__id="___1_livehelpbutton__agentstatus" class="agentStatus" style>Offline</span>
I would like to get the innerHTML of the tag and use it in the conditional of an if statement, which, if the status is "online" will display the "online" image and otherwise display the offline image. That is where I run into an issue. I'm having trouble selecting for this tag. When I try this on the console, I get [] and no change on the screen.
$('.agentStatus').css('background','red');
When, as a test on the CSS page, I try .agentStatus { background: red; }, the background turns red.
The iframe it is in is does not have a different url:
<iframe __jx__id="___$13__iframe src="javascript:void(document.write('<!DOCTYPE HTML PUBLIC -//W3C//DTD HTM…order-box}</style></head><body></body></html>'), document.close())" frameborder="0" style=" background-color: transparent; vertical-align: text-bottom; overflow: hidden; position: relative; width: 100%; height: 100%; margin: 0px; z-index: 999999;">
#document
<!DOCTYPE html PUBLIC"-W3C//DTD HTML 4.0 Transitional/EN" "http:www.w3.org/TR/html4/loose.dtd"
<html style="overflow-y: hidden">
...
The problem is that you simply cannot access the content in an iframe without first grabbing the document that is being displayed by the iframe.
This post explains this better than I can.
There is no actual way to do this in JavaScript or jQuery, unless the iframe's source is on the same domain (research 'Cross-Domain and JavaScript'). If they are on the same domain, however, you should be able to select (and manipulate) elements using the following:
$("#iframeID").contents().find(".agentStatus").css("background", "red");
This post shows a few alternative solutions to this, as well.