On one of my pages in my website(coded in php), i'm trying to add 2 (even more) print buttons each one printing a portion of the webpage. For example, on a page there is a table with some values and 2 graphs underneath it. I would like to add 2 print buttons, one button printing the table and the other one printing both the graphs. I've found this Example but could not understand clearly. Any help or examples would help me.
Thanks in advance.
This is html/javascript code that will launch the browser's Print dialog when clicked.
<button onClick="window.print()">Print this page</button>
If your table is inside a div with id='printTable' use:
Click to print table
EDIT: Here is the function "printContent()"
<script type="text/javascript">
<!--
function printContent(id){
str=document.getElementById(id).innerHTML
newwin=window.open('','printwin','left=100,top=100,width=400,height=400')
newwin.document.write('<HTML>\n<HEAD>\n')
newwin.document.write('<TITLE>Print Page</TITLE>\n')
newwin.document.write('<script>\n')
newwin.document.write('function chkstate(){\n')
newwin.document.write('if(document.readyState=="complete"){\n')
newwin.document.write('window.close()\n')
newwin.document.write('}\n')
newwin.document.write('else{\n')
newwin.document.write('setTimeout("chkstate()",2000)\n')
newwin.document.write('}\n')
newwin.document.write('}\n')
newwin.document.write('function print_win(){\n')
newwin.document.write('window.print();\n')
newwin.document.write('chkstate();\n')
newwin.document.write('}\n')
newwin.document.write('<\/script>\n')
newwin.document.write('</HEAD>\n')
newwin.document.write('<BODY onload="print_win()">\n')
newwin.document.write(str)
newwin.document.write('</BODY>\n')
newwin.document.write('</HTML>\n')
newwin.document.close()
}
//-->
</script>
A simple idea is to create some previous css printing rules ad hoc, e.g.
.printtable * { display : none; }
.printtable table { display : block; }
and
.printtableandgraph * { display : none; }
.printtableandgraph img { display : block; }
then the two buttons should add a .printtable and a .printtableandgraph class for the body element (or other element containing your table and graphs) just before window.print() statement
(if user click twice or more on the same print button check previously if the element has already set that class name)
Print Button
<button onClick="window.print()">Print this page</button>`
Use This code for print any webpage there is only one draw back its print all the button and menu bar.
To print a portion of the page, you can use a print.css and the print button for a quick and simple approach.
Set up print.css file and include:
body {visibility:hidden;}
.print {visibility:visible;}
Add the .print class to the appropriate portions of your page.
Add button:
<button onClick="window.print()">Print this page ยป</button>
Print results are neat and clean.
Related
I tried to make a function which would accept a number when called, and hide any loop generated elements on page with the ID of #sub + the number provided.
<script>
function toggleryhma($id) {
$("#sub"+$id).toggle();
$("#ryhmanum"+$id).toggle();
}
</script>
The element I'd need to click to call the function is...
<span class=ryhmaspan onclick="$(toggleryhma('<?php echo $ryhmanum;?>');">
For some reason this doesn't seem to do anything. I basically have lots of images with the ID's "#sub1", "#sub2", "#sub3", etc...
Same with the #ryhmanum. I want to use those ID's to only toggle the items under the span I'm clicking.
The problem is in your onclick. Your onclick should be like below.
onclick="toggleryhma('<?php echo $ryhmanum;?>')"
I have a list of data which is collected from the database.
I have added a Div with a "Read More" label and another div which holds the content and is hidden.
When the user clicks on the "read More" text the Content div with show up.
Here is my current code below:
<script>
$(document).ready(function(){
$(".readmore").click(function() {
$('.readmecontent').show();
});
});
</script>
//THE HTML .. Note: Content will be added via php but hardcoded now ...
echo '<div class="readmore">Read more...</div>';
echo '<div class="readmecontent" style="display:none;">Read Me Content Here</div>';
All the above works but the problem is that the "readmore" class currently opens all "readmecontent" classes.
I need it to just show the "readmecontent" DIV that applies to the "readmore" class that has been clicked.
I cannot use ID's because the listing is created dynamially.
How can I do this?
Use an instance of this to find the next element:
$(this).next('.readmecontent').show();
this solution doesn't need you to hold an instance
$(".readmore").click(function() {
$('.readmecontent:not(.readmecontent.visible)').eq(0).show().addClass('visible');
});
I have a PHP script that queries a database and returns the rows as li elements to a div in a jQuery Dialog. It does this by building an array in the PHP while loop that processes the query row responses. So far, so good. It displays a set of rows inside the Dialog in a div with an id=dialogResponse . It is the first two parts (2 rows of code) of the array instruction below. BTW, it is just li elements - there is no ul.
Now, I want to put a jQuery Button in each li response to give the user an action choice to inactivate/pause that posting. I'm pretty new at this, and I can't get a button to appear or anything to work. I get an Internal Server Error message so I can't tell if it is a selector problem, php syntax, or something else.
How do I get a jQuery button at the end of each li that will be the trigger point for a function that takes action on that row in the database? The event.preventDefault is a placeholder for a future function that will do a MySQL UPDATE on the selected streetAddress and city. Here's the code.
$messages[] = "<li>
$storedStreetAddress, $storedCity
"<script type="text/javascript"> $(function() { $( "#dialogResponse li")
.button( label: Pause posting).click(function( event ) event.preventDefault();});});
</script>"
</li>";
Please be specific and code helps a lot. I don't follow general instructions well in this area.
Why does the <script> have to be printed in with the PHP? Why not have it included with in a JS file? For the button, why not create a standard HTML [or whatever your preference] in each <li> and have jQuery target them for the actions? - You will need an <a>, <input>, <button>, etc. for the .button()
I have searched before posting but none of the posts are that relevant (saying that i am new to Jquery).
My problem is when i click the "add friend" button it wont fire upon a single click but it needs a double click.
These are the relevant sections of code:
Setting the div:
$fField = <div style="display:inline; border:#CCC 1px solid; padding:5px; background-color:#E4E4E4; color#999; font-size:11px;">
Add Friend
</div>;
Javascript:
function friendArea(x){
//alert(x);
if($('#'+x).is(":hidden")){
$('#'+x).slideDown(200);
} else {
$('#'+x).hide();
}
$('.friendSlide').hide();
}
the message to display (the one which needs 2 clicks to be displayed)
<div class="friendSlide" id="addFriend">Are you sure?</div>
Any help would be much appreciated! Oh and I'm using the latest version of jQuery.
Hmm, well, it looks like you are showing and hiding your div at the same time:
HTML:
<div class="friendSlide" id="addFriend">Are you sure?</div>
JS:
function friendArea(x){
//alert(x);
if($('#'+x).is(":hidden")){
$('#'+x).slideDown(200);
} else {
$('#'+x).hide();
}
$('.friendSlide').hide();
}
You call friendArea('addFriend'), which is supposed to slideDown your div, but at the end of the function you hide .friendSlide, of which your div is also a class. You basically hide it every time. This can't be what you want.
Comment out that line and it works: http://jsfiddle.net/Ggdhp/
Of course, you might have had a different reason for that, but I think you are getting some divs and classes mixed up.
Note:
I would also suggest that you don't use inline css or javascript. It always makes debug much more difficult, and you miss typos as you end up having to put everything on a single line and escape quotes. For instance, color#999; in your div style is missing a colon.
I'm not entirely sure that's the relevant part of the code, but if you want to learn how to bind functions to click/doubleclick/etc:
http://api.jquery.com/category/events/mouse-events/
I assume you have a button/link somewhere that has something to the extent of:
Add Friend
What you would want to do instead is give that button a class indicating that it's an add friend button, and use jQuery to add the double click function to it.
Add Friend
$('.addFriend-button').click( function(e) {
friendArea( $(this).data('friendName') );
} );
This will cause your function to fire when the button is double clicked, not single clicked. It also allows you to only have to write 1 function, and you can pass the relevant data in using the data-* attributes on the link element.
if you want to run any code on double click over an element use jquery like this,
$('#target').dblclick(function() {
alert('Handler for .click() called.');
});
and one more thing use jquery toggle to display and hide elements like below, On your function
if you are using class name of selector use the selector like below (use .) in case of id use # with id name like above code
$('.target').toggle();
if double clicks works for you to use below code, it converts the single click to double click by jquery. Hopes this will help you
$('#target').click(function() {
$('#target').dblclick();
});
I've been asked to provide some tricky printing functionality to a dynamicly generated page. The page is to display each record along with a checkbox. Then one print button at the bottom of the page. The idea is to let the user check the box next to each record they want to print, then when they click the print button at the bottom of the page, only those records that were selected will be printed.
I'm assuming some combination of CSS and Javascript will be required, but I really don't know. Any ideas? Thanks in advance!
PHP solution
If you have something like
<form method="post" action="print.php">
<p>Select the records to be printed</p>
<p>
<input type="checkbox" name="records[]" value="1"><div class="record">Record 1</div><br>
<input type="checkbox" name="records[]" value="2"><div class="record">Record 2</div><br>
<input type="checkbox" name="records[]" value="3"><div class="record">Record 3</div>
</p>
</form>
You will automatically get an array $_POST['records'] with all the values of the selected records in it in your php script print.php. (Note that this only works if the name of all the checkboxes is the same and ends with [])
The php script could then do something like:
<?php
foreach ($record in $_POST['records']) {
// fetch the record with id $record from the database (or similar)
// print this record to the page
}
echo "<script>window.print();</script>"; // or put that into the onload attribute of the body tag
?>
JavaScript and CSS
An other valid possibility would be to do the whole thing via javascript. Therefore you would have to check every checkbox if it's checked when one clicks the print button and then removes or hides all the records that were not checked.
A helpful thingy is also the css property media with which you can define extra styles that only apply to certain devices. This code sould be able to do everything without any javascript except an attribute onclick="window.print()" in your print button:
#media print {
input{
display: none; /* hides all input elements for the printer */
}
.record {
display: none; /* hide all records by default */
}
input[checked] + .record, input:checked + div.record {
/* display all that are immediately preceeded by a input with checked attribute */
display: block;
}
}
Note that I tested it only in Safari (where the pseudoclass :checked leads to the wanted result and not the attribute selector) and only will work for newer versions of browsers with css3 and selector support.
Create a print.php to which you post the form (with selected checkboxes) - the page will display only the selected content exactly as you want it to look in the print and then call javascript window.print() onload.