I have attached the sample code which demonstrates the problem. I am checking this in Firefox 3.5.7. The problem is the parent HTML has a scrollbar, and it loads an iframe which is fullscreen (height: 100%, width: 100%), I want the parent scrollbar to be removed after the iframe is loaded.
1) Is this possible to do?
2) When we give height: 100%; width: 100% why does it occupy only the view area? But not
the full parent occupied area?
This is Main.html
<Html>
<head>
<script type="text/javascript" src="client.js"></script>
<title>
I am a client
</title>
</head>
<body bgcolor="#000000">
You can see the iframe below...
You can see the iframe below...
You can see the iframe below...<br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br>
You can see the iframe below...
<br>
<iframe name="clientframe" id = "clientframe" src = "app.html" style="position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:999;background:#ff0000"
onload = "sendparams();" frameborder="no">
</iframe>
</body>
</html>
This is app.html:
<HTML>
<HEAD>
<title>
I am an Application
</title>
</HEAD>
<BODY>
<h3>This is an application</h3>
<br>
You name <input type="textbox"> <br>
Password <input type="password"><br>
<br>
<br>
<input type="button" value ="Let me in">
</BODY>
</HTML>
NOTE: Open the Main.html, it will load the app.html in a iframe. You can notice that after iframe is loaded a scroll bar appears, and the red background for the iframe does not completely fill the entire parent.
Hide the Parent window scroll bar when iframe is loaded
put this script at top of the Main.html
<script type="text/javascript">
function sendparams() {
document.body.style.overflow = "hidden";
}
</script>
The scrollbars will not hide because your IFrame's height if fixed but the text "You can see the iframe below..." last one crosses the height.
If you remove few (atleast two rows of) <br> then it will work fine as per your requirement.
Related
I have an html page with a couple of IFrame loading through external source code. I have no control over the external resources.
When the webpage loads it focuses on the one of the IFrame instead of focusing at the top of the page.
Here is my simple html page:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="topp" tabindex="0"></div>
</head>
<div id="topp" tabindex="0"></div>
<body>
<p id="test">test 1 2 3 4.</p>
<br><br>
<h2>IFrame 1</h2>
<iframe src="https://..../index1.html" width="100%" height="825px;"></iframe>
<iframe src="https://..../index2.html" width="100%" height="825px;"></iframe>
<iframe src="https://..../index3.html" width="100%" height="825px;"></iframe>
<iframe src="https://..../index4.html" width="100%" height="825px;"></iframe>
</body>
</html>
It's focusing on Iframe index3.html, so I have tried to create workaround by including in the page body text some javascript. In this way I can force the page to scroll back to the top as the DOM is being rendered. But it is not working.
Here is what I have tried:
$(document).ready(function(){
$(this).scrollTop(0);
});
Is there a way to find wheter the IFrame loads all the SRC, and then focus on top of the page?
You can replace your JavaScript code with:
window.scrollTo(0, 0);
That line of code will force the page to scroll to the top after loading.
You can add smooth scrolling with this code:
window.scroll({
top: 0,
left: 0,
behavior: 'smooth',
});
I hope this helps.
I have a website with an iframe and the website has its own backdrop / overlay. My goal is to set z-index of a child element of iframe, so only this child element should be on top of the overlay. I have access to both website inside iframe and the top website.
I reproduced it in Plunkr, so my goal is to get the green box (modal) to the top.
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<iframe src="iframe.html" width="100%" height="500px" ></iframe>
<div class="backdrop">
Backdrop
</div>
</body>
Do you have an idea if it's possible? How?
You can't do what you want.
What you have is this:
document
body
iframe
- see document(2)
div[class="backdrop"]
document(2)
body
div[class="modal box"]
The two documents don't overlap and cannot interact with each other in such way. You can move your element to the top z-index within the iframe, but you cannot make the element "break out" of the iframe in the way you wish to achieve. You have to set the iframe itself to the top.
An alternative approach for you might be to use an ajax request, and then append the new element to the body, and style that to appear on top.
Hey I am new to php and other stuffs. Now I am trying to make automatic bill creating page. But the problem is the background is not visible in print preview.
When I press the print button on the top left corner of the php page it shows a page without background image, at the same time I don't need print button in the print preview page. If I use <img> tag to insert image I can't able to display datas above the image.
My code
<html>
<head>
<title>New Page 1</title>
<script language="javascript">
function printpage()
{
window.print();
}
</script>
</head>
<body background="Geekay.jpg">
<input type="button" value="Print" onclick="printpage();">
<br><br>
<br><br>
<br><br>
Datas....
</body>
</html>
For printing datas along with background image in print window click more settings (in case of google chrome). Then check background graphics. For not showing print button, I updated my code as given below
<html>
<head>
<title>New Page 1</title>
<script language="javascript">
function printpage()
{
document.getElementById('print').style.display = 'none';
window.print();
}
</script>
</head>
<form name="bill">
<body background="Geekay1.JPG">
<div id="print" style="display:block">
<input type="button" value="Print" onclick="printpage()">
</div>
<br><br>
<br><br>
<br><br>
Datas....
</body>
</form>
</html>
See http://plnkr.co/edit/hPyYUCBYvWguyNniCexk?p=preview for a basic example (the original solution is much more complex). The problem is that I cannot scroll the div inside iframe because main page has another div on top. Is there a nice way to fix this (ideally without handling javascript events)?
<html>
<body style="overflow:hidden;">
<div style="position:absolute;top:0;left:0;right:0;bottom:0;z-index:100;background-color: rgba(255,255,255,0.01);">
</div>
<iframe src="main.html" style="width:100%;height:100%">
</iframe>
</body>
</html>
<html>
<body>
<div style="overflow:auto;position:absolute;top:0;left:0;height:2000px;width:2000px">
</div>
<div style="position:absolute;top:0;left:0;right:0;bottom:0;background-color:green;z-index:2;">
</div>
</body>
</html>
Yes, you can add pointer-events: none; style to your div element.
I want to know how we can open a web page in edit mode within an HTML page.
I mean, suppose if I have two frames. when I enter a url in a text in top frame, I should get the page in edit mode in bottom page. I should be able to select the items in the page in that mode. I don't want to save the items, but should be able to switch to the normal mode in a button click.
This is for getting Id/name/xpath of the elements in that page. if there are controls in a page which will navigate to other pages while clicking, I wouldn't be able to detect these parameters. If I am overriding all the click events, the controls under javascript tabs/accradian, will not be accessible.
Is there any ways to do it?
I coded as per one of the answer, but it is not working.
<!doctype html>
<html>
<head>
<title>click demo</title>
<script type="text/javascript">
function myFunc() {
doc = ifrm.contentDocument || ifrm.contentWindow.document;
doc.designMode = "on";
}
</script>
</head>
<body>
<input type="text" id="text" value="http://www.google.com" />
<input type="button" onclick="myFunc()" value="Open" /><br /><br />
<iframe id="ifrm" src="http://www.example.com" width="100%" height="500px" ></iframe>
</body>
</html>
you can convert any frame to design mode
iframe_node.contentDocument.designMode = "on";