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...!
Related
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>
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>
Using jQuery UI's Droppable I have made a shelf type thing where the items contained on it can be moved. Here's the code: http://jsfiddle.net/JoeyMorani/7LWj4/
Is it possible to actually change the HTML of the shelf, so when the '.boxArt' divs are moved, they are also moved in the HTML. At the moment it seems to only change the position of the div and not actually move it.
I want to do this so I can detect where the divs are. (What their parent div is)
Thanks for the help! :)
I made some changes to the HTML and CSS from your demo but I have something working. The HTML is simpler and has not affected the result, although if you need the previous layout my answer might not be totally right for you.
The full code is duplicated below as well as in a jsFddle demo. The code actually becomes a lot simpler after detaching the .boxArt and moving it in the DOM, since the animation just needs to change the top and left back to 0. The only difficult part was calculating the correct position to set the .boxArt to before animating. This is due to the draggable being relatively positioned to the element it was dragged from. As soon as it is moved in the DOM, this position is now completely incorrect. So the code works out and sets the draggable relative position to the new parent first (after moving it in the DOM) and then animates back to top:0,left:0.
This is working for me in Chrome but I have not tested in any other browsers. console.log left in to show what's going on.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style type="text/css">
.shelfRow {
width:1865px;
height:280px;
}
#shelves {
position:relative;
width:950px;
height:566px;
background:#CCC;
border:1px solid #333;
overflow-y:hidden;
overflow-x:auto;
}
.drop {
width:155px;
height:200px;
padding:2px;
margin-top:30px;
margin-left:25px;
float:left;
position:relative;
}
.dropHover {
padding:0px;
border:2px solid #0C5F8B;
-webkit-box-shadow: 0 0 3px 1px #0C5F8B;
box-shadow: 0 0 3px 1px #0C5F8B;
-moz-box-shadow: 0 0 20px #0C5F8B;
}
.boxArt {
width:155px;
height:200px;
-webkit-box-shadow: 0 0 8px 1px #1F1F1F;
box-shadow: 0 0 8px 1px #1F1F1F;
-moz-box-shadow: 0 0 20px #1F1F1F;
color:#000;
background:#FFF;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
var shelfOffset = $('#shelves').offset();
var dropMarginTop = parseInt($('.drop').css('marginTop'));
var dropMarginLeft = parseInt($('.drop').css('marginLeft'));
$('.drop').droppable({
accept: function(el) {
return $(this).children('.boxArt').length === 0 && el.hasClass('boxArt');
},
tolerance: 'intersect',
hoverClass: 'dropHover',
drop: function(event, ui) {
ui.draggable.detach().appendTo($(this));
var originalOffset = ui.draggable.data('originalOffset');
console.log('originalOffset', originalOffset.top, originalOffset.left);
var boxArt = $(this).children('div');
var boxPosition = boxArt.position();
console.log('boxArt position', boxPosition.top, boxPosition.left);
var container = $(this);
var containerPosition = container.position();
console.log(container, containerPosition.top, containerPosition.left);
var newTop = originalOffset.top + boxPosition.top - containerPosition.top - shelfOffset.top - dropMarginTop;
var newLeft = originalOffset.left + boxPosition.left - containerPosition.left - shelfOffset.left - dropMarginLeft;
console.log('new offset', newTop, newLeft);
boxArt.css({top:newTop,left:newLeft}).animate({top:0,left:0});
}
});
$('.boxArt').draggable({
start: function(event, ui) {
$(this).data('originalOffset', ui.offset);
},
revert: 'invalid'
});
});
</script>
</head>
<body>
<div id="shelves">
<div class="shelfRow">
<div class="drop"></div>
<div class="drop"><div class="boxArt" id="boxArt2">2</div></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div id="drop15"></div>
</div>
<div class="shelfRow">
<div class="drop"><div class="boxArt" id="boxArt1">1</div></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
</div>
</div>
</body>
</html>