Printing certain div is not working correctly - javascript

I am using datables plugin for drawing a table on my web app.
But here is the problem.
I have a print button which calls me this function:
function printHTML(clonedDive){
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
iframe.contentWindow.onunload = function(){
$("#submenu").show("fast");
$(".content-secondary").animate({
width: '15%'
});
$(".content-primary").animate({
width: '83%'
});
};
iframe.contentWindow.document.body.appendChild(clonedDive);
iframe.contentWindow.print();
document.body.removeChild(iframe);
}
This is how I call this function:
printHTML( document.getElementById("results").cloneNode(true));
now results div looks like this:
<div id="results">
<table id="stops" width="100%" border="1" cellspacing="2" cellpadding="5" >
<thead>
<tr class="even">
</tr>
</thead>
<tbody>
</tbody>
</table>
</br>
<hr>
<p id="title"><b>Map</b></p>
<div id="map_find">
</div>
</div>
So table is working like this: when you click on the row, the row got highlighted and map is shown. So problem is occurring when I click print button.
On the print preview I can see the table but the row is not highlighted and the Google map is not shown. It seems like it is showing me the div that is firstly initialized and there is not highlighted rows and Google maps is not shown.
What can I do?

Have you considered changing to use #media types?
#media print
{
*{
visibility: hidden;
}
#results{
visibility: visible;
}
}
You can set the visibility of everything you would like to not print with visibility: hidden and anything you would like to print with visibility: visible.
Then on click you would call:
window.print()
EXAMPLE WITH MEDIA TYPE
EXAMPLE WITHOUT MEDIA TYPE

Related

Need help aligning dynamic td element in html form

I have the following piece of code:
<tr>
<td style="display:none;" id="missing_person_report_label"><b>Enter image</b></td>
<td style="display:none;" id="missing_person_report_image"><input type="file"><br/></td>
</tr>
These td elements are initially set as hidden and are only displayed when I'm selecting the "Missing Person Report" option from the dropdown menu. The Javascript function to activate these td elements is given as:
function checkForChange(that) {
if (that.value == "missing_person_report") {
console.log(that.value);
console.log('person');
document.getElementById("missing_person_report_label").style.display = "block";
document.getElementById("missing_person_report_image").style.display = "block";
}
}
The code is doing as intended but there is a problem with the alignment of the tr element. This is the screenshot of the webpage.
I want the Choose file to have the same alignment as all the above elements,i.e. I want the Choose file to be on the right side of the Enter Image label . How do I do it?
Edit: Full Code is available here:
Edit: Those who are saying that I should assign the style to tr instead of td, I already tried doing this. If I do this, the webpage looks like this:
I want all the elements on the right to have the same alignment.
#Ronith.
Actially you their CSS as block, so that's why they are on separated lines. You should set display = "table-cell"
table {
width: 100%;
}
td {
display: table-cell;
}
<table>
<tr>
<td
id="missing_person_report_label"><b>Enter image</b></td>
<td
id="missing_person_report_image"><input type="file"></td>
</tr>
</table>
P.S.: do not pay attention that display is in CSS. It's just for instance. You should set it from JS code as you wish
display:block; makes a html element to take the full width of it's parent. So, you made tds to block level element they took all the width available and the upper one pushed the second one below.
Solution is not to change it's default display property. However try with inline-block or table-cell; which is the default property for tds inside a table.
The issue is because of display:block in javascript. set display: inline-block in your javascript code:
document.getElementById("missing_person_report_label").style.display = "inline-block";
document.getElementById("missing_person_report_image").style.display = "inline-block";
try this - apply display none to tr and not the td and from the function display block it again
<tr style="display:none;" id="missing_person_report_row">
<td><b>Enter image</b></td>
<td><input type="file"><br/></td>
</tr>
Function
function checkForChange(that) {
if (that.value == "missing_person_report") {
console.log(that.value);
console.log('person');
document.getElementById("missing_person_report_row").style.display = "block";
}
}

HTML show/hide parts of a table onclick of table headers

I have a nested HTML table. I would like to show parts of the nested table depending on the header clicked using javascript
http://jsfiddle.net/TtWTR/103/
so far it shows all three parts. I want to click header A and show only optionA, click headerB and only show optionB etc etc. Not sure if ive set it up right as all three are showing. thanks
To achieve expected result, use below option oh hide() and show() methods
$('.trigger').click(function() {
console.log($(this).text())
var selectedHdr = $(this).text();
$('.nested tr').hide();
$('.nested tr#'+selectedHdr).show();
});
https://codepen.io/nagasai/pen/vdabJQ
Usually I find it convenient to use CSS class selectors on the "root" element (in your case that would be .toptable) allowing you to toggle it to show and hide child elements.
<table class="toptable">
<tr class="accordion">
<td class="A trigger">A</td>
<td class="B trigger">B</td>
<td class="C trigger">C</td>
</tr>
<tr>
<td>
<table>
<tr class="content A">
<!-- will toggle using show-A -->
</tr>
</table
</td>
</tr>
</table>
Then you can make sure to hide the .content rows using CSS unless specific classes are set on the top table:
.content {
display: none; /* content hidden by default */
}
.show-A .A.content {
display: table; /* show when the parent table has .show-A set */
}
Now you just have to add event listeners to your triggers to toggle the classes for the different content rows:
const toptable = document.querySelector('.toptable');
['A', 'B', 'C'].forEach((group) => {
const trigger = document.querySelector(`.${group}.trigger`);
trigger.addEventListener('click', () => {
toptable.classList.toggle(`show-${group}`);
});
});
This can be done using the following script
$('.nested').hide();
$('tr .trigger').click(function() {
var target_id= "#"+$(this).attr('id')+"-table";
$('.nested').not(target_id).hide();
$(target_id).show();
});
and is shown in http://jsfiddle.net/TtWTR/152/

jQuery accordion menu, CSS HTML

what im trying to achieve is the following.
I have an accordion menu. Now I want to Build an accordion Menu(I call this now Top) inside an accordion Menu(I call this now Bottom).
Im doing this, to present loads of data from a database in a clean way.
Now im trying to adapt the accordion menu that I already got on this.
The data of both, top and bottom, are presented in tables. So first i builded tables inside tables.
If the users clicks on the first Element of each row, the “bottom” menu with the table should slide down.
HTML
<!-- 2016 -->
<div id="sh_details">
<div class="sh_wasserzeichen"></div>
<article>
<dl id="sh_accordion">
<dt id="sh_2016">Headline1</dt>
<dd><table>
<tr>
<th>Überschrift1</th>
<th>Überschrift2</th>
</tr>
<tr>
<td class="inhalt">Inhalt1</td>
<td>Inhalt2</td>
</tr>
<!-- Untertabelle1_1 -->
<td>
<table class="table2">
<tr>
<th>Sub_Überschrift1</th>
<th>Sub_Überschrift2</th>
</tr>
<tr>
<td>Sub_Inhalt1</td>
<td>Sub_Inhalt2</td>
</tr>
</table>
</td>
<tr>
<td class="inhalt">Inhalt3</td>
<td>Inhalt4</td>
</tr>
<!-- Untertabelle1_2 -->
<td>
<table class="table2">
<tr>
<th>Sub_Überschrift3</th>
<th>Sub_Überschrift4</th>
</tr>
<tr>
<td>Sub_Inhalt3</td>
<td>Sub_Inhalt4</td>
</tr>
</table>
</td>
</table></dd>
<dt id="sh_january">Headline2</dt>
<dd>125153226262</dd>
</dl>
</article>
</div>
CSS
/***************************************
************ Details *****************/
#sh_details {background-color:#fff;position: relative; top:0;left:0;width:100%; height: 100%; overflow:hidden;display:none;flex-direction: column;}
.table2 {display:none;}
/***************************************
************ Accordion *****************/
.sh_active {background-color:#ff6600; color:white;padding:0.7%; font-size:13px;}
article {position:absolute;color: black;width: 90%; height: auto;margin: 0 auto 0 auto;padding-top:75px;padding-left:75px;}
dt, dd {padding:0.5%;width: 50%; height:auto;float: left; margin:0;border-top:1px solid #222;}
dt {font-weight:bold;text-transform: uppercase; background-color:black; color:#ff6600; cursor:pointer;}
dt:first-child {border:none;}
dt:hover {background-color:#ff6600; color:white;padding:0.7%; font-size:13px;}
dd {background-color:#444; line-height:25px; word-spacing:3px;color:#999; display:none;}
**jQuery (only the accordion stuff) **
/*SUBTABLE*/ <<<---- not working
$(document).on('click', 'td', function (event) {
if($(this).hasClass('inhalt')) {
$(this).next('.table2').removeClass('table2');}
event.stopPropagation();
});
$('#sh_accordion dt').stop().click(function(){
<--- Working
if($(this).hasClass('sh_active')) {
$(this).removeClass('sh_active');
$(this).next().slideUp(300);
} else {
$(this).parent().children().removeClass('sh_active');
$(this).addClass('sh_active');
if($(this).next().is('dd')) {
$(this).parent().children('dd').slideUp(300);
$(this).next().slideDown(300);
}
}
});
https://jsfiddle.net/u4y2o270/1/ (dont know why the code is not working, i disabled the display:none's beacause of this)
So every "Sub..." Menu should be hidden by default. If i click on "Inhalt1", the first "bottom" menu should appear and so on.
Hide and Show the top Menu works fine (Headline1, Headline2), but not the bottom menu (table inside table)
Example: Default is this:
Headline1
Überschrift1 Überschrift2
Inhalt1 Inhalt2
Inhalt3 Inhalt4
User clicks "Inhalt1":
Headline1
Überschrift1 Überschrift2
Inhalt1 Inhalt2
Sub_Überschrift1 Sub_Überschrift2
Sub_Inhalt1 Sub_Inhalt2
Inhalt3 Inhalt4
//EDIT:
Start:
Everything is hidden, besides the Headlines (Headline1, Headline2) (this is already working, but not in the fiddle)+
It looks like this:
Headline1
Headline2
User is clicking on Headline1,
The user can only see the following:
Headline1
Überschrift1 Überschrift2
Inhalt1 Inhalt2
Inhalt3 Inhalt4
Headline2
The user is now clicking on "Inhalt1"
The user now sees this the following:
Headline1
Überschrift1 Überschrift2
Inhalt1 Inhalt2
Sub_Überschrift1 Sub_Überschrift2
Sub_Inhalt1_1 Inhalt2_2
Inhalt3 Inhalt4
Headline2
//EDIT2:
Updated the fiddle http://jsfiddle.net/u4y2o270/7/
This is what is working so far.
If the user is now under Headline1 clicking Inhalt1 the table under it should slideDown // should be showed, the table has the class .table2 which is by default on display:none to be hidden. My idea was, to find the next Item with class table2 and remove the class or slide it down. But its not working.
Same obv. for Inhalt3

How to disable all rows of HTML table?

[Not exactly the same as the question "how to disable knockout click...". My question involves specific usage of an HTML table and contains valuable approaches on solving such case.]
I have the following table and button below it:
<table>
<tbody data-bind="foreach: my-array">
<tr data-bind="click: $ShowDetails()">
...
<button>Add New Record</button>
The table rows are clickable (and would load some details data in another table).
On click of the button I need to disable all table rows and add one new <tr> on top.
I know how to add the new record on top:
$('<tr><td contenteditable="true">New Record Here</td></tr>').prependTo('table > tbody');
But how to disable all rows of the table so they won't be clickable and look disabled (grayed out)?
Just add disabled class to your <tr>'s using $("tr").addClass("disabled").
The grayed out backgroung can be added by using $('tr').css('background-color','grey') or by describing .disabled class in your css-file:
tr.disabled {
background-color: grey;
}
Then in your ShowDetails() method just check if calling element has the .disabled class by using $(this).hasClass("disabled") method. Show details if it doesn't and do nothing if it does.
Instead of checking the disabled class you can also add a new bool observable named AddMode() and set it to true on Add New button click, and on ShowDetails() put a first line if(AddMode() === true) return; (by #st_stefanov)
I used this CSS code to disable HTML row
.row-disabled {
background-color: rgba(236, 240, 241, 0.5);
pointer-events: none;
width: 100%;
}
$(function (){
var myDisableBtn = $('#btn');
myDisableBtn.on('click',function (){
$('tr').css({'pointer-events':'none',
'background-color':'grey'});
});
});
$(document).ready(function () {
$('#btn').click(function () {
$('#test_table tr').prop('disabled', 'disabled').css('background-color', 'grey');
$('#test_table tbody').prepend('<tr><td contenteditable="true">New Record Here</td></tr>')
});
});
<input type="button" id="btn" value="Add New Record"/>
<table style="width:100%" id="test_table">
<tbody>
<tr>
<td>Jill</td>
</tr>
<tr>
<td>Eve</td>
</tr>
</tbody>
</table>

Displaying table as pop up/ on the top of HTML

I have a link in my datalist
details
<table style="display: none; background-color:AntiqueWhite; border-color:Black;
direction:rtl;" class="MyTable">
<tr>
<td>
<asp:Label ID="lblShowHide" runat="server"
Text='<%#DataBinder.Eval(Container.DataItem,"Description")%>'></asp:Label>
</td>
</tr>
</table>
On click of the link I am displaying the assciated table related to the link by the below function:
<script type="text/javascript" language="javascript">
function showHideDesc(link)
{
var table = link.parentNode.getElementsByTagName("TABLE")[0];
if (table.style.display == "none")
{
table.style.display = "";
link.innerHTML = "details";
}
else
{
table.style.display = "none";
link.innerHTML = "details";
}
}
</script>
Till now it is working fine, but the issue arises that the description which I am showing is of 10-15 lines and the table is hiding because of the other records in the datalist. I need to show this on the top of every HTML.. some Pop up kind of stuff.
Please help
To display your table above other HTML content, you should use the z-index CSS attribute. This enables some kind of layering of your content.
Take a look at http://w3schools.com/css/css_positioning.asp for some more info

Categories

Resources