iframe loading in middle of page, instead of top of page - javascript

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.

Related

Html popup div fullscreen inside another div

I want to have a fullscreen popup over the whole page, but I've only found that you need to place it at the body root
<body>
<div id="popup" >
...
</div>
<div id="page">
<div id="content" >...</div>
</div>
</body>
But that's not what I need. I need to have a fullscreen popup adding it inside the page.
<body>
<div id="page">
<div id="popup" >
...
</div>
<div id="content" >
...
</div>
</div>
</body>
The problem is that if I do this, the popup is not fullscreen, but it appears only over the "page" div, while I want it to be fullscreen
I added a live example https://www.w3schools.com/code/tryit.asp?filename=GS0R8SGBW8CS as you can see the popup is not entirely full screen
Remove style="margin:2rem" from popup div
https://www.w3schools.com/code/tryit.asp?filename=GS0RIDZF6HMF
<style>
.Docdiv
{
position:relative;
z-index: 2;
width:1000px; overflow: hidden;
position: fixed;
top: 3%;bottom: 3%;
right:183px;
color: black;
}
</style>
<div class="Docdiv" style="min-height: 100%;">
</div>
The answer was that I had a parent div with the clip style attribute. I removed it and now the popup is fullscreen. Thanks everyone.

How can i remove an element within an iframe?

For example, I want to remove the "Navigation Bar" from the iframe. How can I do it?
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>I want to remove the navigation bar:</p>
<iframe id="" class=" " scrolling="no" style="width:1000px; height: 1500px; overflow: hidden;" src="https://www.w3schools.com/" title="Iframe"></iframe>
</body>
</html>
You can't manipulate what is inside an iframe but, if the content You want to hide is an horizontal navigation section at top of the page, you could always wrapped the iframe inside a div with overflow:hidden and then, move the content up with top propertie.
Like this:
div {
overflow:hidden;
}
iframe {
position:relative;
top:-120px;
border:0;
width:100%;
}
<h2>HTML Iframes</h2>
<p>I want to remove the navigation bar:</p>
<div>
<iframe id="" class=" " scrolling="no" style=" height: 1500px; overflow: hidden;" src="https://www.wikipedia.org/" title="Iframe"></iframe>
</div>

Bring DIV tag to front in FRAMESET

In a particular web page I've used frameset to display set of pages content in a single page, I divided my frame to top(Menu frame 100%) followed by left frame and right frame below to the top frame.
<FRAMESET ROWS="85,*" cols="*" FRAMEBORDER=1 BORDER=1 bordercolor=#ffffff>
<FRAME src="<asp:Literal id=litMenuSkinURL runat=server/>" name=top id="menuFrame" scrolling=no>
<FRAMESET rows="*" COLS="215,*" bordercolor=#ffffff>
<FRAME src="WVTreeList.aspx?mode=0" name=framTreeList scrolling=1 frameborder=1>
<FRAME name=framAnalysis src="<asp:Literal id=litAnalysisURL runat=server/>" scrolling=1>
</FRAMESET>
</FRAMESET>
But when i click on Menu from top frame It's hiding entire menu in the back of left and right frames and I can't see my sub menu which is a collection of sub menu data in a DIV tag.
Previously I've used 'window.createpopup()' method to bring DIV tag to front which is not supported now in IE>11 and other browsers, so how can i bring DIV tag to front of left and right frames? Is there any other way?
Below is the way that I've tried but it's not working only top menu is loading that to with some width not 100% and no other frame is loading.
<style type="text/css">
#wrapper { width: 100%; margin:0px auto; overflow:hidden; }
#header { width: 100%; height:100px; }
#leftCol { width: 25%; float:left; }
#rightCol { width: 75%; float:right; }
</style>
</HEAD>
<body>
<div id="wrapper">
<div id="header">
<iframe src="<asp:Literal id=litMenuSkinURL runat=server/>" />
</div>
<div id="leftCol">
<iframe src="WVTreeList.aspx?mode=0"/>
</div>
<div id="rightCol">
<iframe src="<asp:Literal id=litAnalysisURL runat=server/>" /> <!-- Set Div As your requirement -->
</div>
</div>

How to set an iframe to automatically fill empty body space in HTML

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);
})

Scroll bar in IOS app development UI not working

IOS app development with phone-gap.
Myindex.html code(related) is as follows:-
<script type="application/javascript" src="iscroll.js"></script>
<script>
var myScroll;
function loaded() {
setTimeout(function () {
myScroll = new iScroll('edit');
}, 100);
}
window.addEventListener('load', loaded, false);
..
..
</script>
<style type="text/css">
#toolHome,#toolEdit,#toolSetting,#toolMessage{
position: fixed;
width: 100%;
height: 10%;
display:table;
z-index:20;
}
</style>
</head>
<body id="bd">
<div id="toolEdit" class="toolbar">
<h1 id="pageTitle">Edit</h1>
<a id="preButton" class="button" onclick="home()">Message List</a>
</div>
<div id="edit" title="Edit" ></div>
<div id="bottomButtons" style="position:fixed;top:90%;width:100%;display:table;height:11%;z-index:20;display:none;"><a class="redButton buttomButton" style="width:22%;position:relative;top:4px" align="left" onclick="deleteList()"><img src="iui/t/default/trash.png" > Delete</a></div>
</body>
So here, div 'toolEdit' contains header section. Div 'edit' contains the content part which needs to be vertically scrollable when content exceeds the available space.div 'bottomButtons' is the footer which contains delete button. z-index has been given for both header and footer, so the content slides below both header and footer.
The problem is, the bottom part of the content when it is tried to scroll up(residing below footer) does'nt scroll and if tried takes the footer with it, making it blank.
Tried using iscroll plugin(shown in the code) also, but it is not helping.
Any suggestions will be appreciated.
Thanks in advance.

Categories