I've this code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>testPage</title>
<style>
table td {
width: 50%;
}
</style>
</head>
<body>
<div id="titlebar">
<center>
Select option:
<select onchange="onSelect.call(this, event)">
<option value="one">One</option>
<option value="two">Two</option>
</select>
<script>
function onSelect(event) {
switch (this.options[this.selectedIndex].text) {
case "One":
var td = document.getElementById("one");
td.style.borderColor = "red";
td.style.borderWidth = "5px";
td.style.borderStyle = "solid";
td.style.width = "99%";
var td = document.getElementById("two");
td.style.borderColor = "black";
td.style.borderWidth = "1px";
td.style.borderStyle = "solid";
td.style.width = "100%";
break;
case "Two":
var td = document.getElementById("two");
td.style.borderColor = "red";
td.style.borderWidth = "5px";
td.style.borderStyle = "solid";
td.style.width = "99%";
var td = document.getElementById("one");
td.style.borderColor = "black";
td.style.borderWidth = "1px";
td.style.borderStyle = "solid";
td.style.width = "100%";
break;
}
}
</script>
</center>
</div>
<div id="images">
<table width="100%" height="100%" border=1 cellpadding=1>
<!-- first row -->
<tr id="row1">
<td id="xxx">
<div id="xxx_div" style="width:100%;height:370px"></div>
</td>
<td id="yyy">
<div id="one" style="width:100%;height:370px"></div>
</td>
</tr>
<!-- second row -->
<tr id="row2">
<td id="zzz">
<div id="zzz_div" style="width:100%;height:370px"></div>
</td>
<td id="kkk">
<div id="two" style="width:100%;height:370px"></div>
</td>
</tr>
</table>
</div>
<div id="bottom">
Bottom ...
</div>
</body>
</html>
that works fine, but if I rescale my browser page you can see that scrollbars appears (I know, I'm using absolute values for div height and the problem probably is about this, but it's only to show the problem ... ).
I'd like to obtain the same behaviour at this site
http://tools.geofabrik.de/mc/
where you can see that if you rescale the browser scale, no scrollbars appears and the maps (so the tables and its contents ... ), rescale ...
Suggestions / examples?
This is what you're looking for:
html, body {
min-height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
}
table {
width: 100vw;
height: 100vh;
}
td {
width: 50%;
height: 50%;
background: red;
}
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Of course, you might adapt your table size if you need to add inputs or text outside.
Just consider always occupying a total 100% of the visible area.
Related
I'm trying to center a card on the page and center the text within that card. Here is the CSS I've attempted below. And It seems to do nothing. I am trying to use JS for the first time with CSS. Confusion about where I'm messing up, so not entirely sure what part to isolate to share.
sample here: https://rrrhhhhhhhhh.github.io/sentences/
Thank you
CSS
.testclass {
font: 10px courier, courier new;
background: #ffffff;
z-index: 10;
layer-background-color: #ffffff;
}
#test {
position: absolute;
top: 10px;
left:10px;
padding: 0px;
}
#rel {
position: relative;
align: center;
}
html and js
}
function writit(text,id)
{
if (document.getElementById)
{
x = document.getElementById(id);
x.innerHTML = '';
x.innerHTML = text;
}
else if (document.all)
{
x = document.all[id];
x.innerHTML = text;
}
else if (document.layers)
{
x = document.layers[id];
l = (480-(getNumLines(text)*8))/2;
w = (764-(getWidestLine(text)*8))/2;
text2 = '<td id=rel align="center" CLASS="testclass" style="font:12px courier,courier new;padding-left:' + w.toString() + 'px' + ';padding-top:' + l.toString() + 'px' + '">' + text + '</td>';
x.document.open();
x.document.write(text2);
x.document.close();
}
}
function getNumLines(mystr)
{
var a = mystr.split("<br>")
return(a.length);
}
function getWidestLine(mystr)
{
if (mystr.indexOf(" ") != -1)
{
re = / */g;
mystr = mystr.replace(re,"Z");
//alert(mystr);
}
if (mystr.indexOf("<u>") != -1)
{
re = /<u>*/g;
mystr = mystr.replace(re, "");
re = /<\/u>*/g;
mystr = mystr.replace(re, "");
}
if (mystr.indexOf("<br>") != -1)
{
var ss, t;
var lngest;
ss = mystr.split("<br>");
lngest = ss[0].length;
for (t=0; t < ss.length; t++)
{
if (ss[t].length > lngest)
{
lngest = ss[t].length;
}
}
}
else {
lngest = mystr.length;
}
return(lngest);
}
// -->
</script>
<body bgcolor="gainsboro" onload="startup();">
<table bgcolor="white" border height="480px" width="764px" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table nowrap>
<tr>
<td><img width="700px" height="1px" src="./resources/images/w.gif"></td>
<td>
<div class="testclass" id="test"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<center>
<form>
<p>
<input type="button" onclick="doBack(); return false" value="Back">
<input type="button" onclick="doNext(); return false" value="Next">
</p>
</form>
</center>
</body>
</html>
Just notice this without js
.testclass {
font: 10px courier,courier new;
background: #ffffff;
z-index: 10;
layer-background-color: #ffffff;
}
#test {position: absolute;
top: 10px;
left:10px;
padding: 0px;
}
#rel {position: relative;
align: center;
}
.center-div{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
<!Doctype html>
<html>
<head>
<title>Robert Grenier - Sentences</title>
</head>
<body>
<div class="center-div">
<table bgcolor="white" border height="480px" width="764px" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table nowrap>
<tr>
<td><img width="700px" height="1px" src="./resources/images/w.gif"></td>
<td>
<div class="testclass" id="test"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<center>
<form>
<p>
<input type="button" onclick="doBack(); return false" value="Back">
<input type="button" onclick="doNext(); return false" value="Next">
</p>
</form>
</center>
</div>
</body>
</html>
I'm trying to create a table where each cell has additional description that is displayed underneath it on hover.
I want to display the description directly under the cell only when hovered.
The description should be left aligned with the cell unless it extends beyond the bounds of the table at which point it should become right aligned with the end of the table.
I have been able to make things left aligned however I have failed to find a way to ensure the description doesn't extend beyond the end.
The Code (https://jsfiddle.net/9en4v2as/3/):
.description {
display: none;
}
table {
position: relative;
}
td:hover .description {
display: block;
position: absolute;
white-space: nowrap;
background-color: red;
}
td:last-child:hover .description {
right: 0;
}
<table border=1>
<tr>
<td>
<div class="value">Value1</div>
<div class="description">Description of Value1</div>
</td>
<td>
<div class="value">Value2</div>
<div class="description">Description of Value2</div>
</td>
<td>
<div class="value">Value3</div>
<div class="description">Description of Value3</div>
</td>
<td>
<div class="value">Value4</div>
<div class="description">Unknown description length</div>
</td>
<td>
<div class="value">Value5</div>
<div class="description">Description of Value5</div>
</td>
<td>
<div class="value">Value6</div>
<div class="description">Description of Value6</div>
</td>
</tr>
</table>
With jquery
$(document).ready(function(){
//get width table
var w_table = $("table").width();
var w_description;
$("table td").hover(function(){
//sum width td
var w_td = 0;
//get hover position
var pos = $(this).index();
$("table td").each(function(i){
//sum width td until hover position
w_td = w_td + $(this).width();
if(i==pos)
return false;
});
//get description width
w_description = $(this).find(".description").width();
//if width description+width td > width table
if(w_description+w_td > w_table)
$(this).find(".description").css("right",w_table-w_td-30);
});
});
Test here
Hi i m using in my project a simple functionality.
i have a table and some data is fetch data in json file .
Data is coming and if i click to name than edit mode is on if i blur than hide the edit mode and show the view mode is fine i have do this .
now i have a update button if i click to this button than only updated data in insert next row how to do this please check to this and help me .
My code is this
var myApp = angular.module('myApp', []);
myApp.controller('myCntrl', function($scope, $http){
$http.get('js/list.json').success(function(data){
$scope.emplyeList = data;
});
$scope.updateSec= function(employe){
alert("Rohit");
}
});
.click{
cursor: pointer;
text-decoration: underline;
}
.normal-table{
width: 50%;
border-collapse: collapse;
}
.normal-table th{
border: solid 2px rgba(0,0,0,0.1);
}
.normal-table td{
border: solid 2px rgba(0,0,0,0.1);
text-align: center;
padding: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCntrl">
<body>
<table class="normal-table">
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employe in emplyeList">
<td>
<div ng-show="!data" ng-click="data=true" class="click">{{employe.name}}</div>
<div ng-show="data"><input ng-blur="data=false" type="text" ng-model="employe.name" /></div>
</td>
<td>
<div ng-show="!data">{{employe.ID}}</div>
<div ng-show="data"><input type="text" ng-model="employe.ID" /></div>
</td>
<td>
<div ng-show="!data">{{employe.add}}</div>
<div ng-show="data"><input type="text" ng-model="employe.add" /></div>
</td>
</tr>
<tr>
<td colspan="3">
<button ng-click="updateSec(employe)">Update</button>
</td>
</tr>
</tbody>
<tbody>
<tr ng-repeat="updatEm in employe">
<td>{{updatEm.name}}</td>
<td>{{updatEm.ID}}</td>
<td>{{updatEm.add}}</td>
</tr>
</tbody>
</table>
</div>
My Json file is
[
{"name":"Rohit", "ID":"5Rt", "add":"Delhi"},
{"name":"Kiran", "ID":"4Kn", "add":"UP"},
{"name":"Abhay", "ID":"3Ay", "add":"HR"},
{"name":"Rahul", "ID":"2Rl", "add":"UK"}
]
HTML
<tr ng-repeat="employe in emplyeList" ng-click="updateSec(employe)">
</tr>
<tr>
<td colspan="3">
<button ng-click="showData()">Update</button>
</td>
</tr>
<tr ng-if="showEmployee" ng-repeat="employe in modifiedEmplyee">
<td>{{employe.name}}</td>
<td>{{employe.ID}}</td>
<td>{{employe.add}}</td>
</tr>
Script
//Display list
$scope.showEmployee = false;
//Create an array to hold updated employee
$scope.modifiedEmplyee = [];
//Set updated field to identify updated employee
$scope.updateSec = function (employe) {
employe.updated = true;
$scope.showEmployee = false;
}
//Show data and copy modilfied list
$scope.showData = function () {
$scope.showEmployee = true;
$scope.modifiedEmplyee = [];
for(var i = 0; i< $scope.emplyeList.length; i++)
{
var emp = $scope.emplyeList[i];
if(emp.updated && emp.updated == true){
$scope.modifiedEmplyee.push(emp);
}
}
}
DEMO
I have a footer file which is rendered on every page (with the numerotation).
I'd like it not to be rendered on the first page. Do you have an idea ?
This is my code:
<html><head><script>
function subst() {
var vars={};
var x=document.location.search.substring(1).split('&');
for(var i in x) {var z=x[i].split('=',2);vars[z[0]] = unescape(z[1]);}
var x=['frompage','topage','page','webpage','section','subsection','subsubsection'];
for(var i in x) {
var y = document.getElementsByClassName(x[i]);
for(var j=0; j<y.length; ++j) y[j].textContent = vars[x[i]];
}
}
</script></head><body style="border:0; margin: 0;" onload="subst()">
<table style="border-bottom: 1px solid black; width: 100%">
<tr>
<td style="text-align:left"><font face="Century Gothic">
Page <span class="page"></span> sur <span class="topage"></span>
</font> </td>
</tr>
</table>
use this js in your script....first store page value in var and then use it to remove the footer.
your html code..set the page value either by ruby/js(any way you prefer)
<p id="page_value" data-value="<%= #page.value %>"></p>
after setting ,use it to remove the footer
<script type="text/javascript">
window.onload = function () {
var value= $("#page_value").data("value");
if (value==1){
$('#footer').remove()
}
}//if ends
</script>
..hope it helps...
I have created a table in div element in Javascript with some rows and columns
var parentElement = document.getElementById('divExcelData');
var tableElement = document.createElement('table');
tableElement.border = "1";
for (var r = 1; r <= 3; r++) {
var rowElement = document.createElement('tr');
for (var c = 1; c <= 2; c++) {
var colElement = document.createElement('td');
colElement.setAttribute("style", "width:80px; height:20px; border:1px solid Black;");
var divElement = document.createElement('div');
divElement.id = r + '_' + c;
divElement.contentEditable = "true";
divElement.style.width = "100%";
divElement.style.height = "100%";
colElement.appendChild(divElement);
rowElement.appendChild(colElement);
}
parentElement.appendChild(tableElement);
}
but problem is when I debug the page from Internet Explorer(9) developer tools it shows inner html of table element as...
<TABLE border=1>
<TR>\r\n
<TD>\r\n
<DIV style=\"WIDTH: 100%; HEIGHT: 100%\" id=1_1 contentEditable=true></DIV>
</TD>\r\n
<TD>\r\n
<DIV style=\"WIDTH: 100%; HEIGHT: 100%\" id=1_2 contentEditable=true></DIV></TD>
</TR>
\r\n
<TR>\r\n
<TD>\r\n
<DIV style=\"WIDTH: 100%; HEIGHT: 100%\" id=2_1 contentEditable=true></DIV>
</TD>
\r\n
<TD>
\r\n
<DIV style=\"WIDTH: 100%; HEIGHT: 100%\" id=2_2 contentEditable=true></DIV>
</TD>
</TR>
\r\n
<TR>
\r\n
<TD>
\r\n
<DIV style=\"WIDTH: 100%; HEIGHT: 100%\" id=3_1 contentEditable=true></DIV>
</TD>
\r\n
<TD>
\r\n
<DIV style=\"WIDTH: 100%; HEIGHT: 100%\" id=3_2 contentEditable=true>
</DIV>
</TD>
</TR>
</TABLE>
I don't know why \r\n is added in HTML and also style element contains (\") instead of ("). That's why the page shows nothing. This code works well in Chrome and Firefox.