I have an iframe on a page that will display an image file I am hosting.
I can make the iframe responive so that it get's larger or smaller depending on window size but am looking to have the actual image in the iframe scale to fit the iframe as opposed to having the scroll bars appear when the iframe gets smaller than the image. Is there a way to do this?
Below is the code I am working with where http://example.net/picture.jpg is the hosted image.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var frm = ['gallery', 'info'];
var hrf = ['http://example.com/', 'http://example.net/picture.jpg'];
function setSource() {
for(i=0, l=frm.length; i<l; i++) {
document.querySelector('iframe[name="'+frm[i]+'"]').src = hrf[i];
}
}
</script>
</head>
<body>
<iframe src="" name="gallery"></iframe>
<iframe src="" name="info"></iframe>
<span onclick="javascript: setSource();">Click me</span>
</body>
</html>
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'm learning how to code and I wanted to link a loading page to my HTML but it doesn't seem to be working. I got my code from here but it seems like it's not working at all. If you guys could identify the problem, that'd be great.
This is the code as of now:
<html>
<head>
<meta charset="UTF-8">
<title>Loading</title>
<link href="demo.css" rel="stylesheet" type="text/css">
<link href="normalize.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
I did not find your code.
So Here is a sample approach.
While the page is loading, image will be displayed at the middle of the page and the entire page is in transparent background. So Whenever your page gets loaded, then add hidden class to that image div.
Create 2 Classes one is to make div hidden.
.hidden{
display:none;
}
Second one to show image.
.show_image{
position:fixed;top:0;right:0;bottom:0;left:0;
background: rgba(0,0,0,0.5) url(/img/spinner.gif) no-repeat 50% 50%;
z-index:100;
background-size: 5ex;
}
And your HTML code would be
<div class="show_image"></div>
<div class="hidden box"> Your actual content </div>
Initially your content will be hidden state and loading image will be displayed.
After completion of page loading just toggle the hidden class.
$('.box').removeClass("hidden");
$('.show_image').addClass("hidden");
You can use load function to know that page is fully rendered.
$(window).load(function() {
//everything is loaded
});
So that your content will become visible and loading image will be hidden.
Let me know if you need to any help regarding Page Load.
you can try this one:
function onReady(callback) {
var intervalID = window.setInterval(checkReady, 1000);
function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalID);
callback.call(this);
}
}
}
function show(id, value) {
document.getElementById(id).style.display = value ? 'block' : 'none';
}
onReady(function () {
show('page', true);
show('loading', false);
});
DEMO HERE
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);' />
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>
I want to embed a swf over a html page, like a floating video watching panel. I already have a swf file which will automatically adjust its size according to the browser size, and the swf file is partially transparent. I thought I can just add a div tag, make the position absolute and change z-index bigger, but that doesn't work because the swf just replaced everything that's on the page.
Here's what I did
<script>
swfobject.embedSWF("swf/float.swf", "header", "100%", "100%", "9.0.0");
</script>
<body bgcolor="#000000">
<div id="header"></div>
<div id="shell">
things in my html
</div>
</body>
#header {
position:absolute;
z-index:100;
}
Any idea? Thanks.
Once you get your sizing to work properly you will need to set the wmode to transparent to be able to see what's behind the flash, if you don't it's background will be opaque.
This is a quick copypaste from the swfobject docs, but it should get the point across:
<script type="text/javascript">
var flashvars = {};
var params = {wmode : "transparent"};
var attributes = {};
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);
</script>
I believe the problem with this is that the CSS doesn't work well with <object /> tags. The swfobject.embedSWF turns the <div id="header"></div> into an <object /> tag with a bunch of attributes that might be effecting the CSS. If you create a wrapper DIV around the header DIV and apply the CSS to the wrapper DIV, everything works better. You also need to add 100% width and height in the CSS. Here's the revised source:
<script>
swfobject.embedSWF("swf/float.swf", "header", "100%", "100%", "9.0.0");
</script>
<body bgcolor="#000000">
<div id="wrapper">
<div id="header"></div>
</div>
<div id="shell">
things in my html
</div>
</body>
#wrapper {
position:absolute;
z-index:100;
width:100%;
height:100%;
}