is there a way to print css styles, that are inline?
I use this code to print part of the code:
w=window.open();
w.document.write($('#printable').html());
w.print();
w.close();
I could use external file and make it media=print, but part of the html are chars, that are generated by php and I could make it by making class for every posible outcome, but that would be pain.
Any ideas? Thanks.
See the Demo: http://jsfiddle.net/rathoreahsan/x69UY/
What do you think if you do like this:
<div id="printableDiv">
<style type="text/css">
#media print {
#printable {
color: red;
// Any Other style you want to add
}
}
</style>
<div id="printable">
This Text will print in red color.
</div>
</div>
Javascript/jQuery code:
w=window.open();
w.document.write($('#printableDiv').html());
w.print();
w.close();
In this scenario while a popup opens and gets the HTML of printableDiv, the styles for printer will be included in that popup so the printer will read styles from popup and will print in that manner.
I had the same problem, because i use instyle style to dynamically change background-color, and then the color was not in the print.
styleSheets[3] is my print.css file.
This worked for me:
I uncluded it in the smarty foreach i use to give some elements a background color.
<script type='text/javascript'>
document.styleSheets[3].insertRule(" #caldiv_<?smarty $item.calendar_id ?> { border-color:<?smarty $item.color ?> }", 1);
</script>
Related
Can I apply an external stylesheet to a specific div/element with shadow-dom or via any other means? I've heard about shadow-dom and I believe it lets you constrain your styles, but that's about all I know.
Specifically, I want half the page to use bootstrap, and the other half to use MUI or something else. This is just to show how my library works nicely with different themes.
I don't want to modify the CSS in anyway to constrain it to a specific element, nor do I want to use iframes.
Yes, you can apply an external stysheet in a Shadow DOM using the #import url CSS rule.
div.attachShadow( { mode: 'open' } )
.innerHTML = `
<style>
#import url( './external-style.css' )
</style>
<!-- other elements -->`
NB: The #import rule must placed at the top of the <style> element.
You can then manipulate the Shadow DOM like a normal DOM:
div.shadowRoot.appendChild( firstSection.cloneNode( true ) )
If your content is already existing in the normal DOM, you can move it with appendChild(), duplicate it with cloneNode() as in the above example), or reveal it with the help of <slot> element:
div1.attachShadow( { mode: 'open' } )
div1.shadowRoot.innerHTML = `
<style>
:host { display: inline ; background: #cfc ; }
::slotted( span ) { color: red ; }
</style>
<slot></slot>`
<div id=div1>
<span>Hello</span> world
</div>
In the last case you'll need to use the ::slotted pseudo-element to change the style of the original DOM, so maybe you'll have to modify already existing stylesheet. The best solution depends on your use case.
I cannot edit the html code, is the question below possible using only "CSS" code?
How do you add a text just like a placeholder or something to an inputbox?
Here's the input text box code:
<input id="isn_email_address" type="text" name="user" size="40" maxlenth="90">
You can't set placeholders using CSS for all browsers. The only browser that supports it at the moment is webkit.
Using jQuery you can achieve this : Working DEMO
Note : you will need latest jquery library you can download from here jQuery Library
Try this code :-
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type = "text/javascript">
$(document).ready(function()
{
$('#isn_email_address').attr("placeholder", "Type your text here");
});
</script>
</head>
If you don't want to use placeholder,obviosly there is other way.I don't know wheather it's possible with css alone.But using javascript and css you can definitely do that.
You could use some pseudo elements, assuming you're not supporting IE7 and below.
#isn_email_address {
position: relative;
}
#isn_email_address:after { /*could use :before if you wanted too*/
content: "Type your text here";
display: block;
}
#isn_email_address:focus #isn_email_address:before {
display: none;
}
You'll probably need to do some z-index adjustment to make sure that you're able to select the textfield. Additionally, some css *left: /my value here/* to make sure it's in the right spot.
I use the following code on my page:
<div id="itemstable" class="item_type1">
...other divs here...
</div>
And in my CSS file I have this code:
.item_type1 div {
background-image: url(images/type1.giff);
}
the problem is there are a lot of different item types so I will need to have a lot of lines in my CSS file. I was wondering how to apply the background-image: url(images/type1.giff); style to the nested divs without assigning it to each one. eg. I want to change the code for the "itemstable" div so that it applies a css rule to the nested divs.
Is this possible?
EDIT: I'm looking for something like this:
<div id="itemstable" style="SET BACKGROUND IMG FOR NESTED DIVS HERE">
...other divs here...
</div>
(If I'm understanding the question correctly:)
Think about using a different ID/class scheme. I don't know about the further specifics of your structure, but id="itemstable" class="item_type1" seems slightly redundant to me. Can itemstable be anything else than item_type1? Try to apply more generic class names and keep the specific cases for IDs.
Failing that, you can add another class that is responsible for adding the background image: class="item_type1 item_types".
EDIT
Since it seems sheer mass is the main problem (not applying the style as the title suggests) it's probably best to dynamically insert a style in the page header. Something along the lines of:
<head>
...
<style type="text/css" media="screen">
<?php echo "#$myelement"; ?> div { background: url(<?php echo $image; ?>) ...; }
</style>
</head>
Inline styles can only apply to the element directly, not one of its children. I.e.:
<div style="background: ...;">
The background only applies to this one div.
You can't use selectors in inline styles like:
<div style="div { background: ...; }">
I think including a little more of your HTML would make your question easier to understand.
You can certainly include multiple rules in a compound selector:
.item_type1 div.a, .item_type1 div.b, .item_type1 div.c {
background-image: url(xyz.gif);
}
But since you are pulling images from the database dynamically, you will need to either include them in your dynamic code-- in the divs themselves, or dynamically create CSS as suggested above:
<style>
<% for $i in $images { echo "div.image$i div { background-image: url(/path/to/$i) }" %>
</style>
I have a link on my webpage to print the webpage. However, the link is also visible in the printout itself.
Is there javascript or HTML code which would hide the link button when I click the print link?
Example:
"Good Evening"
Print (click Here To Print)
I want to hide this "Print" label when it prints the text "Good Evening". The "Print" label should not show on the printout itself.
In your stylesheet add:
#media print
{
.no-print, .no-print *
{
display: none !important;
}
}
Then add class='no-print' (or add the no-print class to an existing class statement) in your HTML that you don't want to appear in the printed version, such as your button.
Bootstrap 3 has its own class for this called:
hidden-print
It is defined like this:
#media print {
.hidden-print {
display: none !important;
}
}
You do not have to define it on your own.
In Bootstrap 4 and Bootstrap5 this has changed to:
.d-print-none
The best practice is to use a style sheet specifically for printing, and set its media attribute to print.
In it, show/hide the elements that you want to be printed on paper.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Here is a simple solution
put this CSS
#media print{
.noprint{
display:none;
}
}
and here is the HTML
<div class="noprint">
element that need to be hidden when printing
</div>
CSS FILE
#media print
{
#pager,
form,
.no-print
{
display: none !important;
height: 0;
}
.no-print, .no-print *{
display: none !important;
height: 0;
}
}
HTML HEADER
<link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >
ELEMENT
<div class="no-print"></div>
You could place the link within a div, then use JavaScript on the anchor tag to hide the div when clicked. Example (not tested, may need to be tweaked but you get the idea):
<div id="printOption">
<a href="javascript:void();"
onclick="document.getElementById('printOption').style.visibility = 'hidden';
document.print();
return true;">
Print
</a>
</div>
The downside is that once clicked, the button disappears and they lose that option on the page (there's always Ctrl+P though).
The better solution would be to create a print stylesheet and within that stylesheet specify the hidden status of the printOption ID (or whatever you call it). You can do this in the head section of the HTML and specify a second stylesheet with a media attribute.
#media print {
.no-print {
visibility: hidden;
}
}
<div class="no-print">
Nope
</div>
<div>
Yup
</div>
The best thing to do is to create a "print-only" version of the page.
Oh, wait... this isn't 1999 anymore. Use a print CSS with "display: none".
The accepted answer by diodus is not working for some if not all of us.
I could not still hide my Print this button from going out on to paper.
The little adjustment by Clint Pachl of calling css file by adding on
media="screen, print"
and not just
media="screen"
is solving this problem. So for clarity and because it is not easy to see Clint Pachl hidden additional help in comments.
The user should include the ",print" in css file with the desired formating.
<link rel="stylesheet" href="my_cssfile.css" media="screen, print"type="text/css">
and not the default media = "screen" only.
<link rel="stylesheet" href="my_cssfile.css" media="screen" type="text/css">
That i think solves this problem for everyone.
If you have Javascript that interferes with the style property of individual elements, thus overriding !important, I suggest handling the events onbeforeprint and onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint
As Elias Hasle said, JavaScript can override !important. So, I extended his answer with a theoretical implementation.
This code identifies all elements with the class no-print, hides them with CSS before printing, and restores the original style after printing:
var noPrintElements = [];
window.addEventListener("beforeprint", function(event) {
var hideMe = document.getElementsByClassName("no-print");
noPrintElements = [];
Array.prototype.forEach.call(hideMe, function(item, index) {
noPrintElements.push({"element": item, "display": item.style.display });
item.style.display = 'none'; // hide the element
});
});
window.addEventListener("afterprint", function(event) {
Array.prototype.forEach.call(noPrintElements, function(item, index) {
item.element.style.display = item.display; // restore the element
});
noPrintElements = []; // just to be on the safe side
});
I'm trying to dynamically hide certain DIV's when a print (or print preview) occurs from the browser.
I can easily differentiate statically by having two style sheets, one for normal and one for print media:
But I need to go one step further and hide some elements dynamically when the print style sheet becomes active during a print based upon certain criteria
One way to easily solve it would be to handle a DOM event for handling print / printview, then I could just use jQuery to change the display:none on the classes that need to be hidden, but I can't find a DOM print event!!
Anyone know what the solution is?
Not all browsers allow you to capture the print event. I've seen this tackled by adding a 'print this page' link and then using that click event to accomplish what you need.
I don't think you need a print event. All you need to do is adjust your #media print styles based on your Javascript(?) criteria. When the user attempts to print the page, the #media print style will apply and your styles will be in effect:
<html>
<head>
<style id="styles" type="text/css">
#media print { .noprint { display:none; } }
</style>
<script type="text/javascript">
var x = Math.random();
if (x > .5) {
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '#media print { .maybe_noprint { display:none; } }';
document.getElementsByTagName('head')[0].appendChild(style);
}
</script>
</head>
<body>
<div class="noprint">This will never print.</div>
<span class="maybe_noprint">This may print depending on the value of x.</span>
</body>
</html>
If you are using server-side criteria to determine what prints, then just have server-side code spit out #media print to decorate the classes as necessary. Also, you may want to consider modifying an existing class that's already inside #media print, or building up the new CSS using something other than innerHTML, which I'll admit smells awful to me, but seems to work in Opera 9.6, Safari for Windows 3.1.2, IE 6 and Firefox 2.0.0.17 (I didn't test any other browsers).
Just tag those DIVs with a class that's hidden on the print stylesheet:
HTML
<div id='div19' class='noprint'>
...
</div>
print.css
.noprint {
display: none;
}
If you don't know in advance which elements you need to hide, you can use javascript to set the class for the given objects:
Javascript
document.getElementById('div19').className='noprint';
There's an onbeforeprint event in IE. It doesn't appear to be supported by other major browsers. (I tested Firefox 3.0.3 and Safari 3.1.2.)