I have 2 iframes one on top of each other.
each iframe loads a different page.
iframe 1 is the header
iframe 2 is the content
desire
behave as one page, so when you scroll the entire page scrolls
issue
only the bottom one scrolls
Is there a way to do this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Untitled</title>
<style type="text/css">
body, html
{
margin: 0; padding: 0;
}
#content
{
position:absolute; left: 0; right: 0; bottom: 0; top: 90px; background: blue; height: expression(document.body.clientHeight-90); overflow:hidden;
}
</style>
</head>
<body>
<iframe src="http://www.example.com" width="100%" height="100" frameborder="0" scrolling="no"></iframe><br />
<div id="content">
<iframe src="http://www.cnn.com" width="100%" height="100%" frameborder="0"></iframe>
</div>
</body>
</html>
If PHP is an option for you, you can use the include() function to import the page header and body content from other files. This will construct the two pages into one and will scroll all as one.
The one drawback to this (from what you're doing already) is that whenever a hyperlink is followed from the page body, the header reloads on the next page.
(versus the header being static and not refreshing every time and new page is navigated to)
<?php
// Page Header
include("headerfile.html");
// Page Body
include("bodyfile.html");
?>
Likewise, you could just put the content for the body on that file.
<?php
// Page Header
include("headerfile.html");
?>
<!--content html goes here-->
Related
I am trying to get a link from an iframe, when it changes. I have iframe of one site, on different domain. I am trying to get a second link, when iframe redirected to a different page.
For example, default iframe on site hosts a form. After form is completed, it redirects to another page and then src in iframe changes. I am not able to get a link from iframe, not even sure if that is possible.
I was googling, but whatever I tried doesnt work for me.
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#content
{
position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
}
</style>
</head>
<body>
<div id="content">
<iframe id="iframe" samesite=None width="100%" height="100%" frameborder="0"
src="www.site.com/" />
</div>
<script>
$(document).ready(function(){
console.log('asdsadsa');
var link = document.getElementById("iframe").src;
console.log(link);
});
</script>
</body>
</html>
Not sure if this is possible, any advice is appreciated.
I created pdf with Symfony by helping me with KnpSnappyBundle which uses wkhtmltopdf.
In one of my pdf files, I have a column on the left and one on the right. I would like the two columns to finish at the bottom of the page, so I put a style css "height: 100%".
This works fine if the pdf only makes one page, but if the contents of one of the columns overflow on another page, the divs are not extended to the second page.
So I would like that if the content goes beyond the first page, the two columns finish at the bottom of the second page.
Here is the current code of my html file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="<?php echo $baseUrl; ?>css/bootstrap.min.css">
<link rel="stylesheet" href="<?php echo $baseUrl; ?>css/font-awesome.min.css">
<style>
#colonneGauche {
width: 25%;
height: 100%;
background-color: #4c5667;
float: left;
}
#content {
width: 75%;
height: 100%;
background-color: #bacbe1;
float: left;
}
</style>
</head>
<body>
<div id="colonneGauche">
<p>lorem</p>
</div>
<div id="content">
<p>ipsum</p>
</div>
</body>
</html>
I tested the css "page-break-after: avoid;" but it did not work.
If one of you has an idea...
Thank you in advance !
I'm trying to make a website with Twitter Bootstrap, that is basically a single, vertically centered column on top of a background container div (so I can color / image the background on the edges).
I keep having this issue where I can get the background div to fill the enter screen, but the centered column div sets its height to the size of the content. I want it to always, at least, be as tall as the screen size. I thought min-height would do this, but it does not.
Here's what it looks like right now: (it's just a test page for the layout)
Here is the code for it:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Baileysaurus -- Dinosaurs && Logic in your face!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<LINK href="header.css" rel="stylesheet" type="text/css">
<LINK href="forum.css" rel="stylesheet" type="text/css">
<!-- jQuery (Bootstrap requires jQuery!) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Bootstrap -->
<LINK href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"
media="screen">
<!-- A file of PHP utility functions -->
<?php
include 'functions.php';
?>
</head>
<body>
<!-- Bootstrap -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<div id='background' class='row-fluid'>
<div class='span12'>
<div id='site-column' class='row-fluid span10 offset1 column-wrap'>
<img src="/PipeDog.jpg" alt="ARGUMENT INVALID" />
<hr>
<p>
Put a blog here!
</p>
</div> <!-- END of outermost span12 div -->
</div> <!-- END - "site-column" div -->
</div> <!-- END - "background" div -->
</body>
</html>
CSS
html, body
{
height: 100%;
margin: 0;
}
#background
{
position: absolute;
top:0;
bottom: 0;
min-height: 100%;
min-width: 100%;
background-color: Gainsboro;
}
#site-column
{
top: 0;
bottom: 0;
min-height: 100%;
border-left: 2px solid;
border-right: 2px solid;
background-color: white;
}
.column-wrap
{
overflow: hidden;
}
I'm trying to get the white column in that photo to stretch to the bottom of the screen, at least, even if the content is not that long.
Anyone have any ideas on what I'm missing?
You should also be able to add the following CSS:
.span12 {
height:100%;
}
Try to make your outer <div> to extend to the bottom of the page.
So try this in the css:
.row-fluid
{
position:absolute;
bottom:0;
}
And I'm not sure but you may have to move your
<script src="bootstrap/js/bootstrap.min.js"></script>
line to the <head> part of your page.
I am trying to embed a URL in my webpage using iframe. The page is working properly on FireFox and Chrome, but on IE a vertical space is left after the scroll bar, how do I remove it ?
Here is the code along with CSS,
<html>
<head>
<style type="text/css">
html, body {
margin: 0;
padding 0;
}
iframe {
height: 100%;
width: 100%;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<iframe src="http://abc.org" frameborder="0" scrolling="auto" ></iframe>
</body>
</html>
Regards,
Timothy
This is you're complete solution :
<head>
<style type="text/css">
html {height:100%}
body {
margin:0;
height:100%;
overflow:hidden
}
</style>
</head>
<body>
<iframe allowtransparency=true frameborder=0 id=rf sandbox="allow-same-origin allow-forms allow-scripts" scrolling=auto src="http://www.abc.org" style="width:100%;height:100%"></iframe>
</body>
I have a div of an aeroplane inside parent div with overflow: hidden, so it looks as though the aeroplane div is flying from under an element on the page and dragging a banner with it.
See my diagram here:
The css code I have already is:
#plane{
width: 195px;
background-image: url(images/plane.png);
background-repeat: no-repeat;
height: 444px;
float: left;
position: relative;
top: 0px;
left: 0px;
}
#plane-holder {
height: 569px;
width: 960px;
overflow: hidden;
z-index: 2200;
display: inherit;
}
And the HTML:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Netball Plane</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<div id="header"><div id="topbar"><img src="images/contact-us-bar.gif" width="960" height="45" /></div>
</div>
<div id="content"><div id="mainbody"><div id="menubar"><div id="logo"><img src="images/logo.gif" width="284" height="103" /></div>
<div class="menu">
Menu to go here
</div>
</div>
</div><div id="hero"><div id="information-that"><h1>Hello welcome to the site</h1>
<p></p><p>Some more text here.</p>
<p><img src="images/netball.png" alt="Rollover the netball for more information" width="187" height="46" border="0" /></p>
</div>
</div><div id="hero-shadow"></div><script type="text/javascript">
$(function(){
var iCounter = 1;
var iMaxCounter = 4;
$( '#plane' ).animate({
top: "-=450px",
left: "+=857px"
}, 30000, function(){
}
);
$('.slideshow').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
after:onAfter
});
});
</script>
<div id="plane-holder"><div id="plane"></div>
</div><div id="base-content"><div id="footer"></div>
</body>
</html>
but this is displaying as a block pushing the other elements below these divs down the page.
Do you know of a way to fix this so the plane and it's containing div is floating above my site? I've tried setting the z-index, but that doesn't seem to work.
probably you should use position relative+absolute setting position: relative on the container and absolute (with a defined z-index) for the #plane
place the #plane with top/left/right/bottom properties
at the begin you have bottom : -<somepixels>, left : 0
at the end you have top : 0, right : 0
Doing so other elements won't be affected by the presence of the plane, staying where you placed them
Use also pointer-events: none if you want to allow click/hover events behind the plane: see https://developer.mozilla.org/en/CSS/pointer-events (unfortunately it's not supported by IE<=8although some js workarounds have been published, e.g. by Lea Verou)