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>
Related
<!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?
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 need to create a little html code that I will use in sharepoint in script editor. The idea is that I have some report from Microsoft BI in iframe (changed the address in code below) and it works fine. But I want to cover the "share buttons" in the bottom right of the site, so it can't be shared. The iframe should fill the whole WebPart in sharepoint, so I tried to allign the image simply to bottom right corner, but it doesn't seem to work. Any ideas?
<html>
<head>
</head>
<body>
<iframe src="https://www.google.pl/?gfe_rd=cr&ei=x5UEWO-yGaOh8welvY2IAQ" width="100%" height="700">
</iframe>
<img src="logo.jpg" align="bottom" align="right">
</body>
</html>
Ok, I've finally got it working. The "TOP" variable is static, it's the height of the displayed website minus the height of the image itself. Here is the code:
<html>
<head>
</head>
<body>
<div style="height:750px; position:relative">
<iframe style="border:none; width:100%; height:700px; z-index:1" src="website.com"></iframe>
<img style="top:663px; right:0px; position:absolute; z-index:9" src="testbar2.jpg">
</div>
</body>
</html>
The align attribute of <img> is not supported in HTML5. Use CSS instead.
img {
float: right;
}
Somehow a second scrollbar appears in my development page
http://topdodavatel.cz/defakto/produkty/stoly/
Do you have any idea why this happens? I believe the content should automatically fit into the page and only one scrollbar would be necessary.
Here is how the problem looks like
remove the
overflow-x: hidden;
in your body, html CSS.
Should be fine after this.
Try this code. iframe height set based on content height. so scroll not show
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);' />
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>