I want to print content in a div using Javascript and CSS. My main div is with id 'preview'. Content in a div taken from database using PHP and MySQL. In my print page don't get style of the div 'preview'. I want to open print screen in new window. Any body give any suggestion for these issue?
My page and print are
My code is given below.
<?php
error_reporting(0);
$host='localhost'; // Host Name.
$db_user= 'root'; //User Name
$db_password= '';
$db= 'excel'; // Dat
$conn=#mysql_connect($host,$db_user,$db_password) or die (mysql_error());
mysql_select_db($db) or die (mysql_error());
$sql = "select * from first order by id";
$rsd = #mysql_query($sql);
?>
<script type="text/javascript">
function printDiv(divID)
{
var divElements = document.getElementById(divID).innerHTML;
var oldPage = document.body.innerHTML;
document.body.innerHTML =
"<html><head><title></title></head><body>" +
divElements + "</body>";
window.print();
document.body.innerHTML = oldPage;
}
</script>
<style type="text/css" media="print">
#media print{ #preview{ height:100%;overflow:visible;} }
</style>
<style>
#my-list{
padding: 10px;
padding-left:15px;
width:auto;
margin:auto;
}
#my-list > li {
display: inline-block;
zoom:1;
*display:inline;
}
#my-list > li > a{
color: #666666;
text-decoration: none;
padding: 3px 8px;
}
</style>
<input type="button" value="Print" onClick="javascript:printDiv('preview')" />
<div id="preview" style="width:1000px; margin:auto;">
<ul id="my-list" >
<?php
$si=1;
while($fet=mysql_fetch_array($rsd))
{
?>
<li>
<div class="droppable2" style="border-color:#3300FF; border:solid #999999;
height:180px;width:180px;position:relative; " >
<div style="float:left;position:absolute; bottom:30px;" class="left">
<img src="img.png" >
</div>
<div style="float:right;">
<p style="color: #003399; font-size: 10px;
padding-right:5px; font-weight:800; ">www.selafone.net</p>
<table style="font-size:10px;" >
<tr> <td >USERNAME: </td> <td> <?php echo $fet['name']; ?> </td></tr>
<tr> <td>PASSWORD:</td> <td> <?php echo $fet['email']; ?></td></tr></table>
</div>
<div style="position:absolute;background-color:#FF0000;
padding-bottom:0px; bottom: 0; height:36px; ">
<div style="color:#FFFFFF; padding-left:30px; vertical-align:middle;
font-weight:100;padding-top:10px; font-size: 8px;">
<strong> International prepaid Calling Card</strong></div></div>
</div>
</li>
<?php
$si=$si+1;
}
?>
</ul>
</div>
Source: Background color not showing in print preview
this is copy/paste reply of #purgatory101 from the top url
"
The Chrome css property "-webkit-print-color-adjust: exact;" works appropriately.
However, making sure you have the correct css for printing can often be tricky. Several things can be done to avoid the difficulties you are having. First, separate all your print css from your screen css. This is done via the #media print and #media screen.
Often times just setting up some extra #media print css is not enough because you still have all your other css included when printing as well. In these cases you just need to be aware of css specificity as the print rules don't automatically win against non-print css rules.
In your case, the -webkit-print-color-adjust: exact is working. However, your background-color and color definitions are being beaten out by other css with higher specificity.
While I DO NOT endorse using !important in nearly any circumstance, the following definitions work properly and expose the problem:
#media print {
.your_id {
color: white !important;
background-color: #1a4567 !important;
-webkit-print-color-adjust: exact;
}
}
"
If you want to open new window with printing page you need to create this window. Something like this:
function printDiv(divID)
{
var divElements = document.getElementById(divID).innerHTML; // your div
var newWindow=window.open('','','width=600,height=600'); // new window
newWindow.document.write(divElements); // div → window
newWindow.document.close();
newWindow.focus();
newWindow.print(); // printing
newWindow.close();
}
You can put all your CSS rules like this:
#media screen {
// css rules for screen
}
#media print {
// css rules for print
}
Related
This is an shopping-cart icon with a "cart" paragraph. When browser is resized, I want to hide or remove the "cart" paragraph and only show the shopping-cart icon. I've tried a lot of different ways but still cannot do it. I've came out three ways:
1. Use the css selector. And use the media query to hide the p element.
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
2.Use JS to remove the p element when resize the browser.
3.Also use JS to add a new icon element to take place of the origin ones.
But I don't know how exactly they can work, help me please, Thanks a lot~
Here's what I'm working on :)
<p style="black:white;font-size:14px;font-family:Roboto; onclick="myFunction()"><i class
="fa fa-shopping-cart" style="color:black;"></i> Cart</p>
your p tag containe two elements :
the text Cart
the i tag used by FontAwsome to create the pseudo elements that containe the icon
so to hide the text and keep the icon you can use simple css
see this example
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
p {
font-size: 0 !important;/*hide the text using font-size*/
}
.fa.fa-shopping-cart {
font-size: 15px; /*show the icon using font-size*/
}
}
/* This style is used for the example */
p {
font-size: 0 !important;/*hide the text using font-size*/
}
.fa.fa-shopping-cart {
font-size: 15px; /*show the icon using font-size*/
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<p style="black:white;font-size:14px;font-family:Roboto; onclick=" myFunction() "><i class
="fa fa-shopping-cart " style="color:black; "></i> Cart</p>
Write a media query and give someClass to your p or by your own way to access that
<p> tag.
#media only screen and (max-width: 600px) {
p.someClass {
display:none;
}
}
Updated
Copy below code( <i> tag outside <p> tag)
<p class="someClass" style="black:white;font-size:14px;font-family:Roboto; onclick="myFunction()"></p><i class
="fa fa-shopping-cart" style="color:black;"></i> Cart
there are two ways to do your task using js on resize browser and second is by css. according to me css is perfect way for this things.i am giving both solution to you.
<!DOCTYPE html>
<html>
<head>
#media (max-width:991px){.cart span{display:none}}
</head>
<body>
<p class="cart"><i class="fa fa-cart"></i><span>Cart</span><p>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(window).resize(function(){
var winW = $(window).width();
if(winW <= 991){
$('.cart span').hide();
}else
{
$('.cart span').show();
}
});
</script>
</body>
</html>
Wrap Cart text inside a span tag and add class hidden-sm and CSS for that class as follow.
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
.hidden-sm{
display:none;
}
}
<!--Demo Purpose-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<p style="black:white;font-size:14px;font-family:Roboto; onclick="myFunction()"><i class
="fa fa-shopping-cart" style="color:black;"></i> <span class="hidden-sm">Cart</span></p>
I am trying to make code that lets me add checkmarks to clicked images from my database. I am able to get the images to display, however I am unable to select the image/get the check to appear.
index.php
<?php
$result = mysql_query("select * from db");
$count = 0;
while ($row = mysql_fetch_array($result)) {
$count++;
echo '<img src="data:image/jpeg;base64,' . base64_encode($row['img']) . '" width="290" height="290" class = box>';
}
?>
click.js
$(document.ready(function(){
$('.box').live("click", function() {
if($(this).find('.check_image').length == 0){
$(this).append("<div class='check_image'><img src='check.png' /></div>");
}else{
$(this).find('.check_image').remove();
}
});
Ok so I would suggest getting CSS to do display the tick. It will mean wrapping your echoed img tab in a div (you can't use the pseudo selector :after directly on an img tag alas. I have used a font library (font-awesome) this is a great way of getting icons like ticks and trashcans etc into your pages. They scale and can be coloured.
as has been mentioned in other posts you are using some depreciated calls in both your PHP and jQuery. Have a play with this:
$('.clickable').on('click',function(e){
$(this).toggleClass('clicked');
})
.clickable.clicked:after{
font-family: FontAwesome;
content: "\f00c";
color:lime;
position:absolute;
top:2px;
right:2px;
font-size:40px;
text-shadow: -2px 3px 2px rgba(150, 150, 150, 0.8);
}
.clickable{
cursor:pointer;
position:relative;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clickable" style="width:320px;height:240px;">
<img src="http://www.richardhulbert.com/wp-content/uploads/2011/04/New-Forest-11.jpg" alt="nice van bros!" />
</div>
I am new to HTML and wish to do something that should be fairly simple. I have searched for similar questions and tried the solutions, but none are working.
I want to display two documents in a web page side-by-side when a link is clicked. The documents are stored remotely and are not static. One is a PDF, the other is an image, so I feel the PDF may need to be embedded so there is a scroll bar?
Both documents are displaying, but the second document (image) partially lays over the first in the centre of the screen.
The code I have is as follows:
<b>Click me to view files</b>
<div id= "light"><a href= "#" onclick= "lightbox_close();"><embed src= "?php
echo $address ?>" style= "float: left;"/><img src = "<?php echo $address2
?>" style= "float: left; " /></a></div>
<div id= "fade" onclick="lightbox_close();"></div>
<div>
**Note that the lightbox_open() and lighbox_close() functions are simply there to dim the screen when the screen when the documents are displayed.
Any help with this would be greatly appreciated.
Source code is exactly same just replaced iframe with embed.
<style> html,
body {
width: 100%;
height: 100%;
}
#doc1,
#doc2 {
display: inline-block;
width: 49%;
height: 100%
}
iframe {
width: 100%;
height: 100%;
border: none;
}
#doc1 {
background-color: red;
}
#doc2 {
background-color: blue;
}
<html>
<head>
</head>
<body translate="no">
<div id="doc1">
<iframe src="http://www.pdf995.com/samples/pdf.pdf"></iframe>
</div>
<div id="doc2">
<iframe src="http://www.pdf995.com/samples/pdf.pdf"></iframe>
</div>
</body>
</html>
You Wont Be able to see the iframe here as the snippet in stackoverflow is inside a iframe already and iframe cannot be loaded inside another iframe.
Parent page
<div class="row">
<div class="col-md-3">
link 1
link 2
link 3
.
.
.
</div>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
When link is clicked child page will be loaded in ng-view>
<table class='table table-bordered'>
<tr>
<td>
this is my screen view
when user clicks a link in parent page
specific contentd loaded here
</td>
</tr>
</table>
<button type="button" class="btn btn-success btn-md" ng-click="myprint()" >
<span class="glyphicon glyphicon-print"></span> Print
</button>
<div id ="printsection">
<table style="width:80mm;">
<tr style="text-align: center;">
<td>this is my print view contents
send these contents
to print to printer
</td>
</tr>
</table>
</div>
Above child page have 2 sections. screen view and printsection.
I want when user clicks on print button, printsection contents send to printer.
I have define these CSS rules for media print.
print.css
body {
background-color: white;
color: black;
font-family: Times,"Times New Roman",Garamond, serif;
}
body * {
visibility: hidden;
}
#printsection * {
visibility: visible;
}
#printsection {
position: absolute;
left: 0;
top: 0;
}
Problem is on click of print button, its hiding all the contents, even the print section.
What i am doing wrong?
Please note i am using POS printer 80mm width, dats i made width = 80mm in printsection.
You can use a simple function to replace the page and print as well.
<button onclick="printElement('my-section')">Print</button>
function printElement(id) {
var printHtml = document.getElementById(id).outerHTML;
var currentPage = document.body.innerHTML;
var elementPage = '<html><head><title></title></head><body>' + printHtml + '</body>';
//change the body
document.body.innerHTML = elementPage;
//print
window.print();
//go back to the original
document.body.innerHTML = currentPage;
}
Are you setting changing the visibility to visible for the "printsection" when you click the print button?
I would use the following css rules for visibility.
display:none, display:block.
You didn't make the printSection itself visible. Same with all it's parents. So you'll have to do something like this:
#printSection{
visibility: visible;
}
And all of it's parents since you hid all of them with body *{ ... }
I'm so sure that must use CSS media rules - #media print, on this case. Take a look:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<style>
#media all {
/* media-specific rules, suitable for all devices. */
}
#media screen {
/* acreen media-specific rules */
}
#media only print {
/* Intended for paged material and for documents
viewed on screen in print preview mode .*/
main {
display: none;
}
}
</style>
</head>
<body>
<main>
<button onclick="window.print()">Print</button>
<h1>hello</h1>
<p>Some paragraph</p>
</main>
<div id="print-section">
<h2>subtitle</h2>
<table border="1" width="50%">
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
So when user press CTRL + P or clicking on button invoking window.print(), everything outside of main tag will be printed. It is the best approach.
From the docs:
Syntax:
#media <media-query> {
/* media-specific rules */
}
I am working on a small little text box that will actively display different text without reloading the page. I use javascript to insert paragraphs of text based of which link the user clicks on. It works, however, i want to also insert style attributes to the dynamically inserted content. I want to do this because the background of the div is going to be black.
Here is my JS
function navClicked(x){
//alert("function activated");
//alert(x);
if (x == "aboutButton"){
//alert("About Button");
document.getElementById('information').innerHTML = "About Click";
}
else if(x == "faqButton"){
//alert("FAQ Button");
document.getElementById('information').innerHTML = "FAQ Click";
}
else if(x == "servicesButton"){
//alert("Services Button");
document.getElementById('information').innerHTML = "Services Click";
}
else{
//alert("Contact Button");
document.getElementById('information').innerHTML = "Contact Click";
}
}
Here is the html that goes with it
<body>
<div id="navigation">
<table cellpadding="5">
<tr>
<td>
<a onClick="navClicked('aboutButton');" style="cursor: pointer; cursor: hand;">ABOUT ATS</a>
</td>
</tr>
<tr>
<td>
<a onClick="navClicked('faqButton');" style="cursor: pointer; cursor: hand;">FAQ</a>
</td>
</tr>
<tr>
<td>
<a onClick="navClicked('servicesButton');" style="cursor: pointer; cursor: hand;">SERVICES</a>
</td>
</tr>
<tr>
<td>
<a onClick="navClicked('contactButton');" style="cursor: pointer; cursor: hand;">CONTACT</a>
</td>
</tr>
</table>
</div>
<div id="information">
<p>
content
</p>
</div>
</body>
and finally the CSS
<style>
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }
p
{
color:white;
}
#navigation
{
height:145px;
float:left;
width:155px;
background:grey;
}
#navigation table
{
margin-left:auto;
margin-right:auto;
color:white;
}
#information
{
height:145px;
float:left;
width:290px;
background:black;
}
</style>
The final products works. However, whenever new text gets inserted to the box, it becomes black. And then you cannot read the text.
Here is a jsFiddle
http://jsfiddle.net/9xahg/
although it doesnt work in fiddle and im not sure why. But regardless, it works as intended in all browsers with the exception that you cannot read the new text.
How can I fix this?
Just add "color: white;" in #information CSS statement:
#information
{
height:145px;
float:left;
width:290px;
background:black;
color: white;
}
And it's work ;)
try adding
color: white;
to #information instead
it is because i have styled p elements with that and you dont print out a p element when you write the new text...
either that or you could also put a p element in when writing text:
document.getElementById('information').innerHTML = "<p>About Click</p>";
JQuery was made exactly for this so you could refer to HTML elements the same as you would in CSS. I'd highly advise you to use jQuery if you want to style elements using JavaScript. It'll pay off in the long run in time savings. Once you have it there is a specific .css() function to help you.