I am trying to fit a canvas element into a table cell with no padding at all, i.e. I want no margins between my canvas and top/bottom of the cell. Therefore, I define row height as 20px and canvas height as 20px. I also use padding:0px styling. However, I get no padding only from top and left and I still do get padding at the bottom. In fact, it looks like the table cell gets taller in order to accommodate for the undesired margin. How can I resolve it?
Also, what is the difference between defining canvas width and height in HTML and CSS? Will one override the other?
Below is my HTML code.
Thanks.
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<title>experiment</title>
<body>
<script>
$(function() {
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(0,0,20,20);
$("#my_table > tbody > tr:eq(0) > td:eq(0)").append($("#my_canvas"));
})
</script>
</head>
<style media="screen" type="text/css">
.my_cell {height:20px; width:100px; padding:0}
.my_canvas {height:20px; width:20px}
</style>
<table id="my_table" border="1" cellspacing="0" cellpinserting="0">
<tbody>
<tr><td class="my_cell"></td></tr>
</tbody>
</table>
<canvas id="my_canvas" class="my_canvas" width="20" height="20"></canvas>
</body>
</html>
Try adding the following to the canvas's style:
display : block;
Demo: http://jsfiddle.net/S7YJu/
You can see why if you look at this: http://jsfiddle.net/S7YJu/1/ - by default the canvas displays inline which means it lines up in a way that leaves space for the bottom of letters like "y" or "p" to hang beneath...
Despite your question has been already answered i would like to point the following.
Canvas element are treated very like inline elements despite the seem to be block level elements, similar to how an image element is treated. To fix your problem you have to set the style rule display to block for canvas.
with the best of intentions i would like to give you some advice :
1 You omitted th opening body tag.
2 Is recomended to put script tags at bottom.
4 Use divs instead of table elements when possible.
5 You don't always use Jquery selectors...
i.e.
document.getElementById('my_canvas');
Copy ->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.my_cell {width:100px; }
.my_canvas {display: block;height:20px; width:20px; background-color: red}
</style>
</head>
<body>
<table id="my_table" border="1" cellspacing="0" cellpinserting="0" cellpadding="0">
<tbody>
<tr>
<td class="my_cell"></td>
</tr>
</tbody>
</table>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
$(document).ready(function () {
$(".my_cell").html('<canvas class="my_canvas" width="20" height="20"></canvas>');
});
var canvas = $('.my_canvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(0,0,0,20,20);
</script>
</body>
</html>
Related
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table id="over" style="background-color:yellow;position:absolute;top:0px;left:0px">
<tr>
<td>xxxxxxx</td>
</tr>
<tr>
<td>yyyyyyy</td>
</tr>
</table>
<table id="t1">
<tr>
<th>head1</th>
<th>head</th>
<th>head</th>
</tr>
<tr>
<td>aaaaaaa</td>
<td>bbbbbbbbb</td>
<td>ccccccc</td>
</tr>
<tr>
<td>aaaaaaa</td>
<td>bbbbbbbbb</td>
<td>ccccccc</td>
</tr>
</table>
<script>
tab = document.getElementById('t1');
rect = tab.rows[1].getBoundingClientRect();
over = document.getElementById('over');
over.style.left = rect.left + 'px';
over.style.top = rect.top + 'px';
</script>
</body>
</html>
I want to overlay part of a table t1, with another table, overlay,by positioning the overlay table using the absolute position of top/left of the first row, in table t1.
The given position of the first row form t1 is correct in Chrome, but off by +1
in Firefox for top/left.
Firefox gives this
Chrome this:
If you run the above code you will see the offset in Firefox and Edge.
In Chrom, Opera and Brave you will not see the offset.
This is annoying as I need exact positions for what I want to achieve.
Any Ideas ?
Regards
I have entered a defect against Firefox
Bug 1559098
The defect is meanwhile 'confirmed'.
Regards
Heinz
I have created the table using DataTable.
It looks like this:
What I want to do is to split them like this:
How can I achieve that with customized CSS?
My HTML looks like this:
<html>
<head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<link rel="stylesheet" href="http://cdn.datatables.net/colvis/1.1.2/css/dataTables.colVis.css">
<script type="text/javascript" language="javascript" src="./src/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="./src/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="./src/dataTables.colVis.min.js"></script>
<script>
$(document).ready(function() {
$('.sortable-table').DataTable( {
// Allow column selection, based on this
// https://datatables.net/extensions/colvis/
"dom": 'C<"clear">lfrtip',
// Except first column,
// it should stay.
// https://datatables.net/extensions/colvis/options
colVis:{exclude:[0]}
});
} );
</script>
<style>
body {
font-family: 'Helvetica Neue';
margin:150px;
}
img {
max-width:65%;
max-height:65%;
}
</style>
<title>Experiment 11</title>
</head>
<body>
<h2> G. Shared functional annotation</h2>
Here the functional analysis is scored with <tt>-log(Pvalue)</tt>.
<h3> LN </h3>
<table border="1" class="dataframe sortable-table display compact pure-table">
<thead>
<tr style="text-align: left;">
<th>GO</th>
<th>FOO</th>
<th>BAR</th>
</tr>
</thead>
<tbody>
<tr>
<td> regulation of response to wounding</td>
<td> 6.850</td>
<td> 11.975</td>
</tr>
</table>
</body>
</html>
As Per your example:
<div class="ColVis" >
<button class="ColVis_MasterButton">
<span>Show / hide columns</span>
</button>
</div>
This is your html for that button now we are applying css to it
.ColVis{
width:100%
}
button.ColVis_Button{
float:right
}
Provide Width 100% to your Colvis class and FLOAT:right to button.
Note :
If possible then apply new class for colvis and for button because if you change style of colVis then maybe it will change style in your other template or in your other layout so test it first.
example: http://jsfiddle.net/kevalbhatt18/urxk3q0z/2/
When you see output in jsfiddle first starch the size of output screen
so you can see proper output
Try adding this rule to your CSS:
div.ColVis {
float: right;
margin-bottom: 1em;
}
Okay, so after reviewing your code then hopping on the ColVis website and inspecting their search and show/hide button, I have come to the conclusion! I need to see your CSS because, at the moment, the way they have it is predefined to inherit from the parent class. So, if you want to adjust the predefined css then manipulate this: button.ColVis_Button, ul.ColVis_collection li, this is the class hierarchy they use to move the button around. Just add the !important tag to the things you need changed.
I am trying to duplicate Expanding Text Areas Made Elegant
Basically it explains how we can achieve something like fb comment box, where its size increases as text files the textarea.
I have this in my index.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="test.js"></script>
</head>
<body>
<figure>
<div class="expandingArea">
<pre><span></span><br></pre>
<textarea></textarea>
</div>
</figure>
</body>
</html>
And my test.js looks like:
This doesn't really works.
However if I move everything inside the js file to a script tag inside body then it works fine. So my index file would look like:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<figure>
<div class="expandingArea">
<pre><span></span><br></pre>
<textarea></textarea>
</div>
</figure>
<script>
function makeExpandingArea(container) {
var area = container.querySelector('textarea');
var span = container.querySelector('span');
if (area.addEventListener) {
area.addEventListener('input', function() {
span.textContent = area.value;
}, false);
span.textContent = area.value;
} else if (area.attachEvent) {
// IE8 compatibility
area.attachEvent('onpropertychange', function() {
span.innerText = area.value;
});
span.innerText = area.value;
}
// Enable extra CSS
container.className += ' active';
}var areas = document.querySelectorAll('.expandingArea');
var l = areas.length;while (l--) {
makeExpandingArea(areas[l]);
}
</script>
</body>
</html>
You're not actually using onload
Your formatting is so messed up it's hard to tell, but your init code is in a while loop at the bottom after your onload function.
When you include it in the <head> it runs before any elements exist. That's why the position of it matters.
In your browser(I recommend Chrome for testing) open up the developer tools(via right click and selecting inspect element) and make sure your test.js file's path is correct. Do this by selecting the 'Sources' tab on the top of the developer tools window and then selecting the test.js file on the list of sources.
I also consider it best practice to load your js files at the bottom of your web documents(before the last body tag) to guarantee they load AFTER your dom elements load.
try this in your code:
I have used inside a table andapply a css class "form-control". The properties of this text areas are in side tag in side
html code:
<html>
<body>
<table>
<tr>
<td>Description:</td>
<td><textarea name="DESCRIPTION" id="DESCRIPTION" class="form-control"></textarea></td>
<td></td>
</tr>
</table>
//css-code required inside html:
<style>
textarea.form-control {
height: auto;
resize: none;
width: 300px;
}
</style>
</body>
</html>
Following is the html-javascript code for setting the background image and background image.
<html>
<link rel="stylesheet" type="text/css" href="try2.css">
<body>
Choose the color<br>
<div class="foo" id="#13b4ff" style="background-color:#13b4ff;"></div>
<div class="foo" id="ab3fdd" style="background-color:#ab3fdd;"></div>
<div class="foo" id="ae163e" style="background-color:#ae163e;"></div>
<br><br>
<div id="myframe1" style="padding:5px;width:300px;height:400px;border:1px solid black;">
<p><img src="img-thing.png" style="width:200px;height:200px;"/><p>
</div>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$('.foo').click(function(){
var str1 = $(this).attr('id');
var myframe = document.getElementById('myframe1');
myframe.style.backgroundColor=str1;
myframe.style.width=300;
myframe.style.height=400;
});
});
</script>
<div><input type='file' onchange="readURL(this);" />
<img id="blah"/></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#myframe1').css({
'background':'url('+e.target.result +')',
'background-size':'310px 410px'
});
};
reader.readAsDataURL(input.files[0]);//To display images uncomment this
}
}
</script>
</body>
</html>
The CSS FILE FOR COLORS IS(just in case you need to look at that as well)
.foo {
float: left;
width: 20px;
height: 20px;
margin: 5px 5px 5px 5px;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
}
Now the problem is:
I want that user may click upload image option first and upload the image as a background. But once that is done it not allowing user to se color as a background. How to fix that? On the contrary if color is choosen and then image, image can override as background.I want that both must be able to override each other. For convenience I also the fiddle link : here Also one more issue in the fiddle, other colors are not showing up, but they are working in my html file.
First of all correct your id name of class foo . use # in all ids ok
next empty the background of the div while on clicking of color div by
myframe.style.background="";
: Here is your corrected working code now
I think you can achieve by adopting two DIVs, one of them is used to render background images and the other render background color.
By changing 'z-index' of DIV, you can display COLOR at top or bottom.
Hope this can help you .
The following code should work under mainstream browser.
Take a try.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<style>
#DivBgColor,#DivBgImage{
position:absolute;
left:100px;
top:100px;
width:300px;
height:300px;
}
#DivBgColor{background-color:red;z-index:2}
#DivBgImage{background-image: url(https://s.yimg.com/rz/l/yahoo_en-US_f_p_142x37.png);background-repeat: no-repeat;z-index:4}
</style>
<script language=javascript>
function makeColorAbove(){
var objColor = document.getElementById("DivBgColor");
var objImage = document.getElementById("DivBgImage");
objColor.style.zIndex=2;
objImage.style.zIndex=1;
}
function makeImageAbove(){
var objColor = document.getElementById("DivBgColor");
var objImage = document.getElementById("DivBgImage");
objColor.style.zIndex=1;
objImage.style.zIndex=2;
}
</script>
<body>
<div id="DivBgColor" ></div>
<div id="DivBgImage"></div>
<input type=button value="makeColorAbove" onclick="makeColorAbove()">
<input type=button value="makeImageAbove" onclick="makeImageAbove()">
</body>
</html>
I was trying to make a red bar (created with a div and a red background-color) that can extend from 0 pixels in width to 200 pixels in width. My code works when I insert a window.alert(x.width) in the function myF(), but the code doesn't give me a transition when I don't put it in. Is it just a problem with the setTimeout()?
<!DOCTYPE html>
<html>
<head>
<script>
function myF(){
var x = document.getElementById("bar1").style;
if(parseInt(x.width)<200){
x.width = (parseInt(x.width)+1)+"px";
setTimeout(myF(),1);
}
}
</script>
</head>
<body onload="myF()">
<div id="bar1" style="width:0px; text-align:center; height:10px;background-color:red; font-size:10px; padding:0px; margin:0px;"></div>
</body>
</html>
you should do :
setTimeout(myF,1);
instead of :
setTimeout(myF(),1);