I'm trying to create a context menu for tables using javascript and bootstrap, but when I right click on a table that's in an editable div, I get some arrows that allow the user to add some new rows and columns. Is there anyway to remove them ?
I'm using Firefox
Thank you very much.
Update: link to the fiddle http://jsfiddle.net/toby3105/LSyC8/7/
<div id="context" data-toggle="context" data-target="#context-menu" contenteditable="true">
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
</div>
I don't think is has anything to do with bootstrap, i think i only has to do with Firefox. The z-index is 15000.
Apparently this does the trick.
document.designMode = "on";
document.execCommand("enableObjectResizing", false, "false");
document.execCommand("enableInlineTableEditing", false, "false");
Related
I am attempting to print payment receipt using thermal POS printer using Print.js library. I can successfully print the page using the printjs. But the print comes with extra margins as per A4 page.
Is there any way to print it to fit to 58mm with to page margins?
Also it would be very helpful if any alternatives to print using JavaScript are given. Following is my work.
HTML & JS
<button id="print-receipt">print to pos</button>
<div id="invoice-print-div" class="hidden">
<div class="text-center" style="width:58mm;background-color:red;">
<h4>alpha</h4>
<table border="0">
<tr>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
</tr>
<tr>
<td>abc</td>
<td>1</td>
<td>120</td>
</tr>
<tr>
<td>pqr</td>
<td>2</td>
<td>240</td>
</tr>
<tr>
<td>xyz</td>
<td>4</td>
<td>360</td>
</tr>
</table>
</div>
</div>
<script>
$("#print-receipt").on("click", function() {
printJS("invoice-print-div", "html");
});
</script>
1- Instead of using printJS() with the default two arguments, you can pass an object as argument so:
printJS('invoice-print-div', 'html'); should be replaced with:
printJS({printable: 'invoice-print-div', type: 'html',style: ['#page { size: A4; margin: 0mm;} body {margin: 0;} h4 {margin:0}'], targetStyles: ['*']});
Please note that when it comes to actual printing, the property style in the argument object is where you can pass your custom style that should be applied to the html being printed.
I have made a demo in stackblitz Please do check it out.
For more information you can check PrintJS configuration options
2- As you ask for some alternatives of PrintJS, You can checkout jsPDF Library and here some explanations about it.
I have this kind of Html and i want to get first <td> class, how can i do it?
<div class="className">My Class</div>
<table>
<tbody>
<tr>
<td>Value 1</td>
<td>Value 1</td>
</tr>
</tbody>
</table>
</div>
First of all i get the class
var Myclass = document.getElementsByClassName('className')[0];
Bu then i cannot figure out how should i navigate to td value.
If you want to stick to pure vanilla js, the simplest answer would probably be:
document.querySelector('.className td').innerHTML;
This is assuming your HTML is structured like below. It's kinda unclear since you have two closing div tags:
<div class="className">My Class
<table>
<tbody>
<tr>
<td>Value 1</td>
<td>Value 1</td>
</tr>
</tbody>
</table>
</div>
I've read through similar answers and cant figure out how to edit them to work with my own html. I have a table, and once the mouse hovers over a certain cell in the table text will appear in a white box to the right of the page. If anyone knows how to go about this using Javascript preferably (but anything that works will help) to get this to work that would be great. Here is a snippet of my code for the table, the cell I want to carry out the said event has a ID="blue1".
<tr>
<td>1</td>
<td id="blue1">
2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
here is the box I want the text to appear:
<div id="whitebox">
<script type= text/javascript>
</script>
</div>
This is the text I want to appear in #whitebox once #blue1 is hovered over -
" 2nd Meet John at 2 "
I Have fiddled around with various codes and can't get it to work.
You have to catch .hover() event and append text with .text().
$('#blue1').hover(function() {
$('#whitebox').text('2nd Meet John at 2');
}, function() {
$('#whitebox').text('whitebox');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td id="blue1">
2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
<div id="whitebox">
whitebox
</div>
Script could be placed in <head> ... </head> section of site using:
<script type="text/javascript">
$(document).ready(function() {
// script
});
</script>
I have this table that includes details about its items on the right and I need to have all the cells in a column of the exact same width as the longest one, just like in the screenshot below:
This works if I use a regular table, but now I need to add an accordion function on top of it, so when I click on a row, the row's associated content will slide down from under each one.
The only way to add those content divs between table rows is to wrap them in <tr> tags, which don't work with the slideDown() and slideUp() effects.
Now I recreated the table in a fiddle using <dl> tags, hoping to solve this using CSS somehow, but no such luck. Here's the link: http://jsfiddle.net/bbDYX/ - everything is working properly, except for the width issue.
The only solution I can think of now is going through each table-cell on each of the right hand columns with JavaScript and setting their width to the same value as the highest width cell. But I want to avoid that if I can.
Any ideas?
This is what you need: myjsfiddle
css:
.con1
{
width:100%;
height:50px;
background-color:#F3E2A9;
}
Html:
<table border='0' cellspacing='3' width='100%'>
<tr bgcolor='lightblue'>
<td><a href='#' class='open1' >Item</a></td>
<td>detail 1</td>
<td>detail 2</td>
<td>detail 3</td>
</tr>
<tr><td colspan='4'><div class='con1'>con1</div></td></tr>
<tr bgcolor='lightblue'>
<td><a href='#' class='open1' >Item</a></td>
<td>detail 1</td>
<td>detail 2</td>
<td>detail 3</td>
</tr>
<tr><td colspan='4'><div class='con1'>con1</div></td></tr>
<tr bgcolor='lightblue'>
<td><a href='#' class='open1' >Item</a></td>
<td>detail 1</td>
<td>detail 2</td>
<td>detail 3</td>
</tr>
<tr><td colspan='4'><div class='con1'>con1</div></td></tr>
</table>
Script:
$('.con1').hide();
$('.open1').click(function() {
$(this).parent().parent().next().find('.con1').slideToggle();
return false;
});
have fun styling it...
(tested)
You can't slide up the <tr> tag, but you can slide up the <td> tags. Not sure if this would work for you, but worth considering...
$("#somerow").find("td").slideToggle();
Ok, as I stated in a comment, I would keep the table and create a "custom widget" for the accordion-like effect.
The thing would be very simple, using jQuery UI animations etc.
For example, you can create a basic "description toggle" with just four lines of code:
$('.mytable .description').hide();
$('.mytable').on('click', '.title', function(){
$(this).next('.description').toggle();
});
(of course then you can customize the .toggle() by adding effect type, duration, ...)
Here it is a working example: http://jsfiddle.net/JAmFh/
I am trying to get these buttons to be even with my table, but it isn't working very well, they just sit at the bottom. For simplicity the styles are inline and the table is static (in reality this table is being dynamically populated with images).
<button id="lftArrow">«</button>
<table style="display:inline-table;border:0px;height:120px;">
<tr id="pictureSetDisplay" name="pictureSetDisplay">
<td>some picture</td>
<td>some picture</td>
</tr>
</table>
<button id="rgtArrow">»</button>
Any ideas what type of style I should apply to the buttons to get them to be sitting in the vertical middle of the table?
You can place the buttons as well inside a table - an outer table. But yes, this will involve one more table.
Check the fiddle: http://jsfiddle.net/FYV3m/3/
<table border="1"><tr>
<td valign="middle">
<button id="lftArrow" style="height:120px">«</button>
</td><td valign="middle">
<table style="display:inline-table;border:0px;height:120px;">
<tr id="pictureSetDisplay" name="pictureSetDisplay">
<td>some picture</td>
<td>some picture</td>
</tr>
</table>
</td><td valign="middle">
<button id="rgtArrow" style="height: 120px">»</button>
</td>
</tr></table>
You can remove the height style from the button (or CSS) as needed.
Set vertical-align: middle on the table itself, like shown in here: http://jsfiddle.net/hBZDT/1/
<button id="lftArrow">«</button>
<table style="vertical-align: middle; display:inline-table;border:solid 1px;height:120px;">
<tr id="pictureSetDisplay" name="pictureSetDisplay">
<td>some picture</td>
<td>some picture</td>
<td>some picture</td>
<td>some picture</td>
</tr>
</table>
<button id="rgtArrow">»</button>
Although possible, please avoid using HTML tables to layout elements on your website.
You might be able to do it with margin:auto
http://bluerobot.com/web/css/center1.html