First of all, sorry for my english I'm still learning so I will try to explain myself as best as possible.
My question is, how can I fit the iframe height at 100%? I tried different solutions but anything works. This is my code:
HTML:
<div id="header_PA">
<div id="menu_PA">
<div id="logo_PA">
<img src="_images/1.png" title="Local PA" id="logo">
</div>
<div id="sections_PA">
...
</div>
<div id="user_box">
...
</div>
</div>
<div id="sub_menu_PA"> </div>
</div>
<iframe id="iframe_PA" src="_local_pa/dashboard.php" ></iframe>
<div class="smallFooter">
...
</div>
CSS:
#header_PA{
position: fixed;
width: 100%;
height: 70px;
z-index: 999;
}
#iframe_PA{
width: 100%;
height: 100%;
margin-top: 73px;
}
.smallFooter {
background: #121212;
}
I have skipped unnecessary parts of the HTML and CSS code.
The result of that, you can see it in this picture:
Screen Capture
Apparently the width property works but the height no. Anybody knows how can I solve it?
Thanks in advance!
Try this code to set the iframe width and height,
<iframe src="_local_pa/dashboard.php" width="100%" height="200"></iframe>
You need a little bit of javascript to adjust the height of the iframe element.
this works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>auto iframe height adjust</title>
<style>
</style>
<script type="text/javascript">
<!--//
function sizeFrame() {
var F = document.getElementById("myFrame");
if(F.contentDocument) {
F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome
} else {
F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome
}
}
window.onload=sizeFrame;
//-->
</script>
</head>
<body>
<iframe width="100%" id="myFrame" src="thispage.htm" scrolling="no" frameborder="0">
An iframe capable browser is
required to view this web site.
</iframe>
</body>
</html>
Original source: http://w3schools.invisionzone.com/index.php?s=59fbfe0376deb43204ffff5aaf04736f&showtopic=26417#entry145317
Related
Currently, the frame is on top of each other and some showed even if I did not choose it.
<div>
<div>
<iframe src="index2.php" width="100%" height="100%" name="index2"></iframe>
</div>
<div>
<iframe src="profile.php" width="100%" height="100%" name="profile"></iframe>
</div>
</div>
<label>Sample choices</label>
<div>
Home
profile
</div>
nothing will display first then if I select one the other is hide till I select it. the display should be on the same spot/place. Sorry newbies here.
you should try more go and dive into JQUERY or DOM MANU. If you are new you have to start somewhere
Not tested so excuse any typos but perhaps the following might be of help
<style>
#container > div{display:none}
</style>
<div id='container'>
<div>
<iframe src="index2.php" width="100%" height="100%" name="index2"> </iframe>
</div>
<div>
<iframe src="profile.php" width="100%" height="100%" name="profile"></iframe>
</div>
</div>
<label>Sample choices</label>
<div>
Home
profile
</div>
<script>
document.querySelectorAll( 'a[target]' ).forEach( a=>{
a.addEventListener('click',function(e){
e.preventDefault();
document.getElementById('container').querySelector( '[name="'+this.getAttribute('target')+'"]').parentNode.style.display='block';
});
})
</script>
A simple demo to illustrate the showing of the iframe. If this is not as intended please clarify the question
/*ifsrc1.php*/
<?php
echo " I am the iFrame source for index2";
?>
/* ifsrc2.php */
<?php
echo " I am the iFrame source for profile";
?>
The main page with the hidden iframes
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
<style>
#container > div{ display:none; width: 80%;height:10rem;border:1px solid red; margin:1rem auto;padding:0 }
</style>
</head>
<body>
<div id='container'>
<div>
<iframe src="ifsrc1.php" width="100%" height="100%" name="index2"> </iframe>
</div>
<div>
<iframe src="ifsrc2.php" width="100%" height="100%" name="profile"></iframe>
</div>
</div>
<label>Sample choices</label>
<div>
Home
profile
</div>
<script>
document.querySelectorAll( 'a[target]' ).forEach( a=>{
a.addEventListener('click',function(e){
e.preventDefault();
/* hide all */
document.querySelectorAll('#container > div').forEach( div=>{
div.style.display='none';
});
document.getElementById('container').querySelector( '[ name="'+this.getAttribute('target')+'" ]').parentNode.style.display='block';
});
})
</script>
</body>
</html>
Open the following HTML on iPad Safari. Scroll down within the iframe. Select male or female radio button which causes a CSS change. Notice the iframe scrolls back to the top. I have the same issue in an application that I'm working on and this issue only happens on iPad (Android and desktop browsers don't have this issue).
<!DOCTYPE html>
<html>
<head>
<title>iframe test</title>
<style>
body {
margin: 0;
padding: 20px;
}
div.iframe-container {
width: 850px;
height: 400px;
overflow: hidden;
-webkit-overflow-scrolling: touch;
border: 1px solid #cecece;
}
</style>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
</head>
<body>
<form>
<input id="genderMale" type="radio" name="gender" value="male" onchange="onRadioSelect();"/>
<label for="genderMale">Male</label>
<input id="genderFemale" type="radio" name="gender" value="female" onchange="onRadioSelect();"/>
<label for="genderFemale">Female</label>
</form>
<br/>
<div class="iframe-container">
<iframe src="http://www.engadget.com" height="100%" width="100%" frameBorder="0"></iframe>
</div>
</body>
</html>
<script type="text/javascript">
if((navigator.userAgent.match(/iPad/i) != null) || (navigator.userAgent.match(/iPhone/i) != null)) {
$(".iframe-container").css("overflow", "auto");
}
function onRadioSelect(event) {
switch($("input:checked").val()) {
case "male":
$("body").css("border", "2px solid #ff0000");
break;
case "female":
$("body").css("border", "2px solid #0000ff");
break;
}
setTimeout(function() {
$("body").css("border-style", "none");
}, 250);
}
</script>
Any ideas how to prevent this from happening? I'd like the scroll position to remain unchanged as other things happen within my parent page.
I had the same issue.
Solved with a scrollable div.
Created a div around the content (not the iframe) with the following style:
<div style="-webkit-overflow-scrolling:touch; overflow-x:hidden; overflow-y:auto; height:100%;">
<iframe src='#' />
</div>
If that doesn't solve the issue try removing the <DOCTYPE> because HTML5 doesn't support <DOCTYPE>
I'm trying to put a header on top of my pages. It works fine with IE 8. It moves slightly down and blocking my page content on the newest IE and apple safari. Can anyone show me what I need to put so that it is compatible for all search engines? I am PHP Including my header to all my pages. Below is my header code.
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<body>
<div style="position: absolute; width: 1280px; height: 92px; z-index: 1; left: 1px; top: 0px" id="layer1">
<div style="position: absolute; width: 660px; height: 22px; z-index: 1; left: 238px; top: 52px" id="layer2">
<font face="Arial">|<b>
New Cost </b>| <b>
</b>|<b> <a href="http://www..net/carriers/newcarrier.php">New
Carrier</a></b> | <b>
</b>|<b> <a href="http://www..net/carriers/search.php">Carrier
Board</a></b> | </font></div>
<p>
<img border="0" src="/carriers/.png" margin= 0 auto width="100%" height="73"></div>
</body>
</html>
Assuming this is the header you're talking about...
<img border="0" src="/carriers/echoheader.png" margin= 0 auto width="100%" height="73">
...it should look something like this. I think you'll need to specify top and make its position absolute.
HTML:
<img class='header' />
CSS:
img.header {
position:absolute;
top:0;
...other styles...
}
Try to avoid "inline styling" - this is where you set the style of the element directly in the HTML.
It is good practice to split the style from the markup, since later, in a more complex page, you can find your way around more easily.
I have the following code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="res/favicon.ico" />
<title>My website</title>
<style type="text/css">
.wrap {
position:relative;
margin:0 auto;
width:900px;
text-align:center;
}
#header, #footer {
width:100%;
float:left;
}
#footer {
position:fixed;
bottom:0;
z-index:999999;
}
</style>
</head>
<body>
<div id="header">
<div class="wrap">
<div class="logo">
<h1>Header</h1>
</div>
<div>Menu goes here</div>
</div>
</div>
<iframe src="http://www.cnn.com"></iframe>
<div id="footer">
<div class="wrap">
<h2>Footer</h2>
</div>
</div>
</body>
</html>
How can I setup the iframe so that it'll take all the remaining width and height between the header and the footer?
Solved it, needed some javascript :)
Live example:
http://simplestudio.rs/yard/framed/framed.html (offline)
CODE:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="res/favicon.ico" />
<title>My website</title>
<style type="text/css">
#framed {
position: relative;
width: 100%;
height: 100%;
}
.wrap {
position:relative;
margin:0 auto;
width:900px;
text-align:center;
}
#header, #footer {
width:100%;
float:left;
}
#footer {
position:fixed;
bottom:0;
z-index:999999;
}
</style>
<script>
var resize = setInterval(function(){chng_iframe_height('framed','header','footer')},500);
function chng_iframe_height(ifrid,hid,fid) {
var eheight = window.innerHeight;
var ifrobj = document.getElementById(ifrid);
var header = document.getElementById(hid);
var footer = document.getElementById(fid);
var header_height = getComputedStyle(header).height;
var footer_height = getComputedStyle(footer).height;
var reserved_height = parseInt(header_height) + parseInt(footer_height);
ifrobj.style.height = eheight - reserved_height +"px";
}
</script>
</head>
<body onload="chng_iframe_height('framed','header','footer');">
<div id="header">
<div class="wrap">
<div class="logo">
<h1>Header</h1>
</div>
<div>Menu goes here</div>
</div>
</div>
<iframe src="http://www.cnn.com" id="framed"></iframe>
<div id="footer">
<div class="wrap">
<h2>Footer</h2>
</div>
</div>
</body>
</html>
Basicaly, I compute header and Footer rendered height, get window.innerHeight and from that numbers I know how much px is there left between header in footer so I assign that value to iframe and whoila it works...
Also I have set setinterval to call that function every half second so if you resize window it will almost immediately update iframe height...
Try adding a class to your iframe or style it on the spot like this:
<iframe style="height:100%; width:100%;" src="http://www.cnn.com"></iframe>
Try this also:
<iframe height="100%" width="100%" src="http://www.cnn.com"></iframe>
Also don't forget to remove the padding/margin on the body tag so the header and footer go all the way:
body {
margin:0;
padding: 0;
}
EDIT:
If this does not work you'll have to add fixed width and height.
I made used of .css() and $(window).height() When you use $(window).height() make sure you have doctype as html
<script>
var resize = setInterval(function(){chng_iframe_height('framed','header','footer')},500);
function chng_iframe_height(ifrid,hid,fid) {
var eheight = $(window).height();
var ifrobj = document.getElementById(ifrid);
var header_height = $("#" + hid).css("height"); // getComputedStyle(header).height;
var footer_height = $("#" + fid).css("height");
var reserved_height = parseInt(header_height) + parseInt(footer_height);
ifrobj.style.height = eheight - reserved_height +"px";
}
</script>
I cannot get the FB Like button and the Tweet button to display next to each other!!
HTML:
<div class="grid_3 social">
<ul>
<li>
<fb:like href="http://{{ request.get_host }}{{ post.get_absolute_url }}" layout="button_count" show_faces="false" width="450" font=""></fb:like>
</li>
<li>
Tweet
</li>
</ul>
</div>
CSS:
.social {
float: right;
}
.social ul {
list-style: none outside none;
display: inline;
}
.social li {
display: inline;
}
I tried every combination I can think of to no avail. Help please!! CSS will be the death of me...
While we're on the subject of these buttons, we all know they double and triple your page's load time because they make a lot of JS calls, especially when you're on something like a blog index page. Anyone have any ideas on how to remedy this situation? I'm already using Disqus, and now adding FB and Twitter my index page can take up to 5 seconds to load. So slow. Would showing no counts on the buttons help?
Thanks!
EDIT: Actual HTML taken from Firebug:
<div class="grid_3 social">
<ul>
<li>
<fb:like class=" fb_edge_widget_with_comment fb_iframe_widget" font="" width="450" show_faces="false" layout="button_count" href="http://localhost:8000/24/">
<span>
<iframe id="f3625cd56daea42" class="fb_ltr" scrolling="no" name="fdb43a564bf6bc" style="border: medium none; overflow: hidden; height: 25px; width: 450px;" title="Like this content on Facebook." src="http://www.facebook.com/plugins/like.php?api_key=109222892497007&channel_url=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D0%23cb%3Df30031a637a623%26origin%3Dhttp%253A%252F%252Flocalhost%253A8000%252Ff1d530a50043dd4%26relation%3Dparent.parent%26transport%3Dpostmessage&href=http%3A%2F%2Flocalhost%3A8000%2F24%2F&layout=button_count&locale=en_US&node_type=link&sdk=joey&show_faces=false&width=450">
<html id="facebook" class=" " lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<body class="plugin transparent_widget ff3 mac Locale_en_US">
<input id="post_form_id" type="hidden" autocomplete="off" value="fa23e0256eb11be4c423202178ac80f5" name="post_form_id">
<div id="FB_HiddenContainer" style="position:absolute; top:-10000px; width:0px; height:0px;"></div>
<div id="LikePluginPagelet">
<div id="connect_widget_4daeb2d755f689e27484431" class="connect_widget button_count" style="">
<table class="connect_widget_interactive_area">
<tbody>
<tr>
<td class="connect_widget_vertical_center connect_widget_button_cell">
<div class="connect_button_slider">
<div class="connect_button_container">
<a class="connect_widget_like_button clearfix like_button_no_like">
<div class="tombstone_cross"></div>
<span class="liketext">Like</span>
</a>
</div>
</div>
</td>
<td class="connect_widget_vertical_center connect_widget_confirm_cell">
<td class="connect_widget_button_count_including hidden_elem">
<td class="connect_widget_button_count_excluding">
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
<script type="text/javascript">
<script type="text/javascript">
</body>
</html>
</iframe>
</span>
</fb:like>
</li>
<li>
<iframe class="twitter-share-button twitter-count-horizontal" scrolling="no" frameborder="0" tabindex="0" allowtransparency="true" src="http://platform0.twitter.com/widgets/tweet_button.html?_=1303294651733&count=horizontal&lang=en&text=mytext&url=http%3A%2F%2Flocalhost%3A8000%2F24%2F" style="width: 110px; height: 20px;" title="Twitter For Websites: Tweet Button">
<html lang="en">
<head>
<body class="hcount show-count">
</html>
</iframe>
</li>
</ul>
</div>
How about:
.social li {
float: left;
}
It would help to see your actual HTML. <fb:like> is not an HTML tag, it’s Facebook’s little markup language they made up (FBML), and it gets replaced with actual HTML when Facebook’s JavaScript runs.
(I believe they’re looking to deprecate FBML too — you might want to have a look at the <iframe>-based like button.)
To answer your second question, you would want to load the javascript asynchronously - someone has modified the twitter script to do so, and I would imagine the facebook script has been modified to do the same.
I can't find links too readily on google, but for 5 seconds a page I'm sure you have the motivation!
The simplest solution I have found is to wrap your buttons in a LI inside a UL.
Take your facebook button code:
<div class="fb-like" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-font="verdana"></div>
Change the DIV tag to LI, and set it inside the UL with the rest of your buttons:
<li class="fb-like" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-font="verdana"></li>
And set your CSS widths for the class fb-like down to something closer to its actual size.
You can assign following CSS Class to your List Items
.NextTo
{
float : left;
}
or
.NextTo
{
display: inline-block;
width: auto;
}
I also spent a lot of time to bring them together and show next to each other and finally found the easiest solution..
You simply need to past html codes between:
<div align="center">... past your code here...`</div>`