I have been trying to get this to work for a while but to no avail. ive tried various scripts but im clearly doing something wrong :(
I have a menu on the left of the page, which contain (same server) href links of which their target is an iframe on the right of the page.
it sends the page to the iframe fine, but the iframe height does not change.
Can someone please assist me :(
here is my code:
html
<link rel="stylesheet" type="text/css" href="jquery.pageslide.css">
<script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function sizeIframeToContent(id) {
// resize iframe to be the height of the content
try {
var frame = document.getElementById(viewcontent);
innerDoc = (frame.contentDocument) ?
frame.contentDocument : frame.contentWindow.document;
var objToResize = (frame.style) ? frame.style : frame;
objToResize.height = innerDoc.body.scrollHeight + 10 + 'px';
//objToResize.width = innerDoc.body.scrollWidth + 10 + 'px';
}
catch (err) {
console.log(err.message);
}
}
.... menu link
<div class="menuOut" onMouseOver="this.className='menuIn'" onMouseOut="this.className='menuOut'">
- Forum Adverts </div>
.... iframe html
<div id=maincontain>
<iframe id="viewcontent" frameborder="0">
</iframe>
</div>
CSS
#maincontain {
width: 85%;
float: none;
margin-left: 12%;
}
#viewcontent {
width: 100%;
padding-top: 15px;
float: none;
}
The iframe just stays about 300px height unless I specify a bigger height manually.
the pages being loaded in, all have 800px+ heights.
Thanks.
The iframes' height is not influenced by the content. That's how iframes work.
If you need to shrink or grow them, you need to do that manually. Read more here:
http://www.mattcutts.com/blog/iframe-height-scrollbar-example/
http://www.456bereastreet.com/archive/201112/how_to_adjust_an_iframe_elements_height_to_fit_its_content/
Have you tried JQuery?
You could use:
$("#viewcontent").height($("#viewcontent").contents().find("html").height());
And just call that on whatever event you want the iframe to resize on. I've got it working on keyup for one of my own projects. Here's the jsFiddle.
Please try the below script:
<script language="JavaScript">
<!--
function autoResize(id){
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
}
document.getElementById(id).height= (newheight) + "px";
document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>
<iframe src="test.html" width="100%" height="200px" id="my_frame" marginheight="0" frameborder="0" onLoad="autoResize('my_frame');"></iframe>
you Should have the source file with in your domain.this is already discussed
Click here
for Cross Domain iframe Resizing please
Click here
Related
Hi i need to modify java script that will by changing fixed image.
In for example:
when page is loaded then image will by on right site. Next after scrolling down page image should be changed to next one for each e.g. 100px. Images need to by loaded from image list or something similar.
I have found java script that make something similar to this. [Instead of creating images of numbers i need to load my own images]
<!DOCTYPE html>
<html>
<head>
<style>
html,body {
height: 400%;
background: white;
width: 100%;
}
.show {
width: 100px;
height: 100px;
position: fixed;
top: 300px;
right: 20px;
background: lime;
}
</style>
</head>
<body>
<img class="show" alt="0" src="img0.jpg" />
Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
var lastI
$(window).scroll(function() {
var scrollTop = $(this).scrollTop()
console.log(scrollTop)
var i = (scrollTop / 10).toFixed(0)
if (i !== lastI)
$(".show").attr({
"src": "img" + i + ".jpg",
"alt": i
})
lastI = i
})
</script>
</body>
</html>
Update:09.11.2017
Ok, I manage this code to work. What should I do it was to setup right path to image files like in my case ("src": "test/" + i + ".jpg",) where my images are in "test" folder, and change names of images [1.jpg, 2.jpg and so on].
You can easyli change your image with Native scroll event, without using JQuery :
You can see how to use native scroll event here
<body>
<!-- This is an image with a 'show' id -->
<img id="show" alt="0" src="img0.jpg" />
<script type="text/javascript">
/* this capture the `scroll event`*/
window.addEventListener('scroll', function(e) {
/* This generate a image name in case with scroll position (ex img1.jpg) */
let bgImage = 'img' + (window.scrollY / 10 ).toFixed(0) + '.jpg';
/* This specify the path where are your images list */
let bgImagePath = '../images/' + bgImage;
/* This get your element (img) with id `show` and change this background image by the path include in `bgImagePath` variable */
document.getElementById('show').style.backgroundImage = bgImagePath;
});
</script>
</body>
Native background image explain here
Native getElementById explain here
This sample of code do not use JQuery :) Just native Javascript : you van remove this lines in your code :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
Hope I help you.
I'am not sure, try this one:
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 100) {
$('.Classname').css("background-image","../images/image.png");
} else {
$('.Classname').css("background-image","none");
}
});
I have an iframe on my page, i am using this code:
<script>
function autoResizeiFrame(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<iframe src="link.php" frameborder="0" width="100%" height="100%" onload='javascript:autoResizeiFrame(this);'></iframe>
which automatically resizes the iframe to 100% height.
This works fine, however if the browser is re-sized, making the screen width smaller i can see the iframe borders and it does not automatically re-size the height of the iframe.
It's only re-sizing it on page load
Hi you should use the resize event:
I have updated the solution:
If I understand correctly you wont the content of the iframe to not scroll and allays display in full .... than this will work... (i hope...)
<script type="text/javascript">
function autoResizeiFrame(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + "px";
}
window.addEventListener("load",function(){
var obj=document.getElementById("myIframe");
obj.contentWindow.addEventListener("resize",function(){autoResizeiFrame(obj);},false);
autoResizeiFrame(obj);
},false);
</script>
<iframe id="myIframe" src="index.php" frameborder="3" width="100%" height="100%" style="border:2px solid red;"></iframe>
Let me know.
You have to implement the onresize event on your page. See this link. W3School
window.addEventListener("resize", autoResizeiFrame(document.getElementById("myframe")));
I am unable to adjust auto height according to the page content.
Code -
<iframe width="100%" id="myFrame" src="http://www.learnphp.in" scrolling="no">
</iframe>
I prefer Make iframe automatically adjust height according to the contents without using scrollbar? but this code doesn't work. Please suggest me how to get complete data without using scroll?
Try this
<script>
function autoResize(myiframe){
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
}
document.getElementById(myiframe).height= (newheight) + "px";
document.getElementById(myiframe).width= (newwidth) + "px";
}
</script>
<body>
<div align="center" style="padding-left:50px">
<iframe id="myiframe" src="helpdesk/index.php" width="800"></iframe>
</div>
</body>
I have followed the instructions here and here but am not able to implement easyXDM correctly to auto-size the height of my iframe.
On the page with the iframe (host.html), I can see the contents I am importing (otherdomain.html) but the height of the iframe is much shorter than the contents, and the height does not change. Unfortunataely this is on a development site I can not link to here.
otherdomain.html has elements that expand on click so I need the iframe to expand and contract as the contents of the page do so.
Can anyone tell me what I am doing wrong please? These are two different domains/servers I am working with. This is the first time I have set up a socket or done anything like this - I don't see any errors in the console but I can't make much sense out of the what it is telling me.
Here is a similar question, but was not answered: IFrame resizing with easyXDM
Here is what I have on the page that has the iFrame:
<style type="text/css">
div#embedded iframe {
width: 725px;
}
</style>
<script src="../js/easyXDM.debug.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
new easyXDM.Socket({
remote: "http://lcoawebservices.com/careers/resize_intermediate.html?url=job-postings.php",
container: "embedded",
onMessage: function (message, origin) {
var settings = message.split(",");
this.container.getElementsByTagName("iframe")[0].style.height = settings[0];
this.container.getElementsByTagName("iframe")[0].style.width = settings[1];
}
});
</script>
<div id="embedded"></div>
Here is what I have on resize_intermediate.html:
<script type="text/javascript" src="../scripts/easyXDM.debug.js">
</script>
<script type="text/javascript">
var iframe;
var socket = new easyXDM.Socket({
swf: "../scripts/easyxdm.swf",
onReady: function(){
iframe = document.createElement("iframe");
iframe.frameBorder = 0;
document.body.appendChild(iframe);
iframe.src = easyXDM.query.url;
},
onMessage: function(url, origin){
iframe.src = url;
}
});
//Probe child.frame for dimensions.
function messageBack(){
socket.postMessage ( iframe.contentDocument.body.clientHeight + "," + iframe.contentDocument.body.clientWidth);
};
//Poll for changes on children every 500ms.
setInterval("messageBack()",500);
</script>
<style type="text/css">
html, body {
overflow: hidden;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
iframe {
width: 100%;
height: 100%;
border: 0px;
}
</style>
and at the bottom of the page I am importing I have placed this:
<script type="text/javascript">
window.onload = function(){
parent.socket.postMessage(document.body.clientHeight || document.body.offsetHeight || document.body.scrollHeight);
};
</script>
I would like to have a video pop up in the same window when I visit a site. By doing this I want to increase the height of the video from 0 to the specific height and then move the video slightly up from where its from. Is there a java script function or JQuery function that can allow this. Code would be great with comments but I am ok If there is a site that gives a walkthrough of how to do it. Thank you
Code I have now:
<!DOCTYPE HTML>
<html>
<head>
<title>Team Songs</title>
<link rel="stylesheet" type="text/css" href="default.css">
<script type="text/javascript">
var t;
var x;
window.onload=function()
{
x = 0;
while(x < 300)
{
t = setTimeout("nothing();",30000);
x = x + 10;
}
}
function nothing()
{
var b = x + 'px';
document.getElementById("mainvideo").height = b;
};
</script>
</head>
<body>
<div id="header">
<h2>Software Engineering</h2>
<h2>Team Songs</h2>
</div>
<div style="text-align:center;">
<iframe id="mainvideo" width="560" height="315" src="http://www.youtube.com/embed/2SZGW-6AF3A" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
I suggest you use the jQuery .animate() method : http://api.jquery.com/animate/ or the slideDown method http://api.jquery.com/slideDown/
For your specific case I think you should first make sure that the element containing the video is going to resize without destroying your page's layout. Then use
$("#container_div_id").slideDown(1000, function(){
$("#container_div_id").css("position","relative");
$("#container_div_id").css("bottom", "10px");
})
If you want it to slide up, then it would be more complicated as you would have to have the div fixed to the bottom or something and maybe changing its position property to relative might move it more than you wanted.