I am trying to get the auto height for the <object/> element according to the embedded content inside. Is this possible?
An example of the issue is here: JSFiddle. Here In Chrome, it seems the auto is ignored. How can I fix this?
HTML
<body>
<object id="my-object" data="http://www.rfc-editor.org/rfc/rfc1.txt"></object>
</body>
CSS
#my-object {
height : auto;
width : 300px;
}
EDIT
I want to make the object as big as its content, so as to avoid the scroll of object element. It should be page scroll instrad of object elements scroll.
working fiddle (100% height, min-height and overflow hidden to body and html elements )
http://jsfiddle.net/DmF6B/2/
html, body{
overflow:hidden;
height: 100%;
min-height: 100%;
}
#my-object {
height : 100%;
width : 100%;
overflow : hidden;
}
html
<body scroll="no">
<object id="my-object" data="http://www.rfc-editor.org/rfc/rfc1.txt">
</object>
</body>
if it is in the same domain use the javascript function "contentDocument()"
try this instead : ajax
it must be run under a server
with "contentDocument()"
<object id="my-object" type="text/plain" data="newfile.txt">
</object>
<script>
var object = document.getElementById("my-object");
object.onload = function () {
var objectPre = object.contentDocument.body.childNodes[0];
object.style.height = (objectPre.offsetHeight+20) + "px";
};
</script>
with ajax do a search on loading the txt file using ajax
Related
I wanted to scroll to the bottom of the page using vanilla JS, but I encountered a problem. The code below is supposed to scroll to the bottom of the page:
window.scrollTo(0,document.body.scrollHeight);
Whereas all it does is logs "undefined" in the console. Inputting
document.body.scrollHeight
returns an integer 736. Other than that, it doesn't matter what I input into the function's parameters, nothing happens. What more, it only happens on one website. What may matter (not sure) is that the website hides its vertical scrolling bar, even thought it has a really long list of content.
The problem might be that the actuall scroll that you have on the website is not the scroll of the body but a scroll of another element inside that body.
Here is an example:
$('#btn1').click(function() {
window.scrollTo(0,document.body.scrollHeight);
});
$('#btn2').click(function() {
el = $('.a')[0];
el.scrollTop = el.scrollHeight;
});
body {
overflow: hidden;
margin: 0;
padding: 0;
}
div.a {
height: 100vh;
overflow: auto;
}
div.b {
height: 1500px;
position: relative;
}
div.c {
position: absolute;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<div class="b">
<button id="btn1">Scroll body - doesn't work</button><br />
<button id="btn2">Scroll element - will work</button>
<div class="c">This is at bottom of page</div>
</div>
</div>
Note - the usage of jquery is only to make the example shorter.
Put some content in your page o style the body heigth = 1500px for example, then try to execute same code.
Solved. This is what had to be done:
document.getElementsByTagName('body')[0].style.display = "block";
For whatever reason, changing the display to "block" enabled the scrolling using the given code:
window.scrollTo(0,document.body.scrollHeight);
If you will try to type in browser's console like a var a = 5 you also will get undefined. It happens that your example and my did not return anything.
I'm working on a website of an artist, so galleries are really important. I'm using Bootstrap for the website, and Lightbox for Bootstrap plugin for the galleries. It works fine adjusting the width of the image to any resolution (I want to make it as responsive as possible). But, as you can observe if you click on any vertical photo (for example, the one in the second row, second column), when it opens, it's bigger than the screen and it can't be seen without scrolling.
So, I want to get rid of this problem, adjusting the maximum height of the image to the height of the screen. But I can't find the way to do this. Any ideas for doing it in a simple way? I've uploaded the website to a server so you can see the problem: http://mural.uv.es/ivape2/es/galeria.html
Thank you.
I had a similar problem and tinny77's answer was the only thing that approached a solution.
Here is a working snippet of what I ended up with
$().ready(function() {
$('[data-toggle="lightbox"]').click(function(event) {
event.preventDefault();
$(this).ekkoLightbox({
type: 'image',
onContentLoaded: function() {
var container = $('.ekko-lightbox-container');
var image = container.find('img');
var windowHeight = $(window).height();
if(image.height() + 200 > windowHeight) {
image.css('height', windowHeight - 150);
var dialog = container.parents('.modal-dialog');
var padding = parseInt(dialog.find('.modal-body').css('padding'));
dialog.css('max-width', image.width() + padding * 2 + 2);
}
}
});
});
});
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js" type="text/javascript"></script>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/3.3.0/ekko-lightbox.min.js"></script>
</head>
<body>
<p>Click Image</p>
<a href="http://lorempixel.com/400/1920" data-toggle="lightbox">
<img height="200" src="http://lorempixel.com/400/1920"/>
</a>
</body>
</html>
I solved it this way by editing the Javascript:
onContentLoaded: function() {
var imgh = $(".ekko-lightbox-container").find("img").height();
var winh = $(window).height();
if ((imgh+200)>winh)
{
$(".ekko-lightbox-container").find("img").css("height",winh-150).css("width","auto").css("margin","0 auto");
}
}
See the JSFiddle
.container {
height:100%;
width: 100%;
border: 1px solid #000000;
}
.item {
max-height: 90%;
max-width: 90%;
border: 1px solid #000000;
}
Assuming you have a .container width a given width/height. I've put both width and height at 100% for the .container
Then you just create a class and asign it max-width: 80%; which will output the image to be 80% the width of the .container
Try adding this
.ekko-lightbox.modal.fade.in div.modal-dialog{
max-width:27%;
}
This is just simple solution, best it will be to make media-queries for different resolution
This has been solved (commit on github) by calculating the maximum image height (80% of viewport height) in the preload function but currently it is not part of the base branch.
I have a webpage where i am loading a external webpage into div tag using object tag and it is working fine.the content of the webpage is overflowing and hence i need to implement auto scroll feature. I am able to implement the auto scroll feature to div tag but when i use the same logic for autoscrolling the object then it is not working.
Please find below the code
<script type="text/javascript">
$(function () {
var interval = setInterval(function () {
if ($("#siteloader").scrollTop() != $("#siteloader")[0].scrollHeight) {
$("#siteloader").scrollTop($("#siteloader").scrollTop() + 10);
} else {
clearInterval(interval);
}
}, 1000);
});
</script>
and HTML markup is
<body>
<div id="siteloader" style="height: 100px; width: 600px; border: 1px solid #ccc;
overflow: auto">
<object id="objs" height="500px" width="500px" data="http://www.w3schools.com"></object>
</div>
</body>
i am able to scroll the div but i am unable to scroll the contents within object tag.
Please note that i am loading page from external website.
any suggestions??
Thanks
Okay, so I need to be able to have a page which fills 100% of the screen with no overflow at all. I have an iframe at the top of the page and an img at the bottom.
I need to be able to have the iframe automaticaly set its height to fill all of the remaining space in the document.
heres some code:
<!DOCTYPE HTML>
<head>
<style type="text/css">
img {
border:0px;
padding:0px;
float:left;
width:33.3333%;
}
body {
height:100%;
width:100%;
margin:0px;
}
iframe {
overflow-y: scroll;
overflow-x: hidden;
border:0px;
padding:0px;
width:100%;
height:auto;
}
</style>
</head>
<body>
<!-- INNER CONTENT -->
<iframe frameborder="0" src="..." ></iframe>
<!-- BOTTOM BUTTONS -->
<center>
<div>
<a href="index.html">
<img src="img3.png" />
</a>
<a href="page2.html">
<img src="img1.png" />
</a>
<a href="page3.html">
<img src="img2.png" />
</a>
</div>
</center>
</body>
I need some sort of calculation that I can set for the iframe tag. something like
<iframe height="'bodyheight-imgheight'"></iframe>
any sort of answer is good wether it be CSS, HTML, Js, jQ..
[EDIT]
I know I could simply set the height of the images and do a manual setting for the height of the iframe but I want the images height to change with their width
Thanks for all the replies, I used this answer to solve my question:
http://jsfiddle.net/AmVhK/6/
which was posted in:
Setting iframe to take remaining space in page
With javascript its not so bad, you can just calculate the height off all the contents in the parent and then subtract that from the parents height. So if the iframe, $frame is the element in question you can do:
height = $frame.parent().height();//height of parent
$frame.siblings.each(function() {
height -= $(this).height();
});
$frame.height(height); //set frame height to remaining height of parent
So if $frames parent is the body or has 100% height it should take up the remaining space on the page.
Note: you will have to recalculate the heights if the user resizes the page
It's seems like you don't have an image, but three images (and the center tag shouldn't be used anymore).
You'll have to wait until the images are loaded, which they will be on window.onload, and then get the total height of the images, but as they are floated, that won't be accurate either, so what you really need to do is get the CSS right.
It's not the images that should be floated, as they aren't really siblings, but the anchors, and it seems all the anchors are within a DIV, so targeting that DIV seems like the right move.
The tricky part is getting that DIV to be the same size as any and all images it may contain, and a common trick is to float it as well, as that will make it autoadjust properly, but if you have other content (which you don't) you'll need to clear the float.
Knowing all this, we can add an ID to the DIV so it's easier to target :
<iframe frameborder="0" src="http://jsfiddle.net/"></iframe>
<div id="container">
<a href="index.html">
<img src="http://cdn.arstechnica.net/wp-content/uploads/2013/05/CC-image.jpeg" />
</a>
<a href="page2.html">
<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSDIjq8HKf234I87kaL1SPTOyop7_GGSzAEG5GR5-Atuo1T7nIQ" />
</a>
<a href="page3.html">
<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRhpRmIys5SOHo3jSoyibVFBgZtcXVRmQHwv3Uc-uC7-nUKLYGc" />
</a>
</div>
And change the CSS accordingly
#container {
position: relative;
width: 100%;
float: left;
}
a {
position: relative;
width:33.3333%;
float:left;
height: auto;
}
img {
border:0px;
padding:0px;
width: 100%;
height: auto;
}
body {
height:100%;
width:100%;
margin:0px;
}
iframe {
overflow-y: scroll;
overflow-x: hidden;
border:0px;
padding:0px;
width:100%;
height:auto;
}
and then all we have to do is get the height of the window and subtract the height of the DIV, but as noted, we have to wait until all the images are loaded.
To make it work everytime the window size is changed, we can attach it to the resize event, and then also trigger that event on page load :
$(window).on('load', function() {
$(this).on('resize', function () {
var imageHeight = $('#container')[0].clientHeight,
windowHeight = $(this).height();
$('iframe').height(windowHeight - imageHeight);
}).trigger('resize');
});
FIDDLE
Assuming you know the actual dimensions of images and assuming they are each the same can set a variable for aspect ratio of images. Based on window width this allows calculating the image display height before they are even loaded
var imageW= 400,/* adjust accordingly*/
imageH=300
var ratio= imageW/imageH;
Using jQuery on page load (occurs before images loaded):
$(function(){
var footerH= ratio * $(window).width() /3 ;
$('iframe').height( $(window).height() - footerH);
})
I'm embedding wetransfer through iframe into a website, but the problem I have is when the page loads, it automatically jumps past the header section of the site, instead of having the new page load at the top of the page.
How can I stop this from happening? I tried using jquery scrollto, but doesn't make any difference.
https://jsfiddle.net/dbruning22/c0s6mhkv/1/
HTML
<header>
Some Header information and navigation
</header>
<body>
<iframe src="https://www.wetransfer.com/" width="100%" height="700" frameborder="0"></iframe>
</body>
CSS
header {
background: green;
height: 600px;
}
Use this
header {
background: green;
height: 600px;
position:absolute;
left:0;
top:0;
}
header height is 600px so iframe is placed right behind.
If you want iframe to cover the page from the top you should set
iframe{
position: absolute;
top: 0;
left: 0;
}
fiddle
If you want to place iframe right behind header, just remove
height: 600px;
fiddle 2
The green header is 600 px high because of your CSS. Adjust the height: value as needed.
Also, <header> is a regular page content tag and therefore should be placed inside <body>, not before it.
First: put header tag inside body tag. Not outside.
<body>
<header>
Some Header information and navigation
</header>
<iframe src="https://www.wetransfer.com/" width="100%" height="700" frameborder="0"></iframe>
</body>
Second:
Remove 600px height from header css.
Profit :)
use following code :
<header>
Some Header information and navigation
</header>
<body>
<div>
<iframe src="#" width="100%" height="400" id="iFrm"></iframe>
</div>
</body>
<script type="text/javascript">
var body = document.body,
html = document.documentElement;
var documentHeight = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
var iframeHeight = parseInt(document.getElementById("iFrm").getAttribute("height"))
document.getElementById("iFrm").style.marginTop = (documentHeight - iframeHeight) / 2;
</script>
Its working fine for me. Hopefully works for you
Not really sure if you want it to be like this but try it out
<header>
Some Header information and navigation
</header>
<body>
<iframe class="test" src="https://www.wetransfer.com/" width="100%" height="700" frameborder="0"></iframe>
</body>
css:
header {
background: green;
height: 600px;
}
.test {
position: fixed;
top: 0;
z-index: 1;
}
But you could use angularjs modal_dialogue to make a pop up window which would display your information from an url.
This worked for me. My iframe html has:
<body class="container-fluid">
<div class="admin-pages" id="top-of-page">
etc...
</div>
</body>
And javascript:
$(window).on('load', function() {
$("#top-of-page").scroll();
etc...
Takes the iframe to the #top-of-page when the page loads.