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)" />
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 this but when I open the webpage on my phone it is wider than the screen.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
so I have to pinch in to make it fit.
Might this be caused by the fact that there are some images used as the background of the html page? For instance, further below I have the following:
<img src="index_files/img2.png" width="970">
I don't know much about HTML so I will not be able to understand complex answers.
I also saw some div elements with absolute dimensions like this:
<div class="container">
<div class="row">
<div class="sm-12">
<div class="blue-bg">
<h3 style="color: #F37620; font-weight: bold; font-size: 22px; background: #34495D; width: 400px; text-align: center; padding: 10px;margin-bottom: 0; margin-left: 56.6%; text-transform: uppercase;" "=""> requirements specification </h3>
<img src="index_files/img2.png" width="970">
<div class="row">
<div class="sm-6">
<h6 style="font-weight: bold;
As you can see it has a width: 400px and there's a lot of this going on in this html file
Couple things:
Your meta viewport tag is simply setting the scale at which the viewport is set to. It has nothing to do with your images.
Your image is not a background image in the technical sense. A background image is a css property of an element.
You have a fixed width on your img of 970px. That is why it's wider than your viewport.
A quick fix is:
Change:
<img src="index_files/img2.png" width="970">
to:
<img src="index_files/img2.png" style="width: 100%"/>
This will set your img width to 100% of it's containing element. So as long as that containing element is fluid, you're good to go.
Unless you want that image to be 970px and have the ability to scroll it to see the hidden portions on small screens, then you need to start playing with overflow css properties.
That's because the meta tag doesn't make it fit, but simply tells the browser to display the page at a scale of 1 (or 100% of it's original size) rather than trying to shrink it down to fit. To make the page fit you will need to ensure the content is smaller than the width of the device, or that the styles allow for it to respond to the width of the device. I'd suggest looking up some resources on responsive design as this is a pretty large area to try and cover here.
When the webpage become too small some part of it disappear but I would like to make it stay the way it's positioned but resize with the page no matter how small it becomes.
Here's the problem
Here's the code
<!DOCTYPE html>
<html>
<style>
body{
background-color: #1C1C1C;
}
#picture {
text-align: center;
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
}
</style>
<title>lllllllllll</title>
<body>
<div id="picture">
<img src="c.png" alt="llllll" width="33%" height="100%" />
<img src="n.png" alt="llllll" width="33%" height="100%" />
<img src="m.png" alt="llllll" width="33%" height="100%" />
</div>
</body>
Welcome to Stack Overflow!
First and foremost, Your basic HTML structure should be as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- CONTENT -->
</body>
</html>
And about Your main problem, try and use CSS to style your layout instead of assigning inline properties like width="33%" and others alike. Right now, your images are stretching because of the inlined properties which are not the same as a style applied to them.
By using these properties on your images, you are telling them to be 33% of their container, but images are not block elments so therefore, they need to be in a container, for example a div.
e.g.
<div class="imageContainer">
<img src="img.jpg" alt=""/>
</div>
I have made a JS Fiddle for you to try it yourself.
When someone here on StackOverflow says "here is a Fiddle" or something similar, what they mean is, they have created a small online coding environment that acts as a sandbox for your project. You have your HTMl, CSS, Javascript and Output, alongside options for adding external content as well. https://jsfiddle.net/
I have changed a few things here and there to show you an example of basic usage. Please feel free to ask what You dont understand.
For whatever reason I cannot manually scale the background image of a div no matter what do. background-size and max-height,width have no effect whatsoever. The image is ignoring my style tags. Can somebody please explain why I cannot format the div's background image? I would like to scale the img/Stage-Background.png down from 1600x1076 down to 750x650
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="SDL.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home</title>
</head>
<body>
<img src="img/SDL 4 Final Recompress.jpg" style="margin-left:auto; margin-right:auto; " />
<div style="background-image:url(img/Stage-Background.png); background-size:80px 60px;
background-repeat:no-repeat;">
<center>
<embed
src="http://blip.tv/play/AwGUv2w"
type="application/x-shockwave-flash" width="669"
height="500" allowscriptaccess="always"
allowfullscreen="true" style="margin-top:100px; margin-bottom:200px;">
</embed>
</center>
</div>
</body>
</html>
Based out of my knowledge we cannot scale a background image
If your image dimensions are greater than that of the div then
<div style="width:400px; height:400px;background:url(xyz.png);"></div>
with xyz.png dimensions greater than div's width and height.
You can use:
background-position:center;
Else try using normal img tag then use absolute positioning to place your elements on top of the image.
<div class="your_box_element" style="width:400px;height:400px;position:relative;">
<img width="400px" height="400px" />
<div class="your_text_on_top_of image" style="position:absolute;top:0px; left:0px;">
Your text and other elements go here
</div>
</div>
The method to load the image of greater dimensions and then scaling won't give you good performance hence better to have the image scaled appropriately to the div element incase you want to use it as a background. Seeing your example its better if you make changes to the background image to the required size.
See this for more details on background position background-position to set correct fit
If you want to learn more about background image positions and how they are used commonly on web try reading about Image Sprites
I guess you are dealing with this image: img/Stage-Background.png
Instead of background-size, use height & width parameters in px.
Also, if you can tell us what is the original size of the image, and what size you wish to keep for your DIV.
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>