I wish to print a document by passing custom html code.
The non-working code I have written :
function Clickheretoprint()
{
var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=780, height=780, left=100, top=25";
var content_vlue = document.getElementById("result_tbl").innerHTML;
var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write('<html><head><title>Ashley Mattresses</title>');
docprint.document.write('</head><body onLoad="self.print()"><center>');
docprint.document.write('<TABLE width="100%" cellpadding=10 align=center valign="top"><TR valign="top"><TD width = "33%" valign="top">col1</TD><TD width = "33%" valign="top">col2</TD><TD width = "33%" valign="top">col3</TD></TR></TABLE>');
docprint.document.write('</center></body></html>');
docprint.document.close();
docprint.focus();
docprint.close();
}
This is the method I called on href of an anchor tag, but the not getting the work done:
<a href="javascript:Clickheretoprint()">
I am a beginner to JavaScript/jQuery coding.
You are on the right track. Assuming result_tbl is the ID of element you like to print as-is, first wrap the element with a <div> tag e.g.:
<div>
<table id="result_tbl">
.....
</table>
</div>
Then have such code:
var docprint=window.open("about:blank", "_blank", disp_setting);
var oTable = document.getElementById("result_tbl");
docprint.document.open();
docprint.document.write('<html><head><title>Ashley Mattresses</title>');
docprint.document.write('</head><body><center>');
docprint.document.write(oTable.parentNode.innerHTML);
docprint.document.write('</center></body></html>');
docprint.document.close();
docprint.print();
docprint.close();
Live test case.
Working fine for me under Chrome 18:
Checkout: http://jsfiddle.net/5Wfqr/3/
For me only source of trouble is:
var content_vlue = document.getElementById("result_tbl").innerHTML;
Do you have element with ID : "result_tbl" within your HTML?
This code works fine for me
<body>
<script type="text/javascript">
function printPage() {
var docprint = window.open("about:blank", "_blank"`enter code here`, "channelmode");
var oTable = document.getElementById("tbl");
docprint.document.open();
docprint.document.write('<html><head><title>your title</title>');
docprint.document.write('</head><body><center>');
docprint.document.write(oTable.innerHTML);
docprint.document.write('</center></body></html>');
docprint.document.close();
docprint.print();
docprint.close();
}
</script>
<table id="tbl">
<tr>
<td> content1 </td>
<td> content2 </td>
</tr>
</table>
<input type="button" value ="print" id="printButton" onclick="javascript:printPage()"/>
</body>
Related
I have the following JavaScript code to print a content
<script type="text/javascript">
function Print(print)
{
Popup($(print).html());
}
function Popup(data)
{
var mywindow = window.open("", "print");
mywindow.document.write("<html><head><title>Report</title>");
mywindow.document.write("</head><body>");
mywindow.document.write("<div align='center'>");
mywindow.document.write(data);
mywindow.document.write("</div>");
mywindow.document.write("</body></html>");
mywindow.print();
mywindow.close();
return true; }
</script>
And in my HTML I have the following code:
<html>
<body>
<p>Print</p>
<div id="print">
<h1>Report</h1>
<table>
<tr><th>Date</th><th>Remarks</th><th>Amount</th><th>Actions</th></tr>
<tr>
<td>10/11/2014</td>
<td>Hello</td>
<td>$14</td>
<td>Edit</td>
</tr>
</table>
</div>
</body>
</html>
I want to print only the first 3 columns. I do not want to print the 4th Column "Actions". When I try to print out the content by using the above code it prints all the 4 columns. Please help me with the following.
You can simply put the style to display none with id for that td's
Inside HTML:
....
<th id="act">Actions</th>
....
<td id="act">Edit</td>
Inside JS:
mywindow.document.write("<html><head><style>#act{display:none;}</style><title>Report</title>");
You can do that with jquery.
$(document).ready(function(){
$('.tabel').find(':nth-child(4)').hide();
});
JSFIDDLE HERE
I am new to the site (and coding) so please bear with me!
I am trying to add the following clickable slideshow to my site in a way that means I can change the images in one file (HTML or JS) and this be reflected on every page on which the slideshow is called:
<table border="0" cellpadding="0">
<td width="100%">
<img src="image1.bmp" width="200" height="200" name="photoslider"></td>
</tr>
<tr>
<td width="100%">
<form method="POST" name="rotater">
<div align="center">
<center><p>
<script language="JavaScript1.1">
var photos=new Array()
var text=new Array()
var which=0
var what=0
photos[0]="image1.bmp"
photos[1]="image2.bmp"
photos[2]="image3.bmp"
text[0]="Image One"
text[1]="Image Two"
text[2]="Image Three"
window.onload=new Function("document.rotater.description.value=text[0]")
function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which];
what--
document.rotater.description.value=text[what];
}
}
function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
what++
document.rotater.description.value=text[what];
}
else window.status='End of gallery'
}
function type()
{
alert("This textbox will only display default comments")
}
</script>
<p><input type="text" name="description" style="width:200px" size="50">
<p><input type="button" value="<<Back" name="B2"
onClick="backward()"> <input type="button" value="Next>>" name="B1"
onClick="forward()"><br />
</p>
</center>
</div>
</form>
</td>
</tr>
Currently I have used:
<script type="text/javascript" src="images.js"></script>
in the relevant html div. to call a simple .js file which displays the images in one long list, e.g.
document.write('<p>Image One</p>')
document.write('<img src="image1small.png" alt=Image One; style=border-radius:25px>')
document.write('<p>Image Two</p>')
document.write('<img src="image2small.png" alt=Image Two; style=border-radius:25px>')
I have tried every way I can think of, and searched many posts on here to try and get the slideshow to display within the same div. I have copied the html code into the .js file and appended it with document.write on every line, I have tried / on every line, I have tried 'gettingdocument.getElementById', but nothing works!
The slideshow code itself is fine; if I put this directly onto each page then it works correctly, I just can't seem to 'link' to this code and have it run so anything appears.
Please provide the simplest possible solution for this, without any need to install jquery plugins, or use anything other than basic HTML and JS.
There were alot of small bugs, i fixed them for you. you didn't put a semicolon after your javascript statements, tey aren't neccesary but it's cleaner code, you didn't exit alot of html tags
<table border="0" cellpadding="0">
<tr>
<td width="100%">
<img src="image1.bmp" width="200" height="200" name="photoslider">
</td>
</tr>
<tr>
<td width="100%">
<form method="POST" name="rotater">
<div align="center">
<center>
<p>
<p id="description" style="width:200px" size="50"></p>
<p><a onClick="backward()"><img src="imageback.png" alt="back" />Back Image</a>
<p><a onClick="forward()"><img src="forward.png" alt="forward" />Forward Image</a>
</p>
</center>
</div>
</form>
</td>
</tr>
Javascript:
(function() {
var photos=[];
var text= [];
var which=0;
var what=0;
photos[0]="image1.bmp";
photos[1]="image2.bmp";
photos[2]="image3.bmp";
text[0]="Image One";
text[1]="Image Two";
text[2]="Image Three";
document.getElementById('description').innerHTML = text[0]
backward = function(){
if (which>0){
which--;
window.status='';
what--;
console.log(which);
document.images.photoslider.src=photos[which];
document.getElementById('description').innerHTML = text[what];
}
}
forward = function(){
if (which < (photos.length-1)){
which++;
console.log(which);
document.images.photoslider.src=photos[which];
what++;
document.getElementById('description').innerHTML = text[what];
}
else {
document.getElementById('description').innerHTML = 'End of gallery';
}
}
function type()
{
alert("This textbox will only display default comments")
}
})();
And last but not least i've created the fiddle to show you it's working:
http://jsfiddle.net/45nobcmm/24/
You can create a javascript file that search for an element and change the innerHTML of the element to the slideshow you want to show.
For example this could be the script:
var slideshow = document.getElementById('slideshow');
slideshow.innerHTML = 'Your slideshow html';
and your main html page should have a slideshow div.
but you need to know that it's not the best solution, you should learn PHP or another back-end language and than you could use include('page.html'); for example
I want to insert images to the new cell just created. How can I do it? Can anyone guide me in doing it?
Here's my code to insertcells:
<!DOCTYPE html>
<html>
<head>
<script>
function displayResult()
{
var firstRow=document.getElementById("myTable").rows[0];
var x=firstRow.insertCell(-1);
x.innerHTML="New cell"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
</tr>
</table>
<br>
<button type="button" onclick="displayResult()">Insert cell</button>
</body>
</html>
All I want is to insert image in the cell created.
You can create the image element and append it to the new cell:
function displayResult()
{
var firstRow=document.getElementById("myTable").rows[0];
var x=firstRow.insertCell(-1);
x.innerHTML="New cell";
var img = document.createElement('img');
img.src = "link to image here";
x.appendChild(img);
}
Beware of building the raw HTML for the image, if you do it that way you'll need to make sure that you escape the src and any other attributes.
Simply set the inner HTML of the new cell to the HTML of an img element, with whatever src or attributes you wish.
function displayResult()
{
var firstRow=document.getElementById("myTable").rows[0];
var x=firstRow.insertCell(-1);
x.innerHTML="<img src='myImageURL' alt='hello'/>";
}
function displayResult()
{
document.getElementById("myTable").rows[0].innerHTML="your image";
}
may be this can help,dynamicism can be achieved later on,just try if it works for now?
I'm trying to pass the text value of one of my html paragraph element to another html paragraph element when the javascript function is called. When this function is called it will load the div element which has the enlarged image and a paragraph content, that is why I'm passing the value from one html paragraph element text value to another paragraph element text value. Here's my code below for your reference:
Javacript:
<script type="text/javascript">
function LoadDiv(url)
{
var img = new Image();
var bcgDiv = document.getElementById("divBackground");
var imgDiv = document.getElementById("divImage");
var imgFull = document.getElementById("imgFull");
img.onload = function() {
imgFull.src = img.src;
imgFull.style.display = "block";
imgLoader.style.display = "none";
};
img.src= url;
var width = document.body.clientWidth;
if (document.body.clientHeight > document.body.scrollHeight)
{
bcgDiv.style.height = document.body.clientHeight + "px";
}
else
{
bcgDiv.style.height = document.body.scrollHeight + "px" ;
}
imgDiv.style.left = (width-650)/2 + "px";
imgDiv.style.top = "20px";
bcgDiv.style.width="100%";
bcgDiv.style.display="block";
imgDiv.style.display="block";
var artcontent = document.getElementById("TextBox2").value;
document.getElementById("content").value = artcontent;
/* after I added these two lines of codes below which I thought these could pass the value but it just ruined my function and not loading anymore the div element I'm calling,it will now only flash the div element for 1 sec without event displaying the content of the artxt2 html paragraph.*/
var artcon = document.getElementById('artxt1').innerHTML;
document.getElementById('artxt2').innerHTML = artcon;
return false;
}
</script>
Asp.Net Source code:
<div id="divBackground" class="modal">
</div>
<div id="divImage">
<table style="height: 100%; width: 100%">
<tr>
<td valign="middle" align="center">
<img id="imgFull" alt="" src=""
style="display: none;
height: 500px;width: 590px" />
</td>
</tr>
<tr>
<td >
<p id ="artxt2" runat ="server" ></p>
<textarea name = "artcont" id = "content" cols ="0" rows ="0" readonly ="readonly" style ="width :590px; height :100px; color :Blue; font-family :Verdana; display :block;"></textarea>
</td>
</tr>
<tr>
<td align="center" valign="bottom">
<input id="btnClose" type="button" value="close"
onclick="HideDiv()"/>
</td>
</tr>
</table>
</div>
I need someone who can assist me and figure out what I'm missing here..Thanks in advance.
Change the name with id.
artxt1 must be an id of a control not name.
var artcon = document.getElementById('artxt1').innerHTML;
document.getElementById('content').innerHTML = artcon;
Try this -
var artcon = document.getElementById('<%=artxt1.ClientID%>').innerHTML;
document.getElementById('<%=artxt2.ClientID%>').innerHTML = artcon;
When you have runat=server on a control the ID is auto generated by .NET (unless you specifically tell it to use static IDs which I think was only introduced in ASP.NET 4.0)
So you need to use the ClientID property to get the generated ID for the control http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid.aspx
I am having a table like:
<table id="toc" class="toc" border="1" summary="Contents">
</table>
in many pages .. All these pages are rendered in a single page.
when I apply the Javascript to delete that using on load. Only one table is deleted and not the others.
I am trying to delete the tables in all the rendering pages using Javascript. How to do this?
Edit :
I myself found the solution
<script type='text/javascript'>
window.onLoad = load();
function load(){var tbl = document.getElementById('toc');
if(tbl) tbl.parentNode.removeChild(tbl);}
</script>
Here's a rough sample
<html>
<head>
<script type="text/javascript">
function removeTable(id)
{
var tbl = document.getElementById(id);
if(tbl) tbl.parentNode.removeChild(tbl);
}
</script>
</head>
<body>
<table id="toc" class="toc" border="1" summary="Contents">
<tr><td>This table is going</td></tr>
</table>
<input type="button" onclick="removeTable('toc');" value="Remove!" />
</body>
</html>
Really want to delete the table altogether?
var elem = documenet.getElementById('toc');
if (typeof elem != 'undefined')
{
elem.parentNode.removeChild(elem);
}
You could also hide the table rather than deleting it.
var elem = documenet.getElementById('toc');
elem.style.display = 'none';
If you need it later, you could simply do:
var elem = documenet.getElementById('toc');
elem.style.display = 'block';
<script type="text/javascript">
function deleteTable(){
document.getElementById('div_table').innerHTML="TABLE DELETED"
}
</script>
<div id="div_table">
<table id="toc" class="toc" border="1" summary="Contents">
</table>
</div>
<input type="button" onClick="deleteTable()">
var tbl = document.getElementById(id);
tbl.remove();