The thing in question in a derpy example:
JS:
var length = 5;
for ( var i = 1; i < length + 1; i++ ) {
$( '#element' + (i -1) ).fadeOut( 500 );
$( '#element' + i ).fadeIn( 500 );
}
HTML:
<div id="element1" style="height: 100px; width: 100px; background-color: red;"></div>
<div id="element2" style="height: 100px; width: 100px; background-color: green;"></div>
<div id="element3" style="height: 100px; width: 100px; background-color: blue;"></div>
<div id="element4" style="height: 100px; width: 100px; background-color: yellow;"></div>
<div id="element5" style="height: 100px; width: 100px; background-color: pink;"></div>
Is there a term for this? I guess the 'thing' that I'm talking about, in sentence form, is: "dynamically targetting an object in a loop by name using the incramenting loop variable as a part of the variable name you're targetting".
Probably explaining this poorly. Does anyone understand what I'm asking, and is there a 'term' for this in programming?
The phrase that most programmers will understand is "dynamic variable name".
Related
So I want to put the two divs next to each other and the one below in the code gets put into the one above and I have no idea why.
HTML:
<body>
<div id="links">
<h1 id="title">Webcam</h1>
<?php
$dateinamen = 'pictures/Live.jpg';
$timestamp = filemtime($dateinamen);
$time = time();
$diff = $time -$timestamp;
// Wenn Bild jünger als 10sec
if ($diff < 10){
echo "<img src='pictures/Live.jpg'";
}
else {
echo "<img src='pictures/oops.jpg'";
}
?>
</div>
<div id="rechts">
<h2>Ping</h2>
<?php
$host1="192.168.1.1";
exec("ping -c 1 -w 1 " . $host1, $output1, $result1);
if ($result1 == 0) {
echo "<h3 id='sw1'style='background-color: green';>Router</h3></br>";
}else {
echo "<h3 id='sw1'style='background-color: red';>Router</h3></br>";
}
?>
</div>
</body>
CSS:
#links{
float: left;
width: 50%;
}
#rechts{
float: right;
width: 50%;
margin-top: 7%;
}
Haven't found any cases like these so I don't know if it's a problem with xampp or something else.
EDIT
Photo in inspection mode in Google Chrome
You didn't close the img tag used in the PHP code.
use <img src='pictures/Live.jpg'>
Try to check by removing margin-top:7%; form this class
#rechts {
float: right;
width: 50%;
// margin-top: 7%; remove this line
}
Try using flexbox instead.
#container {
display: flex;
}
#links{
flex: 1;
background-color: blue;
height: 500px;
}
#rechts{
flex: 1;
background-color: red;
height: 500px;
}
<body>
<div id="container">
<div id="links">
<h1 id="title">Webcam</h1>
</div>
<div id="rechts">
<h2>Ping</h2>
</div>
</div>
</body>
Seems like I just got trolled...
I just switched the two divs around (using the Flexbox solution proposed by Michał Drabik) and it worked...
I'd like to add a box containing smileys icons above the comment area which opens using jQuery on click. What I come up with is this:
<div class="emo">
<i href="#" id="showhide_emobox"> </i>
<div id="emobox">
<input class="emoticon" id="icon-smile" type="button" value=":)" />
<input class="emoticon" id="icon-sad" type="button" value=":(" />
<input class="emoticon" id="icon-widesmile" type="button" value=":D" /> <br>
</div>
</div>
css:
.emoticon-smile{
background: url('../smileys/smile.png');
}
#icon-smile {
border: none;
background: url('../images/smile.gif') no-repeat;
}
jQuery:
// =======show hide emoticon div============
$('#showhide_emobox').click(function(){
$('#emobox').toggle();
$(this).toggleClass('active');
});
// ============add emoticons============
$('.emoticon').click(function() {
var textarea_val = jQuery.trim($('.user-comment').val());
var emotion_val = $(this).attr('value');
if (textarea_val =='') {
var sp = '';
} else {
var sp = ' ';
}
$('.user-comment').focus().val(textarea_val + sp + emotion_val + sp);
});
However I have difficulty placing buttons in a nice array and make background image for them (the button values appear before image and the array is not perfectly rectangular. So I'm wondering maybe this is not the best way to render this box.
Any ideas to do this properly?
First show images, on hover hide image and show text. No need for input elements to get text of Dom Node
Something like this:
$(document).ready(function() {
$(".wrapper").click(function() {
var value = $(this).find(".smily-text").text();
console.log(value);
alert("Smily text is '" + value + "'");
});
});
.smily {
background: url(http://www.smiley-lol.com/smiley/manger/grignoter/vil-chewingum.gif) no-repeat center center;
width: 45px;
height: 45px;
}
.smily-text {
display: none;
font-size: 20px;
text-align: center;
line-height: 45px;
height: 45px;
width: 45px;
}
.wrapper {
border: 1px solid red;
float: left;
cursor: pointer;
}
.wrapper:hover .smily {
display: none;
}
.wrapper:hover .smily-text {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="smily"></div>
<div class="smily-text">:)</div>
</div>
<div class="wrapper">
<div class="smily"></div>
<div class="smily-text">:(</div>
</div>
<div class="wrapper">
<div class="smily"></div>
<div class="smily-text">:]</div>
</div>
<div class="wrapper">
<div class="smily"></div>
<div class="smily-text">:[</div>
</div>
I have a container in which I would like to display items as though they were in two columns.
Each item has a different height because the content in it varies.
This is currently what it looks like:
I would like to remove the extra space between items vertically to look closer to this:
so that it looks as though the items are stacking.
A link to my sample code:
http://plnkr.co/edit/oc1XT4ia9GdIc4rzZ41Q?p=preview
As the question is using AngularJS this answer is compatible with that.
You'll need to create a divs wrapping around the repeat, and a repeat for each column you want, and then display or hide elements in there by ng-show="($index)%2==columnIndex".
Then float the two wrapping divs, and add a standard clearfix to the 1px solid black container so it wraps around the floating elements.
'use strict';
var app = angular.module( 'myApp', [] );
app.controller( 'myCtrl', [ '$scope', function ( $scope ){
$scope.value = 'test';
$scope.items = [];
var count = 10;
for(var i=0; i<count; i++){
var item = {
height: Math.round(Math.random()*30) + 20
};
$scope.items.push(item);
}
}] );
.itemContainer {
display: block;
width: 80%;
border: 1px solid black;
padding: 10px;
}
.item {
border: 1px solid blue;
padding: 5px;
margin: 1px;
display: block;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class='itemContainer clearfix'>
<div style="display:inline-block; float:left; width:40%;">
<div class="item" ng-repeat="item in items" style="height: {{item.height}}px" ng-show="($index)%2==1" >
{{item}}
</div>
</div>
<div style="display:inline-block; float:left; width:40%;">
<div class="item" ng-repeat="item in items" style="height: {{item.height}}px" ng-show="($index)%2==0" >
{{item}}
</div>
</div>
</div>
</body>
</html>
You can do a repeat around the repeat wrapping float:left elelements, and specify how many columns you want, and if you want dynamic resizing of columns youll have to watch for resizes and change the column size with it.
To prevent the double processing issue you'd ideally use a filter, and not ng-show.
In the future hopefully we can use the flexible boxes layout module without breaking it for certain browsers.
Just for the record. This is an HTML and CSS-only version of one approach to achieve this.
HTML:
<div id="LeftColumn">
<div class="left_cell">Just</div>
<div class="left_cell">The</div>
<div class="left_cell"></div>
<div class="left_cell"></div>
</div>
<div id="RightColumn">
<div class="right_cell">For</div>
<div class="right_cell">Record</div>
<div class="right_cell"></div>
<div class="right_cell"></div>
</div>
CSS:
#LeftColumn {
width: 200px;
float: left;
}
#RightColumn {
width: 200px;
float: left;
margin-left:4px;
}
.left_cell {
width:200px;
height:30px;
border: 1px solid blue;
margin-bottom:2px;
}
.right_cell {
width:200px;
height:42px;
border: 1px solid blue;
margin-bottom:2px;
}
Check the fiddle here. As you can see, the thing is just to put the contents of each column on separate div elements, and float the two divs.
You can use the new flex display method to achieve this.
HTML
<div >
<div style="height: 45px;"></div>
<div style="height: 31px;"></div>
<div style="height: 31px;"></div>
<div style="height: 34px;"></div>
<div style="height: 27px;"></div>
<div style="height: 23px;"></div>
<div style="height: 41px;"></div>
<div style="height: 34px;"></div>
<div style="height: 48px;"></div>
<div style="height: 47px;"></div>
</div>
CSS
body > div {
height: 220px;
padding: 1px;
display: flex;
flex-flow: column wrap;
border: 1px solid;
}
body > div > div {
border: 1px solid blue;
margin: 1px;
}
After a bit of research, I see that it is indeed difficult to do with just CSS, so I wrote a small AngularJS directive to do some of the processing.
Demo Here: http://plnkr.co/edit/UyRS0clrCwDpSrYgBsXS?p=preview
var app = angular.module( 'myApp', [] );
app.controller( 'myCtrl', [ '$scope', function ( $scope ){
$scope.value = 'test';
$scope.items = [];
var count = 20;
for(var i=0; i<count; i++){
var item = {
height: Math.round(Math.random()*30) + 20,
value: Math.round(Math.random()*30) + 20
};
$scope.items.push(item);
}
}] );
app.directive('columns', function(){
return {
restrict: 'E',
scope: {
itemList: '=',
colCount: "#"
},
link: function(scope, elm, attrs) {
//console.log(scope.itemList);
var numCols = 3;
var colsArr = [];
for(var i=0; i< numCols; i++){
colsArr.push(angular.element("<div class='column'>Col "+(i+1)+"</div>"));
elm.append(colsArr[i]);
}
angular.forEach(scope.itemList, function(value, key){
var item = angular.element("<div class='item' style='height:"+value.height+"px;'>"+value.value+"</div>");
// find smallest column
var smallestColumn = getSmallestColumn();
angular.element(smallestColumn).append(item);
});
function getSmallestColumn(){
var smallestHeight = colsArr[0][0].offsetHeight;
var smallestColumn = colsArr[0][0];
angular.forEach(colsArr, function(column, key){
if(column[0].offsetHeight < smallestHeight){
smallestHeight = column[0].offsetHeight;
smallestColumn = colsArr[key];
}
});
console.log(smallestColumn);
return smallestColumn;
}
}
};
});
with this being the html:
<columns item-list="items" col-count='3' class='itemContainer'></columns>
I'm building a single page which consists of a list (of div's) on the left and a grid (of div's) on the right. I would like to add the ability for a user to click and drag one of the list items and drop it over one of the grid boxes. I'm not using HTML5, but I know it comes with this native capability. I'm trying to avoid HTML 5 at the moment.
The above illustration shows my basic page layout and the red line shows how things will be dragged/dropped. Any of the list items may be dragged into any of the grid boxes. The grid cells are dynamically sized (resizing the page will resize the grid cells) to where everything always fits in the page at any given time, no scroll bars. Each grid cell has an index starting from 0, counting from left-to-right then top-to-bottom. I need to pair the list item ID (could be any number) with its corresponding grid cell index (0-8 in this case).
I don't know even the first thing I need to do to make this drag/drop possible. I just know the very core basics of HTML - so I need some example to demonstrate this, not just some brief explanation of use this and that, because I won't know what this and that means. All the tutorials I can find are related to either HTML 5 in particular or related to just moving a list item within the same list - but in my case I need to move it outside the list.
Here's the page structure which I am working with below. Note that the list items are dynamically added upon page load...
<!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>
<title>View Cameras</title>
<script type="text/javascript" language="javascript">
var selIndex = 0;
var lastListIndex = 0;
function selBox(index) {
document.getElementById('b' + selIndex).style.backgroundColor = "Black";
selIndex = index;
document.getElementById('b' + selIndex).style.backgroundColor = "Blue";
}
function pageload() {
AddListItem('rtsp://192.168.1.1', 'Test Item 1');
AddListItem('rtsp://192.168.1.2', 'Test Item 2');
AddListItem('rtsp://192.168.1.3', 'Test Item 3');
selBox(0);
camload('');
selBox(1);
camload('');
selBox(2);
camload('');
selBox(3);
camload('');
selBox(4);
camload('');
selBox(5);
camload('');
selBox(6);
camload('');
selBox(7);
camload('');
selBox(8);
camload('');
selBox(0);
}
function AddListItem(address, caption) {
lastListIndex += 1;
var i = lastListIndex;
var h = '<div id="camlistitem' + i + '" class="camlistitem" onclick="camload(\''+address+'\')">';
h += caption;
h += '</div>';
document.getElementById('divCamList').innerHTML += h;
}
function camload(addr) {
var h = '';
if (addr == '') {
h = '<div style="width: 100%; height: 100%; text-align: center; vertical-align: middle;">';
h += ' <img src="Cam.jpg" style="width: 100px; height: 80px;" alt="No Camera Selected"';
h += '</div>';
} else {
h = '<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" ';
h += 'id="player'+selIndex+'" events="True" style="width: 100%; height: 100%;">';
h += '<param name="Src" value="' + addr + '" />';
h += '<param name="ShowDisplay" value="True" />';
h += '<param name="AutoLoop" value="False" />';
h += '<param name="AutoPlay" value="True" />';
h += '<embed id="vcl' + selIndex + '" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" ';
h += 'autoplay="yes" loop="no" target="' + addr + '" style="width: 100%; height: 100%;"></embed></OBJECT>';
}
document.getElementById('divContent' + selIndex).innerHTML = h;
}
</script>
<style type="text/css">
body
{
height: 100%;
}
* { margin: 0px; border: 0px; padding: 0px; }
h3
{
font-size: 14px;
font-weight: bold;
}
div.title
{
height: 40px;
box-sizing: border-box;
overflow: hidden;
}
div.main
{
height: 100%;
}
div.contentmain
{
top: 40px;
bottom: 0;
left: 250px;
right: 0;
overflow: hidden;
position: absolute;
}
div.side
{
top: 40px;
bottom: 0;
width: 250px;
position: absolute;
background: lightgrey;
}
.matrix
{
display: table;
width: 100%;
height: 100%;
}
.row
{
display: table-row;
}
div.contentbox
{
display: table-cell;
width: 33%;
}
table.selecttable
{
width: 200px;
height: 100%;
}
td.selecttable
{
text-align: center;
cursor: pointer;
color: White;
}
div.camlist
{
}
div.camlistitem
{
background-color: Navy;
color: White;
cursor: pointer;
margin-top: 1px;
padding-left: 5px;
}
div.camlistitem:hover
{
background-color: Blue;
}
</style>
</head>
<body onload="pageload()">
<div id="divTitle" class="title">
<h1>View Cameras</h1>
</div>
<div id="divMain" class="main">
<div class="side">
<h3>1) Click box to select view:</h3>
<div style="position: relative; float: left; width: 100%;">
<table class="selecttable" border="1px">
<tr>
<td class="selecttable" id="b0" onclick="selBox(0);" style="background-color: Black;">0<br /></td>
<td class="selecttable" id="b1" onclick="selBox(1);" style="background-color: Black;">1<br /></td>
<td class="selecttable" id="b2" onclick="selBox(2);" style="background-color: Black;">2<br /></td>
</tr>
<tr>
<td class="selecttable" id="b3" onclick="selBox(3);" style="background-color: Black;">3<br /></td>
<td class="selecttable" id="b4" onclick="selBox(4);" style="background-color: Black;">4<br /></td>
<td class="selecttable" id="b5" onclick="selBox(5);" style="background-color: Black;">5<br /></td>
</tr>
<tr>
<td class="selecttable" id="b6" onclick="selBox(6);" style="background-color: Black;">6<br /></td>
<td class="selecttable" id="b7" onclick="selBox(7);" style="background-color: Black;">7<br /></td>
<td class="selecttable" id="b8" onclick="selBox(8);" style="background-color: Black;">8<br /></td>
</tr>
</table>
</div>
<h3>2) Select cam to show in selected box:</h3>
<div style="position: relative; float: left; width: 100%;">
<div id="divCamList" class="camlist">
<div id="camlistitem0" class="camlistitem" onclick="camload('')">
[No Camera]
</div>
</div>
</div>
<h3>3) Can't see the cameras? Click Here.</h3>
</div>
<div class="contentmain">
<div class="matrix">
<div class="row">
<div class="contentbox" id="divContent0"></div>
<div class="contentbox" id="divContent1"></div>
<div class="contentbox" id="divContent2"></div>
</div>
<div class="row">
<div class="contentbox" id="divContent3"></div>
<div class="contentbox" id="divContent4"></div>
<div class="contentbox" id="divContent5"></div>
</div>
<div class="row">
<div class="contentbox" id="divContent6"></div>
<div class="contentbox" id="divContent7"></div>
<div class="contentbox" id="divContent8"></div>
</div>
</div>
</div>
</div>
</body>
</html>
PS - there will be a missing picture Cam.jpg
UPDATE
Thanks to the help of roflmao's effort on the answer below, I got everything working fine now. Just a glitch where when I drag an item, it highlights everything on the page, but that's another story.
Okay, so the first thing you'll want to do right off the bat is use a javascript library, either jQuery or Prototype (jQuery being the more popular one). Manipulating standard JS the way you are is begging for cross-browser compatibility issues.
Once you've put in jQuery, you can just use the jQuery UI library and use the draggable and droppable interfaces. Check this page out.
The code will look something like this:
http://jsfiddle.net/CZNhP/21/
$(function() {
$("#menu li").draggable({reset: true});
$("#container").droppable({
drop: function(event, ui) {
// Here you instantiate your media object.
// You can access the place your object was dropped on with
// "this" and the draggged item with "ui.draggable"
}
});
});
I have an iframe in my HTML document and I'm having a bit of trouble.
I also have a URL bar (fixed position element) at the top of the page that should stay with the user as they scroll. That works fine. I'd like the iframe to fill the remaining space but not be covered up by the URL bar.
This is what I'm talking about. http://s75582.gridserver.com/Ls
How can I fix this so that the URL bar doesn't cover up part of the page? When I try setting padding in the body, it just creates an extra, annoying scroll bar.
Whilst you can't say ‘height: 100% minus some pixels’ in CSS, you can make the iframe 100% high, then push its top down using padding. Then you can take advantage of the CSS3 box-sizing property to make the padding get subtracted from the height.
This:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<title>test</title>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; }
#bar { height: 32px; background: red; }
iframe {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
border: none; padding-top: 32px;
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
</style>
</head><body>
<iframe src="http://www.google.com/"></iframe>
<div id="bar">foo</div>
<body></html>
Works on IE8, Moz, Op, Saf, Chrome. You'd have to carry on using a JavaScript fallback to make the extra scrollbar disappear for browsers that don't support box-sizing though (in particular IE up to 7).
It can be done without any Javascript, works in IE7
CSS:
body {
overflow-y: hidden;
}
#imagepgframe {
width: 100%;
height: 100%;
position: absolute;
}
#wrap {
width: 100%;
position: absolute;
top: 100px;
left: 0;
bottom: 0;
}
HTML:
<div id="wrap">
<iframe id="imagepgframe" frameBorder="0" src="http://en.wikipedia.org/wiki/Internet_Explorer_7"></iframe>
</div>
To build on top of bobince's answer:
Erik Arvidsson came up with a way to (kinda, sorta) add box-sizing support to IE6/IE7. However, his solution doesn't support units other than px. Like you, I needed a percentage height, so I added support for percents.
Once you've downloaded and unzipped the zip file, open boxsizing.htc and replace the following border/padding functions:
/* border width getters */
function getBorderWidth(el, sSide) {
if (el.currentStyle["border" + sSide + "Style"] == "none")
return 0;
var n = parseInt(el.currentStyle["border" + sSide + "Width"]);
return n || 0;
}
function getBorderLeftWidth() { return getBorderWidth((arguments.length > 0 ? arguments[0] : element), "Left"); }
function getBorderRightWidth() { return getBorderWidth((arguments.length > 0 ? arguments[0] : element), "Right"); }
function getBorderTopWidth() { return getBorderWidth((arguments.length > 0 ? arguments[0] : element), "Top"); }
function getBorderBottomWidth() { return getBorderWidth((arguments.length > 0 ? arguments[0] : element), "Bottom"); }
/* end border width getters */
/* padding getters */
function getPadding(el, sSide) {
var n = parseInt(el.currentStyle["padding" + sSide]);
return n || 0;
}
function getPaddingLeft() { return getPadding((arguments.length > 0 ? arguments[0] : element), "Left"); }
function getPaddingRight() { return getPadding((arguments.length > 0 ? arguments[0] : element), "Right"); }
function getPaddingTop() { return getPadding((arguments.length > 0 ? arguments[0] : element), "Top"); }
function getPaddingBottom() { return getPadding((arguments.length > 0 ? arguments[0] : element), "Bottom"); }
/* end padding getters */
Then replace updateBorderBoxWidth and updateBorderBoxHeight with the following:
function updateBorderBoxWidth() {
element.runtimeStyle.width = "";
if (getDocumentBoxSizing() == getBoxSizing())
return;
var csw = element.currentStyle.width;
var w = null;
if (csw != "auto" && csw.indexOf("px") != -1) {
w = parseInt(csw);
} else if (csw != "auto" && csw.indexOf("%") != -1) {
var origDisplay = element.runtimeStyle.display;
element.runtimeStyle.display = "none";
w = Math.max(0, (parseInt(element.parentNode.clientWidth) - (
getBorderLeftWidth(element.parentNode)
+ getPaddingLeft(element.parentNode)
+ getPaddingRight(element.parentNode)
+ getBorderRightWidth(element.parentNode)
)) * (parseInt(csw) / 100));
element.runtimeStyle.display = origDisplay;
}
if (w !== null) {
if (getBoxSizing() == "border-box") {
setBorderBoxWidth(w);
} else {
setContentBoxWidth(w);
}
}
}
function updateBorderBoxHeight() {
element.runtimeStyle.height = "";
if (getDocumentBoxSizing() == getBoxSizing())
return;
var csh = element.currentStyle.height;
var h = null;
if (csh != "auto" && csh.indexOf("px") != -1) {
h = parseInt(csh);
} else if (csh != "auto" && csh.indexOf("%") != -1) {
var origDisplay = element.runtimeStyle.display;
element.runtimeStyle.display = "none";
h = Math.max(0, (parseInt(element.parentNode.clientHeight) - (
getBorderTopWidth(element.parentNode)
+ getPaddingTop(element.parentNode)
+ getPaddingBottom(element.parentNode)
+ getBorderBottomWidth(element.parentNode)
)) * (parseInt(csh) / 100));
element.runtimeStyle.display = origDisplay;
}
if (h !== null) {
if (getBoxSizing() == "border-box") {
setBorderBoxHeight(h);
} else {
setContentBoxHeight(h);
}
}
}
Then just use the file as you would otherwise:
.border-box {
behavior: url("boxsizing.htc");
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
Here's a pretty thorough test I put together while developing my modifications:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>box-sizing: border-box;</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: yellow;
}
body {
padding-top: 50px;
padding-bottom: 50px;
}
p {
margin: 0;
}
#header, #footer {
height: 50px;
position: absolute;
width: 100%;
overflow: hidden;
}
#header {
background: red;
top: 0;
}
#footer {
background: blue;
bottom: 0;
}
#content {
width: 100%;
height: 100%;
border: none;
margin: 0;
padding: 0;
background: black;
color: white;
overflow: auto;
position: relative;
padding-top: 40px;
padding-bottom: 40px;
}
#nested-header, #nested-footer {
position: absolute;
height: 40px;
width: 100%;
background: #CCC;
}
#nested-header {
top: 0;
}
#nested-footer {
bottom: 0;
}
#nested-content-wrap {
height: 100%;
}
#nested-floater {
height: 100%;
float: left;
width: 100px;
}
#nested-content {
height: 100%;
background: green;
color: black;
overflow: auto;
position: relative;
}
#inner-nest {
height: 100%;
position: relative;
}
#inner-head {
height: 30px;
width: 100%;
background: #AAA;
position: absolute;
top: 0;
}
#inner-content {
padding-top: 30px;
height: 100%;
overflow: auto;
}
.border-box {
behavior: url("boxsizing.htc");
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.content-box {
behavior: url("boxsizing.htc");
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
}
legend {
color: black;
}
form {
margin: 1em 0;
}
.wrap {
height: 100px;
background: #000;
overflow: hidden;
}
.test {
width: 100px;
height: 100%;
background: #AAA;
border-color: #EEE;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 5px;
float: left;
}
.fill {
width: 100%;
height: 100%;
background: #CCC;
}
.gauge {
width: 99px;
background: white;
border-right: 1px solid green;
height: 100%;
float: left;
}
.notes {
background: #8FC561;
}
.clear {
clear: both;
}
/* 120px x 120px square; this will create a black 20px frame on the inside */
.boxtest-wrapper {
width: 100px;
height: 100px;
float: left;
background: black;
color: white;
margin: 1em;
padding: 20px;
}
#boxtest-4-container {
width: 100%;
height: 100%;
}
.boxtest {
width: 100%;
height: 100%;
background: white;
color: black;
border: 5px solid green;
overflow: hidden;
}
</style>
<script type="text/javascript">
function addBorderBox() {
var wrap1 = document.getElementById("wrap-1");
var wrap2 = document.getElementById("wrap-2");
var borderBox = document.createElement("div");
borderBox.className = "test border-box";
var borderBoxFill = document.createElement("div");
borderBoxFill.className = "fill";
var borderBoxContent = document.createTextNode("Generated border box fill");
borderBoxFill.appendChild(borderBoxContent);
borderBox.appendChild(borderBoxFill);
var gauge = document.createElement("div");
gauge.className = "gauge";
var gaugeText1 = "width: 100px";
var gaugeText2 = "height: 100%";
var gaugeText3 = "bottom should be visible";
gauge.appendChild(document.createTextNode(gaugeText1));
gauge.appendChild(document.createElement("br"));
gauge.appendChild(document.createTextNode(gaugeText2));
gauge.appendChild(document.createElement("br"));
gauge.appendChild(document.createTextNode(gaugeText3));
wrap1.appendChild(borderBox);
wrap2.appendChild(gauge);
}
</script>
</head>
<body id="body" class="border-box">
<div id="header">
<p>Header - 50px;</p>
</div>
<div id="content" class="border-box">
<div id="nested-header">
<p>Nested Header - 40px;</p>
</div>
<div id="nested-content-wrap">
<div id="nested-floater">
<p>Float - 100px;</p>
<ul>
<li>This element should never scroll.</li>
</ul>
</div>
<div id="nested-content">
<div id="inner-nest">
<div id="inner-head">
<p>Inner Head - 30px;</p>
</div>
<div id="inner-content" class="border-box">
<div style="float: right; ">
<p>The fourth square should look just like the other three:</p>
<div id="boxtest-wrapper-1" class="boxtest-wrapper">
<div id="boxtest-1" class="boxtest border-box"></div>
</div>
<div id="boxtest-wrapper-2" class="boxtest-wrapper">
<div id="boxtest-2" class="boxtest border-box"></div>
</div>
<br class="clear" />
<div id="boxtest-wrapper-3" class="boxtest-wrapper">
<div id="boxtest-3" class="boxtest border-box"></div>
</div>
<div id="boxtest-wrapper-4" class="boxtest-wrapper">
<div id="boxtest-4-container">
<!-- boxtest-4-container isn't special in any way. it just has width and height set to 100%. -->
<div id="boxtest-4" class="boxtest border-box"></div>
</div>
</div>
</div>
<p>Inner Content - fluid</p>
<ul>
<li>The top of the scrollbar should be covered by the “Inner Head” element.</li>
<li>The bottom of the scrollbar should be visible without having to scroll “Inner Head” out of view.</li>
</ul>
<p>Document Compat Mode:
<strong id="compatMode">
<script type="text/javascript">
var compatMode = document.compatMode;
if (compatMode != "CSS1Compat") {
document.getElementById("compatMode").style.color = "red";
}
document.write(compatMode);
</script>
</strong>
</p><br />
<div class="notes">
<h2>Notes</h2>
<ul>
<li>In IE6 and IE7 (and possibly IE8; untested), you'll notice a slight shift of contents that have <code>box-sizing</code> set to <code>border-box</code>. This is the amount of time it takes for box-sizing.htc to finish downloading.</li>
<li>This workaround is not live. Anything that causes a reflow or repaint will not currently trigger an update to widths and heights of <code>border-box</code> elements.</li>
<li>See http://webfx.eae.net/dhtml/boxsizing/boxsizing.html for the original solution to the IE6/IE7 <code>border-box</code> problem. box-sizing.htc has been modified to allow for percentage widths and heights.</li>
<li>To see what this example should look like without the use of box-sizing.htc, view it in Firefox or IE8.</li>
</ul>
</div>
<br class="clear" />
<form>
<fieldset>
<legend>DOM Update Test</legend>
<input type="button" value="Click to add border-box" onclick="addBorderBox(); " />
</fieldset>
</form>
<div id="wrap-1" class="wrap">
<div class="test content-box" id="content-box-1" style="border-width: 5px; border-style: solid;">
<div class="fill">Content box fill</div>
</div>
<div class="test content-box" id="content-box-2" style="border-width: 5px; border-style: solid; padding: 5px;">
<div class="fill">Content box fill</div>
</div>
<div class="test border-box" id="border-box-1" style="border-width: 5px; border-style: solid;">
<div class="fill">Border box fill</div>
</div>
<div class="test border-box" id="border-box-2" style="border-width: 5px; border-style: solid; padding: 5px;">
<div class="fill">Border box fill</div>
</div>
<div class="test" id="default-box-1" style="border-width: 5px; border-style: solid;">
<div class="fill">Default box fill</div>
</div>
<div class="test" id="default-box-2" style="border-width: 5px; border-style: solid; padding: 5px;">
<div class="fill">Default box fill</div>
</div>
</div>
<div id="wrap-2" class="wrap">
<!-- subtract 1 from width for 1px right border -->
<div class="gauge" style="width: 129px;">width: 130px<br />height: 100%<br />bottom should be cut off</div>
<div class="gauge" style="width: 119px;">width: 120px<br />height: 100%<br />bottom should be cut off</div>
<div class="gauge">width: 100px<br />height: 100%<br />bottom should be visible</div>
<div class="gauge">width: 100px<br />height: 100%<br />bottom should be visible</div>
<div class="gauge" style="width: 129px;">width: 130px<br />height: 100%<br />bottom should be cut off</div>
<div class="gauge" style="width: 119px;">width: 120px<br />height: 100%<br />bottom should be cut off</div>
</div>
<br class="clear" />
<script type="text/javascript">
var lipsum = "<p>Lorem ipsum dolor sit amet.</p>";
for (var i = 0; i < 100; i++) {
document.write(lipsum);
}
</script>
</div>
</div>
</div>
</div>
<div id="nested-footer">
<p>Nested Footer - 40px;</p>
</div>
</div>
<div id="footer">
<p>Footer - 50px;</p>
</div>
</body>
</html>
If by covering up part of the page, you mean the page displayed in the iframe, one thought might be to add a top margin to your iframe, using the margin-top: property in CSS. This would eliminate the scroll bar given that you properly constrained the height of the iframe.
Android Kotlin Answer
For example, I am using padding for iFrame of WebView in this way:
val url = "www.stackoverflow.com"
val iframeExample = "<html><body style=\"margin: 0; padding: 0\"><iframe width=\"100%\" src=\"$url\" frameborder=\"0\" allowfullscreen></iframe></body></html>"
webView.loadData(iframeExample, "text/html", "utf-8")