I have an iframe loaded within a page. This code works fine in firefox but not in ie - it does not load anything following the iframe. If i move the iframe to the bottom of the page everything loads correctly. Has anyone encountered this error before?
head----
<style>
iframe{
margin-left: 22px;
height: 112px;
width: 612px;
}
body{background-color:transparent}
</style>
body---
<img align="left" border="0" src="http://picurl.com"/><br />
<p>text</p>
<iframe frameborder="0" src='http://URL.com'</iframe><br />
<p>big load of text</p>
Text loads fine, content of iframe loads correctly but 'big load of text' does not. Why does this happen? I am using internet explorer 8 for this task, can't change this.
You missed a > from the end of your iframe tag:
<iframe frameborder="0" src='http://URL.com'></iframe>
Related
I am displaying a pdf in an iframe in my webpage. I am trying to add watermarks like "Sample" in the pdf file. Is there any possible way to do it with Javascripts, HTML, CSS or Coldfusion11?
In my webpage, depending on the user roles, I use the iframe to either disable the toolbar so that the users can't print or download the pdf, or enable it.
<cfif userroles EQ "admin">
<div style="text-align:center">
<br>
<h1>ENABLE PRINTING AND DOWNLOAD</h1>
<iframe src="myFile1.pdf" frameborder="0" height="500px" width="100%"></iframe>
</div>
<cfelse>
<div style="text-align:center">
<br>
<h1>DISABLE PRINTING AND DOWNLOAD</h1>
<iframe src="myFile1.pdf#toolbar=0&navpanes=0&scrollbar=0" frameborder="0" height="500px" width="100%"></iframe>
</div>
</cfif>
As what #Miguel-F said in his comment, I can use use cfpdf to add watermark as shown in examples in here and here.
What I've done is abit different, using a transparent div in front of the iframe. It does its job, and I can modify the "watermark". Below is my code.
<div style="position:relative; top: -250px; font-size: 150px; color: grey; transform: rotate(-45deg);"/>SAMPLE</div>
Thanks to all who guided me.
Update: I just tried opening the files in Chrome instead of Firefox. The video appears in Chrome, but not Firefox. Does anyone know why?
I am a beginning website designer trying to embed a youtube video in my webpage, but for some reason it is not showing up. There is a ghost object taking up the same amount of space as the video would, but the video itself is not showing. I have researched how to embed videos, and I do not understand why it's not working. Any tips are appreciated!
HTML:
<iframe class="video" width="560" height="315" src="https://www.youtube.com/embed/oTSGrL04wwU?rel=0" frameborder="0" allowfullscreen></iframe>
CSS:
iframe.video{
position: relative;
left: 260px;
padding: 20px;}
I put an iframe youtube code in div tag.
<div id="wrap">
<iframe width="300" height="315"
src="//www.youtube.com/embed/82fn4mcNGJY"
frameborder="0" allowfullscreen></iframe>
</div>
When I use css to set scale for this div tag, Firefox does not display the video
#wrap{
transform: scale(1.06667);
transform-origin: 0px 0px 0px;
}
link to demo
the reason that your are using css property
transform: scale(1.06667);
it will work fine without this property
Of course it'not a response..but I have exactly the same problem.
It don't works only on youtube video (maybe an embed problem). It the src iframe attribute point to another generic website,it works fine.
The problem is only on Firefox linux. It's all right on FF for OSX.
I'm embedding pdf files using something like this:
<div class="graph-outline">
<object style="width:100%;" data="path/to/file.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" type="application/pdf">
<embed src="path/to/file.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" type="application/pdf" />
</object>
</div>
It works but I want to set the pdf width to match the width of the containing div. Currently it shows up like an iframe with scrollbars, so to view the entire pdf, you have to scroll right to left. I want the pdf to fit the width of the container.
How do I fix this? I'm supporting IE8 and up.
Here is a jsfiddle: http://jsfiddle.net/s_d_p/KTkcj/
Simply do this:
<object data="resume.pdf" type="application/pdf" width="100%" height="800px">
<p>It appears you don't have a PDF plugin for this browser.
No biggie... you can <a href="resume.pdf">click here to
download the PDF file.</a></p>
</object>
If you're using Bootstrap 3, you can use the embed-responsive class and set the padding bottom as the height divided by the width plus a little extra for toolbars. For example, to display an 8.5 by 11 PDF, use 130% (11/8.5) plus a little extra (20%).
<div class='embed-responsive' style='padding-bottom:150%'>
<object data='URL.pdf' type='application/pdf' width='100%' height='100%'></object>
</div>
Here's the Bootstrap CSS:
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
I did that mistake once - embedding PDF files in HTML pages. I will suggest that you use a JavaScript library for displaying the content of the PDF. Like https://github.com/mozilla/pdf.js/
<embed src="your.pdf" type="application/pdf#view=FitH" width="actual-width.px" height="actual-height.px"></embed>
Check this link for all PDF Parameters: https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf#page=7
Chrome has its own PDF reader & all parameter don't work on chrome.
Mozilla is worst for handling PDFs.
<html>
<head>
<style type="text/css">
#wrapper{ width:100%; float:left; height:auto; border:1px solid #5694cf;}
</style>
</head>
<div id="wrapper">
<object data="http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf" width="100%" height="100%">
<p>Your web browser doesn't have a PDF Plugin. Instead you can <a href="http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf"> Click
here to download the PDF</a></p>
</object>
</div>
</html>
Seen from a non-PHP guru perspective, this should do exactly what us desired to:
<style>
[name$='pdf'] { width:100%; height: auto;}
</style>
I'm loading an Iframe from an External server of mine onto my webpage, and I wanted a loading image, because sometimes it take a good 10 seconds to load. All is well in Chrome but in IE nothing.
<center>
<div style="background: #ffffff url(http://mentalized.net/activity-indicators/indicators/simon-claret/progress_bar.gif) no-repeat 50% 5%;">
<iframe src="http://x.x.x.x/panel.php" allowTransparency="true" width="100%" height="450px" scrolling="no"></iframe>
</div>
</center>
My other question is, is there a better way of doing this? I can't use ajax because it's an external server, but is there a better way of doing a loading image with an iFrame? Thanks!
Try putting the style with the background image information on the iframe itself, rather than the separate div.
<iframe src="http://x.x.x.x/panel.php" allowTransparency="true" width="100%" height="450px" scrolling="no" style="background: #ffffff url(http://mentalized.net/activity-indicators/indicators/simon-claret/progress_bar.gif) no-repeat 50% 5%;"></iframe>