<!DOCTYPE html>
<html>
<body>
<h1>The iframe element</h1>
<iframe src="https://e.infogram.com/_/s40K32mU3NsxL0zWQjMw?src=embed" title="W3Schools Free Online Web Tutorials" width="100%" height="600px">
</iframe>
</body>
</html>
I've an iframe, and there's a tooltip inside the iframe but when clicked it, the tooltip pop up is displayed outside of iframe width, so we should have to scroll horizontally to see the hidden popup texts. How can we show the tooltip popup without scrolling horizontally?
Related
I have an MVC project with a View called Index.cshtml. I have a dynamically created iFrame (its HTML is created in a string then appended to the .html() of a div), and its content changes depending on the user selection from a table in another div.
Here's my problem: the content inside the iFrame appears incorrectly. For example, a large image is shown but I need to scroll inside the iframe to view the rest of it. Or, a video is shown but it is small sized (surrounded by a thick black border, not fitted to the iframe). Now I have set the iframe's width and height to be 100% of the parent div. Also, the content of the iframe is dynamic. Meaning: depending on what the user chose from the table, the content could be an image, a video, or a document. That means I have no control over what HTML is generated inside the iframe.
Here's a sample code to help generate my problem:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="x-ua-compatible" content="IE=10" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Kitty Cat</title>
</head>
<body style="font-family: Calibri; font-size: 18px !important; font-weight: normal">
<div>
<div id="MrData" style="width: 500px; height: 500px">
<div id="divData">
<iframe id="theiframe" src="https://i.imgur.com/0XHcPko.jpg" frameborder="5" style="width:100%; height: 100%" scrolling="no" allowfullscreen></iframe>
</div>
</div>
</div>
</body>
If you run this page, the image of a cat will appear but it will only show the upper left corner of that image. Keep in mind I disabled scrolling because I'm trying to force whatever content to appear fully instead of having to scroll.
How do I make the content inside the div small or big to show up fully in the iframe?
Add this to your section:
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
And change your iframe to this:
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
I have a modal with pdf:
<div ng-if="$root.isie11">
<iframe src="file.pdf" class="pdf">
</iframe>
</div>
<div ng-if="!$root.isie11">
<object data="file.pdf"
type='application/pdf' class="pdf" >
</object>
</div>
As you can see if browser is IE I use iframes in other cases object. In object the pdf comes with scrollbar. Althought its only 1 page its need to be scrollable because of a modal size. In Iframe there is no scrollBar.
I tried adding : scrolling: yes with now effects
I have an iframe for a google chart which has too much spacing around it. I want to embed this in my page but crop it to get rid of the surrounding space.
I was trying to do this by setting the iframe with smaller height and width attributes but I cannot work out how to reposition the content within the iframe to center it.
Here is the iframe for the chart:
<iframe width="550" height="170" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/1r56MJc7DVUVSkQ-cYdonqdSGXh5x8nRum4dIGMN89j0/pubchart?oid=1407844401&format=interactive" onload="window.frames['itunes'].scrollTo(250,250)">></iframe>
How do you reposition the content of an iframe in this way or is there a better solution?
Thanks
You should wrap the iframe in a div or something and position the iframe.
here the code:
<div class="wrapper">
<iframe></iframe>
</div>
and this is the css
.wrapper{overflow:hidden;}
.wrapper iframe{position:relative; left:-40px; top:-30px;}
There is a way to align the scroll bar from an iframe to right? its by default to left.
any idea?
take a look here i wanna see the search box when i load the page!
i have an application that has an ifram, in the ifram I'm loading a website that the search box is on the upper right, and i want that when the page loads i should be able to see the search box right away without having to scroll to the right.... something not clear?
can you use jquery? if yes, you can do the following:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>This is some text. This is some text. This is some text.
<div id="frame" style="width: 200px; height: 200px; overflow: scroll";>
<iframe src="http://www.w3schools.com/default.asp" width="1024" height="768" scrolling="no">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
This is some text. This is some text. This is some text.</p>
<p>The align attribute was deprecated in HTML 4, and is not supported in HTML 4.01 Strict DTD or in XHTML 1.0 Strict DTD. Use CSS instead.</p>
<script type="text/javascript">
jQuery(document).ready(function () {
$("#frame").scrollTop(10).scrollLeft(750);
});
</script>
</body>
</html>
If you copy and paste the code into a html file and open it in your browser, you'll see that the iframe is automatically scroll to the very right.
The key changes are:
import jquery in your html file
add scrolling="no" to your iframe
specify the width and height of your iframe, it should be roughly the same as the actualy width & height of the embedded page
wrap your iframe in a <div>, be sure to specify the width & height (less than the iframe width & height)
add the javascript code before the closing </body> tag
<script type="text/javascript">
jQuery(document).ready(function () {
$("#frame").scrollTop(10).scrollLeft(800);
});
</script>
With Safari you can disable most iframe scrolling by setting style="overflow: hidden;" on the iframe. However, if you click in the iframe and move the mouse the content scrolls anyhow.
Example:
<html>
<body>
<iframe style="width: 100%; height:100px; overflow: hidden;" scrolling="no" src="scrollcontent.html">
</iframe>
</body>
</html>
scrollcontent.html:
<html scroll="no" style="overflow:hidden;">
<body scroll="no" style="overflow:hidden;">
<div style="background-color: green; height:100px;">A</div>
<div style="background-color: red; height:100px;">B</div>
</body>
</html>
In this example, the iframe should only show a green area and it should be impossible to reveal the red area. This is mostly true: there is no scrollbar, the mouse wheel doesn't do anything and neither do the arrow keys.
However click and drag still scrolls the view. This is particularly noticeable when selecting text.
Does anyone know any trick to stop Safari from doing this?
You could add an window.onscroll method that does a window.scrollTo(0, 0);. It's not pretty but it should work.
In worst case I would try loading the content with jquery load()
and then you wrap everything with a <div style"overflow:hidden">your content...</div>