I'd like to ask if there's an option to print(send to printer) in js some part of website with css styles ?
I've created code:
let print_area = window.open();
print_area.document.write(print_div.innerHTML);
print_area.document.close();
print_area.focus();
print_area.print();
print_area.close();
it prints exactly what I want, but I have no css styles there(but I've created media print)
my project on jsfiddle:
https://jsfiddle.net/z58pr1fL/
I advice to create a css file for printer and insert this:
(…)
<head>
(…)
<link rel="stylesheet" media="print" href="print.css" />
(…)
</head>
(…)
Inside this print.css subtract lots of colors as you can. Just for save inks in your users :)
Keep only border of your elements and texts with the shades of grey.
You could create a button for send to user's printer like this:
<button type="button" onClick="window.print()">
or the best way is
<button type="button" onClick="./path/of/javascript/files/printer.js">
printer.js
'use strict'
window.print();
If you not convince, try window.print() in your console.
Related
I'm trying to design a webpage somewhat similar in appearance to Microsoft's. (https://www.microsoft.com)
This includes building a image slideshow, which is why I looked up W3 Schools and found this: https://www.w3schools.com/howto/howto_js_slideshow.asp This is a great example and when writing all of my code in one html document it works, however, as I try to link to an external stylesheet it doesn't work anymore. I could alternatively founder on the js link but I don't think so, as switching to the next picture works. I searched stackoverflow for it already and people suggested adding ?v3 (or sth. like that) to the link, clearing my cache and so on. - so far nothing worked for my. I tried this in Chrome and Firefox.
Here's how I link to my CSS: (it's in the head)
<style>
<link rel="stylesheet" type="text/css" href="new theme.css">
</style>
Here's the js link: (at the end of the body)
<script type="text/javascript" src="js/new script.js?v=3"></script>
Any ideas why this could be? Maybe some other tutorials for this?
I'll include pictures of the working html which's got everything stuffed in it and one of the html with external js and CSS.
Thank you very much!
external - not working
internal - working like a charm
THANKS EVERYONE! - Simple spelling mistake! Sorry to bother you!
This is invalid :
<style>
<link rel="stylesheet" type="text/css" href="new theme.css">
</style>
Between <style> and </style>, there must be CSS code. However link is not CSS code, that's an HTML tag. The correct syntax is just :
<link rel="stylesheet" type="text/css" href="new theme.css">
Then, "new theme.css" has a space in its name, so it will likely be encoded to "new%20theme.css" and you'll get a 404. Don't use spaces within file names.
Finally, open your console to see any errors, especially to check if the CSS file is being fetched successfully.
Don't use any spaces in the names of the files, try using new_theme.css and new_script.js
Reference your CSS like this at the top of your HTML - inbetween the <head> tags.
<link rel="stylesheet" href="new_theme.css">
Also always try either Camel Case - "newTheme.css" or use an underscore "new_theme.css" when naming your files!
That should fix your problem! :)
You should not include the inside the style tag.
It should be inside the tag.
Ex.
<head>
<link rel="stylesheet" type="text/css" href="new%20theme.css">
<head>
Also when you have file names with spaces in between, you need to encode the name.
Example
href="new theme.css"
becomes
href="new%20theme.css"
<link rel="stylesheet" type="text/css" href="newtheme.css">
or
<style type="text/css">
css code here
</style>
open your console to see if it could find your css file
I have a html + css + javascript application.
I want to be able to enable theming.
All my css are replicated in two folders: /theme1/... and /theme2/...
So my html looks like:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="theme1/file1.css"/>
<link rel="stylesheet" href="theme1/file2.css"/>
....
....
</head>
<body>
.....
</body>
</html>
I want to be able to change using javascript the home folder of the css (theme1 to theme2).
Any ideas?
Here is what you will need to solve the problem:
Get the relevant tags. In this case, any link tag with rel="stylesheet" will probably do, but you can even go so far as to specify "starting with theme1" if you want. This can all be done with document.querySelectorAll("link[rel=stylesheet][href^=theme1]")
Loop through them. A simple for loop will do nicely.
getAttribute("href") gets the string you need.
replace() will allow you to replace the part of the string you want.
setAttribute("href",newattr) will put the attribute back into the tag.
<link id="foo" rel="stylesheet" href="theme1/file1.css"/>
When you want to change the theme:
document.getElementById('foo').href = 'theme1/file2.css';
I currently have a popup dialog with a timetable inside it and a button below. When pressed it should print the timetable inside that dialog.
What I've done so far is: <input type="submit" value="Print Timetable" class="ActionButton" onClick="window.print()"/> but it prints the entire page. I'm not sure how I can print just the table inside it.
I've also noticed that in print preview. there are no colours. It's black and white.
I'm using jQuery and PHP as well.
Thanks
Create a print stylesheet
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Create CSS rules to hide the content you do not what to be printed. Format the popup so it looks pretty.
http://www.bennadel.com/blog/1591-Ask-Ben-Print-Part-Of-A-Web-Page-With-jQuery.htm
Is there an easy way to use Bootstrap in an existing project?
Currently it adds styles for table,a etc. which messes up everything in the page.
I really love the modal window, some buttons, but I don't want to hunt bootstrap css all the time to switch items back to default styles.
Bootstrap 3 // Less 1.4.0 edit:
After Bootstrap 3 and Less 1.4.0 has come out, bootstrap has started using the :extend() pseudo selector. This means that certain things will fail in the original code I've posted (you'll get some .bscnt .bscnt form-horizontal code which means you have to nest two divs inside eachother, which is just dumb). The easy way to fix this is to remove the first two lines from bootstrap.less (#import variables.less and #import mixins.less) and instead import these files outside of the .bs-cnt scope:
#import "variables.less";
#import "mixins.less";
.bscnt {
#import "bootstrap.less";
}
You can also download bootstrap from here: Bootstrap source and then enter the "less" directory and add a file called "bootstrap-custom.less" where you'll enter the following content:
.bs-cnt {
#import "bootstrap.less";
}
"bs-cnt" for BootStrap-CoNTainer. You can make it longer if you want, but remember that it'll be pasted in a lot of places in the compiled CSS, so it's to save space in the end file.
After you've done this, simple compile the bootstrap-custom.less file with your favourite less compiler (SimpLESS is pretty good if you're on Windows), and then you'll have a compiled bootstrap file that only works when you place a container element with the class of "bs-cnt".
<div class="bs-cnt">
<button class="btn btn-success btn-large">This button will be affected by bootstrap</button>
</div>
<button class="btn btn-danger">This however; Won't</button>
You can use the "customize" feature on the bootstrap website to get only those features you want: Twitter Bootstrap Download Page. Most of bootstrap's rules are explicit. You'll probably only want to leave out the reset rules which are implicit by default.
I think the link in answered section is not already updated. Here is where you can customize your Bootstrap directly on GetBootstrap site:
Customize and download - GetBootstrap
Using IFrame
Just make one html document with bootstrap in it, have your bootstrap element that you want on that page, and use Iframe to get it on the other one..
element_name.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Element</title>
</head>
<body>
<!--Code for the actual element-->
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
iframe {
border: none;
}
</style>
</head>
<body>
<iframe src="element.html"></iframe>
<!--Other stuff on the page-->
</body>
</html>
The element in the element.html will be integrated in the index.html like it's own element, without even importing a single bootstrap stylesheet in the index.html and there is no need to make custom bootstraps, which can be tedious.
You can tag the styles you want to not get overwritten by a special tag. Just put the !important tag. It can take a long time to paste it after every line of code but it'll be worth the time. Or you can use the bootstrap.css file instead of the bootstrap link and delete all the styles that are overriding your styles. You can download the bootstrap css file here
Imagine a webpage which enables users to show an hidden element, using javascript to modify css a CSS style at runtime.
After his decision (which includes the modification of the stlyesheet) the user uses the printing functionality of his browser.
It seems that Internet Explorer does not respect the changes made in the stylesheet before during printing if the original css definition is located in an external file.
In other Browsers everything works as expected.
Please have a look at the example below, which changes a style class from its initial definition display:none to display:inline at runtime hence the element will be displayed.
But when printing this page, the element remains hidden in internet explorer (tested with IE 6,7,8).
Do you have a solution or workaround?
Minimalistic example (html file):
<html><head>
<LINK rel="stylesheet" type="text/css" href="minimal.css">
</head><body onload="displayCol();">
<script>
function displayCol()
{
var myrules;
if( document.styleSheets[0].cssRules ) {
myrules = document.styleSheets[0].cssRules;
} else {
if ( document.styleSheets[0].rules ) {
myrules = document.styleSheets[0].rules;
}
}
myrules[0].style.display = "inline";
}
</script>
<div class="col0" id="test">This is hidden by default.</div></body></html>
minimal.css
.col0 {
display:none;
}
UPDATE:
Please note that the decision if the object should be displayed or not is made by the user - it's not known at runtime!
Have you considered using the media=print way of getting the browser to use a stylesheet specifically for printing?
<link rel="stylesheet" href="print.css" media="print" />
If the css changes you are making are always the same, i.e. you can technically store them on a separate css file, then you can use this.
For non-static CSS, in IE (not sure about other browsers/later versions of IE), you could consider using the onbeforeprint event.
See here: http://www.javascriptkit.com/javatutors/ie5print.shtml
Instead of using javascript to change the stylesheet rules, use scripting to apply and remove classes to the elements that need to be displayed. Remember that an element can have more than one class applied to it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Demo</title>
<style type="text/css">
.col0 {display:none;}
div.showCol {display: inline;}
</style>
<script type="text/javascript">
function displayCol() {
document.getElementById("test").className += " showCol";
}
</script>
</head>
<body onload="displayCol();">
<div class="col0" id="test">This is hidden by default.</div>
</body>
</html>
This answer to another question does a great job laying out different ways to do this with scripting: Change an element's class with JavaScript
You could try using a specific style sheet for printing, for example:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
EDIT - too slow :)
Javascript is not being evaluated when printing. It will look just like when Javascript is turned off. You need an extra media=print stylesheet and make any necessary changes there.
If that is not an option, you could create a link that will generate a static page that will look like it's supposed to for that particular user.
Based off your example scenario - in your style sheet add:
.col0 {
display: none;
}
body.showColumn .col0 {
display: inline;
}
Then simply toggle the .showColumn class on your body, and the column's visibility will be toggled accordingly.