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>
Related
new to stack overflow, so apologies if I'm missing something here.
Question 1: I've got this code that positions elements randomly within its parent - its woking great until I resize the screen. How would I do this responsively, so that the elements move within the parent container proportionally?
Question 2: Is there a way I could make sure that the dots don't overlap, and there's a specific amount of space between them - like padding / margins (the dots will all stay the same size if that helps). If I understand correctly this isn't possible with just CSS with my current setup.
All comments and suggestions are greatly appreciated!!
Here's my current code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>
*{
box-sizing: border-box;
}
.container{
margin: auto;
display: block;
width:90VW;
height:90VH;
border:1px solid grey;
position:relative;
}
.random{
position:absolute;
width:8px;
height:8px;
border-radius: 8px;
background-color: antiquewhite;
border: solid grey;
}
</style>
<script>
$( document ).ready(function() {
$( '.random' ).each(function() {
$holder = $(this).parent();
$divWidth = $holder.width();
$divHeight = $holder.height();
$(this).css({
'left': Math.floor( Math.random() * Number( $divWidth ) ),
'top' : Math.floor( Math.random() * Number( $divHeight ) )
});
})
});
</script>
</head>
<body>
<!--- ↓ ↓ M A I N C O N T E N T ↓ ↓ --->
<main>
<div class="container">
<a class="random" href="index.html"></a>
<a class="random" href="index.html"></a>
<a class="random" href="index.html"></a>
<a class="random" href="index.html"></a>
<a class="random" href="index.html"></a>
<a class="random" href="index.html"></a>
</div>
</main>
<!-------------------------------------->
</body>
</html>
TODO: Create an AngularJS directive to display list of images in an endless, smooth left to right scrolling loop. To keep it simple you can assume the fixed height/width for the images indicated above.the work should be done in the directive and styles without adding supporting libraries or plugins.
angular.module('myApp', [])
.controller('myCtrl', function ($scope) {
// list of images to scroll, each image is 280px x 200px
$scope.images = [
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost®%20Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost® Premium Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost® Convertible]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[GT Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[GT Premium Convertible]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[Shelby® GT350R]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[Shelby GT350®]/EXT/4/vehicle.png'];
})
.directive('myScroller', function () {
return {
// >> your directive code <<
};
});
.container {
width: 700px;
margin: 0 auto 100px;
padding: 20px;
overflow: hidden;
}
.container .image-list {
height:200px;
width:2240px;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div class="container">
<h1>Static Images</h1>
<div class="image-list">
<img ng-repeat="image in images" ng-src="{{image}}" />
</div>
</div>
<div class="container">
<h1>Scrolling Images</h1>
<!-- use my scroller directive, see script.js file for directions -->
<div my-scroller="images"></div>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Data Retrieve</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap.css">
<style>
#demo{
background-color:purple;
color: white;
width: 100%;
}
#home{
width: 45px;
}
#back{
width: 25px;
}
#header{
width:100%;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12">
<table id="info_table" class="table">
<tr>
<td id="header">
<p align="center"><span style="float: left"><img src="back.png" id="back"></span><b>মন্ত্রণালয়</b><span style="float: right"><img src="home.png" id="home"></span><span style="float: right"><img src="refresh.png" id="refresh"></span></p>
</td>
</tr>
<tr>
<td id="demo" align="center"><td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
<script>
var bn_num = new Array('০','১','২','৩','৪','৫','৬','৭','৮','৯');
function bn_num_convert(num){
//console.log(num.length);
var bn_val = '';
for(i=0;i<num.length;i++){
//console.log(num[i] + '/' + bn_num[num[i]]);
bn_val = bn_val + bn_num[num[i]];
}
//console.log(bn_val);
return bn_val;
}
$.getJSON("http://localhost/directory/ministri.json",function(obj){
var info ='';
//alert(obj.data.length);
var count = obj.data.length;
document.getElementById("demo").innerHTML ='মোট মন্ত্রণালয় ('+bn_num_convert(count.toString())+')';
var count = obj.data.length;
$.each(obj.data,function(key,value){
info += '<tr>';
info +='<td>'+value.sitename_bn+'<span style="float: right"> > </span>'+ '</td>';
info += '</tr>';
[This is the corresponding output of the code.][1]
});
$('#info_table').append(info);
});
</script>
Firstly here purple background color doesn't get the full wide.if i inspect the background there shows an empty td which cause the problem.if i delete the empty td then i get perfect result.but there is no empty td in my code.plz see the code and show me the error.
Secondly there is no horizontal line at the end of the output result.why last line doesn't get horizontal line?
You are not closing the td, thats why empty td is appending.
<td id="demo" align="center"></td>
Close the td like in above code
and remove margin and padding as other posts suggested in case if you want full width till ends.
Set body margin paddding to 0px
body {
padding: 0px;
margin: 0px;
}
Just put in demo id td, it will show.
See thishttps://jsfiddle.net/v6mwpz89/3/
Cheers!
I have got the following sample html.
Files variable is a simple array of integers, like [1,2,3,4,5,6]
<!doctype html>
<html ng-app="Application">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<!--<script src="../app.js"></script>
<script src="../Controller/applicationCtrl.js"></script>-->
<script>
var app = angular.module('Application', []);
var applicationCtrl = function ($scope) {
$scope.files = [1,2,3,4,5,6];
$scope.showAll = false;
};
app.controller('vm', applicationCtrl);
</script>
<style>
.J1 {
overflow-y: scroll;
height: 70px;
}
</style>
</head>
<body ng-controller="vm">
<div style="width: 100px;" ng-class="{'J1': (files.length > 3) && !showAll}">
<div ng-repeat="file in files" style="border-width: 1px; border-style: solid;">
<span>{{file}}</span>
<input type="button" value="{{'btn' + file}}"></input>
</div>
</div>
<br />
<div>
<a href ng-click="showAll = !showAll;">Show {{ showAll ? 'less':'more'}}</a>
</div>
</body>
</html>
If the length of files array is more than 3 then it adds the overflow css to the div. But I also set the height of the div to a fixed value. What I would like to do is to set the height of div based on the heights of the first 3 divs on the fly without setting a fixed value for it. How can I achieve this?
You may try this. I've added jquery CDN. You can do this with raw javascript though.
<!doctype html>
<html ng-app="Application">
<head>
<title></title>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script>
var app = angular.module('Application', []);
var applicationCtrl = function ($scope) {
$scope.files = [1,2,3,4,5,6];
/* Set the parent div's height */
$(function(){
$('.J1').height($('.each-button').outerHeight() * 3);
});
};
app.controller('vm', applicationCtrl);
</script>
<style>
.J1 {
overflow-y: scroll;
}
</style>
</head>
<body ng-controller="vm">
<div style="width: 100px;" class="J1">
<!-- new class has been added -->
<div class="each-button" ng-repeat="file in files" style="border-width: 1px; border-style: solid;">
<span>{{file}}</span>
<input type="button" value="{{'btn' + file}}"></input>
</div>
</div>
<br />
<div>
<a href>Show more</a>
</div>
</body>
</html>
The image should resize (up to max) but I need the navigation div to always be visible. At the moment it is being hidden when I resize the browser. Ideally it should move up with the image.
here is the code I have already. Also, is there a way of placing the image in the centre of the screen.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body style="margin:0;padding:0; height:100%">
<div style=" border:solid 1px green; ">
<img style="max-height:400px; height:100%;" src="../Images/img-02.jpg" />
</div>
<div style="border:solid 1px red;height:30px;position: relative;">navigation</div>
</body>
</html>
This can be rectified using some scripting
<html>
<head>
<script type = "text/javascript">
window.onload = function(){
var hVal = window.innerHeight;
if(hVal>434){
document.getElementById("test").height = 400;
}
else{
document.getElementById("test").height = hVal-34;
}
}
window.onresize = function(){
var hVal = window.innerHeight;
if(hVal>434){
document.getElementById("test").height = 400;
}
else{
document.getElementById("test").height = hVal-34;
}
}
</script>
</head>
<body style="margin:0;padding:0; height:100%">
<div style=" border:solid 1px green; ">
<img id="test" src="../Images/img-02.jpg" />
</div>
<div style="border:solid 1px red;height:30px;position: relative;">navigation</div>
</body>
</html>
I hope it works...!