I have an issue with a page browsing with Google chrome. When Google chrome plugin 'Chrome PDF Viewer' is disabled, the PDF being display overlaps every object. Below is a sample code.
<html>
<head>
</head>
<body>
<div style="border: solid red 2px; position:absolute;z-index:100;background-color:Green;height:100px;width:250px;"></div>
<div style="position:absolute;z-index:10;margin-left:100px;">
<iframe visible="true" id="ipdf" src="http://www.irs.gov/pub/irs-pdf/fw4.pdf" height="1000" width="1000" runat="server" frameborder="0" scrolling="auto" >
</iframe>
</div>
</body>
</html>
Any suggestion will be helpful.
Do you think it works any better e.g. in Internet Explorer with Adobe Reader plugin?
As far I know it has the same issue and you have to use another iframe for overlay areas.
Related
I would like to add OSM to my website (in Ruby on Rails), so I've exported following html code from their site:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.openstreetmap.org/export/embed.html?bbox=-109.3359375%2C56.84897198026975%2C25.3125%2C84.38877975103257&layer=mapnik&marker=76.23088818107027%2C-42.076958649999995" style="border: 1px solid black"></iframe><br/>
<small>see more</small>
and I've put it into
<!DOCTYPE html>
<html>
<body>
//here
</body>
</html>
The problem is, that there is only empty rectangle, without map, but when I click "see more" I'm redirected to OSM site with big map.
What can cause, that I can't see map on my site?
Edit:
I've just seen, that it only doesn't work only in desktop browser, when I use my mobile phone is ok.
I'm pretty new to coding, and am trying to make a small chrome extension that displays my gmail in an Iframe. I'm having several problems: I have to sign in with google inside my Iframe, and the gmail will refuse to display when I try loading the extension. Keep in mind, the iframe works fine with websites like "https://ifunny.co", but it will refuse to work with anything Google.
My html box that pops up with the click of the extension button:
<!DOCTYPE html>
<html>
<!---body>
<iframe src="https://ifunny.co" style="border:2px solid black;" height="500" width="350"></iframe>
</body--->
<body>
<iframe src="https://mail.google.com" style="border:2px solid black;" height="500" width="350" name="myIframe" id="myIframe"></iframe>
</body>
</html>
I just switched to HTTPS on my website. I had been displaying a locally hosted PDF via an iframe; the iframe displays a small html file with the PDF embedded (as an object) in it. However, the PDF is no longer displaying. I can navigate to the PDF & it displays just fine but does not display when I load the html page. What can I do to make the PDF display?
iframe
<iframe src="/updates/update.htm" width="100%" height="800px"
marginheight="0" frameborder="0"></iframe>
update.htm
<html>
<header>
<link rel="stylesheet" href="custom-styles.css">
</style>
</header>
<body>
<object src="update.pdf"
type="application/pdf" width="100%" height="800px"><div id="show-text">
<p>It appears your web browser is not configured to display PDF files.</p>
<p><a href='update.pdf'>Click here to download the PDF file.</a></p>
</div>
</object>
</body>
</html>
custom-styles.css
#show-text {
display: block;
width: 100%;
height: 15%;
background: #D1D1D1;
}
Shot in the dark here, but are you sure that "/updates/update.htm" is the right path? If your page is www.site.com/something/index.php and you use that path, the browser will look for www.site.com/something/updates/update.htm. Perhaps you want www.site.com/updates/update.htm. Maybe you need a relative path like "../updates/update.htm"
UPDATE
Try <object data="update.pdf">. The <embed> tag uses scr=; <object> uses data= according to w3schools.
I'm trying to embed a Youtube channel into a HTML page.
For example I take this channel address: http://www.youtube.com/aaaa
I used this code:
<html>
<head>
</head>
<body>
<iframe src="http://www.youtube.com/aaaa"></iframe>
</body>
</html>
The problem is that it doesn't work. I tried with another site, and it works. What can be the problem?
The problem seems to be induced by this URL:http://www.youtube.com/aaaa.
I tried some other URLs and it works.
You can try some URLs easily here.
Try this:
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/youtube.xml&up_channel=aaaa&synd=open&w=320&h=390&title=&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/aaaa" frameborder="0">
</iframe>
This was taken from youtube here
it appears IE (and others) can only use [youtube.com /embed/ videoID] (HTML5 Player) - at least the way I am implementing them.
Try this:
<div name="iframe" style="width:100%; height:635px; border:2px solid grey; overflow:hidden">
<iframe src="http://yourchannel-URL" style="width:100%; height:700px; margin-top: -65px" scrolling="true">
If you can see this, your browser doesn't support iframes. Click here to see my YouTube channel.
</iframe>
</div>
This should embed a complete youtube channel without a youtube search bar.
To display a gallery of thumbnails of your YouTube Channel's most recent videos, you can use an iframe:
<iframe
onload="javascript:this.style.height = this.contentWindow.document.body.scrollHeight + 'px';"
scrolling="no"
height="600"
marginheight="0"
frameborder="0"
width="480"
src="http://youtubechannelembed.com/gallery.php?vids=9&user=doitfordummies&row=3&width=150&margin_right=15&desc=100&title=30&views=1&likes=1&dislikes=1&fav=1">
</iframe>
I have nav menu html that I would like to be able to open over top of objects underneath it. Fx. An applet or an embedded pdf file. However, floating a div over an embeded element or applet doesnt work in all browsers (need safari, ie8+, firefox, chrome). By doesnt work i mean it does not appear on top.
Looking at various posts i came to the following code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function showHideElement(element){
var elem = document.getElementById(element);
if (elem.style.display=="none"){
elem.style.display="block"
}
else{
elem.style.display="none"
}
}
</script>
<style>
div:hover {
background-color:red !important;
}
</style>
</head>
<body>
<div style="position:absolute;height:100px;width:100px;background-color:Yellow;" onclick="showHideElement('Iframe1');">click me to toggle elem (ie)</div>
<div style="position:absolute;z-index:100;background-color:Green;height:100px;width:100px;margin-left:200px;"></div>
<div style="position:absolute;z-index:20;margin-left:200px;">
<iframe visible="true" id="Iframe1" height="100" width="100" runat="server" frameborder="0" scrolling="auto" >
</iframe>
</div>
<div style="position:absolute;z-index:10;margin-left:100px;">
<iframe visible="true" style="z-index:1" id="ipdf" src="http://www.irs.gov/pub/irs-pdf/fw4.pdf" height="1000" width="1000" runat="server" frameborder="0" scrolling="auto" >
</iframe>
</div>
</body>
</html>
This works on all browsers now except Safari, is there anyway to make it work on Safari (I'm using 5.1.4 Windows) as well?
I see no mention of Safari on previous posts...
Thanks
I'm still looking for a solution to this myself. So far I have found nothing that works with Safari. I have tried wrapping the embedded PDF in an iframe, in a div, setting it to visibility:hidden, display:none, and/or both on a click event (so the pop-up modal dialog show up on top of the PDF area), etc. Nothing works with Safari. Here's what's really weird though. At work I'm on a Windows 7 PC and when one mouses over the icons of open apps on the taskbar, a preview window comes up with a miniature version of the app in it. When I mouse over my open Safari, the image that comes up displays my fixes working properly! And when I click on the image to get the actual Safari window to come to the forefront ... everything is "broken" again. Now THAT is BIZARRE.
Please contact me if you find a working solution for Safari, and I will do likewise.